optimized-code

2025-09-08 18:30:53 +00:00 · 2018-12-25 16:28:17 +08:00
parent 4c977dc4fd
commit 42930f93c6
3 changed files with 231 additions and 36 deletions
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Input } from 'reactstrap';
+import { Button } from 'reactstrap';
 import Select from 'react-select';
 import makeAnimated from 'react-select/lib/animated';
 import { gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import PermissionEditor from '../permission-editor';

 class GroupItem extends React.Component {

@@ -29,12 +29,24 @@ class GroupItem extends React.Component {
    this.props.deleteShareItem(item.group_info.id);
  }

+  onChangeUserPermission = (permission) => {
+    let item = this.props.item;
+    this.props.onChangeUserPermission(item, permission);
+  }
+
  render() {
    let item = this.props.item;
    return (
      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
        <td>{item.group_info.name}</td>
-        <td>{Utils.sharePerms(item.permission)}</td>
+        <td>
+          <PermissionEditor 
+            isTextMode={true}
+            permission={item.permission}
+            permissions={this.props.permissions}
+            onPermissionChangedHandler={this.onChangeUserPermission}
+          />
+        </td>
        <td>
          <span
            className={`sf2-icon-x3 sf2-x op-icon a-simulate ${this.state.isOperationShow ? '' : 'hide'}`}
@@ -56,7 +68,13 @@ class GroupList extends React.Component {
      <tbody>
        {items.map((item, index) => {
          return (
-            <GroupItem key={index} item={item} deleteShareItem={this.props.deleteShareItem}/>
+            <GroupItem 
+              key={index} 
+              item={item} 
+              permissions={this.props.permissions}
+              deleteShareItem={this.props.deleteShareItem}
+              onChangeUserPermission={this.props.onChangeUserPermission}
+            />
          );
        })}
      </tbody>
@@ -81,6 +99,10 @@ class ShareToGroup extends React.Component {
      sharedItems: []
    };
    this.options = [];
+    this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
+    if (this.props.isGroupOwnedRepo) {
+      this.permissions = ['rw', 'r'];
+    }
  }

  handleSelectChange = (option) => {
@@ -117,8 +139,8 @@ class ShareToGroup extends React.Component {
    });
  }

-  setPermission = (e) => {
-    this.setState({permission: e.target.value});
+  setPermission = (permission) => {
+    this.setState({permission: permission});
  }

  shareToGroup = () => {
@@ -133,14 +155,11 @@ class ShareToGroup extends React.Component {
    }
    if (isGroupOwnedRepo) {
      seafileAPI.shareGroupOwnedRepoToGroup(repoID, this.state.permission, groups).then(res => {
+        let errorMsg = [];
        if (res.data.failed.length > 0) {
-          let errorMsg = [];
          for (let i = 0 ; i < res.data.failed.length ; i++) {
            errorMsg[i] = res.data.failed[i];
          }
-          this.setState({
-            errorMsg: errorMsg
-          });
        }

        // todo modify api
@@ -154,25 +173,26 @@ class ShareToGroup extends React.Component {
        });
  
        this.setState({
+          errorMsg: errorMsg,
          sharedItems: this.state.sharedItems.concat(items),
          selectedOption: null,
+          permission: 'rw',
        });
      });
    } else {
      seafileAPI.shareFolder(repoID, path, 'group', this.state.permission, groups).then(res => {
+        let errorMsg = [];
        if (res.data.failed.length > 0) {
-          let errorMsg = [];
          for (let i = 0 ; i < res.data.failed.length ; i++) {
            errorMsg[i] = res.data.failed[i];
          }
-          this.setState({
-            errorMsg: errorMsg
-          });
        }
  
        this.setState({
+          errorMsg: errorMsg,
          sharedItems: this.state.sharedItems.concat(res.data.success),
          selectedOption: null,
+          permission: 'rw'
        });
      });
    }
@@ -196,6 +216,33 @@ class ShareToGroup extends React.Component {
    }
  }

+  onChangeUserPermission = (item, permission) => {
+    let path = this.props.itemPath;
+    let repoID = this.props.repoID;
+    let groupID = item.group_info.id;
+    if (this.props.isGroupOwnedRepo) {
+      seafileAPI.modifyGroupOwnedRepoGroupSharedPermission(repoID, permission, groupID).then(() => {
+        this.updateSharedItems(item, permission);
+      })
+    } else {
+      seafileAPI.updateFolderSharedToGroupPerm(repoID, path, 'group', permission, groupID).then(() => {
+        this.updateSharedItems(item, permission);
+      });
+    }
+  }
+  
+  updateSharedItems = (item, permission) => {
+    let groupID = item.group_info.id;
+    let sharedItems = this.state.sharedItems.map(sharedItem => {
+      let sharedItemGroupID = sharedItem.group_info.id;
+      if (groupID === sharedItemGroupID) {
+        sharedItem.permission = permission;
+      }
+      return sharedItem;
+    });
+    this.setState({sharedItems: sharedItems});
+  }
+
  render() {
    return (
      <table>
@@ -218,12 +265,12 @@ class ShareToGroup extends React.Component {
              />
            </td>
            <td>
-              <Input type="select" name="select" onChange={this.setPermission}>
-                <option value='rw'>{gettext('Read-Write')}</option>
-                <option value='r'>{gettext('Read-Only')}</option>
-                <option value='cloud-edit'>{gettext('Preview-Edit-on-Cloud')}</option>
-                <option value='preview'>{gettext('Preview-on-Cloud')}</option>
-              </Input>
+              <PermissionEditor 
+                isTextMode={false}
+                permission={this.state.permission}
+                permissions={this.permissions}
+                onPermissionChangedHandler={this.setPermission}
+              />
            </td>
            <td>
              <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
@@ -240,7 +287,12 @@ class ShareToGroup extends React.Component {
            })                                                
          }
        </thead>
-        <GroupList items={this.state.sharedItems} deleteShareItem={this.deleteShareItem} />
+        <GroupList 
+          items={this.state.sharedItems}
+          permissions={this.permissions}
+          deleteShareItem={this.deleteShareItem} 
+          onChangeUserPermission={this.onChangeUserPermission}
+        />
      </table>
    );
  }
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
 import AsyncSelect from 'react-select/lib/Async';
 import { gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
-import PropTypes from 'prop-types';
-import { Button, Input } from 'reactstrap';
+import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import PermissionEditor from '../permission-editor';

 class UserItem extends React.Component {

@@ -27,13 +27,25 @@ class UserItem extends React.Component {
    let item = this.props.item;
    this.props.deleteShareItem(item.user_info.name);
  }
+  
+  onChangeUserPermission = (permission) => {
+    let item = this.props.item;
+    this.props.onChangeUserPermission(item, permission);
+  }

  render() {
    let item = this.props.item;
    return (
      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
        <td>{item.user_info.nickname}</td>
-        <td>{Utils.sharePerms(item.permission)}</td>
+        <td>
+          <PermissionEditor 
+            isTextMode={true}
+            permission={item.permission}
+            permissions={this.props.permissions}
+            onPermissionChangedHandler={this.onChangeUserPermission}
+          />
+        </td>
        <td>
          <span
            className={`sf2-icon-x3 sf2-x op-icon a-simulate ${this.state.isOperationShow ? '' : 'hide'}`}
@@ -55,7 +67,13 @@ class UserList extends React.Component {
      <tbody>
        {items.map((item, index) => {
          return (
-            <UserItem key={index} item={item} deleteShareItem={this.props.deleteShareItem}/>
+            <UserItem 
+              key={index} 
+              item={item} 
+              permissions={this.props.permissions}
+              deleteShareItem={this.props.deleteShareItem}
+              onChangeUserPermission={this.props.onChangeUserPermission}
+            />
          );
        })}
      </tbody>
@@ -80,6 +98,10 @@ class ShareToUser extends React.Component {
      sharedItems: []
    };
    this.options = [];
+    this.permissions = ['rw', 'r', 'admin', 'cloud-edit', 'preview'];
+    if (this.props.isGroupOwnedRepo) {
+      this.permissions = ['rw', 'r'];
+    }
  }

  handleSelectChange = (option) => {
@@ -97,8 +119,8 @@ class ShareToUser extends React.Component {
    });
  }

-  setPermission = (e) => {
-    this.setState({permission: e.target.value});
+  setPermission = (permission) => {
+    this.setState({permission: permission});
  }

  loadOptions = (value, callback) => {
@@ -151,6 +173,7 @@ class ShareToUser extends React.Component {
          errorMsg: errorMsg,
          sharedItems: this.state.sharedItems.concat(items),
          selectedOption: null,
+          permission: 'rw',
        });
      }).catch(error => {
        if (error.response) {
@@ -175,6 +198,7 @@ class ShareToUser extends React.Component {
          errorMsg: errorMsg,
          sharedItems: this.state.sharedItems.concat(res.data.success),
          selectedOption: null,
+          permission: 'rw',
        });
      }).catch(error => {
        if (error.response) {
@@ -208,6 +232,33 @@ class ShareToUser extends React.Component {
    }
  }

+  onChangeUserPermission = (item, permission) => {
+    let path = this.props.itemPath;
+    let repoID = this.props.repoID;
+    let username = item.user_info.name;
+    if (this.props.isGroupOwnedRepo) {
+      seafileAPI.modifyGroupOwnedRepoUserSharedPermission(repoID, permission, username).then(() => {
+        this.updateSharedItems(item, permission);
+      });
+    } else {
+      seafileAPI.updateFolderSharedToUserPerm(repoID, path, 'user', permission, username).then(() => {
+        this.updateSharedItems(item, permission);
+      });
+    }
+  }
+  
+  updateSharedItems = (item, permission) => {
+    let username = item.user_info.name;
+    let sharedItems = this.state.sharedItems.map(sharedItem => {
+      let sharedItemUsername = sharedItem.user_info.name;
+      if (username === sharedItemUsername) {
+        sharedItem.permission = permission;
+      }
+      return sharedItem;
+    });
+    this.setState({sharedItems: sharedItems});
+  }
+
  render() {
    let { sharedItems } = this.state;
    return (
@@ -234,13 +285,12 @@ class ShareToUser extends React.Component {
              />
            </td>
            <td>
-              <Input type="select" name="select" onChange={this.setPermission}>
-                <option value='rw'>{gettext('Read-Write')}</option>
-                <option value='r'>{gettext('Read-Only')}</option>
-                <option value='admin'>{gettext('Admin')}</option>
-                <option value='cloud-edit'>{gettext('Preview-Edit-on-Cloud')}</option>
-                <option value='preview'>{gettext('Preview-on-Cloud')}</option>
-              </Input>
+              <PermissionEditor 
+                isTextMode={false}
+                permission={this.state.permission}
+                permissions={this.permissions}
+                onPermissionChangedHandler={this.setPermission}
+              />
            </td>
            <td>
              <Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
@@ -262,7 +312,12 @@ class ShareToUser extends React.Component {
            })
          }
        </thead>
-        <UserList items={sharedItems} deleteShareItem={this.deleteShareItem} />
+        <UserList 
+          items={sharedItems}
+          permissions={this.permissions}
+          deleteShareItem={this.deleteShareItem} 
+          onChangeUserPermission={this.onChangeUserPermission}
+        />
      </table>
    );
  }
--- a/frontend/src/components/permission-editor.js
+++ b/frontend/src/components/permission-editor.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '../utils/utils';
+import { Input } from 'reactstrap';
+
+const propTypes = {
+  isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select
+  permission: PropTypes.string.isRequired,
+  permissions: PropTypes.array.isRequired,
+  onPermissionChangedHandler: PropTypes.func.isRequired,
+};
+
+class PermissionEditor extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isEditing: false,
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.onHideSelect);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onHideSelect);
+  }
+
+  onEidtPermission = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.setState({isEditing: true});
+  }
+
+  onPermissionChangedHandler = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    let permission = e.target.value;
+    if (permission !== this.props.permission) {
+      this.props.onPermissionChangedHandler(permission);
+    }
+    this.setState({isEditing: false});
+  }
+
+  onSelectHandler = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+  }
+
+  onHideSelect = () => {
+    this.setState({isEditing: false});
+  }
+
+  render() {
+    let { permission, permissions, isTextMode } = this.props;
+
+    // scence1: isTextMode (text)editor-icon --> select
+    // scence2: !isTextMode select
+    let selectStyle = {
+      height: '1.5rem',
+      padding: 0
+    };
+    if (!isTextMode) {
+      selectStyle = {};
+    }
+    return (
+      <div className="permission-editor">
+        {(!isTextMode || this.state.isEditing) &&
+          <Input style={selectStyle} type="select" onChange={this.onPermissionChangedHandler} onClick={this.onSelectHandler} value={permission}>
+            {permissions.map((item, index) => {
+              return (
+                <option key={index} value={item}>{Utils.sharePerms(item)}</option>
+              )
+            })}
+          </Input>
+        }
+        {(isTextMode && !this.state.isEditing) &&
+          <div>
+            {Utils.sharePerms(permission)}
+            <span style={{fontSize: '0.875rem', marginLeft: '0.5rem'}} className="fa fa-pencil op-icon" onClick={this.onEidtPermission}></span>
+          </div>
+        }
+      </div>
+    );
+  }
+}
+
+PermissionEditor.propTypes = propTypes;
+
+export default PermissionEditor;