dtable interface

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

@@ -0,0 +1,109 @@
+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 = {
+  createTable: PropTypes.func.isRequired,
+  onAddTable: PropTypes.func.isRequired,
+};
+
+class CreateTableDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tableName: '',
+      errMessage: '',
+      isSubmitBtnActive: false,
+    };
+    this.newInput = React.createRef();
+  }
+
+  componentDidMount() {
+    this.newInput.focus();
+    this.newInput.setSelectionRange(0,0);
+  }
+
+  handleChange = (e) => {
+    if (!e.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
+    this.setState({
+      tableName: e.target.value, 
+    }) ;
+  }
+
+  handleSubmit = () => {
+    if (!this.state.isSubmitBtnActive) {
+      return;
+    }
+
+    let isValid = this.validateInputParams();
+    if (isValid) {
+      let newName = this.state.tableName.trim();
+      this.props.createTable(newName);
+    }
+  }
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+      e.preventDefault();
+    }
+  }
+
+  toggle = () => {
+    this.props.onAddTable();
+  }
+
+  validateInputParams = () => {
+    let errMessage = '';
+    let tableName = this.state.tableName.trim();
+    if (!tableName.length) {
+      errMessage = gettext('Name is required');
+      this.setState({errMessage: errMessage});
+      return false;
+    }
+    if (tableName.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 Table')}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <Label for="tableName">{gettext('Name')}</Label>
+              <Input 
+                id="tableName" 
+                onKeyPress={this.handleKeyPress} 
+                innerRef={input => {this.newInput = input;}} 
+                value={this.state.tableName} 
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+          </Form>
+          {this.state.errMessage && <Alert color="danger" className="mt-2">{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>
+    );
+  }
+}
+
+CreateTableDialog.propTypes = propTypes;
+
+export default CreateTableDialog;

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

@@ -5,11 +5,11 @@ import { gettext } from '../../utils/constants';
 
 
 const propTypes = {
-  createWorkSpace: PropTypes.func.isRequired,
-  onCreateToggle: PropTypes.func.isRequired,
+  createWorkspace: PropTypes.func.isRequired,
+  onAddWorkspace: PropTypes.func.isRequired,
 };
 
-class CreateWorkSpaceDialog extends React.Component {
+class CreateWorkspaceDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -34,7 +34,7 @@ class CreateWorkSpaceDialog extends React.Component {
     let isValid= this.validateInputParams();
     if (isValid) {
       let workspaceName = this.state.workspaceName.trim();
-      this.props.createWorkSpace(workspaceName);
+      this.props.createWorkspace(workspaceName);
     }
   } 
 
@@ -46,7 +46,7 @@ class CreateWorkSpaceDialog extends React.Component {
   }
 
   toggle = () => {
-    this.props.onCreateToggle();
+    this.props.onAddWorkspace();
   }
 
   componentDidMount() {
@@ -72,7 +72,7 @@ class CreateWorkSpaceDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext('New Workspace')}</ModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
@@ -97,6 +97,6 @@ class CreateWorkSpaceDialog extends React.Component {
   }
 }
 
-CreateWorkSpaceDialog.propTypes = propTypes;
+CreateWorkspaceDialog.propTypes = propTypes;
 
-export default CreateWorkSpaceDialog;
+export default CreateWorkspaceDialog;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const propTypes = {
+  currentTable: PropTypes.object.isRequired,
+  deleteCancel: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+};
+
+class DeleteTableDialog extends React.Component {
+
+  toggle = () => {
+    this.props.deleteCancel();
+  }
+  
+  render() {
+    let currentTable = this.props.currentTable;
+    let name = currentTable.name;
+
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Delete Table')}</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>
+    );
+  }
+}
+
+DeleteTableDialog.propTypes = propTypes;
+
+export default DeleteTableDialog;

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

@@ -0,0 +1,39 @@
+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;