modify code

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,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Select from 'react-select';
-import makeAnimated from 'react-select/lib/animated';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api.js';
-
-
-const propTypes = {
-  createWorkspace: PropTypes.func.isRequired,
-  onAddWorkspace: PropTypes.func.isRequired,
-};
-
-const NoOptionsMessage = (props) => {
-  return (
-    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
-  );
-};
-
-class CreateWorkspaceDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedOption: null,
-      options:[],
-    };
-  }
-
-  componentDidMount() {
-    seafileAPI.listGroups().then((res) => {
-      let options = [];
-      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});
-    });
-  }
-
-  handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
-  }
-
-  submit = () => {
-    let owner = this.state.selectedOption;
-    this.props.createWorkspace(owner.email);
-  } 
-
-  toggle = () => {
-    this.props.onAddWorkspace();
-  }
-
-  render() {
-    return (
-      <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('New DTable')}</ModalHeader>
-        <ModalBody>
-          <Select
-            isClearable
-            isMulti={false}
-            maxMenuHeight={200}
-            hideSelectedOptions={true}
-            components={makeAnimated()}
-            placeholder={gettext('Select a owner')}
-            options={this.state.options}
-            onChange={this.handleSelectChange}
-            components={{ NoOptionsMessage }}
-          />
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-CreateWorkspaceDialog.propTypes = propTypes;
-
-export default CreateWorkspaceDialog;