improve org admin manage department

frontend/src/pages/org-admin/org-departments-list.js

@@ -9,6 +9,8 @@ import ModalPortal from '../../components/modal-portal';
 import AddDepartDialog from '../../components/dialog/org-add-department-dialog';
 import DeleteDepartDialog from '../../components/dialog/org-delete-department-dialog';
 import SetGroupQuotaDialog from '../../components/dialog/org-set-group-quota-dialog';
+import RenameDepartmentDialog from '../../components/dialog/org-rename-department-dialog';
+import OpMenu from '../../components/dialog/op-menu';
 import { siteRoot, gettext, orgID, lang } from '../../utils/constants';
 import '../../css/org-department-item.css';
 
@@ -25,6 +27,7 @@ class OrgDepartmentsList extends React.Component {
       showDeleteDepartDialog: false,
       showSetGroupQuotaDialog: false,
       isShowAddDepartDialog: false,
+      isItemFreezed: false,
     };
   }
 
@@ -38,6 +41,25 @@ class OrgDepartmentsList extends React.Component {
     });
   }
 
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  onDepartmentNameChanged = (dept) => {
+    this.setState({
+      groups: this.state.groups.map(item => {
+        if (item.id == dept.id) {
+          item.name = dept.name;
+        }
+        return item;
+      })
+    });
+  }
+
   showDeleteDepartDialog = (group) => {
     this.setState({ showDeleteDepartDialog: true, groupID: group.id, groupName: group.name });
   }
@@ -105,6 +127,10 @@ class OrgDepartmentsList extends React.Component {
                         <React.Fragment key={group.id}>
                           <GroupItem
                             group={group}
+                            isItemFreezed={this.state.isItemFreezed}
+                            onFreezedItem={this.onFreezedItem}
+                            onUnfreezedItem={this.onUnfreezedItem}
+                            onDepartmentNameChanged={this.onDepartmentNameChanged}
                             showDeleteDepartDialog={this.showDeleteDepartDialog}
                             showSetGroupQuotaDialog={this.showSetGroupQuotaDialog}
                           />
@@ -151,39 +177,118 @@ class GroupItem extends React.Component {
     super(props);
     this.state = {
       highlight: false,
+      isOpIconShown: false,
+      isRenameDialogOpen: false,
     };
   }
 
   onMouseEnter = () => {
-    this.setState({ highlight: true });
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: true,
+        highlight: true
+      });
+    }
   }
 
   onMouseLeave = () => {
-    this.setState({ highlight: false });
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: false,
+        highlight: false
+      });
+    }
+  }
+
+  translateOperations = (item) => {
+    let translateResult = '';
+    switch(item) {
+      case 'Rename':
+        translateResult = gettext('Rename');
+        break;
+      case 'Delete':
+        translateResult = gettext('Delete');
+        break;
+      default:
+        break;
+    }
+
+    return translateResult;
+  }
+
+  onMenuItemClick = (operation) => {
+    const { group } = this.props;
+    switch(operation) {
+      case 'Rename':
+        this.toggleRenameDialog();
+        break;
+      case 'Delete':
+        this.props.showDeleteDepartDialog(group);
+        break;
+      default:
+        break;
+    }
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({
+      highlight: false,
+      isOpIconShow: false
+    });
+    this.props.onUnfreezedItem();
+  }
+
+  toggleRenameDialog = () => {
+    this.setState({
+      isRenameDialogOpen: !this.state.isRenameDialogOpen
+    });
   }
 
   render() {
     const group = this.props.group;
-    const highlight = this.state.highlight;
+    const { highlight, isOpIconShown, isRenameDialogOpen } = this.state;
     const newHref = siteRoot+ 'org/departmentadmin/groups/' + group.id + '/';
     return (
-      <tr className={highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td><Link to={newHref}>{group.name}</Link></td>
-        <td>{moment(group.created_at).fromNow()}</td>
-        <td onClick={this.props.showSetGroupQuotaDialog.bind(this, group.id)}>
-          {Utils.bytesToSize(group.quota)}{' '}
-          <span title="Edit Quota" className={`fa fa-pencil-alt attr-action-icon ${highlight ? '' : 'vh'}`}></span>
-        </td>
-        <td className="cursor-pointer text-center" onClick={this.props.showDeleteDepartDialog.bind(this, group)}>
-          <span className={`sf2-icon-delete action-icon  ${highlight ? '' : 'vh'}`} title="Delete"></span>
-        </td>
-      </tr>
+      <Fragment>
+        <tr className={highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+          <td><Link to={newHref}>{group.name}</Link></td>
+          <td>{moment(group.created_at).fromNow()}</td>
+          <td onClick={this.props.showSetGroupQuotaDialog.bind(this, group.id)}>
+            {Utils.bytesToSize(group.quota)}{' '}
+            <span title="Edit Quota" className={`fa fa-pencil-alt attr-action-icon ${highlight ? '' : 'vh'}`}></span>
+          </td>
+          <td>
+            {isOpIconShown &&
+              <OpMenu
+                operations={['Rename', 'Delete']}
+                translateOperations={this.translateOperations}
+                onMenuItemClick={this.onMenuItemClick}
+                onFreezedItem={this.props.onFreezedItem}
+                onUnfreezedItem={this.onUnfreezedItem}
+              />
+            }
+          </td>
+        </tr>
+        {isRenameDialogOpen && (
+          <RenameDepartmentDialog
+            orgID={orgID}
+            groupID={group.id}
+            name={group.name}
+            toggle={this.toggleRenameDialog}
+            onDepartmentNameChanged={this.props.onDepartmentNameChanged}
+          />
+        )}
+      </Fragment>
     );
   }
 }
 
 const GroupItemPropTypes = {
   group: PropTypes.object.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired,
+  onFreezedItem: PropTypes.func.isRequired,
+  onUnfreezedItem: PropTypes.func.isRequired,
+  onDepartmentNameChanged: PropTypes.func.isRequired,
   showSetGroupQuotaDialog: PropTypes.func.isRequired,
   showDeleteDepartDialog: PropTypes.func.isRequired,
 };