{gettext('Shared with me')}
-
-
-
-
-
- {this.state.shareTableList.map((table, index) => {
- return (
-
- );
- })}
-
-
+
+ {this.state.shareTableList.map((table, index) => {
+ return (
+
+ );
+ })}
+
);
- };
-
- newDtable = () => {
- if (this.state.currentWorkspace) {
- this.setState({ currentWorkspace: null });
- }
- this.onAddDTable();
}
render() {
- let personalWorkspace = this.state.workspaceList.filter(workspace => {
+ const { workspaceList, loading } = this.state;
+
+ let personalWorkspaceList = workspaceList.filter(workspace => {
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';
});
+ if (loading) {
+ return(
@@ -448,21 +183,18 @@ class DTable extends Component {
DTable
- {this.state.loading &&
}
- {(!this.state.loading && this.state.errorMsg) &&
+ {this.state.errorMsg &&
{this.state.errorMsg}
}
- {!this.state.loading &&
- }
{(!this.state.shareTableLoading && this.state.shareTableList.length > 0) &&
- this.renderShareTablePanel()
+ this.renderShareTablePanel()
}
- {!this.state.loading &&
+ {
groupWorkspaceList.map((workspace, index) => {
return (
-
-
+
+
}
@@ -491,6 +223,6 @@ class DTable extends Component {
}
}
-DTable.propTypes = dtablePropTypes;
+DTable.propTypes = propTypes;
export default DTable;
diff --git a/frontend/src/pages/dtable/list-table-item.js b/frontend/src/pages/dtable/list-table-item.js
new file mode 100644
index 0000000000..6d2497433b
--- /dev/null
+++ b/frontend/src/pages/dtable/list-table-item.js
@@ -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 (
+
+
+
+ {this.state.isTableRenaming &&
+
+ }
+ {!this.state.isTableRenaming &&
+
{table.name}
+ }
+
+
+ {this.state.active &&
+
+
+
+
+ {gettext('Rename')}
+ {gettext('Delete')}
+ {gettext('Share')}
+
+
+ }
+ {this.state.isTableDeleting &&
+
+ }
+ {this.state.isTableSharing &&
+
+ }
+
+
- |
- {table.name} |
- {table.from_user_name} |
- {moment(table.updated_at).fromNow()} |
-
+
+ |
-
+
+
);
}
}
ShareTableItem.propTypes = shareTableItemPropTypes;
-export default ShareTableItem;
+export default ShareTableItem;
\ No newline at end of file
diff --git a/frontend/src/pages/dtable/workspace.js b/frontend/src/pages/dtable/workspace.js
new file mode 100644
index 0000000000..886846575f
--- /dev/null
+++ b/frontend/src/pages/dtable/workspace.js
@@ -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(
+
+
0 ? '' : 'table-heading-border'}`}>{isPersonal ? gettext('My Tables') : workspace.owner_name}
+ {tableList.length > 0 ?
+
+ {tableList.map((table, index) => {
+ return (
+
+ );
+ })}
+
+
+ :
+
+
+ | {gettext('No Tables')} |
|---|
+
+
+ }
+