Update dtable UI (#4009)

* Dtable list page refactoring

* fix code

* fix bug

* fix style

* repair click range

* style

* optimization code

* style

* optimization code

* optimization code

* Variable name

* No Tables replace No tables

frontend/src/components/dialog/share-table-to-user.js

@@ -197,7 +197,7 @@ class ShareTableToUser extends React.Component {
                 <DtableSharePermissionEditor
                   isTextMode={false}
                   isEditIconShow={false}
-                  currentOption={this.state.permission}
+                  currentPermission={this.state.permission}
                   onPermissionChanged={this.setPermission}
                 />
               </td>

frontend/src/components/main-side-nav.js

@@ -199,7 +199,7 @@ class MainSideNav extends React.Component {
           <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={() => this.tabItemClick('dtable')}>
+              <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>

frontend/src/css/dtable-page.css

@@ -53,6 +53,8 @@
 }
 .workspace .table-heading {
   padding: 0.25rem;
+}
+.workspace .table-heading-border {
   border-bottom: 1px solid #e6e6e6;
 }
 .workspace .sf3-font {
@@ -61,4 +63,50 @@
 }
 .workspace .add-table-range:hover {
   background-color: #f8f8f8;
+}
+.workspace .table-item-container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.workspace .table-item-container .table-item {
+  width: 48%;
+  height: 2.5625rem;
+  padding: 0.5rem;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border-radius: 4px
+}
+.workspace .table-item .table-icon {
+  width: 9%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.workspace .table-item .table-name {
+  width: 76%;
+  height: 100%;
+}
+.workspace .table-item .table-dropdown-menu {
+  width: 15%;
+  height: 100%;
+  text-align: right;
+}
+.workspace .table-item .table-dropdown-menu .table-dropdown-menu-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.table-item-more-operation i {
+  color: #999;
+  cursor: pointer;
+}
+.table-item-more-operation a:hover {
+  text-decoration: none;
+}
+.table-item-more-operation i:hover {
+  color: #666;
 }

frontend/src/pages/dtable/dtable.js

@@ -1,291 +1,24 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap';
-import moment from 'moment';
+import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, siteRoot, username } from '../../utils/constants';
+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 DeleteTableDialog from '../../components/dialog/delete-table-dialog';
-import ShareTableDialog from '../../components/dialog/share-table-dialog';
-import ShareTableItem from './list-share-table';
-import Rename from '../../components/rename';
+import ShareTableItem from './share-table-item';
+import Workspace from './workspace';
 
 import '../../css/dtable-page.css';
 
-moment.locale(window.app.config.lang);
-
-
-const tablePropTypes = {
-  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 Table extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isTableRenaming: false,
-      isTableDeleting: false,
-      isTableSharing: false,
-      dropdownOpen: false,
-      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 });
-  }
-
-  onMouseEnter = () => {
-    if (this.props.isItemFreezed) return;
-    this.setState({
-      active: true
-    });
-  }
-
-  onMouseLeave = () => {
-    if (this.props.isItemFreezed) return;
-    this.setState({
-      active: false
-    });
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!nextProps.isItemFreezed) {
-      this.setState({ active: false });
-    }
-  }
-
-  render() {
-
-    let table = this.props.table;
-    let tableHref = siteRoot + 'workspace/' + this.props.workspaceID + '/dtable/' + table.name + '/';
-
-    return (
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={this.state.active ? 'tr-highlight' : ''}>
-        <td><span className="sf3-font sf3-font-form"></span></td>
-        <td>
-          {this.state.isTableRenaming &&
-            <Rename
-              hasSuffix={true}
-              name={table.name}
-              onRenameConfirm={this.onRenameTableConfirm}
-              onRenameCancel={this.onRenameTableCancel}
-            />
-          }
-          {!this.state.isTableRenaming &&
-            <a href={tableHref} target="_blank">{table.name}</a>
-          }
-        </td>
-        <td>{table.modifier}</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">
-              <DropdownToggle
-                tag='i'
-                className='fa fa-ellipsis-v cursor-pointer attr-action-icon'
-                title={gettext('More Operations')}
-                data-toggle="dropdown"
-                aria-expanded={this.state.dropdownOpen}
-              >
-              </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>
-              </DropdownMenu>
-            </Dropdown>
-          }
-          {this.state.isTableDeleting &&
-            <DeleteTableDialog
-              currentTable={table}
-              deleteCancel={this.onDeleteTableCancel}
-              handleSubmit={this.onDeleteTableSubmit}
-            />
-          }
-          {this.state.isTableSharing &&
-            <ShareTableDialog
-              currentTable={table}
-              ShareCancel={this.onShareTableCancel}
-            />
-          }
-        </td>
-      </tr>
-    );
-  }
-}
-
-Table.propTypes = tablePropTypes;
-
-
-const workspacePropTypes = {
-  workspace: PropTypes.object.isRequired,
-  setCurrentWorkspace: PropTypes.func.isRequired,
-  onAddDTable: PropTypes.func.isRequired,
-};
-
-class Workspace extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      tableList: this.props.workspace.table_list,
-      errorMsg: '',
-      isItemFreezed: false,
-    };
-  }
-
-  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();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.workspace.table_list !== this.props.workspace.table_list) {
-      this.setState({
-        tableList: nextProps.workspace.table_list
-      });
-    }
-  }
-
-  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">{isPersonal ? gettext('My Tables') : workspace.owner_name}</div>
-        {tableList.length > 0 ?
-          <table width="100%" className="table-vcenter">
-            <colgroup>
-              <col width="4%"/><col width="31%"/><col width="30%"/><col width="27%"/><col width="8%"/>
-            </colgroup>
-            <tbody>
-              {tableList.map((table, index) => {
-                return (
-                  <Table
-                    key={index}
-                    table={table}
-                    workspaceID={workspace.id}
-                    renameTable={this.renameTable}
-                    deleteTable={this.deleteTable}
-                    onFreezedItem={this.onFreezedItem}
-                    onUnfreezedItem={this.onUnfreezedItem}
-                    isItemFreezed={isItemFreezed}
-                  />
-                );
-              })}
-              <tr className={isItemFreezed ? '' : 'add-table-range'}>
-                <td><span className="sf3-font sf3-font-add"></span></td>
-                <td><a href="#" onClick={this.addTable}>{gettext('Add a table')}</a></td>
-                <td></td><td></td><td></td>
-              </tr>
-            </tbody>
-          </table>
-          :
-          <table width="100%" className="table-vcenter">
-            <tbody>
-              <tr><th className="text-center">{gettext('No tables')}</th></tr>
-            </tbody>
-          </table>
-        }
-      </div>
-    );
-  }
-}
-
-Workspace.propTypes = workspacePropTypes;
-
-
-const dtablePropTypes = {
+const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
 };
 
 class DTable extends Component {
+
   constructor(props) {
     super(props);
     this.state = {
@@ -299,10 +32,26 @@ class DTable extends Component {
     };
   }
 
+  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();
@@ -354,7 +103,7 @@ class DTable extends Component {
         });
       }
     });
-  };
+  }
 
   leaveShareTable = (table) => {
     let email = username;
@@ -374,56 +123,42 @@ class DTable extends Component {
         });
       }
     });
-  };
-
-  setCurrentWorkspace = (currentWorkspace) => {
-    this.setState({ currentWorkspace: currentWorkspace });
-  }
-
-  componentDidMount() {
-    this.listWorkspaces();
-    this.listSharedTables();
   }
 
   renderShareTablePanel = () => {
     return (
       <div className="workspace">
         <div className="table-heading">{gettext('Shared with me')}</div>
-        <table width="100%" className="table-vcenter">
-          <colgroup>
-            <col width="4%"/><col width="31%"/><col width="30%"/><col width="27%"/><col width="8%"/>
-          </colgroup>
-          <tbody>
-            {this.state.shareTableList.map((table, index) => {
-              return (
-                <ShareTableItem
-                  key={index}
-                  table={table}
-                  leaveShareTable={this.leaveShareTable}
-                />
-              );
-            })}
-          </tbody>
-        </table>
+        <div className="table-item-container">
+          {this.state.shareTableList.map((table, index) => {
+            return (
+              <ShareTableItem
+                key={index}
+                table={table}
+                leaveShareTable={this.leaveShareTable}
+              />
+            );
+          })}
+        </div>
       </div>
     );
-  };
-
-  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(<Loading />);
+    }
+
     return (
       <Fragment>
         <div className="main-panel-north border-left-show">
@@ -448,21 +183,18 @@ class DTable extends Component {
               <h3 className="sf-heading">DTable</h3>
             </div>
             <div className="cur-view-content">
-              {this.state.loading && <Loading />}
-              {(!this.state.loading && this.state.errorMsg) &&
+              {this.state.errorMsg &&
                 <p className="error text-center">{this.state.errorMsg}</p>
               }
-              {!this.state.loading &&
               <Workspace
-                workspace={personalWorkspace}
+                workspace={personalWorkspaceMessage}
                 onAddDTable={this.onAddDTable}
                 setCurrentWorkspace={this.setCurrentWorkspace}
               />
-              }
               {(!this.state.shareTableLoading && this.state.shareTableList.length > 0) &&
-              this.renderShareTablePanel()
+                this.renderShareTablePanel()
               }
-              {!this.state.loading &&
+              {
                 groupWorkspaceList.map((workspace, index) => {
                   return (
                     <Workspace
@@ -474,14 +206,14 @@ class DTable extends Component {
                   );
                 })
               }
-              {(!this.state.loading && this.state.isShowAddDTableDialog) &&
-              <div className="my-2">
-                <CreateTableDialog
-                  createDTable={this.createDTable}
-                  onAddDTable={this.onAddDTable}
-                  currentWorkspace={this.state.currentWorkspace}
-                />
-              </div>
+              {this.state.isShowAddDTableDialog &&
+                <div className="my-2">
+                  <CreateTableDialog
+                    createDTable={this.createDTable}
+                    onAddDTable={this.onAddDTable}
+                    currentWorkspace={this.state.currentWorkspace}
+                  />
+                </div>
               }
             </div>
           </div>
@@ -491,6 +223,6 @@ class DTable extends Component {
   }
 }
 
-DTable.propTypes = dtablePropTypes;
+DTable.propTypes = propTypes;
 
 export default DTable;

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 (
+      <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-form"></span></div>
+        <div className="table-name">
+          {this.state.isTableRenaming &&
+            <Rename
+              hasSuffix={true}
+              name={table.name}
+              onRenameConfirm={this.onRenameTableConfirm}
+              onRenameCancel={this.onRenameTableCancel}
+            />
+          }
+          {!this.state.isTableRenaming &&
+            <a href={tableHref} target="_blank">{table.name}</a>
+          }
+        </div>
+        <div className="table-dropdown-menu">
+          {this.state.active &&
+            <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="table-item-more-operation">
+              <DropdownToggle
+                tag='i'
+                className='fa fa-ellipsis-v cursor-pointer attr-action-icon table-dropdown-menu-icon'
+                title={gettext('More Operations')}
+                data-toggle="dropdown"
+                aria-expanded={this.state.dropdownOpen}
+              >
+              </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>
+              </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;
+
+export default ListTableItem;
+

frontend/src/pages/dtable/share-table-item.js

@@ -1,11 +1,9 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
 import {gettext, siteRoot} from '../../utils/constants';
 
 import '../../css/dtable-page.css';
 
-
 const shareTableItemPropTypes = {
   table: PropTypes.object.isRequired,
   leaveShareTable: PropTypes.func.isRequired,
@@ -42,24 +40,25 @@ class ShareTableItem extends Component {
     let tableHref = siteRoot + 'workspace/' + table.workspace_id + '/dtable/' + table.name + '/';
 
     return (
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={this.state.active ? 'tr-highlight' : ''}>
-        <td><span className="sf3-font sf3-font-form"></span></td>
-        <td><a href={tableHref} target="_blank">{table.name}</a></td>
-        <td>{table.from_user_name}</td>
-        <td>{moment(table.updated_at).fromNow()}</td>
-        <td>
+
+      <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-form"></span></div>
+        <div className="table-name">
+          <a href={tableHref} target="_blank">{table.name}</a>
+        </div>
+        <div className="table-dropdown-menu">
           <i
             className="action-icon sf2-icon-x3"
             title={gettext('Leave Share')}
             style={!this.state.active ? {opacity: 0} : {}}
             onClick={this.onLeaveShareTableSubmit}>
           </i>
-        </td>
-      </tr>
+        </div>
+      </div>
     );
   }
 }
 
 ShareTableItem.propTypes = shareTableItemPropTypes;
 
-export default ShareTableItem;
+export default ShareTableItem;

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(
+      <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;