share dtable react

2025-09-18 08:16:07 +00:00 · 2019-06-27 15:17:39 +08:00
parent 4da16f3e0a
commit 49545d2095
4 changed files with 493 additions and 2 deletions
--- a/frontend/src/components/dialog/leave-share-table-dialog.js
+++ b/frontend/src/components/dialog/leave-share-table-dialog.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const propTypes = {
+  currentTable: PropTypes.object.isRequired,
+  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;
--- a/frontend/src/components/dialog/share-table-dialog.js
+++ b/frontend/src/components/dialog/share-table-dialog.js
@@ -0,0 +1,87 @@
+import React, { Fragment }  from 'react';
+import PropTypes from 'prop-types';
+import {gettext} from '../../utils/constants';
+import {Modal, ModalHeader, ModalBody, Nav, NavItem, NavLink, TabContent, TabPane} from 'reactstrap';
+import ShareTableToUser from './share-table-to-user';
+
+import '../../css/share-link-dialog.css';
+
+const propTypes = {
+  currentTable: PropTypes.object.isRequired,
+  ShareCancel: PropTypes.func.isRequired,
+};
+
+class ShareTableDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: 'shareToUser',
+    };
+  }
+
+  toggle = (tab) => {
+    if (this.state.activeTab !== tab) {
+      this.setState({activeTab: tab});
+    }
+  };
+
+  renderContent = () => {
+    let activeTab = this.state.activeTab;
+
+    return (
+      <Fragment>
+        <div className="share-dialog-side">
+          <Nav pills vertical>
+            <Fragment>
+              <NavItem>
+                <NavLink
+                  className={activeTab === 'shareToUser' ? 'active' : ''}
+                  onClick={this.toggle.bind(this, 'shareToUser')}
+                >{gettext('Share to user')}
+                </NavLink>
+              </NavItem>
+              {/*<NavItem>*/}
+              {/*  <NavLink*/}
+              {/*    className={activeTab === 'shareToGroup' ? 'active' : ''}*/}
+              {/*    onClick={this.toggle.bind(this, 'shareToGroup')}*/}
+              {/*  >{gettext('Share to group')}*/}
+              {/*  </NavLink>*/}
+              {/*</NavItem>*/}
+            </Fragment>
+          </Nav>
+        </div>
+        <div className="share-dialog-main">
+          <TabContent activeTab={this.state.activeTab}>
+            <Fragment>
+              <TabPane tabId="shareToUser">
+                <ShareTableToUser
+                  currentTable={this.props.currentTable}
+                />
+              </TabPane>
+              {/*<TabPane tabId="shareToGroup">*/}
+              {/*</TabPane>*/}
+            </Fragment>
+          </TabContent>
+        </div>
+      </Fragment>
+    );
+  };
+
+  render() {
+    let currentTable = this.props.currentTable;
+    let name = currentTable.name;
+
+    return (
+      <Modal isOpen={true} toggle={this.props.ShareCancel} style={{maxWidth: '720px'}} className="share-dialog" >
+        <ModalHeader toggle={this.props.ShareCancel}>{gettext('Share')} <span className="op-target" title={name}>{name}</span></ModalHeader>
+        <ModalBody className="share-dialog-content">
+          {this.renderContent()}
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+ShareTableDialog.propTypes = propTypes;
+
+export default ShareTableDialog;
--- a/frontend/src/components/dialog/share-table-to-user.js
+++ b/frontend/src/components/dialog/share-table-to-user.js
@@ -0,0 +1,246 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import {gettext, isPro, canInvitePeople, siteRoot, username} from '../../utils/constants';
+import { Button } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api.js';
+import UserSelect from '../user-select';
+import SharePermissionEditor from '../select-editor/share-permission-editor';
+import toaster from '../toast';
+
+import '../../css/invitations.css';
+
+const userItemPropTypes = {
+  item: PropTypes.object.isRequired,
+  permissions: PropTypes.array.isRequired,
+  deleteShareTable: PropTypes.func.isRequired,
+  changeShareTablePermission: PropTypes.func.isRequired,
+};
+
+class UserItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  };
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  };
+
+  deleteShareTable = () => {
+    this.props.deleteShareTable(this.props.item.email);
+  };
+
+  changeShareTablePermission = (permission) => {
+    this.props.changeShareTablePermission(this.props.item.email, permission);
+  };
+
+  render() {
+    let item = this.props.item;
+    let currentPermission = item.permission;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td className="name">{item.name}</td>
+        <td>
+          <SharePermissionEditor
+            isTextMode={true}
+            isEditIconShow={this.state.isOperationShow}
+            currentPermission={currentPermission}
+            permissions={this.props.permissions}
+            onPermissionChanged={this.changeShareTablePermission}
+          />
+        </td>
+        <td>
+          <span
+            className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteShareTable}
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+UserItem.propTypes = userItemPropTypes;
+
+const propTypes = {
+  currentTable: PropTypes.object.isRequired,
+};
+
+class ShareTableToUser extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: null,
+      permission: 'rw',
+      userList: []
+    };
+    this.permissions = ['rw', 'r', 'admin', 'cloud-edit', 'preview'];
+    this.workspaceID = this.props.currentTable.workspace_id;
+    this.tableName = this.props.currentTable.name;
+  }
+
+  componentDidMount() {
+    seafileAPI.listShareTableUser(this.workspaceID, this.tableName).then((res) => {
+      this.setState({userList: res.data.user_list});
+    });
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({selectedOption: option});
+  };
+
+  setPermission = (permission) => {
+    this.setState({permission: permission});
+  };
+
+  handleError = (e) => {
+    if (e.response) {
+      toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), {duration: 3});
+    } else {
+      toaster.danger(gettext('Please check the network.'), {duration: 3});
+    }
+  };
+
+  addShareTable = () => {
+    if (!this.state.selectedOption || this.state.selectedOption.length === 0) {
+      return;
+    }
+    let name = this.state.selectedOption.value;
+    let email = this.state.selectedOption.email;
+    let permission = this.state.permission;
+    seafileAPI.addShareTable(this.workspaceID, this.tableName, email, permission).then((res) => {
+      let userList = this.state.userList;
+      let userInfo = {
+        name: name,
+        email: email,
+        permission: permission,
+      };
+      userList.push(userInfo);
+      this.setState({
+        userList: userList,
+        selectedOption: null,
+      });
+    }).catch(error => {
+      this.handleError(error);
+      this.setState({
+        selectedOption: null,
+      });
+    });
+  };
+
+  deleteShareTable = (email) => {
+    seafileAPI.deleteShareTable(this.workspaceID, this.tableName, email).then((res) => {
+      let userList = this.state.userList.filter(userInfo => {
+        return userInfo.email !== email;
+      });
+      this.setState({
+        userList: userList,
+      });
+    }).catch(error => {
+      this.handleError(error);
+    });
+  };
+
+  changeShareTablePermission = (email, permission) => {
+    seafileAPI.modifyShareTablePermission(this.workspaceID, this.tableName, email, permission).then((res) => {
+      let userList = this.state.userList.filter(userInfo => {
+        if (userInfo.email === email) {
+          userInfo.permission = permission;
+        }
+        return userInfo;
+      });
+      this.setState({
+        userList: userList,
+      });
+    }).catch(error => {
+      this.handleError(error);
+    });
+  };
+
+  render() {
+    const renderUserList = this.state.userList.map((item, index) => {
+      return (
+        <UserItem
+          key={index}
+          item={item}
+          permissions={this.permissions}
+          deleteShareTable={this.deleteShareTable}
+          changeShareTablePermission={this.changeShareTablePermission}
+        />
+      );
+    });
+
+    return (
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width="50%">{gettext('User')}</th>
+              <th width="35%">{gettext('Permission')}</th>
+              <th width="15%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <UserSelect
+                  ref="userSelect"
+                  isMulti={false}
+                  className="reviewer-select"
+                  placeholder={gettext('Select users...')}
+                  onSelectChange={this.handleSelectChange}
+                />
+              </td>
+              <td>
+                <SharePermissionEditor
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChanged={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.addShareTable}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="50%">{gettext('User')}</th>
+                <th width="35%">{gettext('Permission')}</th>
+                <th width="15%"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {renderUserList}
+            </tbody>
+          </table>
+          { canInvitePeople &&
+          <a href={siteRoot + 'invitations/'} className="invite-link-in-popup">
+            <i className="sf2-icon-invite invite-link-icon-in-popup"></i>
+            <span className="invite-link-icon-in-popup">{gettext('Invite People')}</span>
+          </a>
+          }
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+ShareTableToUser.propTypes = propTypes;
+
+export default ShareTableToUser;
--- a/frontend/src/pages/dtable/dtable.js
+++ b/frontend/src/pages/dtable/dtable.js
@@ -4,11 +4,13 @@ import MediaQuery from 'react-responsive';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, siteRoot } from '../../utils/constants';
+import { gettext, siteRoot, 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 LeaveShareTableDialog from '../../components/dialog/leave-share-table-dialog';
+import ShareTableDialog from '../../components/dialog/share-table-dialog'
 import Rename from '../../components/rename';
 import '../../css/dtable-page.css';

@@ -20,9 +22,13 @@ 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,
+  fromPersonal: PropTypes.bool.isRequired,
+  fromGroup: PropTypes.bool.isRequired,
 };

 class Table extends Component {
@@ -32,9 +38,12 @@ class Table extends Component {
    this.state = {
      isTableRenaming: false,
      isTableDeleting: false,
+      isTableSharing: false,
+      isTableLeaveSharing: false,
      dropdownOpen: false,
      active: false,
    };
+    this.writePermissionList = ['rw', 'admin'];
  }

  onRenameTableCancel = () => {
@@ -53,12 +62,28 @@ 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 = () => {
+    let tableName = this.props.table.name;
+    this.props.leaveShareTable(tableName);
+    this.onLeaveShareTableCancel();
+  }
+
  dropdownToggle = () => {
    if (this.state.dropdownOpen) {
      this.props.onUnfreezedItem();
@@ -92,6 +117,12 @@ 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.fromPersonal;
+
+    let hasWritePermission = !fromShare ? true:
+      this.writePermissionList.includes(this.props.table.permission);

    return (
      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={this.state.active ? 'tr-highlight' : ''}>
@@ -123,8 +154,18 @@ class Table extends Component {
              >
              </DropdownToggle>
              <DropdownMenu className="drop-list" right={true}>
+                {hasWritePermission &&
                <DropdownItem onClick={this.onRenameTableCancel}>{gettext('Rename')}</DropdownItem>
+                }
+                {hasWritePermission &&
                <DropdownItem onClick={this.onDeleteTableCancel}>{gettext('Delete')}</DropdownItem>
+                }
+                {fromPersonal &&
+                <DropdownItem onClick={this.onShareTableCancel}>{gettext('Share')}</DropdownItem>
+                }
+                {fromShare &&
+                <DropdownItem onClick={this.onLeaveShareTableCancel}>{gettext('Leave Share')}</DropdownItem>
+                }
              </DropdownMenu>
            </Dropdown>
          }
@@ -135,6 +176,19 @@ 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}
+              ShareCancel={this.onShareTableCancel}
+            />
+          }
        </td>
      </tr>
    );
@@ -146,6 +200,7 @@ Table.propTypes = tablePropTypes;

 const workspacePropTypes = {
  workspace: PropTypes.object.isRequired,
+  fromShare: PropTypes.bool.isRequired,
 };

 class Workspace extends Component {
@@ -198,6 +253,21 @@ 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({
@@ -208,10 +278,16 @@ class Workspace extends Component {

  render() {
    let workspace = this.props.workspace;
+    let fromShare = this.props.fromShare;
+    let fromPersonal = !fromShare && workspace.owner_type === 'Personal';
+    let fromGroup = !fromShare && workspace.owner_type === 'Group';

    return(
      <div className="workspace my-2">
-        <div>{workspace.owner_type === 'Personal' ? gettext('My Tables') : workspace.owner_name}</div>
+        {fromPersonal ?
+          <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%"/>
@@ -225,9 +301,13 @@ 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}
+                  fromPersonal={fromPersonal}
+                  fromGroup={fromGroup}
                />
              );
            })}
@@ -251,8 +331,10 @@ class DTable extends Component {
    super(props);
    this.state = {
      loading: true,
+      shareTableLoading: true,
      errorMsg: '',
      workspaceList: [],
+      shareTableList: [],
      isShowAddDTableDialog: false,
    };
  }
@@ -295,8 +377,30 @@ class DTable extends Component {
    });
  }

+  listShareTable = () => {
+    seafileAPI.listShareTable().then((res) => {
+      this.setState({
+        shareTableLoading: false,
+        shareTableList: res.data.share_list,
+      });
+    }).catch((error) => {
+      if (error.response) {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Error')
+        });
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  };
+
  componentDidMount() {
    this.listWorkspaces();
+    this.listShareTable();
  }

  render() {
@@ -335,6 +439,7 @@ class DTable extends Component {
                      <Workspace
                        key={index}
                        workspace={workspace}
+                        fromShare={false}
                      />
                    );
                  })}
@@ -348,6 +453,20 @@ class DTable extends Component {
                  </div>
                </Fragment>
              }
+              {(!this.state.shareTableLoading && this.state.shareTableList.length > 0) &&
+              <Fragment>
+                <div className="sf-heading">{gettext('Shared with me')}</div>
+                {this.state.shareTableList.map((workspace, index) => {
+                  return (
+                    <Workspace
+                      key={index}
+                      workspace={workspace}
+                      fromShare={true}
+                    />
+                  );})
+                }
+              </Fragment>
+              }
            </div>
          </div>
        </div>