mirror of
https://github.com/haiwen/seahub.git
synced 2025-07-17 00:32:37 +00:00
Update dtable UI (#4009)
* Dtable list page refactoring * fix code * fix bug * fix style * repair click range * style * optimization code * style * optimization code * optimization code * Variable name * No Tables replace No tables
This commit is contained in:
parent
fea3cbe5e0
commit
37cce9dd7c
@ -197,7 +197,7 @@ class ShareTableToUser extends React.Component {
|
|||||||
<DtableSharePermissionEditor
|
<DtableSharePermissionEditor
|
||||||
isTextMode={false}
|
isTextMode={false}
|
||||||
isEditIconShow={false}
|
isEditIconShow={false}
|
||||||
currentOption={this.state.permission}
|
currentPermission={this.state.permission}
|
||||||
onPermissionChanged={this.setPermission}
|
onPermissionChanged={this.setPermission}
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
|
@ -199,7 +199,7 @@ class MainSideNav extends React.Component {
|
|||||||
<h3 className="sf-heading">{gettext('Database')}</h3>
|
<h3 className="sf-heading">{gettext('Database')}</h3>
|
||||||
<ul className="nav nav-pills flex-column nav-container">
|
<ul className="nav nav-pills flex-column nav-container">
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className={`nav-link ellipsis ${this.getActiveClass('dtable')}`} to={siteRoot + 'dtable/'} title='DTable' onClick={() => this.tabItemClick('dtable')}>
|
<Link className={`nav-link ellipsis ${this.getActiveClass('dtable')}`} to={siteRoot + 'dtable/'} title='DTable' onClick={(e) => this.tabItemClick(e, 'dtable')}>
|
||||||
<span className="sf3-font-dtable-logo sf3-font" aria-hidden="true"></span>
|
<span className="sf3-font-dtable-logo sf3-font" aria-hidden="true"></span>
|
||||||
<span className="nav-text">DTable</span>
|
<span className="nav-text">DTable</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -53,6 +53,8 @@
|
|||||||
}
|
}
|
||||||
.workspace .table-heading {
|
.workspace .table-heading {
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
.workspace .table-heading-border {
|
||||||
border-bottom: 1px solid #e6e6e6;
|
border-bottom: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.workspace .sf3-font {
|
.workspace .sf3-font {
|
||||||
@ -62,3 +64,49 @@
|
|||||||
.workspace .add-table-range:hover {
|
.workspace .add-table-range:hover {
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
}
|
}
|
||||||
|
.workspace .table-item-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.workspace .table-item-container .table-item {
|
||||||
|
width: 48%;
|
||||||
|
height: 2.5625rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 4px
|
||||||
|
}
|
||||||
|
.workspace .table-item .table-icon {
|
||||||
|
width: 9%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.workspace .table-item .table-name {
|
||||||
|
width: 76%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.workspace .table-item .table-dropdown-menu {
|
||||||
|
width: 15%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.workspace .table-item .table-dropdown-menu .table-dropdown-menu-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.table-item-more-operation i {
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.table-item-more-operation a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.table-item-more-operation i:hover {
|
||||||
|
color: #666;
|
||||||
|
}
|
@ -1,291 +1,24 @@
|
|||||||
import React, { Component, Fragment } from 'react';
|
import React, { Component, Fragment } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import MediaQuery from 'react-responsive';
|
import MediaQuery from 'react-responsive';
|
||||||
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap';
|
import { Button } from 'reactstrap';
|
||||||
import moment from 'moment';
|
|
||||||
import { seafileAPI } from '../../utils/seafile-api';
|
import { seafileAPI } from '../../utils/seafile-api';
|
||||||
import { gettext, siteRoot, username } from '../../utils/constants';
|
import { gettext, username } from '../../utils/constants';
|
||||||
import CommonToolbar from '../../components/toolbar/common-toolbar';
|
import CommonToolbar from '../../components/toolbar/common-toolbar';
|
||||||
import Loading from '../../components/loading';
|
import Loading from '../../components/loading';
|
||||||
import CreateTableDialog from '../../components/dialog/create-table-dialog';
|
import CreateTableDialog from '../../components/dialog/create-table-dialog';
|
||||||
import DeleteTableDialog from '../../components/dialog/delete-table-dialog';
|
import ShareTableItem from './share-table-item';
|
||||||
import ShareTableDialog from '../../components/dialog/share-table-dialog';
|
import Workspace from './workspace';
|
||||||
import ShareTableItem from './list-share-table';
|
|
||||||
import Rename from '../../components/rename';
|
|
||||||
|
|
||||||
import '../../css/dtable-page.css';
|
import '../../css/dtable-page.css';
|
||||||
|
|
||||||
moment.locale(window.app.config.lang);
|
const propTypes = {
|
||||||
|
|
||||||
|
|
||||||
const tablePropTypes = {
|
|
||||||
table: PropTypes.object.isRequired,
|
|
||||||
workspaceID: PropTypes.number.isRequired,
|
|
||||||
renameTable: PropTypes.func.isRequired,
|
|
||||||
deleteTable: PropTypes.func.isRequired,
|
|
||||||
onUnfreezedItem: PropTypes.func.isRequired,
|
|
||||||
onFreezedItem: PropTypes.func.isRequired,
|
|
||||||
isItemFreezed: PropTypes.bool.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
class Table extends Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
isTableRenaming: false,
|
|
||||||
isTableDeleting: false,
|
|
||||||
isTableSharing: false,
|
|
||||||
dropdownOpen: false,
|
|
||||||
active: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
onRenameTableCancel = () => {
|
|
||||||
this.setState({isTableRenaming: !this.state.isTableRenaming});
|
|
||||||
this.props.onUnfreezedItem();
|
|
||||||
}
|
|
||||||
|
|
||||||
onRenameTableConfirm = (newTableName) => {
|
|
||||||
let oldTableName = this.props.table.name;
|
|
||||||
this.props.renameTable(oldTableName, newTableName);
|
|
||||||
this.onRenameTableCancel();
|
|
||||||
}
|
|
||||||
|
|
||||||
onDeleteTableCancel = () => {
|
|
||||||
this.setState({isTableDeleting: !this.state.isTableDeleting});
|
|
||||||
this.props.onUnfreezedItem();
|
|
||||||
}
|
|
||||||
|
|
||||||
onDeleteTableSubmit = () => {
|
|
||||||
let tableName = this.props.table.name;
|
|
||||||
this.props.deleteTable(tableName);
|
|
||||||
this.onDeleteTableCancel();
|
|
||||||
}
|
|
||||||
|
|
||||||
onShareTableCancel = () => {
|
|
||||||
this.setState({isTableSharing: !this.state.isTableSharing});
|
|
||||||
this.props.onUnfreezedItem();
|
|
||||||
}
|
|
||||||
|
|
||||||
dropdownToggle = () => {
|
|
||||||
if (this.state.dropdownOpen) {
|
|
||||||
this.props.onUnfreezedItem();
|
|
||||||
} else {
|
|
||||||
this.props.onFreezedItem();
|
|
||||||
}
|
|
||||||
this.setState({ dropdownOpen: !this.state.dropdownOpen });
|
|
||||||
}
|
|
||||||
|
|
||||||
onMouseEnter = () => {
|
|
||||||
if (this.props.isItemFreezed) return;
|
|
||||||
this.setState({
|
|
||||||
active: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onMouseLeave = () => {
|
|
||||||
if (this.props.isItemFreezed) return;
|
|
||||||
this.setState({
|
|
||||||
active: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
if (!nextProps.isItemFreezed) {
|
|
||||||
this.setState({ active: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
let table = this.props.table;
|
|
||||||
let tableHref = siteRoot + 'workspace/' + this.props.workspaceID + '/dtable/' + table.name + '/';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={this.state.active ? 'tr-highlight' : ''}>
|
|
||||||
<td><span className="sf3-font sf3-font-form"></span></td>
|
|
||||||
<td>
|
|
||||||
{this.state.isTableRenaming &&
|
|
||||||
<Rename
|
|
||||||
hasSuffix={true}
|
|
||||||
name={table.name}
|
|
||||||
onRenameConfirm={this.onRenameTableConfirm}
|
|
||||||
onRenameCancel={this.onRenameTableCancel}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
{!this.state.isTableRenaming &&
|
|
||||||
<a href={tableHref} target="_blank">{table.name}</a>
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
<td>{table.modifier}</td>
|
|
||||||
<td>{moment(table.updated_at).fromNow()}</td>
|
|
||||||
<td>
|
|
||||||
{this.state.active &&
|
|
||||||
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1 old-history-more-operation">
|
|
||||||
<DropdownToggle
|
|
||||||
tag='i'
|
|
||||||
className='fa fa-ellipsis-v cursor-pointer attr-action-icon'
|
|
||||||
title={gettext('More Operations')}
|
|
||||||
data-toggle="dropdown"
|
|
||||||
aria-expanded={this.state.dropdownOpen}
|
|
||||||
>
|
|
||||||
</DropdownToggle>
|
|
||||||
<DropdownMenu className="drop-list" right={true}>
|
|
||||||
<DropdownItem onClick={this.onRenameTableCancel}>{gettext('Rename')}</DropdownItem>
|
|
||||||
<DropdownItem onClick={this.onDeleteTableCancel}>{gettext('Delete')}</DropdownItem>
|
|
||||||
<DropdownItem onClick={this.onShareTableCancel}>{gettext('Share')}</DropdownItem>
|
|
||||||
</DropdownMenu>
|
|
||||||
</Dropdown>
|
|
||||||
}
|
|
||||||
{this.state.isTableDeleting &&
|
|
||||||
<DeleteTableDialog
|
|
||||||
currentTable={table}
|
|
||||||
deleteCancel={this.onDeleteTableCancel}
|
|
||||||
handleSubmit={this.onDeleteTableSubmit}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
{this.state.isTableSharing &&
|
|
||||||
<ShareTableDialog
|
|
||||||
currentTable={table}
|
|
||||||
ShareCancel={this.onShareTableCancel}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Table.propTypes = tablePropTypes;
|
|
||||||
|
|
||||||
|
|
||||||
const workspacePropTypes = {
|
|
||||||
workspace: PropTypes.object.isRequired,
|
|
||||||
setCurrentWorkspace: PropTypes.func.isRequired,
|
|
||||||
onAddDTable: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
class Workspace extends Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
tableList: this.props.workspace.table_list,
|
|
||||||
errorMsg: '',
|
|
||||||
isItemFreezed: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
onFreezedItem = () => {
|
|
||||||
this.setState({isItemFreezed: true});
|
|
||||||
}
|
|
||||||
|
|
||||||
onUnfreezedItem = () => {
|
|
||||||
this.setState({isItemFreezed: false});
|
|
||||||
}
|
|
||||||
|
|
||||||
renameTable = (oldTableName, newTableName) => {
|
|
||||||
let workspaceID = this.props.workspace.id;
|
|
||||||
seafileAPI.renameTable(workspaceID, oldTableName, newTableName).then((res) => {
|
|
||||||
let tableList = this.state.tableList.map((table) => {
|
|
||||||
if (table.name === oldTableName) {
|
|
||||||
table = res.data.table;
|
|
||||||
}
|
|
||||||
return table;
|
|
||||||
});
|
|
||||||
this.setState({tableList: tableList});
|
|
||||||
}).catch((error) => {
|
|
||||||
if(error.response) {
|
|
||||||
this.setState({errorMsg: gettext('Error')});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
deleteTable = (tableName) => {
|
|
||||||
let workspaceID = this.props.workspace.id;
|
|
||||||
seafileAPI.deleteTable(workspaceID, tableName).then(() => {
|
|
||||||
let tableList = this.state.tableList.filter(table => {
|
|
||||||
return table.name !== tableName;
|
|
||||||
});
|
|
||||||
this.setState({tableList: tableList});
|
|
||||||
}).catch((error) => {
|
|
||||||
if(error.response) {
|
|
||||||
this.setState({errorMsg: gettext('Error')});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
addTable = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
this.props.setCurrentWorkspace(this.props.workspace);
|
|
||||||
this.props.onAddDTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
if (nextProps.workspace.table_list !== this.props.workspace.table_list) {
|
|
||||||
this.setState({
|
|
||||||
tableList: nextProps.workspace.table_list
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let workspace = this.props.workspace;
|
|
||||||
let isPersonal = workspace.owner_type === 'Personal';
|
|
||||||
let { tableList, isItemFreezed } = this.state;
|
|
||||||
|
|
||||||
return(
|
|
||||||
<div className="workspace">
|
|
||||||
<div className="table-heading">{isPersonal ? gettext('My Tables') : workspace.owner_name}</div>
|
|
||||||
{tableList.length > 0 ?
|
|
||||||
<table width="100%" className="table-vcenter">
|
|
||||||
<colgroup>
|
|
||||||
<col width="4%"/><col width="31%"/><col width="30%"/><col width="27%"/><col width="8%"/>
|
|
||||||
</colgroup>
|
|
||||||
<tbody>
|
|
||||||
{tableList.map((table, index) => {
|
|
||||||
return (
|
|
||||||
<Table
|
|
||||||
key={index}
|
|
||||||
table={table}
|
|
||||||
workspaceID={workspace.id}
|
|
||||||
renameTable={this.renameTable}
|
|
||||||
deleteTable={this.deleteTable}
|
|
||||||
onFreezedItem={this.onFreezedItem}
|
|
||||||
onUnfreezedItem={this.onUnfreezedItem}
|
|
||||||
isItemFreezed={isItemFreezed}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<tr className={isItemFreezed ? '' : 'add-table-range'}>
|
|
||||||
<td><span className="sf3-font sf3-font-add"></span></td>
|
|
||||||
<td><a href="#" onClick={this.addTable}>{gettext('Add a table')}</a></td>
|
|
||||||
<td></td><td></td><td></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
:
|
|
||||||
<table width="100%" className="table-vcenter">
|
|
||||||
<tbody>
|
|
||||||
<tr><th className="text-center">{gettext('No tables')}</th></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Workspace.propTypes = workspacePropTypes;
|
|
||||||
|
|
||||||
|
|
||||||
const dtablePropTypes = {
|
|
||||||
onShowSidePanel: PropTypes.func.isRequired,
|
onShowSidePanel: PropTypes.func.isRequired,
|
||||||
onSearchedClick: PropTypes.func.isRequired,
|
onSearchedClick: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
class DTable extends Component {
|
class DTable extends Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
@ -299,10 +32,26 @@ class DTable extends Component {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.listWorkspaces();
|
||||||
|
this.listSharedTables();
|
||||||
|
}
|
||||||
|
|
||||||
onAddDTable = () => {
|
onAddDTable = () => {
|
||||||
this.setState({ isShowAddDTableDialog: !this.state.isShowAddDTableDialog });
|
this.setState({ isShowAddDTableDialog: !this.state.isShowAddDTableDialog });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
newDtable = () => {
|
||||||
|
if (this.state.currentWorkspace) {
|
||||||
|
this.setState({ currentWorkspace: null });
|
||||||
|
}
|
||||||
|
this.onAddDTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
setCurrentWorkspace = (currentWorkspace) => {
|
||||||
|
this.setState({ currentWorkspace: currentWorkspace });
|
||||||
|
}
|
||||||
|
|
||||||
createDTable = (tableName, owner) => {
|
createDTable = (tableName, owner) => {
|
||||||
seafileAPI.createTable(tableName, owner).then(() => {
|
seafileAPI.createTable(tableName, owner).then(() => {
|
||||||
this.listWorkspaces();
|
this.listWorkspaces();
|
||||||
@ -354,7 +103,7 @@ class DTable extends Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
leaveShareTable = (table) => {
|
leaveShareTable = (table) => {
|
||||||
let email = username;
|
let email = username;
|
||||||
@ -374,26 +123,13 @@ class DTable extends Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
setCurrentWorkspace = (currentWorkspace) => {
|
|
||||||
this.setState({ currentWorkspace: currentWorkspace });
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.listWorkspaces();
|
|
||||||
this.listSharedTables();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
renderShareTablePanel = () => {
|
renderShareTablePanel = () => {
|
||||||
return (
|
return (
|
||||||
<div className="workspace">
|
<div className="workspace">
|
||||||
<div className="table-heading">{gettext('Shared with me')}</div>
|
<div className="table-heading">{gettext('Shared with me')}</div>
|
||||||
<table width="100%" className="table-vcenter">
|
<div className="table-item-container">
|
||||||
<colgroup>
|
|
||||||
<col width="4%"/><col width="31%"/><col width="30%"/><col width="27%"/><col width="8%"/>
|
|
||||||
</colgroup>
|
|
||||||
<tbody>
|
|
||||||
{this.state.shareTableList.map((table, index) => {
|
{this.state.shareTableList.map((table, index) => {
|
||||||
return (
|
return (
|
||||||
<ShareTableItem
|
<ShareTableItem
|
||||||
@ -403,27 +139,26 @@ class DTable extends Component {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
newDtable = () => {
|
|
||||||
if (this.state.currentWorkspace) {
|
|
||||||
this.setState({ currentWorkspace: null });
|
|
||||||
}
|
|
||||||
this.onAddDTable();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let personalWorkspace = this.state.workspaceList.filter(workspace => {
|
const { workspaceList, loading } = this.state;
|
||||||
|
|
||||||
|
let personalWorkspaceList = workspaceList.filter(workspace => {
|
||||||
return workspace.owner_type === 'Personal';
|
return workspace.owner_type === 'Personal';
|
||||||
}).pop();
|
});
|
||||||
let groupWorkspaceList = this.state.workspaceList.filter(workspace => {
|
let personalWorkspaceMessage = personalWorkspaceList[0];
|
||||||
|
let groupWorkspaceList = workspaceList.filter(workspace => {
|
||||||
return workspace.owner_type === 'Group';
|
return workspace.owner_type === 'Group';
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return(<Loading />);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<div className="main-panel-north border-left-show">
|
<div className="main-panel-north border-left-show">
|
||||||
@ -448,21 +183,18 @@ class DTable extends Component {
|
|||||||
<h3 className="sf-heading">DTable</h3>
|
<h3 className="sf-heading">DTable</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="cur-view-content">
|
<div className="cur-view-content">
|
||||||
{this.state.loading && <Loading />}
|
{this.state.errorMsg &&
|
||||||
{(!this.state.loading && this.state.errorMsg) &&
|
|
||||||
<p className="error text-center">{this.state.errorMsg}</p>
|
<p className="error text-center">{this.state.errorMsg}</p>
|
||||||
}
|
}
|
||||||
{!this.state.loading &&
|
|
||||||
<Workspace
|
<Workspace
|
||||||
workspace={personalWorkspace}
|
workspace={personalWorkspaceMessage}
|
||||||
onAddDTable={this.onAddDTable}
|
onAddDTable={this.onAddDTable}
|
||||||
setCurrentWorkspace={this.setCurrentWorkspace}
|
setCurrentWorkspace={this.setCurrentWorkspace}
|
||||||
/>
|
/>
|
||||||
}
|
|
||||||
{(!this.state.shareTableLoading && this.state.shareTableList.length > 0) &&
|
{(!this.state.shareTableLoading && this.state.shareTableList.length > 0) &&
|
||||||
this.renderShareTablePanel()
|
this.renderShareTablePanel()
|
||||||
}
|
}
|
||||||
{!this.state.loading &&
|
{
|
||||||
groupWorkspaceList.map((workspace, index) => {
|
groupWorkspaceList.map((workspace, index) => {
|
||||||
return (
|
return (
|
||||||
<Workspace
|
<Workspace
|
||||||
@ -474,7 +206,7 @@ class DTable extends Component {
|
|||||||
);
|
);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
{(!this.state.loading && this.state.isShowAddDTableDialog) &&
|
{this.state.isShowAddDTableDialog &&
|
||||||
<div className="my-2">
|
<div className="my-2">
|
||||||
<CreateTableDialog
|
<CreateTableDialog
|
||||||
createDTable={this.createDTable}
|
createDTable={this.createDTable}
|
||||||
@ -491,6 +223,6 @@ class DTable extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
DTable.propTypes = dtablePropTypes;
|
DTable.propTypes = propTypes;
|
||||||
|
|
||||||
export default DTable;
|
export default DTable;
|
||||||
|
151
frontend/src/pages/dtable/list-table-item.js
Normal file
151
frontend/src/pages/dtable/list-table-item.js
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
|
||||||
|
import { gettext, siteRoot } from '../../utils/constants';
|
||||||
|
import DeleteTableDialog from '../../components/dialog/delete-table-dialog';
|
||||||
|
import ShareTableDialog from '../../components/dialog/share-table-dialog';
|
||||||
|
import Rename from '../../components/rename';
|
||||||
|
|
||||||
|
const propTypes = {
|
||||||
|
table: PropTypes.object.isRequired,
|
||||||
|
workspaceID: PropTypes.number.isRequired,
|
||||||
|
renameTable: PropTypes.func.isRequired,
|
||||||
|
deleteTable: PropTypes.func.isRequired,
|
||||||
|
onUnfreezedItem: PropTypes.func.isRequired,
|
||||||
|
onFreezedItem: PropTypes.func.isRequired,
|
||||||
|
isItemFreezed: PropTypes.bool.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
class ListTableItem extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
isTableRenaming: false,
|
||||||
|
isTableDeleting: false,
|
||||||
|
isTableSharing: false,
|
||||||
|
dropdownOpen: false,
|
||||||
|
active: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
if (!nextProps.isItemFreezed) {
|
||||||
|
this.setState({ active: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter = () => {
|
||||||
|
if (!this.props.isItemFreezed) {
|
||||||
|
this.setState({
|
||||||
|
active: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave = () => {
|
||||||
|
if (!this.props.isItemFreezed) {
|
||||||
|
this.setState({
|
||||||
|
active: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onRenameTableCancel = () => {
|
||||||
|
this.setState({isTableRenaming: !this.state.isTableRenaming});
|
||||||
|
this.props.onUnfreezedItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
onRenameTableConfirm = (newTableName) => {
|
||||||
|
let oldTableName = this.props.table.name;
|
||||||
|
this.props.renameTable(oldTableName, newTableName);
|
||||||
|
this.onRenameTableCancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
onDeleteTableCancel = () => {
|
||||||
|
this.setState({isTableDeleting: !this.state.isTableDeleting});
|
||||||
|
this.props.onUnfreezedItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
onDeleteTableSubmit = () => {
|
||||||
|
let tableName = this.props.table.name;
|
||||||
|
this.props.deleteTable(tableName);
|
||||||
|
this.onDeleteTableCancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
onShareTableCancel = () => {
|
||||||
|
this.setState({isTableSharing: !this.state.isTableSharing});
|
||||||
|
this.props.onUnfreezedItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
dropdownToggle = () => {
|
||||||
|
if (this.state.dropdownOpen) {
|
||||||
|
this.props.onUnfreezedItem();
|
||||||
|
} else {
|
||||||
|
this.props.onFreezedItem();
|
||||||
|
}
|
||||||
|
this.setState({ dropdownOpen: !this.state.dropdownOpen });
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
let table = this.props.table;
|
||||||
|
let tableHref = siteRoot + 'workspace/' + this.props.workspaceID + '/dtable/' + table.name + '/';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={ `table-item ${this.state.active ? 'tr-highlight' : ''}`}>
|
||||||
|
<div className="table-icon"><span className="sf3-font sf3-font-form"></span></div>
|
||||||
|
<div className="table-name">
|
||||||
|
{this.state.isTableRenaming &&
|
||||||
|
<Rename
|
||||||
|
hasSuffix={true}
|
||||||
|
name={table.name}
|
||||||
|
onRenameConfirm={this.onRenameTableConfirm}
|
||||||
|
onRenameCancel={this.onRenameTableCancel}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
{!this.state.isTableRenaming &&
|
||||||
|
<a href={tableHref} target="_blank">{table.name}</a>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div className="table-dropdown-menu">
|
||||||
|
{this.state.active &&
|
||||||
|
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="table-item-more-operation">
|
||||||
|
<DropdownToggle
|
||||||
|
tag='i'
|
||||||
|
className='fa fa-ellipsis-v cursor-pointer attr-action-icon table-dropdown-menu-icon'
|
||||||
|
title={gettext('More Operations')}
|
||||||
|
data-toggle="dropdown"
|
||||||
|
aria-expanded={this.state.dropdownOpen}
|
||||||
|
>
|
||||||
|
</DropdownToggle>
|
||||||
|
<DropdownMenu className="drop-list" right={true}>
|
||||||
|
<DropdownItem onClick={this.onRenameTableCancel}>{gettext('Rename')}</DropdownItem>
|
||||||
|
<DropdownItem onClick={this.onDeleteTableCancel}>{gettext('Delete')}</DropdownItem>
|
||||||
|
<DropdownItem onClick={this.onShareTableCancel}>{gettext('Share')}</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
}
|
||||||
|
{this.state.isTableDeleting &&
|
||||||
|
<DeleteTableDialog
|
||||||
|
currentTable={table}
|
||||||
|
deleteCancel={this.onDeleteTableCancel}
|
||||||
|
handleSubmit={this.onDeleteTableSubmit}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
{this.state.isTableSharing &&
|
||||||
|
<ShareTableDialog
|
||||||
|
currentTable={table}
|
||||||
|
ShareCancel={this.onShareTableCancel}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ListTableItem.propTypes = propTypes;
|
||||||
|
|
||||||
|
export default ListTableItem;
|
||||||
|
|
@ -1,11 +1,9 @@
|
|||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import moment from 'moment';
|
|
||||||
import {gettext, siteRoot} from '../../utils/constants';
|
import {gettext, siteRoot} from '../../utils/constants';
|
||||||
|
|
||||||
import '../../css/dtable-page.css';
|
import '../../css/dtable-page.css';
|
||||||
|
|
||||||
|
|
||||||
const shareTableItemPropTypes = {
|
const shareTableItemPropTypes = {
|
||||||
table: PropTypes.object.isRequired,
|
table: PropTypes.object.isRequired,
|
||||||
leaveShareTable: PropTypes.func.isRequired,
|
leaveShareTable: PropTypes.func.isRequired,
|
||||||
@ -42,20 +40,21 @@ class ShareTableItem extends Component {
|
|||||||
let tableHref = siteRoot + 'workspace/' + table.workspace_id + '/dtable/' + table.name + '/';
|
let tableHref = siteRoot + 'workspace/' + table.workspace_id + '/dtable/' + table.name + '/';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={this.state.active ? 'tr-highlight' : ''}>
|
|
||||||
<td><span className="sf3-font sf3-font-form"></span></td>
|
<div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={ `table-item ${this.state.active ? 'tr-highlight' : ''}`}>
|
||||||
<td><a href={tableHref} target="_blank">{table.name}</a></td>
|
<div className="table-icon"><span className="sf3-font sf3-font-form"></span></div>
|
||||||
<td>{table.from_user_name}</td>
|
<div className="table-name">
|
||||||
<td>{moment(table.updated_at).fromNow()}</td>
|
<a href={tableHref} target="_blank">{table.name}</a>
|
||||||
<td>
|
</div>
|
||||||
|
<div className="table-dropdown-menu">
|
||||||
<i
|
<i
|
||||||
className="action-icon sf2-icon-x3"
|
className="action-icon sf2-icon-x3"
|
||||||
title={gettext('Leave Share')}
|
title={gettext('Leave Share')}
|
||||||
style={!this.state.active ? {opacity: 0} : {}}
|
style={!this.state.active ? {opacity: 0} : {}}
|
||||||
onClick={this.onLeaveShareTableSubmit}>
|
onClick={this.onLeaveShareTableSubmit}>
|
||||||
</i>
|
</i>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
122
frontend/src/pages/dtable/workspace.js
Normal file
122
frontend/src/pages/dtable/workspace.js
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { seafileAPI } from '../../utils/seafile-api';
|
||||||
|
import { gettext } from '../../utils/constants';
|
||||||
|
import ListTableItem from './list-table-item';
|
||||||
|
|
||||||
|
const propTypes = {
|
||||||
|
workspace: PropTypes.object.isRequired,
|
||||||
|
setCurrentWorkspace: PropTypes.func.isRequired,
|
||||||
|
onAddDTable: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
class Workspace extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
tableList: props.workspace.table_list,
|
||||||
|
errorMsg: '',
|
||||||
|
isItemFreezed: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
if (nextProps.workspace.table_list !== this.props.workspace.table_list) {
|
||||||
|
this.setState({
|
||||||
|
tableList: nextProps.workspace.table_list
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onFreezedItem = () => {
|
||||||
|
this.setState({isItemFreezed: true});
|
||||||
|
}
|
||||||
|
|
||||||
|
onUnfreezedItem = () => {
|
||||||
|
this.setState({isItemFreezed: false});
|
||||||
|
}
|
||||||
|
|
||||||
|
renameTable = (oldTableName, newTableName) => {
|
||||||
|
let workspaceID = this.props.workspace.id;
|
||||||
|
seafileAPI.renameTable(workspaceID, oldTableName, newTableName).then((res) => {
|
||||||
|
let tableList = this.state.tableList.map((table) => {
|
||||||
|
if (table.name === oldTableName) {
|
||||||
|
table = res.data.table;
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
});
|
||||||
|
this.setState({tableList: tableList});
|
||||||
|
}).catch((error) => {
|
||||||
|
if(error.response) {
|
||||||
|
this.setState({errorMsg: gettext('Error')});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteTable = (tableName) => {
|
||||||
|
let workspaceID = this.props.workspace.id;
|
||||||
|
seafileAPI.deleteTable(workspaceID, tableName).then(() => {
|
||||||
|
let tableList = this.state.tableList.filter(table => {
|
||||||
|
return table.name !== tableName;
|
||||||
|
});
|
||||||
|
this.setState({tableList: tableList});
|
||||||
|
}).catch((error) => {
|
||||||
|
if(error.response) {
|
||||||
|
this.setState({errorMsg: gettext('Error')});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addTable = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.setCurrentWorkspace(this.props.workspace);
|
||||||
|
this.props.onAddDTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let workspace = this.props.workspace;
|
||||||
|
let isPersonal = workspace.owner_type === 'Personal';
|
||||||
|
let { tableList, isItemFreezed } = this.state;
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div className="workspace">
|
||||||
|
<div className={`table-heading ${tableList.length > 0 ? '' : 'table-heading-border'}`}>{isPersonal ? gettext('My Tables') : workspace.owner_name}</div>
|
||||||
|
{tableList.length > 0 ?
|
||||||
|
<div className="table-item-container">
|
||||||
|
{tableList.map((table, index) => {
|
||||||
|
return (
|
||||||
|
<ListTableItem
|
||||||
|
key={index}
|
||||||
|
table={table}
|
||||||
|
workspaceID={workspace.id}
|
||||||
|
renameTable={this.renameTable}
|
||||||
|
deleteTable={this.deleteTable}
|
||||||
|
onFreezedItem={this.onFreezedItem}
|
||||||
|
onUnfreezedItem={this.onUnfreezedItem}
|
||||||
|
isItemFreezed={isItemFreezed}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<div className={`table-item ${isItemFreezed ? '' : 'add-table-range'}`}>
|
||||||
|
<div className="table-icon"><span className="sf3-font sf3-font-add"></span></div>
|
||||||
|
<div className="table-name"><a href="#" onClick={this.addTable}>{gettext('Add a table')}</a></div>
|
||||||
|
<div className="table-dropdown-menu"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<table width="100%" className="table-vcenter">
|
||||||
|
<tbody>
|
||||||
|
<tr><th className="text-center">{gettext('No Tables')}</th></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
Workspace.propTypes = propTypes;
|
||||||
|
|
||||||
|
export default Workspace;
|
Loading…
Reference in New Issue
Block a user