Merge pull request #3704 from haiwen/dtable-upgrade

dtable upgrade

frontend/src/app.js

@@ -37,7 +37,6 @@ import './css/search.css';
 const FilesActivitiesWrapper = MainContentWrapper(FilesActivities);
 const DraftsViewWrapper = MainContentWrapper(DraftsView);
 const StarredWrapper = MainContentWrapper(Starred);
-const DTableWrapper = MainContentWrapper(DTable);
 const LinkedDevicesWrapper = MainContentWrapper(LinkedDevices);
 const SharedLibrariesWrapper = MainContentWrapper(SharedLibraries);
 const ShareAdminLibrariesWrapper = MainContentWrapper(ShareAdminLibraries);
@@ -235,7 +234,7 @@ class App extends Component {
                 />
               </DraftsViewWrapper>
               <StarredWrapper path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <DTableWrapper path={siteRoot + 'dtable'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <DTable path={siteRoot + 'dtable'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <LinkedDevicesWrapper path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <ShareAdminLibrariesWrapper path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <ShareAdminFoldersWrapper path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />

frontend/src/components/dialog/create-table-dialog.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Select from 'react-select';
+import makeAnimated from 'react-select/lib/animated';
+import { seafileAPI } from '../../utils/seafile-api.js';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 
 
 const propTypes = {
-  createTable: PropTypes.func.isRequired,
-  onAddTable: PropTypes.func.isRequired,
+  createDTable: PropTypes.func.isRequired,
+  onAddDTable: PropTypes.func.isRequired,
 };
 
 class CreateTableDialog extends React.Component {
@@ -16,6 +19,8 @@ class CreateTableDialog extends React.Component {
       tableName: '',
       errMessage: '',
       isSubmitBtnActive: false,
+      selectedOption: null,
+      options:[],
     };
     this.newInput = React.createRef();
   }
@@ -23,6 +28,26 @@ class CreateTableDialog extends React.Component {
   componentDidMount() {
     this.newInput.focus();
     this.newInput.setSelectionRange(0,0);
+
+    let options = [];
+    seafileAPI.getAccountInfo().then((res) => {
+      let obj = {};
+      console.log(res);
+      obj.value = 'Personal';
+      obj.email = res.data.email;
+      obj.label = 'Personal';
+      options.push(obj);
+      seafileAPI.listGroups().then((res) => {
+        for (let i = 0 ; i < res.data.length; i++) {
+          let obj = {};
+          obj.value = res.data[i].name;
+          obj.email = res.data[i].id + '@seafile_group';
+          obj.label = res.data[i].name;
+          options.push(obj);
+        }
+        this.setState({options: options});
+      });
+    });
   }
 
   handleChange = (e) => {
@@ -37,6 +62,10 @@ class CreateTableDialog extends React.Component {
     }) ;
   }
 
+  handleSelectChange = (option) => {
+    this.setState({selectedOption: option});
+  }
+
   handleSubmit = () => {
     if (!this.state.isSubmitBtnActive) {
       return;
@@ -45,7 +74,8 @@ class CreateTableDialog extends React.Component {
     let isValid = this.validateInputParams();
     if (isValid) {
       let newName = this.state.tableName.trim();
-      this.props.createTable(newName);
+      let owner = this.state.selectedOption;
+      this.props.createDTable(newName, owner.email);
     }
   }
 
@@ -57,7 +87,7 @@ class CreateTableDialog extends React.Component {
   }
 
   toggle = () => {
-    this.props.onAddTable();
+    this.props.onAddDTable();
   }
 
   validateInputParams = () => {
@@ -94,6 +124,17 @@ class CreateTableDialog extends React.Component {
             </FormGroup>
           </Form>
           {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
+          <Label>{gettext('Belong to')}</Label>
+          <Select
+            isClearable
+            isMulti={false}
+            maxMenuHeight={200}
+            hideSelectedOptions={true}
+            components={makeAnimated()}
+            placeholder=''
+            options={this.state.options}
+            onChange={this.handleSelectChange}
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>

frontend/src/components/dialog/create-workspace-dialog.js

@@ -1,102 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
-import { gettext } from '../../utils/constants';
-
-
-const propTypes = {
-  createWorkspace: PropTypes.func.isRequired,
-  onAddWorkspace: PropTypes.func.isRequired,
-};
-
-class CreateWorkspaceDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      workspaceName: '',
-      errMessage: '',
-      isSubmitBtnActive: false,
-    };
-    this.newInput = React.createRef();
-  }
-
-  handleNameChange = (e) => {
-    if (!e.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
-    } else {
-      this.setState({isSubmitBtnActive: true});
-    }
-
-    this.setState({workspaceName: e.target.value});
-  }
-
-  handleSubmit = () => {
-    let isValid= this.validateInputParams();
-    if (isValid) {
-      let workspaceName = this.state.workspaceName.trim();
-      this.props.createWorkspace(workspaceName);
-    }
-  } 
-
-  handleKeyPress = (e) => {
-    if (e.key === 'Enter') {
-      this.handleSubmit();
-      e.preventDefault();
-    }
-  }
-
-  toggle = () => {
-    this.props.onAddWorkspace();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
-  }
-
-  validateInputParams() {
-    let errMessage = '';
-    let workspaceName = this.state.workspaceName.trim();
-    if (!workspaceName.length) {
-      errMessage = gettext('Name is required');
-      this.setState({errMessage: errMessage});
-      return false;
-    }
-    if (workspaceName.indexOf('/') > -1) {
-      errMessage = gettext('Name should not include \'/\'.');
-      this.setState({errMessage: errMessage});
-      return false;
-    }
-    return true;
-  }
-
-  render() {
-    return (
-      <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Workspace')}</ModalHeader>
-        <ModalBody>
-          <Form>
-            <FormGroup>
-              <Label for="workspaceName">{gettext('Name')}</Label>
-              <Input 
-                id="workspaceName"
-                onKeyPress={this.handleKeyPress} 
-                innerRef={input => {this.newInput = input;}} 
-                value={this.state.workspaceName} 
-                onChange={this.handleNameChange}
-              />
-            </FormGroup>
-          </Form>
-          {this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-CreateWorkspaceDialog.propTypes = propTypes;
-
-export default CreateWorkspaceDialog;

frontend/src/components/dialog/delete-workspace-dialog.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-
-const propTypes = {
-  currentWorkspace: PropTypes.object.isRequired,
-  deleteCancel: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-};
-
-class DeleteWorkspaceDialog extends React.Component {
-
-  toggle = () => {
-    this.props.deleteCancel();
-  }
-  
-  render() {
-    let currentWorkspace = this.props.currentWorkspace;
-    let name = currentWorkspace.name;
-
-    return (
-      <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Delete Workspace')}</ModalHeader>
-        <ModalBody>
-          <p>{gettext('Are you sure to delete')}{' '}<b>{name}</b> ?</p>
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.props.handleSubmit}>{gettext('Delete')}</Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-DeleteWorkspaceDialog.propTypes = propTypes;
-
-export default DeleteWorkspaceDialog;

frontend/src/pages/dtable/dtable.js

@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import MediaQuery from 'react-responsive';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot } from '../../utils/constants';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
 import Loading from '../../components/loading';
-import CreateWorkspaceDialog from '../../components/dialog/create-workspace-dialog';
-import DeleteWorkspaceDialog from '../../components/dialog/delete-workspace-dialog';
 import CreateTableDialog from '../../components/dialog/create-table-dialog';
 import DeleteTableDialog from '../../components/dialog/delete-table-dialog';
 import Rename from '../../components/rename';
@@ -110,7 +110,7 @@ class Table extends Component {
           }
         </td>
         <td>{table.modifier}</td>
-        <td>{moment(table.mtime).fromNow()}</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">
@@ -146,8 +146,6 @@ Table.propTypes = tablePropTypes;
 
 const workspacePropTypes = {
   workspace: PropTypes.object.isRequired,
-  renameWorkspace: PropTypes.func.isRequired,
-  deleteWorkspace: PropTypes.func.isRequired,
 };
 
 class Workspace extends Component {
@@ -157,10 +155,6 @@ class Workspace extends Component {
     this.state = {
       tableList: this.props.workspace.table_list,
       errorMsg: '',
-      isWorkspaceRenaming: false,
-      isWorkspaceDeleting: false,
-      isShowAddTableDialog: false,
-      dropdownOpen: false,
       isItemFreezed: false,
     };
   }
@@ -173,25 +167,6 @@ class Workspace extends Component {
     this.setState({isItemFreezed: false});
   }
 
-  onAddTable = () => {
-    this.setState({
-      isShowAddTableDialog: !this.state.isShowAddTableDialog,
-    });
-  }
-
-  createTable = (tableName) => {
-    let workspaceID = this.props.workspace.id;
-    seafileAPI.createTable(workspaceID, tableName).then((res) => {
-      this.state.tableList.push(res.data.table);
-      this.setState({tableList: this.state.tableList});
-    }).catch((error) => {
-      if(error.response) {
-        this.setState({errorMsg: gettext('Error')});
-      }
-    });
-    this.onAddTable();
-  }
-
   renameTable = (oldTableName, newTableName) => {
     let workspaceID = this.props.workspace.id;
     seafileAPI.renameTable(workspaceID, oldTableName, newTableName).then((res) => {
@@ -223,30 +198,6 @@ class Workspace extends Component {
     });
   }
 
-  onRenameWorkspaceCancel = () => {
-    this.setState({isWorkspaceRenaming: !this.state.isWorkspaceRenaming});
-  }
-
-  onRenameWorkspaceConfirm = (newName) => {
-    let workspace = this.props.workspace;
-    this.props.renameWorkspace(workspace, newName);
-    this.onRenameWorkspaceCancel();
-  }
-
-  onDeleteWorkspaceCancel = () => {
-    this.setState({isWorkspaceDeleting: !this.state.isWorkspaceDeleting});
-  }
-
-  onDeleteWorkspaceSubmit = () => {
-    let workspace = this.props.workspace;
-    this.props.deleteWorkspace(workspace);
-    this.onDeleteWorkspaceCancel();
-  }
-
-  dropdownToggle = () => {
-    this.setState({ dropdownOpen: !this.state.dropdownOpen });
-  }
-
   componentWillReceiveProps(nextProps) {
     if (nextProps.workspace.table_list !== this.props.workspace.table_list) {
       this.setState({
@@ -260,54 +211,7 @@ class Workspace extends Component {
 
     return(
       <div className="workspace my-2">
-        <Fragment>
-          {this.state.isWorkspaceRenaming &&
-            <Rename
-              hasSuffix={false}
-              name={workspace.name}
-              onRenameConfirm={this.onRenameWorkspaceConfirm}
-              onRenameCancel={this.onRenameWorkspaceCancel}
-            />
-          }
-          {!this.state.isWorkspaceRenaming &&
-            <span className="mb-2 workspace-name-container">
-              <span className="workspace-name">{workspace.name}</span>
-              <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down">
-                <DropdownToggle
-                  caret={true}
-                  tag='i'
-                  title={gettext('More Operations')}
-                  data-toggle="dropdown" 
-                  aria-expanded={this.state.dropdownOpen}
-                >
-                </DropdownToggle>
-                <DropdownMenu className="drop-list" right={true}>
-                  <DropdownItem onClick={this.onRenameWorkspaceCancel}>{gettext('Rename')}</DropdownItem>
-                  <DropdownItem onClick={this.onDeleteWorkspaceCancel}>{gettext('Delete')}</DropdownItem>
-                </DropdownMenu>
-              </Dropdown>
-              {this.state.isWorkspaceDeleting &&
-                <DeleteWorkspaceDialog
-                  currentWorkspace={workspace}
-                  deleteCancel={this.onDeleteWorkspaceCancel}
-                  handleSubmit={this.onDeleteWorkspaceSubmit}
-                />
-              }
-            </span>
-          }
-        </Fragment>
-        <div className="d-flex add-table-btn-container">
-          <div className="add-table-btn cursor-pointer" onClick={this.onAddTable}>
-            <i className="fa fa-plus"></i>
-          </div>
-          {this.state.isShowAddTableDialog &&
-            <CreateTableDialog
-              onAddTable={this.onAddTable}
-              createTable={this.createTable}
-            />
-          }
-          <span>{gettext('Add a DTable')}</span>
-        </div>
+        <div>{workspace.owner_name}</div>
         <table width="100%" className="table-vcenter">
           <colgroup>
             <col width="4%"/><col width="31%"/><col width="30%"/><col width="27%"/><col width="8%"/>
@@ -336,6 +240,12 @@ class Workspace extends Component {
 
 Workspace.propTypes = workspacePropTypes;
 
+
+const dtablePropTypes = {
+  onShowSidePanel: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func.isRequired,
+};
+
 class DTable extends Component {
   constructor(props) {
     super(props);
@@ -343,60 +253,28 @@ class DTable extends Component {
       loading: true,
       errorMsg: '',
       workspaceList: [],
-      isShowAddWorkspaceDialog: false,
+      isShowAddDTableDialog: false,
     };
   }
 
-  onAddWorkspace = () => {
+  onAddDTable = () => {
     this.setState({
-      isShowAddWorkspaceDialog: !this.state.isShowAddWorkspaceDialog,
+      isShowAddDTableDialog: !this.state.isShowAddDTableDialog,
     });
   }
 
-  createWorkspace = (name) => {
-    seafileAPI.createWorkspace(name).then((res) => {
-      this.state.workspaceList.push(res.data.workspace);
-      this.setState({workspaceList: this.state.workspaceList});
+  createDTable = (tableName, owner) => {
+    seafileAPI.createTable(tableName, owner).then(() => {
+      this.listWorkspaces();
     }).catch((error) => {
       if(error.response) {
         this.setState({errorMsg: gettext('Error')});
       }
     });
-    this.onAddWorkspace();
+    this.onAddDTable();
   }
 
-  renameWorkspace = (workspace, name) => {
-    let workspaceID = workspace.id;
-    seafileAPI.renameWorkspace(workspaceID, name).then((res) => {
-      let workspaceList = this.state.workspaceList.map((workspace) => {
-        if (workspace.id === workspaceID) {
-          workspace = res.data.workspace;
-        }
-        return workspace;
-      });
-      this.setState({workspaceList: workspaceList});
-    }).catch((error) => {
-      if(error.response) {
-        this.setState({errorMsg: gettext('Error')});
-      }
-    });
-  }
-
-  deleteWorkspace = (workspace) => {
-    let workspaceID = workspace.id;
-    seafileAPI.deleteWorkspace(workspaceID).then(() => {
-      let workspaceList = this.state.workspaceList.filter(workspace => {
-        return workspace.id !== workspaceID;
-      });
-      this.setState({workspaceList: workspaceList});
-    }).catch((error) => {
-      if(error.response) {
-        this.setState({errorMsg: gettext('Error')});
-      }
-    });
-  }
-
-  componentDidMount() {
+  listWorkspaces = () => {
     seafileAPI.listWorkspaces().then((res) => {
       this.setState({
         loading: false,
@@ -417,48 +295,67 @@ class DTable extends Component {
     });
   }
 
+  componentDidMount() {
+    this.listWorkspaces();
+  }
+
   render() {
     return (
-      <div className="main-panel-center">
-        <div className="cur-view-container" id="starred">
-          <div className="cur-view-path">
-            <h3 className="sf-heading">DTable</h3>
-          </div>
-          <div className="cur-view-content">
-            {this.state.loading && <Loading />}
-            {(!this.state.loading && this.state.errorMsg) && 
-              <p className="error text-center">{this.state.errorMsg}</p>
-            }
-            {!this.state.loading &&
+      <Fragment>
+        <div className="main-panel-north border-left-show">
+          <div className="cur-view-toolbar">
+            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
+            <div className="operation">
               <Fragment>
-                {this.state.workspaceList.map((workspace, index) => {
-                  return (
-                    <Workspace
-                      key={index}
-                      workspace={workspace}
-                      renameWorkspace={this.renameWorkspace}
-                      deleteWorkspace={this.deleteWorkspace}
-                    />
-                  );
-                })}
-                <div className="my-2">
-                  <span className="add-workspace cursor-pointer" onClick={this.onAddWorkspace}>
-                    <i className="fa fa-plus"></i>{' '}{gettext('Add a Workspace')}
-                  </span>
-                  {this.state.isShowAddWorkspaceDialog &&
-                    <CreateWorkspaceDialog
-                      createWorkspace={this.createWorkspace}
-                      onAddWorkspace={this.onAddWorkspace}
-                    />
-                  }
-                </div>
+                <MediaQuery query="(min-width: 768px)">
+                  <Button className="btn btn-secondary operation-item" onClick={this.onAddDTable}>{gettext('New DTable')}</Button>
+                </MediaQuery>
+                <MediaQuery query="(max-width: 767.8px)">
+                  <Button className="btn btn-secondary operation-item my-1" onClick={this.onAddDTable}>{gettext('New DTable')}</Button>
+                </MediaQuery>
               </Fragment>
-            }
+            </div>
+          </div>
+          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
+        </div>
+        <div className="main-panel-center">
+          <div className="cur-view-container" id="starred">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">DTable</h3>
+            </div>
+            <div className="cur-view-content">
+              {this.state.loading && <Loading />}
+              {(!this.state.loading && this.state.errorMsg) && 
+                <p className="error text-center">{this.state.errorMsg}</p>
+              }
+              {!this.state.loading &&
+                <Fragment>
+                  {this.state.workspaceList.map((workspace, index) => {
+                    return (
+                      <Workspace
+                        key={index}
+                        workspace={workspace}
+                      />
+                    );
+                  })}
+                  <div className="my-2">
+                    {this.state.isShowAddDTableDialog &&
+                      <CreateTableDialog
+                        createDTable={this.createDTable}
+                        onAddDTable={this.onAddDTable}
+                      />
+                    }
+                  </div>
+                </Fragment>
+              }
+            </div>
           </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }
 
+DTable.propTypes = dtablePropTypes;
+
 export default DTable;