Merge pull request #2712 from haiwen/share-dialog-improve

Share dialog improve

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}
+            currentPermission={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,24 +139,8 @@ class ShareToGroup extends React.Component {
     });
   }
 
-  setPermission = (e) => {
+  setPermission = (permission) => {
-    if (e.target.value == 'Read-Write') {
+    this.setState({permission: permission});
-      this.setState({
-        permission: 'rw',
-      });
-    } else if (e.target.value == 'Read-Only') {
-      this.setState({
-        permission: 'r',
-      });
-    } else if (e.target.value == 'Preview-Edit-on-Cloud') {
-      this.setState({
-        permission: 'cloud-edit',
-      });
-    } else if (e.target.value == 'Preview-on-Cloud') {
-      this.setState({
-        permission: 'preview',
-      });
-    } 
   }
 
   shareToGroup = () => {
@@ -149,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
@@ -170,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'
         });
       });
     }
@@ -212,13 +216,40 @@ 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.updateShareToGroupItemPermission(repoID, path, 'group', groupID, permission).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>
         <thead>
           <tr>
-            <th style={{'width': '50%'}}>{gettext('Group')}</th>
+            <th style={{'width': '40%'}}>{gettext('Group')}</th>
-            <th style={{'width': '30%'}}>{gettext('Permission')}</th>
+            <th style={{'width': '40%'}}>{gettext('Permission')}</th>
             <th></th>
           </tr>
           <tr>
@@ -227,37 +258,41 @@ class ShareToGroup extends React.Component {
                 isMulti
                 onChange={this.handleSelectChange}
                 options={this.options}
+                placeholder={gettext('Select a group')}
                 components={makeAnimated()}
                 inputId={'react-select-2-input'}
                 value={this.state.selectedOption}
               />
             </td>
             <td>
-              <Input type="select" name="select" onChange={this.setPermission}>
+              <PermissionEditor 
-                <option>{gettext('Read-Write')}</option>
+                isTextMode={false}
-                <option>{gettext('Read-Only')}</option>
+                currentPermission={this.state.permission}
-                <option>{gettext('Preview-Edit-on-Cloud')}</option>
+                permissions={this.permissions}
-                <option>{gettext('Preview-on-Cloud')}</option>
+                onPermissionChangedHandler={this.setPermission}
-              </Input>
+              />
             </td>
             <td>
               <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
             </td>
           </tr>
-          <tr>
+          {this.state.errorMsg.length > 0 &&                  
-            <td colSpan={3}>
+            this.state.errorMsg.map((item, index) => {
-              {this.state.errorMsg.length > 0 &&                  
+              let errMessage = item.group_name + ': ' + item.error_msg;
-                this.state.errorMsg.map((item, index = 0, arr) => {
+              return (
-                  return (                                        
+                <tr key={index}>
-                    <p className="error" key={index}>{this.state.errorMsg[index].group_name}
+                  <td colSpan={3}><p className="error">{errMessage}</p></td>
-                      {': '}{this.state.errorMsg[index].error_msg}</p>
+                </tr>
-                  );                                               
+              );
-                })                                                
+            })                                                
-              }
+          }
-            </td>
-          </tr>
         </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 {
 
@@ -28,12 +28,24 @@ class UserItem extends React.Component {
     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}
+            currentPermission={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,28 +119,8 @@ class ShareToUser extends React.Component {
     });
   }
 
-  setPermission = (e) => {
+  setPermission = (permission) => {
-    if (e.target.value == 'Read-Write') {
+    this.setState({permission: permission});
-      this.setState({
-        permission: 'rw',
-      });
-    } else if (e.target.value == 'Read-Only') {
-      this.setState({
-        permission: 'r',
-      });
-    } else if (e.target.value == 'Admin') {
-      this.setState({
-        permission: 'admin',
-      });
-    } else if (e.target.value == 'Preview-Edit-on-Cloud') {
-      this.setState({
-        permission: 'cloud-edit',
-      });
-    } else if (e.target.value == 'Preview-on-Cloud') {
-      this.setState({
-        permission: 'preview',
-      });
-    } 
   }
 
   loadOptions = (value, callback) => {
@@ -131,8 +133,8 @@ class ShareToUser extends React.Component {
           obj.email = res.data.users[i].email;
           obj.label =
             <Fragment>
-              <img src={res.data.users[i].avatar_url} className="avatar reviewer-select-avatar" alt=""/>
+              <img src={res.data.users[i].avatar_url} className="select-module select-module-icon avatar" alt="Avatar"/>
-              <span className='reviewer-select-name'>{res.data.users[i].name}</span>
+              <span className='select-module select-module-name'>{res.data.users[i].name}</span>
             </Fragment>;
           this.options.push(obj);
         }
@@ -152,15 +154,13 @@ class ShareToUser extends React.Component {
     }
     if (this.props.isGroupOwnedRepo) {
       seafileAPI.shareGroupOwnedRepoToUser(repoID, this.state.permission, users).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
-
         let items = res.data.success.map(item => {
           let sharedItem = {
             'user_info': { 'nickname': item.user_name, 'name': item.user_email},
@@ -170,23 +170,46 @@ class ShareToUser extends React.Component {
           return sharedItem;
         });
         this.setState({
+          errorMsg: errorMsg,
           sharedItems: this.state.sharedItems.concat(items),
           selectedOption: null,
+          permission: 'rw',
         });
+      }).catch(error => {
+        if (error.response) {
+          let message = gettext('Library can not be shared to owner.');
+          let errMessage = [];
+          errMessage.push(message);
+          this.setState({
+            errorMsg: errMessage,
+            selectedOption: null,
+          });
+        }
       });
     } else {
       seafileAPI.shareFolder(repoID, path, 'user', this.state.permission, users).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',
         });
+      }).catch(error => {
+        if (error.response) {
+          let message = gettext('Library can not be shared to owner.');
+          let errMessage = [];
+          errMessage.push(message);
+          this.setState({
+            errorMsg: errMessage,
+            selectedOption: null,
+          });
+        }
       });
     }
   } 
@@ -209,14 +232,41 @@ 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.updateShareToUserItemPermission(repoID, path, 'user', username, permission).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 (
       <table>
         <thead> 
           <tr>
-            <th style={{'width': '50%'}}>{gettext('User')}</th>
+            <th style={{'width': '40%'}}>{gettext('User')}</th>
-            <th style={{'width': '30%'}}>{gettext('Permission')}</th>
+            <th style={{'width': '40%'}}>{gettext('Permission')}</th>
             <th></th>
           </tr>
           <tr>
@@ -224,7 +274,7 @@ class ShareToUser extends React.Component {
               <AsyncSelect
                 inputId={'react-select-1-input'}
                 className='reviewer-select' 
-                placeholder={gettext('Please enter 1 or more character')}
+                placeholder={gettext('Select users...')}
                 loadOptions={this.loadOptions}
                 onChange={this.handleSelectChange}
                 value={this.state.selectedOption}
@@ -235,32 +285,39 @@ class ShareToUser extends React.Component {
               />
             </td>
             <td>
-              <Input type="select" name="select" onChange={this.setPermission}>
+              <PermissionEditor 
-                <option>{gettext('Read-Write')}</option>
+                isTextMode={false}
-                <option>{gettext('Read-Only')}</option>
+                currentPermission={this.state.permission}
-                <option>{gettext('Admin')}</option>
+                permissions={this.permissions}
-                <option>{gettext('Preview-Edit-on-Cloud')}</option>
+                onPermissionChangedHandler={this.setPermission}
-                <option>{gettext('Preview-on-Cloud')}</option>
+              />
-              </Input>
             </td>
             <td>
               <Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
             </td>
           </tr>
-          <tr>
+          {this.state.errorMsg.length > 0 &&
-            <td colSpan={3}>
+            this.state.errorMsg.map((item, index) => {
-              {this.state.errorMsg.length > 0 &&
+              let errMessage = '';
-                this.state.errorMsg.map((item, index = 0, arr) => {
+              if (item.email) {
-                  return (
+                errMessage = item.email + ': ' + item.error_msg;
-                    <p className="error" key={index}>{this.state.errorMsg[index].email}
+              } else {
-                      {': '}{this.state.errorMsg[index].error_msg}</p>
+                errMessage = item;
-                  );
-                })
               }
-            </td>
+              return (
-          </tr>
+                <tr key={index}>
+                  <td colSpan={3}><p className="error">{errMessage}</p></td>
+                </tr>
+              );
+            })
+          }
         </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
+  currentPermission: 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.currentPermission) {
+      this.props.onPermissionChangedHandler(permission);
+    }
+    this.setState({isEditing: false});
+  }
+
+  onSelectHandler = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+  }
+
+  onHideSelect = () => {
+    this.setState({isEditing: false});
+  }
+
+  render() {
+    let { currentPermission, 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={currentPermission}>
+            {permissions.map((item, index) => {
+              return (
+                <option key={index} value={item}>{Utils.sharePerms(item)}</option>
+              )
+            })}
+          </Input>
+        }
+        {(isTextMode && !this.state.isEditing) &&
+          <div>
+            {Utils.sharePerms(currentPermission)}
+            <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;

media/css/seahub_react.css

@@ -1084,3 +1084,16 @@ table .menu-toggle {
 .wiki-list-table td {
     line-height: 1.5rem;
 }
+
+/* react select-module */
+.select-module {
+    font-size: 1rem;
+}
+.select-module.select-module-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.select-module.select-module-name {
+    margin-left: 0.5rem;
+}