group (#2696)

frontend/src/components/dialog/manage-members-dialog.js

@@ -0,0 +1,234 @@
+import React from 'react';
+import AsyncSelect from 'react-select/lib/Async';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api.js';
+import '../../css/manage-members-dialog.css';
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  toggleManageMembersDialog: PropTypes.func.isRequired,
+  onGroupChanged: PropTypes.func.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+};
+
+class ManageMembersDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      groupMembers: [],
+      selectedOption: null,
+      errMessage: '',
+    };
+    this.options = [];
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({
+      selectedOption: option,
+      errMessage: '',
+    });
+    this.options = [];
+  }
+
+  loadOptions = (value, callback) => {
+    if (value.trim().length > 0) {
+      seafileAPI.searchUsers(value.trim()).then((res) => {
+        this.options = [];
+        for (let i = 0 ; i < res.data.users.length; i++) {
+          let obj = {};
+          obj.value = res.data.users[i].name;
+          obj.email = res.data.users[i].email;
+          obj.label =
+            <React.Fragment>
+              <img src={res.data.users[i].avatar_url} className="avatar" alt=""/>
+              <span className="transfer-group-name">{res.data.users[i].name}</span>
+            </React.Fragment>;
+          this.options.push(obj);
+        }
+        callback(this.options);
+      });
+    }
+  }
+
+  addGroupMember = () => {
+    if (this.state.selectedOption && this.state.selectedOption.email) {
+      this.refs.memberSelect.select.onChange([], { action: 'clear' });
+      seafileAPI.addGroupMember(this.props.groupID, this.state.selectedOption.email).then((res) => {
+        this.listGroupMembers();
+        this.options = [];
+        this.setState({
+          selectedOption: null,
+        });
+      }).catch((error) => {
+        if (error.response) {
+          this.setState({
+            errMessage: error.response.data.error_msg
+          });
+        }
+      });
+    }
+  }
+
+  listGroupMembers = () => {
+    seafileAPI.listGroupMembers(this.props.groupID).then((res) => {
+      this.setState({
+        groupMembers: res.data
+      });
+    });
+  }
+
+  deleteMember = (name) => {
+    seafileAPI.deleteGroupMember(this.props.groupID, name).then((res) => {
+      this.listGroupMembers();
+    });
+  }
+
+  toggle = () => {
+    this.props.toggleManageMembersDialog();
+  }
+
+  componentDidMount() {
+    this.listGroupMembers();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Manage group members')}</ModalHeader>
+        <ModalBody>
+          <p>{gettext('Add group member')}</p>
+          <AsyncSelect
+            className='group-transfer-select'
+            isClearable classNamePrefix
+            loadOptions={this.loadOptions}
+            onChange={this.handleSelectChange}
+            placeholder={gettext('Search users...')}
+            ref="memberSelect"
+          />
+          <span className="error">{this.state.errMessage}</span>
+          <div className="manage-members">
+            <Table hover size="sm" className="manage-members-table">
+              <thead>
+                <tr>
+                  <th width="15%"></th>
+                  <th width="45%">{gettext('Name')}</th>
+                  <th width="30%">{gettext('Role')}</th>
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {
+                  this.state.groupMembers.length > 0 &&
+                  this.state.groupMembers.map((item, index = 0) => {
+                    return (
+                      <tr key={index} >
+                        <th scope="row"><img className="avatar" src={item.avatar_url} alt=""/></th>
+                        <td>{item.name}</td>
+                        <td>
+                          {
+                            ((this.props.isOwner === false) || (this.props.isOwner === true && item.role === 'Owner')) && 
+                            <span className="group-admin">{item.role}</span>
+                          }
+                          {
+                            (this.props.isOwner === true && item.role !== 'Owner') &&
+                            <ChangeMemberAdmin
+                              item={item}
+                              listGroupMembers={this.listGroupMembers}
+                              groupID={this.props.groupID}
+                              isOwner={this.props.isOwner}
+                            />
+                          }
+                        </td>
+                        <td>
+                          {
+                            ((item.role !== 'Owner' && this.props.isOwner === true) ||
+                            (item.role === 'Member' && this.props.isOwner === false)) &&
+                            <i
+                              className="fa fa-times delete-group-member-icon"
+                              name={item.email}
+                              onClick={this.deleteMember.bind(this, item.email)}>
+                            </i>
+                          }
+                        </td>
+                      </tr>
+                    );
+                  })
+                }
+              </tbody>
+            </Table>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
+          <Button color="primary" onClick={this.addGroupMember}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+ManageMembersDialog.propTypes = propTypes;
+
+const ChangeMemberAdminPropTypes = {
+  item: PropTypes.object,
+  listGroupMembers: PropTypes.func.isRequired,
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+};
+
+class ChangeMemberAdmin extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      changeAdmin: false
+    };
+  }
+
+  toggleGroupAdmin = () => {
+    this.setState({
+      changeAdmin: !this.state.changeAdmin
+    });
+  }
+
+  setGroupAdmin = (e) => {
+    const isAdmin = e.target.value.indexOf('admin') > -1 ? 'true' : 'false';
+    const userName = e.target.value.split('-', 2)[1];
+    seafileAPI.setGroupAdmin(this.props.groupID, userName, isAdmin).then((res) => {
+      this.props.listGroupMembers();
+      this.setState({
+        changeAdmin: false
+      });
+    });
+  }
+
+  render() {
+    const item = this.props.item;
+    const value = item.email;
+    let options = item.role === 'Member' ?
+      (<React.Fragment>
+        <option value={`member-${value}`}>{gettext('Member')}</option>
+        <option value={`admin-${value}`}>{gettext('Admin')}</option>
+      </React.Fragment>):
+      (<React.Fragment>
+        <option value={`admin-${value}`}>{gettext('Admin')}</option>
+        <option value={`member-${value}`}>{gettext('Member')}</option>
+      </React.Fragment>);
+    let admin = this.state.changeAdmin ? 
+      (<select className="custom-select-sm" onChange={this.setGroupAdmin}>{options}</select>) :
+      (<span className="group-admin">{item.role}
+        <i className="fa fa-pencil toggle-group-admin-icon" onClick={this.toggleGroupAdmin}></i>
+      </span>);
+    return(
+      admin
+    );
+  }
+}
+
+ChangeMemberAdmin.propTypes = ChangeMemberAdminPropTypes;
+
+
+export default ManageMembersDialog;

frontend/src/components/dialog/transfer-group-dialog.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import AsyncSelect from 'react-select/lib/Async';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api.js';
+
+import '../../css/transfer-group-dialog.css';
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  toggleTransferGroupDialog: PropTypes.func.isRequired,
+  onGroupChanged: PropTypes.func.isRequired
+};
+
+class TransferGroupDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: null,
+      errMessage: '',
+    };
+    this.options = [];
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({
+      selectedOption: option,
+      errMessage: '',
+    });
+    this.options = [];
+  }
+
+  loadOptions = (value, callback) => {
+    if (value.trim().length > 0) {
+      seafileAPI.searchUsers(value.trim()).then((res) => {
+        this.options = [];
+        for (let i = 0 ; i < res.data.users.length; i++) {
+          let obj = {};
+          obj.value = res.data.users[i].name;
+          obj.email = res.data.users[i].email;
+          obj.label =
+            <React.Fragment>
+              <img src={res.data.users[i].avatar_url} className="avatar" alt=""/>
+              <span className="transfer-group-name">{res.data.users[i].name}</span>
+            </React.Fragment>;
+          this.options.push(obj);
+        }
+        callback(this.options);
+      });
+    }
+  }
+
+  transferGroup = () => {
+    const email = this.state.selectedOption && this.state.selectedOption.email;
+    if (email) {
+      seafileAPI.transferGroup(this.props.groupID, email).then((res) => {
+        this.props.toggleTransferGroupDialog();
+      }).catch((error) => {
+        if (error.response) {
+          this.setState({
+            errMessage: error.response.data.error_msg
+          });
+        }
+      });
+    }
+  }
+
+  toggle = () => {
+    this.props.toggleTransferGroupDialog();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Transfer Group')}</ModalHeader>
+        <ModalBody>
+          <p>{gettext('Transfer group to')}</p>
+          <AsyncSelect
+            className='group-transfer-select'
+            isClearable classNamePrefix
+            loadOptions={this.loadOptions}
+            onChange={this.handleSelectChange}
+            placeholder={gettext('Please enter 1 or more character')}
+          />
+          <div className="error">{this.state.errMessage}</div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
+          <Button color="primary" onClick={this.transferGroup}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+TransferGroupDialog.propTypes = propTypes;
+
+export default TransferGroupDialog;

frontend/src/css/group-view.css

@@ -0,0 +1,19 @@
+.group-member-list {
+  box-sizing: border-box;
+}
+.group-member-list .user-item {
+  margin: 10px -10px;
+  padding: 0 10px;
+  height: 2rem;
+  line-height: 2rem;
+}
+.group-member-list .user-item:hover {
+  background-color: #f8f8f8;
+}
+.group-member-list .user-item .group-member-name {
+  margin: 0 5px;
+}
+.group-member-list .user-item .group-member-admin {
+  color: #888;
+  font-size: 12px;
+}

frontend/src/css/manage-members-dialog.css

@@ -0,0 +1,28 @@
+.manage-members {
+  max-height: 300px;
+  overflow-y: scroll;
+}
+.manage-members-table {
+  margin: 1rem 0 2rem;
+}
+.manage-members-table th,
+.manage-members-table td {
+  vertical-align: middle;
+  text-align: left;
+}
+.toggle-group-admin-icon,
+.delete-group-member-icon {
+  opacity: 0;
+  cursor: pointer;
+  color: #888;
+  margin-left: 5px;
+}
+.manage-members-table tr:hover .toggle-group-admin-icon,
+.manage-members-table tr:hover .delete-group-member-icon {
+  opacity: 1;
+}
+
+.toggle-group-admin-icon:hover,
+.delete-group-member-icon:hover {
+  color: #333;
+}

frontend/src/css/transfer-group-dialog.css

@@ -0,0 +1,9 @@
+.transfer-group-name {
+  line-height: 2rem;
+  margin-left: 10px;
+}
+
+.group-transfer-select .true__dropdown-indicator,
+.reviewer-select .true__indicator-separator {
+  display: none;
+}

frontend/src/pages/groups/group-view.js

@@ -13,7 +13,11 @@ import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
 import CreateDepartmentRepoDialog from '../../components/dialog/create-department-repo-dialog';
 import DismissGroupDialog from '../../components/dialog/dismiss-group-dialog';
 import RenameGroupDialog from '../../components/dialog/rename-group-dialog';
+import TransferGroupDialog from '../../components/dialog/transfer-group-dialog';
+// import ImportMembersDialog from '../../components/dialog/import-members-dialog';
+import ManageMembersDialog from '../../components/dialog/manage-members-dialog';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
+import '../../css/group-view.css';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
@@ -34,13 +38,19 @@ class GroupView extends React.Component {
       emptyTip: null,
       currentGroup: null,
       isStaff: false,
+      isOwner: false,
       repoList: [],
       libraryType: 'group',
       isCreateRepoDialogShow: false,
       isDepartmentGroup: false,
       showGroupDropdown: false,
+      showGroupMembersPopover: false,
       showRenameGroupDialog: false,
       showDismissGroupDialog: false,
+      showTransferGroupDialog: false,
+      // showImportMembersDialog: false,
+      showManageMembersDialog: false,
+      groupMembers: [],
     };
   }
 
@@ -60,12 +70,14 @@ class GroupView extends React.Component {
       let currentGroup = new Group(res.data);
       let emptyTip = this.getEmptyTip(currentGroup);
       let isStaff  = currentGroup.admins.indexOf(username) > -1;  //for item operations
+      let isOwner = currentGroup.owner === username ? true : false;
       let isDepartmentGroup = currentGroup.owner === DEPARETMENT_GROUP_ONWER_NAME;
       this.setState({
         emptyTip: emptyTip,
         currentGroup: currentGroup,
         isStaff: isStaff,
         isDepartmentGroup: isDepartmentGroup,
+        isOwner: isOwner,
       });
       this.loadRepos(groupID);
     }).catch((error) => {
@@ -243,6 +255,45 @@ class GroupView extends React.Component {
     });
   }
 
+  toggleTransferGroupDialog = () => {
+    this.setState({
+      showTransferGroupDialog: !this.state.showTransferGroupDialog
+    });
+  }
+
+  // toggleImportMembersDialog= () => {
+  //   this.setState({
+  //     showImportMembersDialog: !this.state.showImportMembersDialog
+  //   });
+  // }
+
+  toggleManageMembersDialog = () => {
+    this.setState({
+      showManageMembersDialog: !this.state.showManageMembersDialog
+    });
+  }
+
+  listGroupMembers = () => {
+    seafileAPI.listGroupMembers(this.props.groupID).then((res) => {
+      this.setState({
+        groupMembers: res.data
+      });
+    });
+  }
+
+  toggleGroupMembersPopover = (state) => {
+    if (state === 'open') {
+      this.listGroupMembers();
+      this.setState({
+        showGroupMembersPopover: true
+      });
+    } else {
+      this.setState({
+        showGroupMembersPopover: false
+      });
+    }
+  }
+
   render() {
     let { errMessage, emptyTip, currentGroup } = this.state;
     let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
@@ -274,29 +325,69 @@ class GroupView extends React.Component {
                     )}
                   </div>
                   <div className="path-tool">
-                    { isShowSettingIcon &&
+                    { (isShowSettingIcon && this.state.isStaff) &&
                     <React.Fragment>
                       <a href="#" className="sf2-icon-cog1 op-icon group-top-op-icon" title="Settings" id="settings"
                         onClick={this.toggleGroupDropdown}></a>
                       <Popover placement="bottom" isOpen={this.state.showGroupDropdown} target="settings"
                         toggle={this.toggleGroupDropdown} hideArrow={true} className="sf-popover">
                         <div className="sf-popover-hd sf-popover-title">
-                          <span>{gettext("Settings")}</span>
+                          <span>{gettext('Settings')}</span>
                           <a href="#" className="sf-popover-close js-close sf2-icon-x1 op-icon"
                             onClick={this.toggleGroupDropdown}></a>
                         </div>
                         <div className="sf-popover-con">
                           <ul className="sf-popover-list">
-                            <li><a href="#" className="sf-popover-item" onClick={this.toggleRenameGroupDialog} >{gettext("Rename")}</a></li>
+                            <li><a href="#" className="sf-popover-item" onClick={this.toggleRenameGroupDialog} >{gettext('Rename')}</a></li>
+                            {
+                              this.state.isOwner &&
+                              <li><a href="#" className="sf-popover-item" onClick={this.toggleTransferGroupDialog} >{gettext('Transfer')}</a></li>
+                            }
                           </ul>
                           <ul className="sf-popover-list">
-                            <li><a href="#" className="sf-popover-item" onClick={this.toggleDismissGroupDialog}>{gettext("Dismiss")}</a></li>
+                            {/* <li><a href="#" className="sf-popover-item" onClick={this.toggleImportMembersDialog} >{gettext('Import Members')}</a></li> */}
+                            <li><a href="#" className="sf-popover-item" onClick={this.toggleManageMembersDialog} >{gettext('Manage Members')}</a></li>
                           </ul>
+                          {
+                            this.state.isOwner &&
+                            <ul className="sf-popover-list">
+                              <li><a href="#" className="sf-popover-item" onClick={this.toggleDismissGroupDialog}>{gettext('Dismiss')}</a></li>
+                            </ul>
+                          }
                         </div>
                       </Popover>
                     </React.Fragment>
                     }
-                    <a href="#" className="sf2-icon-user2 op-icon group-top-op-icon" title={gettext("Members")} aria-label={gettext("Members")}></a>
+                    <a href="#"
+                      className="sf2-icon-user2 op-icon group-top-op-icon"
+                      title={gettext('Members')} id="groupMembers"
+                      onClick={() => this.toggleGroupMembersPopover('open')}>
+                    </a>
+                    <Popover placement="bottom" isOpen={this.state.showGroupMembersPopover} target="groupMembers"
+                      toggle={this.toggleGroupMembersPopover} hideArrow={true} className="sf-popover">
+                      <div className="sf-popover-hd sf-popover-title">
+                        <span>{gettext('Members')}</span>
+                        <a href="#" className="sf-popover-close js-close sf2-icon-x1 op-icon"
+                          onClick={this.toggleGroupMembersPopover}></a>
+                      </div>
+                      <div className="sf-popover-con">
+                        <ul className="sf-popover-list group-member-list">
+                          {
+                            this.state.groupMembers.map(function(item, index) {
+                              return (
+                                <li className="user-item sf-popover-item" key={index}>
+                                  <img src={item.avatar_url} alt="" className="group-member-avatar avatar"/>
+                                  <span className="txt-item ellipsis">
+                                    <span className="group-member-name">{item.name}</span>
+                                    <span className="group-member-admin">{item.role}</span>
+                                  </span>
+                                </li>
+                              );
+                            })
+                          }
+                        </ul>
+                      </div>
+                    </Popover>
                   </div>
                 </Fragment>
               )}
@@ -332,7 +423,7 @@ class GroupView extends React.Component {
             onCreateRepo={this.onCreateRepo}
           />
         }
-        { this.state.showRenameGroupDialog &&
+        {this.state.showRenameGroupDialog &&
           <RenameGroupDialog
             showRenameGroupDialog={this.state.showRenameGroupDialog}
             toggleRenameGroupDialog={this.toggleRenameGroupDialog}
@@ -341,7 +432,7 @@ class GroupView extends React.Component {
             onGroupChanged={this.props.onGroupChanged}
           />
         }
-        { this.state.showDismissGroupDialog &&
+        {this.state.showDismissGroupDialog &&
           <DismissGroupDialog
             showDismissGroupDialog={this.state.showDismissGroupDialog}
             toggleDismissGroupDialog={this.toggleDismissGroupDialog}
@@ -350,6 +441,28 @@ class GroupView extends React.Component {
             onGroupChanged={this.props.onGroupChanged}
           />
         }
+        {this.state.showTransferGroupDialog &&
+          <TransferGroupDialog
+            toggleTransferGroupDialog={this.toggleTransferGroupDialog}
+            groupID={this.props.groupID}
+            onGroupChanged={this.props.onGroupChanged}
+          />
+        }
+        {/* this.state.showImportMembersDialog &&
+          <ImportMembersDialog
+            toggleImportMembersDialog={this.toggleImportMembersDialog}
+            groupID={this.props.groupID}
+            onGroupChanged={this.props.onGroupChanged}
+          />
+        */}
+        {this.state.showManageMembersDialog &&
+          <ManageMembersDialog
+            toggleManageMembersDialog={this.toggleManageMembersDialog}
+            groupID={this.props.groupID}
+            onGroupChanged={this.props.onGroupChanged}
+            isOwner={this.state.isOwner}
+          />
+        }
       </Fragment>
     );
   }