optimized-code

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) => {
+  setPermission = (permission) => {
-    this.setState({permission: e.target.value});
+    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}>
+              <PermissionEditor 
-                <option value='rw'>{gettext('Read-Write')}</option>
+                isTextMode={false}
-                <option value='r'>{gettext('Read-Only')}</option>
+                permission={this.state.permission}
-                <option value='cloud-edit'>{gettext('Preview-Edit-on-Cloud')}</option>
+                permissions={this.permissions}
-                <option value='preview'>{gettext('Preview-on-Cloud')}</option>
+                onPermissionChangedHandler={this.setPermission}
-              </Input>
+              />
             </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>
     );
   }

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 { Button } from 'reactstrap';
-import PropTypes from 'prop-types';
-import { Button, Input } 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) => {
+  setPermission = (permission) => {
-    this.setState({permission: e.target.value});
+    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}>
+              <PermissionEditor 
-                <option value='rw'>{gettext('Read-Write')}</option>
+                isTextMode={false}
-                <option value='r'>{gettext('Read-Only')}</option>
+                permission={this.state.permission}
-                <option value='admin'>{gettext('Admin')}</option>
+                permissions={this.permissions}
-                <option value='cloud-edit'>{gettext('Preview-Edit-on-Cloud')}</option>
+                onPermissionChangedHandler={this.setPermission}
-                <option value='preview'>{gettext('Preview-on-Cloud')}</option>
+              />
-              </Input>
             </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>
     );
   }

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;