update share dtable list

frontend/src/components/dialog/leave-share-table-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 = {
-  currentTable: PropTypes.object.isRequired,
-  leaveShareCancel: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-};
-
-class LeaveShareTableDialog extends React.Component {
-
-  toggle = () => {
-    this.props.leaveShareCancel();
-  };
-
-  render() {
-    let currentTable = this.props.currentTable;
-    let name = currentTable.name;
-
-    return (
-      <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Leave Share Table')}</ModalHeader>
-        <ModalBody>
-          <p>{gettext('Are you sure to leave share')}{' '}<b>{name}</b> ?</p>
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.props.handleSubmit}>{gettext('Submit')}</Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-LeaveShareTableDialog.propTypes = propTypes;
-
-export default LeaveShareTableDialog;

frontend/src/pages/dtable/dtable.js

@@ -9,9 +9,10 @@ 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 LeaveShareTableDialog from '../../components/dialog/leave-share-table-dialog';
+import ShareTableDialog from '../../components/dialog/share-table-dialog';
-import ShareTableDialog from '../../components/dialog/share-table-dialog'
+import ShareTableItem from './list-share-table';
 import Rename from '../../components/rename';
+
 import '../../css/dtable-page.css';
 
 moment.locale(window.app.config.lang);
@@ -22,13 +23,10 @@ const tablePropTypes = {
   workspaceID: PropTypes.number.isRequired,
   renameTable: PropTypes.func.isRequired,
   deleteTable: PropTypes.func.isRequired,
-  leaveShareTable: PropTypes.func.isRequired,
   onUnfreezedItem: PropTypes.func.isRequired,
   onFreezedItem: PropTypes.func.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
-  fromShare: PropTypes.bool.isRequired,
+  isPersonal: PropTypes.bool.isRequired,
-  fromPersonal: PropTypes.bool.isRequired,
-  fromGroup: PropTypes.bool.isRequired,
 };
 
 class Table extends Component {
@@ -39,7 +37,6 @@ class Table extends Component {
       isTableRenaming: false,
       isTableDeleting: false,
       isTableSharing: false,
-      isTableLeaveSharing: false,
       dropdownOpen: false,
       active: false,
     };
@@ -61,26 +58,15 @@ class Table extends Component {
     this.props.onUnfreezedItem();
   }
 
-  onShareTableCancel = () => {
-    this.setState({isTableSharing: !this.state.isTableSharing});
-    this.props.onUnfreezedItem();
-  }
-
-  onLeaveShareTableCancel = () => {
-    this.setState({isTableLeaveSharing: !this.state.isTableLeaveSharing});
-    this.props.onUnfreezedItem();
-  }
-
   onDeleteTableSubmit = () => {
     let tableName = this.props.table.name;
     this.props.deleteTable(tableName);
     this.onDeleteTableCancel();
   }
 
-  onLeaveShareTableSubmit = () => {
+  onShareTableCancel = () => {
-    let tableName = this.props.table.name;
+    this.setState({isTableSharing: !this.state.isTableSharing});
-    this.props.leaveShareTable(tableName);
+    this.props.onUnfreezedItem();
-    this.onLeaveShareTableCancel();
   }
 
   dropdownToggle = () => {
@@ -116,9 +102,6 @@ class Table extends Component {
 
     let table = this.props.table;
     let tableHref = siteRoot + 'workspace/' + this.props.workspaceID + '/dtable/' + table.name + '/';
-    let fromShare = this.props.fromShare;
-    let fromPersonal = this.props.fromPersonal;
-    let fromGroup = this.props.fromGroup;
 
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={this.state.active ? 'tr-highlight' : ''}>
@@ -150,18 +133,11 @@ class Table extends Component {
               >
               </DropdownToggle>
               <DropdownMenu className="drop-list" right={true}>
-                {(fromPersonal || fromGroup) &&
                 <DropdownItem onClick={this.onRenameTableCancel}>{gettext('Rename')}</DropdownItem>
-                }
-                {(fromPersonal || fromGroup) &&
                 <DropdownItem onClick={this.onDeleteTableCancel}>{gettext('Delete')}</DropdownItem>
-                }
+                {this.props.isPersonal &&
-                {fromPersonal &&
                 <DropdownItem onClick={this.onShareTableCancel}>{gettext('Share')}</DropdownItem>
                 }
-                {fromShare &&
-                <DropdownItem onClick={this.onLeaveShareTableCancel}>{gettext('Leave Share')}</DropdownItem>
-                }
               </DropdownMenu>
             </Dropdown>
           }
@@ -172,13 +148,6 @@ class Table extends Component {
               handleSubmit={this.onDeleteTableSubmit}
             />
           }
-          {this.state.isTableLeaveSharing &&
-            <LeaveShareTableDialog
-              currentTable={table}
-              leaveShareCancel={this.onLeaveShareTableCancel}
-              handleSubmit={this.onLeaveShareTableSubmit}
-            />
-          }
           {this.state.isTableSharing &&
             <ShareTableDialog
               currentTable={table}
@@ -196,7 +165,6 @@ Table.propTypes = tablePropTypes;
 
 const workspacePropTypes = {
   workspace: PropTypes.object.isRequired,
-  fromShare: PropTypes.bool.isRequired,
 };
 
 class Workspace extends Component {
@@ -249,21 +217,6 @@ class Workspace extends Component {
     });
   }
 
-  leaveShareTable = (tableName) => {
-    let email = username;
-    let workspaceID = this.props.workspace.id;
-    seafileAPI.deleteShareTable(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')});
-      }
-    });
-  }
-
   componentWillReceiveProps(nextProps) {
     if (nextProps.workspace.table_list !== this.props.workspace.table_list) {
       this.setState({
@@ -274,16 +227,11 @@ class Workspace extends Component {
 
   render() {
     let workspace = this.props.workspace;
-    let fromShare = this.props.fromShare;
+    let isPersonal = workspace.owner_type === 'Personal';
-    let fromPersonal = !fromShare && workspace.owner_type === 'Personal';
-    let fromGroup = !fromShare && workspace.owner_type === 'Group';
 
     return(
       <div className="workspace my-2">
-        {fromPersonal ?
+        <div>{isPersonal ? gettext('My Tables') : workspace.owner_name}</div>
-          <div>{gettext('My Tables')}</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%"/>
@@ -297,13 +245,10 @@ class Workspace extends Component {
                   workspaceID={workspace.id}
                   renameTable={this.renameTable}
                   deleteTable={this.deleteTable}
-                  leaveShareTable={this.leaveShareTable}
                   onFreezedItem={this.onFreezedItem}
                   onUnfreezedItem={this.onUnfreezedItem}
                   isItemFreezed={this.state.isItemFreezed}
-                  fromShare={fromShare}
+                  isPersonal={isPersonal}
-                  fromPersonal={fromPersonal}
-                  fromGroup={fromGroup}
                 />
               );
             })}
@@ -377,17 +322,37 @@ class DTable extends Component {
     seafileAPI.listShareTable().then((res) => {
       this.setState({
         shareTableLoading: false,
-        shareTableList: res.data.share_list,
+        shareTableList: res.data.table_list,
       });
     }).catch((error) => {
       if (error.response) {
         this.setState({
-          loading: false,
+          shareTableLoading: false,
           errorMsg: gettext('Error')
         });
       } else {
         this.setState({
-          loading: false,
+          shareTableLoading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  };
+
+  leaveShareTable = (table) => {
+    let email = username;
+    let tableName = table.name;
+    let workspaceID = table.workspace_id;
+    seafileAPI.deleteShareTable(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.')
         });
       }
@@ -399,11 +364,34 @@ class DTable extends Component {
     this.listShareTable();
   }
 
+  renderShareTablePanel = () => {
+    return (
+      <div className="workspace my-2">
+        <div>{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>
+    );
+  };
+
   render() {
     let personalWorkspace = this.state.workspaceList.filter(workspace => {
       return workspace.owner_type === 'Personal';
     }).pop();
-
     let groupWorkspaceList = this.state.workspaceList.filter(workspace => {
       return workspace.owner_type === 'Group';
     });
@@ -439,36 +427,20 @@ class DTable extends Component {
               {!this.state.loading &&
               <Workspace
                 workspace={personalWorkspace}
-                fromShare={false}
               />
               }
               {(!this.state.shareTableLoading && this.state.shareTableList.length > 0) &&
-              <Fragment>
+              this.renderShareTablePanel()
-                <div className="sf-heading">{gettext('Shared with me')}</div>
-                {this.state.shareTableList.map((workspace, index) => {
-                  return (
-                    <Workspace
-                      key={index}
-                      workspace={workspace}
-                      fromShare={true}
-                    />
-                  );})
-                }
-              </Fragment>
               }
-              {(!this.state.loading && groupWorkspaceList.length > 0) &&
+              {!this.state.loading &&
-              <Fragment>
+                groupWorkspaceList.map((workspace, index) => {
-                <div className="sf-heading">{gettext('Shared with groups')}</div>
-                {groupWorkspaceList.map((workspace, index) => {
                   return (
                     <Workspace
                       key={index}
                       workspace={workspace}
-                      fromShare={false}
                     />
                   );
-                })}
+                })
-              </Fragment>
               }
               {(!this.state.loading && this.state.isShowAddDTableDialog) &&
               <div className="my-2">

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

@@ -0,0 +1,65 @@
+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,
+};
+
+class ShareTableItem extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      active: false,
+    };
+  }
+
+  onLeaveShareTableSubmit = () => {
+    let table = this.props.table;
+    this.props.leaveShareTable(table);
+  };
+
+  onMouseEnter = () => {
+    this.setState({
+      active: true
+    });
+  };
+
+  onMouseLeave = () => {
+    this.setState({
+      active: false
+    });
+  };
+
+  render() {
+    let table = this.props.table;
+    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><img src={siteRoot + 'media/img/data-base.svg'} alt="" width="24"/></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>
+          <i
+            className="action-icon sf2-icon-x3"
+            title={gettext('Leave Share')}
+            style={!this.state.active ? {opacity: 0} : {}}
+            onClick={this.onLeaveShareTableSubmit.bind(this)}>
+          </i>
+        </td>
+      </tr>
+    );
+  }
+}
+
+ShareTableItem.propTypes = shareTableItemPropTypes;
+
+export default ShareTableItem;

seahub/dtable/api.py

@@ -48,49 +48,29 @@ class ShareDTablesView(APIView):
             error_msg = 'Internal Server Error.'
             return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
 
-        share_list = list()
+        table_list = list()
-        workspace_ids = set([item.dtable.workspace_id for item in share_queryset])
 
-        for workspace_id in workspace_ids:
+        for item in share_queryset:
-            dtable_share_queryset = share_queryset.filter(dtable__workspace_id=workspace_id)
+            from_user = item.from_user
+            permission = item.permission
+            dtable = item.dtable
 
-            workspace = dtable_share_queryset[0].dtable.workspace
+            dtable_info = dict()
-            if GROUP_DOMAIN in workspace.owner:
+            dtable_info['id'] = dtable.pk
-                group_id = int(workspace.owner.split('@')[0])
+            dtable_info['workspace_id'] = dtable.workspace_id
-                owner_name = group_id_to_name(group_id)
+            dtable_info['uuid'] = dtable.uuid
-                owner_type = "Group"
+            dtable_info['name'] = dtable.name
-            else:
+            dtable_info['creator'] = email2nickname(dtable.creator)
-                owner_name = email2nickname(workspace.owner)
+            dtable_info['modifier'] = email2nickname(dtable.modifier)
-                owner_type = "Personal"
+            dtable_info['created_at'] = datetime_to_isoformat_timestr(dtable.created_at)
+            dtable_info['updated_at'] = datetime_to_isoformat_timestr(dtable.updated_at)
+            dtable_info['permission'] = permission
+            dtable_info['from_user'] = from_user
+            dtable_info['from_user_name'] = email2nickname(from_user)
 
-            workspace_info = workspace.to_dict()
+            table_list.append(dtable_info)
-            workspace_info["owner_name"] = owner_name
-            workspace_info["owner_type"] = owner_type
-            workspace_info['table_list'] = list()
 
-            for item in dtable_share_queryset:
+        return Response({'table_list': table_list})
-                from_user = item.from_user
-                permission = item.permission
-                dtable = item.dtable
-
-                dtable_info = dict()
-                dtable_info['id'] = dtable.pk
-                dtable_info['workspace_id'] = dtable.workspace_id
-                dtable_info['uuid'] = dtable.uuid
-                dtable_info['name'] = dtable.name
-                dtable_info['creator'] = email2nickname(dtable.creator)
-                dtable_info['modifier'] = email2nickname(dtable.modifier)
-                dtable_info['created_at'] = datetime_to_isoformat_timestr(dtable.created_at)
-                dtable_info['updated_at'] = datetime_to_isoformat_timestr(dtable.updated_at)
-                dtable_info['permission'] = permission
-                dtable_info['from_user'] = from_user
-                dtable_info['from_user_name'] = email2nickname(from_user)
-
-                workspace_info['table_list'].append(dtable_info)
-
-            share_list.append(workspace_info)
-
-        return Response({'share_list': share_list})
 
 
 class ShareDTableView(APIView):

seahub/dtable/models.py

@@ -158,7 +158,7 @@ class ShareDTableManager(models.Manager):
         return self.filter(dtable=dtable)
 
     def list_by_to_user(self, to_user):
-        return self.filter(to_user=to_user).select_related('dtable', 'dtable__workspace')
+        return self.filter(to_user=to_user).select_related('dtable')
 
     def get_by_dtable_and_to_user(self, dtable, to_user):
         qs = self.filter(dtable=dtable, to_user=to_user)

tests/seahub/dtable/test_api.py

@@ -46,24 +46,19 @@ class ShareDTablesViewTest(BaseTestCase):
         resp = self.client.get(self.url)
         self.assertEqual(200, resp.status_code)
         json_resp = json.loads(resp.content)
-        assert json_resp["share_list"]
+        assert json_resp["table_list"]
-        assert json_resp["share_list"][0]
+        assert json_resp["table_list"][0]
-        assert json_resp["share_list"][0]['owner_type'] == 'Personal'
+        assert json_resp['table_list'][0]['workspace_id'] == self.workspace.id
-        assert json_resp["share_list"][0]['repo_id'] == self.repo.id
+        assert json_resp['table_list'][0]['uuid']
-        assert json_resp["share_list"][0]['id'] == self.workspace.id
+        assert json_resp['table_list'][0]['creator'] == email2nickname(self.user.username)
-        assert json_resp["share_list"][0]['owner_name'] == email2nickname(self.user.username)
+        assert json_resp['table_list'][0]['created_at']
-        assert json_resp["share_list"][0]['table_list']
+        assert json_resp['table_list'][0]['permission'] == 'rw'
-        assert json_resp["share_list"][0]['table_list'][0]['workspace_id'] == self.workspace.id
+        assert json_resp['table_list'][0]['updated_at']
-        assert json_resp["share_list"][0]['table_list'][0]['uuid']
+        assert json_resp['table_list'][0]['from_user'] == self.user.username
-        assert json_resp["share_list"][0]['table_list'][0]['creator'] == email2nickname(self.user.username)
+        assert json_resp['table_list'][0]['from_user_name'] == email2nickname(self.user.username)
-        assert json_resp["share_list"][0]['table_list'][0]['created_at']
+        assert json_resp['table_list'][0]['modifier'] == email2nickname(self.user.username)
-        assert json_resp["share_list"][0]['table_list'][0]['permission'] == 'rw'
+        assert json_resp['table_list'][0]['id']
-        assert json_resp["share_list"][0]['table_list'][0]['updated_at']
+        assert json_resp['table_list'][0]['name'] == 'dtable1'
-        assert json_resp["share_list"][0]['table_list'][0]['from_user'] == self.user.username
-        assert json_resp["share_list"][0]['table_list'][0]['from_user_name'] == email2nickname(self.user.username)
-        assert json_resp["share_list"][0]['table_list'][0]['modifier'] == email2nickname(self.user.username)
-        assert json_resp["share_list"][0]['table_list'][0]['id']
-        assert json_resp["share_list"][0]['table_list'][0]['name'] == 'dtable1'
 
 
 class ShareDTableViewTest(BaseTestCase):