multi share dtable

change permission

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

@@ -74,7 +74,7 @@ class CreateTableDialog extends React.Component {
     let email;
     if (space) {
       for (let i = 0; i < options.length; i++) {
-        if ((space.owner_type === "Personal" && options[i].value === 'Personal') || (space.owner_type === "Group" && options[i].value === space.owner_name)) {
+        if ((space.owner_type === 'Personal' && options[i].value === 'Personal') || (space.owner_type === 'Group' && options[i].value === space.owner_name)) {
           email = options[i].email;
           break;
         }

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

@@ -1,17 +1,16 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import {gettext, isPro, canInvitePeople, siteRoot, username} from '../../utils/constants';
+import { gettext, canInvitePeople, siteRoot } 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 DtableSharePermissionEditor from '../select-editor/dtable-share-permission-editor';
 import toaster from '../toast';
 
 import '../../css/invitations.css';
 
 const userItemPropTypes = {
   item: PropTypes.object.isRequired,
-  permissions: PropTypes.array.isRequired,
   deleteTableShare: PropTypes.func.isRequired,
   updateTableShare: PropTypes.func.isRequired,
 };
@@ -48,11 +47,10 @@ class UserItem extends React.Component {
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="name">{item.name}</td>
         <td>
-          <SharePermissionEditor
+          <DtableSharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
-            permissions={this.props.permissions}
             onPermissionChanged={this.updateTableShare}
           />
         </td>
@@ -80,11 +78,10 @@ class ShareTableToUser extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      selectedOption: null,
+      selectedOptions: 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;
   }
@@ -95,8 +92,8 @@ class ShareTableToUser extends React.Component {
     });
   }
 
-  handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+  handleSelectChange = (options) => {
+    this.setState({ selectedOptions: options });
   };
 
   setPermission = (permission) => {
@@ -112,30 +109,25 @@ class ShareTableToUser extends React.Component {
   };
 
   addTableShare = () => {
-    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;
+    const { selectedOptions, permission, userList } = this.state;
+    if (!selectedOptions || selectedOptions.length === 0) return;
+    for (let i = 0; i < selectedOptions.length; i++) {
+      let name = selectedOptions[i].value;
+      let email = selectedOptions[i].email;
       seafileAPI.addTableShare(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,
-      });
+        this.setState({ userList: userList });
       }).catch(error => {
         this.handleError(error);
-      this.setState({
-        selectedOption: null,
-      });
       });
+    }
+    this.setState({ selectedOption: null });
+    this.refs.userSelect.clearSelect();
   };
 
   deleteTableShare = (email) => {
@@ -173,7 +165,7 @@ class ShareTableToUser extends React.Component {
         <UserItem
           key={index}
           item={item}
-          permissions={this.permissions}
+          permissions={['rw', 'r']}
           deleteTableShare={this.deleteTableShare}
           updateTableShare={this.updateTableShare}
         />
@@ -195,18 +187,17 @@ class ShareTableToUser extends React.Component {
               <td>
                 <UserSelect
                   ref="userSelect"
-                  isMulti={false}
+                  isMulti={true}
                   className="reviewer-select"
                   placeholder={gettext('Select users...')}
                   onSelectChange={this.handleSelectChange}
                 />
               </td>
               <td>
-                <SharePermissionEditor
+                <DtableSharePermissionEditor
                   isTextMode={false}
                   isEditIconShow={false}
-                  currentPermission={this.state.permission}
-                  permissions={this.permissions}
+                  currentOption={this.state.permission}
                   onPermissionChanged={this.setPermission}
                 />
               </td>

frontend/src/components/select-editor/dtable-share-permission-editor.js

@@ -0,0 +1,81 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  isTextMode: PropTypes.bool.isRequired,
+  isEditIconShow: PropTypes.bool.isRequired,
+  currentPermission: PropTypes.string.isRequired,
+  onPermissionChanged: PropTypes.func.isRequired,
+};
+
+class DtableSharePermissionEditor extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isEditing: false,
+    };
+    this.options = [
+      { value: 'rw', label: <div>{gettext('Read-Write')}</div> },
+      { value: 'r', label: <div>{gettext('Read-Only')}</div> }
+    ];
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.onHideSelect);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onHideSelect);
+  }
+
+  onHideSelect = () => {
+    this.setState({ isEditing: false });
+  }
+
+  onEditPermission = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.setState({ isEditing: true });
+  }
+
+  onPermissionChanged = (e) => {
+    if (e.value !== this.props.currentPermission) {
+      this.props.onPermissionChanged(e.value);
+    }
+    this.setState({ isEditing: false });
+  }
+
+  onSelectHandler = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+  }
+
+  render() {
+    const { currentPermission, isTextMode } = this.props;
+    let optionTranslation = currentPermission === 'r' ? gettext('Read-Only') : gettext('Read-Write');
+    return (
+      <div onClick={this.onSelectHandler}>
+        {(isTextMode && !this.state.isEditing) ?
+          <Fragment>
+            <span>{optionTranslation}</span>
+            {this.props.isEditIconShow &&
+              <span title={gettext('Edit')} className="fa fa-pencil-alt attr-action-icon" onClick={this.onEditPermission}></span>
+            }
+          </Fragment>
+          :
+          <Select
+            options={this.options}
+            placeholder={optionTranslation}
+            onChange={this.onPermissionChanged}
+            captureMenuScroll={false}
+          />
+        }
+      </div>
+    );
+  }
+}
+
+DtableSharePermissionEditor.propTypes = propTypes;
+
+export default DtableSharePermissionEditor;

frontend/src/pages/dtable/dtable.js

@@ -165,6 +165,8 @@ Table.propTypes = tablePropTypes;
 
 const workspacePropTypes = {
   workspace: PropTypes.object.isRequired,
+  setCurrentWorkspace: PropTypes.func.isRequired,
+  onAddDTable: PropTypes.func.isRequired,
 };
 
 class Workspace extends Component {
@@ -260,7 +262,7 @@ class Workspace extends Component {
                   />
                 );
               })}
-              <tr className={isItemFreezed ? "" : "add-table-range"}>
+              <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>