group member leave group

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext, username } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+
+class LeaveGroupDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  dismissGroup = () => {
+    let that = this;
+    seafileAPI.quitGroup(this.props.groupID, username).then((res)=> {
+      that.props.onGroupChanged();
+    });
+  }
+
+  render() {
+    return(
+      <Modal isOpen={true} toggle={this.props.toggleLeaveGroupDialog}>
+        <ModalHeader toggle={this.props.toggleLeaveGroupDialog}>{gettext('Leave Group')}</ModalHeader>
+        <ModalBody>
+          <span>{gettext('Really want to leave this group?')}</span>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggleLeaveGroupDialog}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.dismissGroup}>{gettext('Leave')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+const LeaveGroupDialogPropTypes = {
+  toggleLeaveGroupDialog: PropTypes.func.isRequired,
+  groupID: PropTypes.string.isRequired,
+  onGroupChanged: PropTypes.func.isRequired,
+};
+
+LeaveGroupDialog.propTypes = LeaveGroupDialogPropTypes;
+
+export default LeaveGroupDialog;

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

@@ -20,6 +20,7 @@ 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 LeaveGroupDialog from '../../components/dialog/leave-group-dialog';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
 import LibDetail from '../../components/dirent-detail/lib-details';
 
@@ -60,6 +61,7 @@ class GroupView extends React.Component {
       showManageMembersDialog: false,
       groupMembers: [],
       isShowDetails: false,
+      showLeaveGroupDialog: false,
     };
   }
 
@@ -307,6 +309,13 @@ class GroupView extends React.Component {
     });
   }
 
+  toggleLeaveGroupDialog = () => {
+    this.setState({
+      showLeaveGroupDialog: !this.state.showLeaveGroupDialog,
+      showGroupDropdown: false,
+    });
+  }
+
   listGroupMembers = () => {
     seafileAPI.listGroupMembers(this.props.groupID).then((res) => {
       this.setState({
@@ -407,7 +416,7 @@ class GroupView extends React.Component {
                     )}
                   </div>
                   <div className="path-tool">
-                    { (isShowSettingIcon && this.state.isStaff) &&
+                    { (isShowSettingIcon) &&
                     <React.Fragment>
                       <a href="#" className="sf2-icon-cog1 action-icon group-top-action-icon" title="Settings" id="settings"
                         onClick={this.toggleGroupDropdown}></a>
@@ -419,6 +428,7 @@ class GroupView extends React.Component {
                             onClick={this.toggleGroupDropdown}></a>
                         </div>
                         <div className="sf-popover-con">
+                          {(this.state.isStaff || this.state.isOwner) &&
                           <ul className="sf-popover-list">
                             <li><a href="#" className="sf-popover-item" onClick={this.toggleRenameGroupDialog} >{gettext('Rename')}</a></li>
                             {
@@ -426,16 +436,25 @@ class GroupView extends React.Component {
                               <li><a href="#" className="sf-popover-item" onClick={this.toggleTransferGroupDialog} >{gettext('Transfer')}</a></li>
                             }
                           </ul>
+                          }
+                          {(this.state.isStaff || this.state.isOwner) &&
                           <ul className="sf-popover-list">
                             {/* <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('Delete Group')}</a></li>
                             </ul>
                           }
+                          {/* gourp owner only can dissmiss group, admin could not quit, department member could not quit */}
+                          {(!this.state.isOwner && !this.state.isStaff && !isDepartmentGroup) &&
+                          <ul className="sf-popover-list">
+                            <li><a href="#" className="sf-popover-item" onClick={this.toggleLeaveGroupDialog} >{gettext('Leave Group')}</a></li>
+                          </ul>
+                          }
                         </div>
                       </Popover>
                     </React.Fragment>
@@ -557,6 +576,13 @@ class GroupView extends React.Component {
             isOwner={this.state.isOwner}
           />
         }
+        {this.state.showLeaveGroupDialog &&
+          <LeaveGroupDialog
+            toggleLeaveGroupDialog={this.toggleLeaveGroupDialog}
+            groupID={this.props.groupID}
+            onGroupChanged={this.props.onGroupChanged}
+          />
+        }
       </Fragment>
     );
   }