update dtable module (#4097)

* update dtable module

* optimized code

* optimized code

frontend/config/webpack.config.dev.js

@@ -213,6 +213,11 @@ module.exports = {
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/pages/search",
+    ],
+    appDTable: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/app-dtable",
     ]
   },
 

frontend/config/webpack.config.prod.js

@@ -90,7 +90,8 @@ module.exports = {
     sysAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/sys-admin"],
     viewDataGrid: [require.resolve('./polyfills'), paths.appSrc + "/view-file-dtable.js"],
     viewCdoc: [require.resolve('./polyfills'), paths.appSrc + "/view-file-cdoc.js"],
-    search: [require.resolve('./polyfills'), paths.appSrc + "/pages/search"]
+    search: [require.resolve('./polyfills'), paths.appSrc + "/pages/search"],
+    appDTable: [require.resolve('./polyfills'), paths.appSrc + "/app-dtable"],
   },
 
   output: {

frontend/src/app-dtable.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SidePanel from './pages/dtable/side-panel';
+import MainPanel from './pages/dtable/main-panel';
+
+import './css/layout.css';
+import './css/side-panel.css';
+import './css/dtable.css';
+
+class AppDTable extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentTab: 'dtable',
+    }
+  }
+
+  componentDidMount() {
+    const seletedTabs = ['apps', 'templetes'];
+    let paths = location.href.split('/');
+    let tab = paths[paths.indexOf('dtable') + 1];
+    let currentTab = seletedTabs.indexOf(tab) > -1 ? tab : 'dtable';
+    this.setState({currentTab: currentTab});
+  }
+
+  onTabClick = (tab) => {
+    if (tab !== this.state.currentTab) {
+      this.setState({currentTab: tab});
+    }
+  }
+
+  render() {
+    return (
+      <div id="main">
+        <SidePanel currentTab={this.state.currentTab} onTabClick={this.onTabClick}></SidePanel>
+        <MainPanel></MainPanel>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <AppDTable />,
+  document.getElementById('wrapper')
+);

frontend/src/app.js

@@ -12,7 +12,6 @@ import DraftsView from './pages/drafts/drafts-view';
 import DraftContent from './pages/drafts/draft-content';
 import FilesActivities from './pages/dashboard/files-activities';
 import Starred from './pages/starred/starred';
-import DTable from './pages/dtable/dtable';
 import LinkedDevices from './pages/linked-devices/linked-devices';
 import editUtilties from './utils/editor-utilties';
 import ShareAdminLibraries from './pages/share-admin/libraries';
@@ -247,7 +246,6 @@ class App extends Component {
                 />
               </DraftsViewWrapper>
               <StarredWrapper path={siteRoot + 'starred'} 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/main-side-nav.js

@@ -77,6 +77,11 @@ class MainSideNav extends React.Component {
     this.props.tabItemClick(param, id);
   }
 
+  onDTableClick = () => {
+    let url = siteRoot + 'dtable/'
+    window.open(url);
+  }
+  
   getActiveClass = (tab) => {
     return this.props.currentTab === tab ? 'active' : '';
   }
@@ -198,15 +203,6 @@ class MainSideNav extends React.Component {
             </li>
           </ul>
 
-          <h3 className="sf-heading">{gettext('Database')}</h3>
-          <ul className="nav nav-pills flex-column nav-container">
-            <li className="nav-item">
-              <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="nav-text">DTable</span>
-              </Link>
-            </li>
-          </ul>
 
           <h3 className="sf-heading">{gettext('Tools')}</h3>
           <ul className="nav nav-pills flex-column nav-container">
@@ -267,6 +263,12 @@ class MainSideNav extends React.Component {
             </li>
           </ul>
         </div>
+
+        <div className="side-nav-link" onClick={this.onDTableClick}>
+          <span className="link-icon icon-left sf3-font sf3-font-dtable-logo" aria-hidden="true"></span>
+          <span className="link-text">Database</span>
+          <span className="link-icon icon-right sf3-font sf3-font-arrow"></span>
+        </div>
       </div>
     );
   }

frontend/src/css/dtable.css

@@ -1,3 +1,89 @@
+.side-panel-north, .main-panel-north {
+  background-color: #fff;
+  box-shadow: 0 2px 3px #eee;
+}
+
+.dtable-header {
+  height: 50px;
+}
+
+.dtable-header .dtable-logo {
+  padding-right: 6px;
+  font-size: 36px;
+  line-height: 36px;
+  color: #FEAC74;
+}
+
+.dtable-header .dtable-text {
+  display: flex;
+  align-items: center;
+  font-size: 1.25rem;
+  color: #555555;
+}
+
+.dtable-side-nav {
+  padding: 12px;
+}
+
+.dtable-nav-title {
+  font-size: 1rem;
+  color: #322;
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+.dtable-side-nav .dtable-nav-list {
+  flex-wrap: inherit;
+  height: auto;
+  border-bottom: none;
+}
+
+.dtable-nav-list .dtable-nav-item {
+  line-height: 38px;
+  border-radius: 0.25rem;
+}
+
+.dtable-nav-list .dtable-nav-item .dtable-nav-link {
+  margin: 0;
+  width: 100%;
+  color: #000;
+}
+
+.dtable-nav-list .dtable-nav-item .dtable-nav-link:hover {
+  background-color: #f5f5f5;
+}
+
+.dtable-nav-list .dtable-nav-item.active .dtable-nav-link {
+  color: #fff;
+  background-color: #F4A74C;
+}
+
+.dtable-nav-list .dtable-nav-link .nav-icon {
+  padding-right: 0.5rem;
+  font-size: 1.5rem;
+}
+
+.dtable-header .common-toolbar {
+  display: flex;
+  margin-left: auto;
+}
+
+.dtable-header .common-toolbar>div {
+  padding-right: 1rem;
+  cursor: pointer;
+}
+
+.dtable-center .cur-view-title {
+  line-height: 50px;
+  font-size: 1.5rem;
+  padding-left: 12px;
+  border-bottom: 1px solid #eee;
+}
+
+.dtable-center .dtable-add-btn {
+  width: 8rem;
+}
+
 .workspace {
   margin: 0.5rem 0;
 }
@@ -110,3 +196,6 @@
 .table-item-more-operation i:hover {
   color: #666;
 }
+
+
+

frontend/src/pages/dtable/dtable-item-common.js

@@ -1,81 +1,61 @@
 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 gettext = window.gettext;
+const siteRoot = window.app.config.siteRoot;
+
 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,
+  table: PropTypes.object.isRequired,
+  renameTable: PropTypes.func.isRequired,
+  onDeleteTableToggle: PropTypes.func.isRequired,
+  onShareTableToggle: PropTypes.func.isRequired,
+  onFreezedItem: PropTypes.func.isRequired,
+  onUnfreezedItem: PropTypes.func.isRequired,
 };
 
-class ListTableItem extends React.Component {
+class DTableItemCommon 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
-      });
+      this.setState({active: true});
     }
   }
 
   onMouseLeave = () => {
     if (!this.props.isItemFreezed) {
-      this.setState({
-        active: false
-      });
+      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();
+    this.onRenameTableToggle();
   }
   
-  onDeleteTableCancel = () => {
-    this.setState({isTableDeleting: !this.state.isTableDeleting});
+  onRenameTableToggle = () => {
+    this.setState({isTableRenaming: !this.state.isTableRenaming});
     this.props.onUnfreezedItem();
   }
 
-  onDeleteTableSubmit = () => {
-    let tableName = this.props.table.name;
-    this.props.deleteTable(tableName);
-    this.onDeleteTableCancel();
+  onDeleteTableToggle = () => {
+    this.props.onDeleteTableToggle(this.props.table);
   }
 
-  onShareTableCancel = () => {
-    this.setState({isTableSharing: !this.state.isTableSharing});
-    this.props.onUnfreezedItem();
+  onShareTableToggle = () => {
+    this.props.onShareTableToggle(this.props.table);
   }
 
   dropdownToggle = () => {
@@ -90,26 +70,24 @@ class ListTableItem extends React.Component {
   render() {
 
     let table = this.props.table;
-    let tableHref = siteRoot + 'workspace/' + this.props.workspaceID + '/dtable/' + table.name + '/';
+    let tableHref = siteRoot + 'workspace/' + table.workspace_id + '/dtable/' + table.name + '/';
 
     return (
-      <div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={ `table-item ${this.state.active ? 'tr-highlight' : ''}`}>
+      <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-table"></span></div>
         <div className="table-name">
-          {this.state.isTableRenaming &&
+          {this.state.isTableRenaming && (
             <Rename
               hasSuffix={true}
               name={table.name}
               onRenameConfirm={this.onRenameTableConfirm}
-              onRenameCancel={this.onRenameTableCancel}
+              onRenameCancel={this.onRenameTableToggle}
             />
-          }
-          {!this.state.isTableRenaming &&
-            <a href={tableHref} target="_blank">{table.name}</a>
-          }
+          )}
+          {!this.state.isTableRenaming && <a href={tableHref} target="_blank">{table.name}</a>}
         </div>
         <div className="table-dropdown-menu">
-          {this.state.active &&
+          {this.state.active && (
             <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="table-item-more-operation">
               <DropdownToggle
                 tag='i'
@@ -120,32 +98,19 @@ class ListTableItem extends React.Component {
               >
               </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>
+                <DropdownItem onClick={this.onRenameTableToggle}>{gettext('Rename')}</DropdownItem>
+                <DropdownItem onClick={this.onDeleteTableToggle}>{gettext('Delete')}</DropdownItem>
+                <DropdownItem onClick={this.onShareTableToggle}>{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;
+DTableItemCommon.propTypes = propTypes;
 
-export default ListTableItem;
+export default DTableItemCommon;
 

frontend/src/pages/dtable/dtable-item-shared.js

@@ -1,15 +1,15 @@
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {gettext, siteRoot} from '../../utils/constants';
 
-import '../../css/dtable-page.css';
+const gettext = window.gettext;
+const { siteRoot } = window.app.config;
 
-const shareTableItemPropTypes = {
+const propTypes = {
   table: PropTypes.object.isRequired,
   leaveShareTable: PropTypes.func.isRequired,
 };
 
-class ShareTableItem extends Component {
+class DTableItemShared extends React.Component {
 
   constructor(props) {
     super(props);
@@ -18,21 +18,18 @@ class ShareTableItem extends Component {
     };
   }
 
-  onLeaveShareTableSubmit = () => {
-    let table = this.props.table;
-    this.props.leaveShareTable(table);
-  };
   
   onMouseEnter = () => {
-    this.setState({
-      active: true
-    });
+    this.setState({active: true});
   };
   
   onMouseLeave = () => {
-    this.setState({
-      active: false
-    });
+    this.setState({active: false});
+  };
+  
+  onLeaveShareTableSubmit = () => {
+    let table = this.props.table;
+    this.props.leaveShareTable(table);
   };
   
   render() {
@@ -59,6 +56,6 @@ class ShareTableItem extends Component {
   }
 }
 
-ShareTableItem.propTypes = shareTableItemPropTypes;
+DTableItemShared.propTypes = propTypes;
 
-export default ShareTableItem;
+export default DTableItemShared;

frontend/src/pages/dtable/dtable-workspace-common.js

@@ -0,0 +1,192 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { seafileAPI } from '../../utils/seafile-api';
+import Loading from '../../components/loading';
+import DTableItemCommon from './dtable-item-common';
+import CreateTableDialog from '../../components/dialog/create-table-dialog';
+import DeleteTableDialog from '../../components/dialog/delete-table-dialog';
+import ShareTableDialog from '../../components/dialog/share-table-dialog';
+
+const gettext = window.gettext;
+
+const propTypes = {
+  workspace: PropTypes.object.isRequired,
+};
+
+class DTableWorkspaceCommon extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tableList: [],
+      isDataLoading: true,
+      isItemFreezed: false,
+      isShowCreateDialog: false,
+      isShowDeleteDialog: false,
+      isShowSharedDialog: false,
+      currentTable: null,
+    }
+  }
+
+  componentDidMount() {
+    let workspace = this.props.workspace;
+    let tableList = workspace.table_list;
+    this.setState({
+      tableList: tableList,
+      isDataLoading: false,
+    });
+  }
+  
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.workspace !== this.props.workspace) {
+      let workspace = nextProps.workspace;
+      let tableList = workspace.table_list;
+      this.setState({tableList: tableList});
+    }
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  onCreateTableToggle = () => {
+    this.setState({isShowCreateDialog: !this.state.isShowCreateDialog});
+  }
+
+  onDeleteTableToggle = (table) => {
+    this.setState({
+      isShowDeleteDialog: !this.state.isShowDeleteDialog,
+      currentTable: table
+    });
+    this.onUnfreezedItem();
+  }
+
+  onDeleteTableSubmit = () => {
+    let tableName = this.state.currentTable.name;
+    this.deleteTable(tableName);
+    this.onDeleteTableToggle();
+  }
+  
+  onShareTableToggle = (table) => {
+    this.setState({
+      isShowSharedDialog: !this.state.isShowSharedDialog,
+      currentTable: table
+    });
+    this.onUnfreezedItem();
+  }
+
+  onCreateTable = (tableName, owner) => {
+    seafileAPI.createTable(tableName, owner).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.onCreateTableToggle();
+  }
+
+  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')});
+      }
+    });
+  }
+
+  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')});
+      }
+    });
+  }
+
+  render() {
+    let { isDataLoading } = this.state;
+    if (isDataLoading) {
+      return <Loading />
+    }
+
+    let { workspace } = this.props;
+    let { tableList, isItemFreezed } = this.state;
+    let isPersonal = workspace.owner_type === 'Personal';
+
+    return (
+      <Fragment>
+        <div className="workspace">
+          <div className="table-heading">{isPersonal ? gettext('My Tables') : workspace.owner_name}</div>
+          <div className="table-item-container">
+            {tableList.map((table, index) => {
+              return (
+                <DTableItemCommon
+                  key={index}
+                  table={table}
+                  isItemFreezed={isItemFreezed}
+                  renameTable={this.renameTable}
+                  onShareTableToggle={this.onShareTableToggle}
+                  onDeleteTableToggle={this.onDeleteTableToggle}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                />
+              );
+            })}
+            <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.onCreateTableToggle}>{gettext('Add a table')}</a></div>
+              <div className="table-dropdown-menu"></div>
+            </div>
+          </div>
+        </div>
+        {this.state.isShowCreateDialog && (
+          <CreateTableDialog
+            createDTable={this.onCreateTable}
+            onAddDTable={this.onCreateTableToggle}
+            currentWorkspace={this.props.workspace}
+          />
+        )}
+        {this.state.isShowDeleteDialog && (
+          <DeleteTableDialog 
+            currentTable={this.state.currentTable} 
+            deleteCancel={this.onDeleteTableToggle} 
+            handleSubmit={this.onDeleteTableSubmit} 
+          />
+        )}
+        {this.state.isShowSharedDialog &&
+          <ShareTableDialog 
+            currentTable={this.state.currentTable} 
+            ShareCancel={this.onShareTableToggle} 
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+
+DTableWorkspaceCommon.propTypes = propTypes;
+
+export default DTableWorkspaceCommon;

frontend/src/pages/dtable/dtable-workspace-shared.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DTableItemShared from './dtable-item-shared';
+import Loading from '../../components/loading';
+import { seafileAPI } from '../../utils/seafile-api';
+
+const gettext = window.gettext;
+const username = window.app.pageOptions.username;
+
+const propTypes = {
+  tableList: PropTypes.array.isRequired,
+};
+
+class DTableWorkspaceShared extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDataLoading: true,
+      tableList: [],
+    };
+  }
+
+  componentDidMount() {
+    let tableList = this.props.tableList;
+    this.setState({
+      isDataLoading: false,
+      tableList: tableList,
+    });
+  }
+
+  leaveShareTable = (table) => {
+    let email = username;
+    let tableName = table.name;
+    let workspaceID = table.workspace_id;
+    seafileAPI.deleteTableShare(workspaceID, tableName, email).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')});
+      } else {
+        this.setState({
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  render() {
+    if (this.state.isDataLoading) {
+      return <Loading />
+    }
+
+    if (!this.state.tableList.length) {
+      return "";
+    }
+
+    return (
+      <div className="workspace">
+        <div className="table-heading">{gettext('Shared with me')}</div>
+        <div className="table-item-container">
+          {this.state.tableList.map((table, index) => {
+            return (
+              <DTableItemShared key={index} table={table} leaveShareTable={this.leaveShareTable} />
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+
+DTableWorkspaceShared.propTypes = propTypes;
+
+export default DTableWorkspaceShared;

frontend/src/pages/dtable/dtable.js

@@ -1,228 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-import { Button } from 'reactstrap';
-import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, username } from '../../utils/constants';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
-import Loading from '../../components/loading';
-import CreateTableDialog from '../../components/dialog/create-table-dialog';
-import ShareTableItem from './share-table-item';
-import Workspace from './workspace';
-
-import '../../css/dtable-page.css';
-
-const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
-};
-
-class DTable extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: true,
-      shareTableLoading: true,
-      errorMsg: '',
-      workspaceList: [],
-      shareTableList: [],
-      isShowAddDTableDialog: false,
-      currentWorkspace: null,
-    };
-  }
-
-  componentDidMount() {
-    this.listWorkspaces();
-    this.listSharedTables();
-  }
-
-  onAddDTable = () => {
-    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) => {
-    seafileAPI.createTable(tableName, owner).then(() => {
-      this.listWorkspaces();
-    }).catch((error) => {
-      if(error.response) {
-        this.setState({errorMsg: gettext('Error')});
-      }
-    });
-    this.onAddDTable();
-  }
-
-  listWorkspaces = () => {
-    seafileAPI.listWorkspaces().then((res) => {
-      this.setState({
-        loading: false,
-        workspaceList: res.data.workspace_list,
-      });
-    }).catch((error) => {
-      if (error.response) {
-        this.setState({
-          loading: false,
-          errorMsg: gettext('Error')
-        });
-      } else {
-        this.setState({
-          loading: false,
-          errorMsg: gettext('Please check the network.')
-        });
-      }
-    });
-  }
-
-  listSharedTables = () => {
-    seafileAPI.listSharedTables().then((res) => {
-      this.setState({
-        shareTableLoading: false,
-        shareTableList: res.data.table_list,
-      });
-    }).catch((error) => {
-      if (error.response) {
-        this.setState({
-          shareTableLoading: false,
-          errorMsg: gettext('Error')
-        });
-      } else {
-        this.setState({
-          shareTableLoading: false,
-          errorMsg: gettext('Please check the network.')
-        });
-      }
-    });
-  }
-
-  leaveShareTable = (table) => {
-    let email = username;
-    let tableName = table.name;
-    let workspaceID = table.workspace_id;
-    seafileAPI.deleteTableShare(workspaceID, tableName, email).then(() => {
-      let shareTableList = this.state.shareTableList.filter(table => {
-        return table.name !== tableName;
-      });
-      this.setState({shareTableList: shareTableList});
-    }).catch((error) => {
-      if(error.response) {
-        this.setState({errorMsg: gettext('Error')});
-      } else {
-        this.setState({
-          errorMsg: gettext('Please check the network.')
-        });
-      }
-    });
-  }
-
-  renderShareTablePanel = () => {
-    return (
-      <div className="workspace">
-        <div className="table-heading">{gettext('Shared with me')}</div>
-        <div className="table-item-container">
-          {this.state.shareTableList.map((table, index) => {
-            return (
-              <ShareTableItem
-                key={index}
-                table={table}
-                leaveShareTable={this.leaveShareTable}
-              />
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    const { workspaceList, loading } = this.state;
-
-    let personalWorkspaceList = workspaceList.filter(workspace => {
-      return workspace.owner_type === 'Personal';
-    });
-    let personalWorkspaceMessage = personalWorkspaceList[0];
-    let groupWorkspaceList = workspaceList.filter(workspace => {
-      return workspace.owner_type === 'Group';
-    });
-
-    if (loading) {
-      return(<Loading />);
-    }
-
-    return (
-      <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>
-                <MediaQuery query="(min-width: 768px)">
-                  <Button className="btn btn-secondary operation-item" onClick={this.newDtable}>{gettext('New DTable')}</Button>
-                </MediaQuery>
-                <MediaQuery query="(max-width: 767.8px)">
-                  <Button className="btn btn-secondary operation-item my-1" onClick={this.newDtable}>{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.errorMsg &&
-                <p className="error text-center">{this.state.errorMsg}</p>
-              }
-              <Workspace
-                workspace={personalWorkspaceMessage}
-                onAddDTable={this.onAddDTable}
-                setCurrentWorkspace={this.setCurrentWorkspace}
-              />
-              {(!this.state.shareTableLoading && this.state.shareTableList.length > 0) &&
-                this.renderShareTablePanel()
-              }
-              {
-                groupWorkspaceList.map((workspace, index) => {
-                  return (
-                    <Workspace
-                      key={index}
-                      workspace={workspace}
-                      onAddDTable={this.onAddDTable}
-                      setCurrentWorkspace={this.setCurrentWorkspace}
-                    />
-                  );
-                })
-              }
-              {this.state.isShowAddDTableDialog &&
-                <div className="my-2">
-                  <CreateTableDialog
-                    createDTable={this.createDTable}
-                    onAddDTable={this.onAddDTable}
-                    currentWorkspace={this.state.currentWorkspace}
-                  />
-                </div>
-              }
-            </div>
-          </div>
-        </div>
-      </Fragment>
-    );
-  }
-}
-
-DTable.propTypes = propTypes;
-
-export default DTable;

frontend/src/pages/dtable/main-panel-apps.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+
+};
+
+class MainPanelApps extends React.Component {
+
+  render() {
+    return (
+      <div>apps</div>
+    );
+  }
+}
+
+MainPanelApps.propTypes = propTypes;
+
+export default MainPanelApps;

frontend/src/pages/dtable/main-panel-dtables.js

@@ -0,0 +1,139 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Loading from '../../components/loading';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Workspace from './model/workspace';
+import DTableWorkspaceCommon from './dtable-workspace-common';
+import DTableWorkspaceShared from './dtable-workspace-shared';
+import CreateTableDialog from '../../components/dialog/create-table-dialog';
+
+const propTypes = {
+
+};
+
+class MainPanelDTables extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      errorMsg: null,
+      workspaceList: [],
+      sharedTableList: [],
+      isWorkspaceListLoading: true,
+      isSharedTableListLoading: true,
+      isShowCreateDialog: false
+    }
+  }
+
+  componentDidMount() {
+    this.loadWorkspaceList();
+    this.loadSharedTableList();
+  }
+
+  loadWorkspaceList = () => {
+    seafileAPI.listWorkspaces().then((res) => {
+      let workspaceList = res.data.workspace_list.map(item => {
+        return new Workspace(item);
+      });
+      this.setState({
+        isWorkspaceListLoading: false,
+        workspaceList: workspaceList,
+      });
+    }).catch((error) => {
+      this.errorCallbackHandle(error);
+    });
+  }
+
+  loadSharedTableList = () => {
+    seafileAPI.listSharedTables().then((res) => {
+      this.setState({
+        isSharedTableListLoading: false,
+        sharedTableList: res.data.table_list,
+      });
+    }).catch((error) => {
+      this.errorCallbackHandle(error);
+    });
+  }
+
+  errorCallbackHandle = (error) => {
+    if (error.response) {
+      this.setState({
+        loading: false,
+        errorMsg: gettext('Error')
+      });
+    } else {
+      this.setState({
+        loading: false,
+        errorMsg: gettext('Please check the network.')
+      });
+    }
+  }
+
+  onCreateTableToggle = () => {
+    this.setState({isShowCreateDialog: !this.state.isShowCreateDialog});
+  }
+
+  onCreateTable = (tableName, owner) => {
+    seafileAPI.createTable(tableName, owner).then(() => {
+      this.loadWorkspaceList();
+    }).catch((error) => {
+      if(error.response) {
+        this.setState({errorMsg: gettext('Error')});
+      }
+    });
+
+    this.onCreateTableToggle();
+  }
+
+  render() {
+    let { isWorkspaceListLoading, isSharedTableListLoading } = this.state;
+    if (isWorkspaceListLoading || isSharedTableListLoading) {
+      return <Loading />
+    }
+
+    let { workspaceList, sharedTableList } = this.state;
+    let personalWorkspace = workspaceList.find(workspace => {
+      return workspace.owner_type === 'Personal';
+    });
+
+    let groupWorkspaceList = workspaceList.filter(workspace => {
+      return workspace.owner_type === 'Group';
+    });
+
+    return (
+      <Fragment>
+        <div className="main-panel-center dtable-center">
+          <div className="main-panel-container d-flex flex-1 flex-column">
+            <div className="cur-view-title">DTable</div>
+            <div className="cur-view-content">
+              {this.state.errorMsg &&
+                <p className="error text-center">{this.state.errorMsg}</p>
+              }
+              {!this.state.errorMsg && (
+                <Fragment>
+                  <DTableWorkspaceCommon workspace={personalWorkspace} />
+                  <DTableWorkspaceShared tableList={sharedTableList} />
+                  {groupWorkspaceList.length > 0 && groupWorkspaceList.map((workspace, index) => {
+                    return (<DTableWorkspaceCommon key={index} workspace={workspace} />)
+                  })}
+                  <button className="btn btn-secondary dtable-add-btn mb-4" onClick={this.onCreateTableToggle}>{gettext('New DTable')}</button>
+                </Fragment>
+              )}
+            </div>
+          </div>
+        </div>
+        {this.state.isShowCreateDialog && (
+          <CreateTableDialog
+            createDTable={this.onCreateTable}
+            onAddDTable={this.onCreateTableToggle}
+          />
+        )}
+      </Fragment>
+    );
+  }
+}
+
+MainPanelDTables.propTypes = propTypes;
+
+export default MainPanelDTables;

frontend/src/pages/dtable/main-panel-templetes.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+
+};
+
+class MainPanelTempletes extends React.Component {
+
+  render() {
+    return (
+      <div>templetes</div>
+    );
+  }
+}
+
+MainPanelTempletes.propTypes = propTypes;
+
+export default MainPanelTempletes;

frontend/src/pages/dtable/main-panel.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Router } from '@reach/router'
+import MainPanelDTables from './main-panel-dtables';
+import MainPanelApps from './main-panel-apps';
+import MainPanelTempletes from './main-panel-templetes';
+
+
+const siteRoot = window.app.config.siteRoot;
+
+
+const propTypes = {
+
+};
+
+class MainPanel extends React.Component {
+
+  render() {
+    return (
+      <div className="main-panel">
+        <div className="main-panel-north dtable-header">
+          <div className="common-toolbar">
+            <div className="search" title={'Search'}>Search</div>
+            <div className="notification" title={'Notification'}>Notification</div>
+            <div className="avatar" title={'Avatar'}></div>
+          </div>
+        </div>
+        <Router className="reach-router">
+          <MainPanelDTables path={siteRoot + 'dtable/'} />
+          <MainPanelApps path={siteRoot + 'dtable/apps/'} />
+          <MainPanelTempletes path={siteRoot + 'dtable/templetes/'} />
+        </Router>
+      </div>
+    );
+  }
+}
+
+MainPanel.propTypes = propTypes;
+
+export default MainPanel;

frontend/src/pages/dtable/model/workspace.js

@@ -0,0 +1,12 @@
+class Workspace {
+
+  constructor(obj) {
+    this.id = obj.id || '';
+    this.owner_name = obj.owner_name || '';
+    this.owner_type = obj.owner_type || '';
+    this.table_list = obj.table_list || [];
+  }
+
+}
+
+export default Workspace;

frontend/src/pages/dtable/side-panel.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+
+const gettext = window.gettext;
+const siteRoot = window.app.config.siteRoot;
+
+const propTypes = {
+  currentTab: PropTypes.string.isRequired,
+  onTabClick: PropTypes.func.isRequired,
+};
+
+class SidePanel extends React.Component {
+
+  onTabClick = (tab) => {
+    this.props.onTabClick(tab);
+  }
+
+  getActiveClass = (tab) => {
+    return this.props.currentTab === tab ? 'active' : '';
+  }
+
+  render() {
+
+    return (
+      <div className="side-panel">
+        <div className="side-panel-north dtable-header">
+          <i className="sf3-font sf3-font-dtable-logo dtable-logo"></i>
+          <span className="dtable-text">DTable</span>
+        </div>
+        <div className="side-panel-center">
+          <div className="dtable-side-nav">
+            <h3 className="dtable-nav-title">{gettext('Main')}</h3>
+            <ul className="nav nav-pills flex-column dtable-nav-list">
+              <li className={`nav-item dtable-nav-item ${this.getActiveClass('dtable')}`} title={gettext('DTable')} onClick={this.onTabClick.bind(this, 'dtable')}>
+                <Link to={siteRoot + 'dtable/'} className="nav-link dtable-nav-link">
+                  <span className="sf3-font sf3-font-dtable-logo nav-icon"></span>
+                  <span className="nav-text">{gettext('DTable')}</span>
+                </Link>
+              </li>
+              <li className={`nav-item dtable-nav-item ${this.getActiveClass('apps')}`} title={gettext('Apps')} onClick={this.onTabClick.bind(this, 'apps')}>
+                <Link to={siteRoot + 'dtable/apps/'} className="nav-link dtable-nav-link">
+                  <span className="dtable-font dtable-icon-apps nav-icon"></span>
+                  <span className="nav-text">{gettext('Apps')}</span>
+                </Link>
+              </li>
+              <li className={`nav-item dtable-nav-item ${this.getActiveClass('templetes')}`} title={gettext('Templetes')} onClick={this.onTabClick.bind(this, 'templetes')}>
+                <Link to={siteRoot + 'dtable/templetes/'} className="nav-link dtable-nav-link">
+                  <span className="dtable-font dtable-icon-templates nav-icon"></span>
+                  <span className="nav-text">{gettext('Templetes')}</span>
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+SidePanel.propTypes = propTypes;
+
+export default SidePanel;

frontend/src/pages/dtable/workspace.js

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

media/css/seahub_react.css

@@ -579,6 +579,37 @@ ul,ol,li {
     padding:12px;
 }
 
+.side-nav-link {
+    display: flex;
+    margin: 24px 12px;
+    color: #FFFFFF;
+    border-radius: 0.25rem;
+    background-color: #FEAC74;
+}
+
+.side-nav-link:hover {
+    background-color: #F3985A;
+    cursor: pointer;
+}
+
+.side-nav-link .link-icon {
+    padding: 0 0.5rem;
+    font-size: 1.5rem;
+}
+
+.side-nav-link .link-icon.icon-right {
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+}
+
+.side-nav-link .link-text {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    padding-left: 0.25rem;
+}
+
 .side-nav-footer {
     display:flex;
     flex-shrink:0;

seahub/templates/react_dtable.html

@@ -0,0 +1,55 @@
+{% load seahub_tags i18n staticfiles %}
+{% load render_bundle from webpack_loader %}
+
+<!DOCTYPE html>
+<html lang="{{ LANGUAGE_CODE }}">
+<head>
+<title>DTable</title>
+<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+<meta http-equiv="x-ua-compatible" content="ie=edge" />
+<link rel="shortcut icon" href="{{ MEDIA_URL }}{% if filetype == 'dtable' %}{{ dtable_favicon_path }}{% else %}{{ favicon_path }}{% endif %}" />
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub_react.css" />
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/dtable-font.css" />
+{% render_bundle 'appDTable' 'css' %}
+{% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %}
+{% if enable_branding_css %}<link rel="stylesheet" type="text/css" href="{% url 'custom_css' %}" />{% endif %}
+</head>
+
+<body>
+    <div id="wrapper" class="{{ LANGUAGE_CODE }}"></div>
+    <div id="modal-wrapper" class="{{ LANGUAGE_CODE }}"></div>
+
+<script type="text/javascript">
+    window.app = {
+        config: {
+            siteRoot: '{{ SITE_ROOT }}',
+        },
+        pageOptions: {
+            server: '{{ service_url }}',
+            csrfToken: "{{ csrf_token }}",
+            name: "{{request.user.username|email2nickname|escapejs}}",
+            username: "{{request.user.username|escapejs}}",
+            contactEmail: "{{request.user.username|email2contact_email|escapejs}}",
+
+            fileName: '{{ filename|escapejs }}',
+            filePath: '{{ path|escapejs }}',
+            workspaceID: '{{ workspace_id }}',
+            dtableUuid: '{{ dtable_uuid }}',
+            mediaUrl: '{{ media_url }}',
+            dtableServer: '{{ dtable_server }}',
+            dtableSocket: '{{ dtable_socket }}',
+            lang: '{{ LANGUAGE_CODE }}'
+        }
+     };
+</script>
+<script src="{{ STATIC_URL }}scripts/i18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
+{% render_bundle 'commons' %}
+{% render_bundle 'appDTable' 'js' %}
+</body>
+</html>
+

seahub/urls.py

@@ -237,7 +237,9 @@ urlpatterns = [
     url(r'^my-libs/deleted/$', react_fake_view, name="my_libs_deleted"),
     url(r'^org/$', react_fake_view, name="org"),
     url(r'^invitations/$', react_fake_view, name="invitations"),
-    url(r'^dtable/$', react_fake_view, name='dtable'),
+    url(r'^dtable/$', dtable_fake_view, name='dtable'),
+    url(r'^dtable/apps/$', dtable_fake_view, name='dtable'),
+    url(r'^dtable/templetes/$', dtable_fake_view, name='dtable'),
 
     ### Ajax ###
     url(r'^ajax/repo/(?P<repo_id>[-0-9a-f]{36})/dirents/$', get_dirents, name="get_dirents"),

seahub/views/__init__.py

@@ -1269,3 +1269,7 @@ def react_fake_view(request, **kwargs):
         'folder_perm_enabled': folder_perm_enabled,
         'file_audit_enabled' : FILE_AUDIT_ENABLED
     })
+
+@login_required
+def dtable_fake_view(request, **kwargs):
+    return render(request, 'react_dtable.html')