Org active (#7496)

* admin set org active/inactive

* update

* update

* update

frontend/src/pages/sys-admin/orgs/orgs-content.js

@@ -8,7 +8,7 @@ import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
-import RoleSelector from '../../../components/single-selector';
+import Selector from '../../../components/single-selector';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import UserLink from '../user-link';
 import toaster from '../../../components/toast';
@@ -52,8 +52,9 @@ class Content extends Component {
           <table>
             <thead>
               <tr>
-                <th width="20%">{gettext('Name')}</th>
-                <th width="20%">{gettext('Creator')}</th>
+                <th width="15%">{gettext('Name')}</th>
+                <th width="15%">{gettext('Creator')}</th>
+                <th width="10%">{gettext('Status')}</th>
                 <th width="20%">{gettext('Role')}</th>
                 <th width="15%">{gettext('Space Used')}</th>
                 <th width="20%">{gettext('Created At')}</th>
@@ -66,6 +67,7 @@ class Content extends Component {
                   key={index}
                   item={item}
                   updateRole={this.props.updateRole}
+                  updateStatus={this.props.updateStatus}
                   deleteOrg={this.props.deleteOrg}
                   isItemFreezed={this.state.isItemFreezed}
                   toggleItemFreezed={this.toggleItemFreezed}
@@ -97,6 +99,7 @@ Content.propTypes = {
   currentPage: PropTypes.number,
   items: PropTypes.array.isRequired,
   updateRole: PropTypes.func.isRequired,
+  updateStatus: PropTypes.func.isRequired,
   deleteOrg: PropTypes.func.isRequired,
   hasNextPage: PropTypes.bool,
   resetPerPage: PropTypes.func,
@@ -111,6 +114,7 @@ class Item extends Component {
       highlighted: false,
       isDeleteDialogOpen: false,
       deleteDialogMsg: '',
+      isConfirmInactiveDialogOpen: false
     };
   }
 
@@ -148,6 +152,31 @@ class Item extends Component {
     });
   };
 
+  toggleConfirmInactiveDialog = () => {
+    this.setState({ isConfirmInactiveDialogOpen: !this.state.isConfirmInactiveDialogOpen });
+  };
+
+  translateStatus = (status) => {
+    switch (status) {
+      case 'active':
+        return gettext('Active');
+      case 'inactive':
+        return gettext('Inactive');
+    }
+  };
+
+  updateStatus = (statusOption) => {
+    const isActive = statusOption.value == 'active';
+    if (isActive) {
+      toaster.notify(gettext('It may take some time, please wait.'));
+    }
+    this.props.updateStatus(this.props.item.org_id, isActive);
+  };
+
+  setOrgInactive = () => {
+    this.props.updateStatus(this.props.item.org_id, false);
+  };
+
   translateRole = (role) => {
     switch (role) {
       case 'default':
@@ -170,7 +199,12 @@ class Item extends Component {
 
   render() {
     const { item } = this.props;
-    const { highlighted, isDeleteDialogOpen, deleteDialogMsg } = this.state;
+    const {
+      highlighted,
+      isDeleteDialogOpen,
+      deleteDialogMsg,
+      isConfirmInactiveDialogOpen
+    } = this.state;
 
     const { role: curRole } = item;
     this.roleOptions = availableRoles.map(item => {
@@ -182,6 +216,18 @@ class Item extends Component {
     });
     const currentSelectedOption = this.roleOptions.filter(item => item.isSelected)[0];
 
+    // edit status
+    const curStatus = item.is_active ? 'active' : 'inactive';
+    this.statusOptions = ['active', 'inactive'].map(item => {
+      return {
+        value: item,
+        text: this.translateStatus(item),
+        isSelected: item == curStatus
+      };
+    });
+    const currentSelectedStatusOption = this.statusOptions.filter(item => item.isSelected)[0];
+    const confirmSetUserInactiveMsg = gettext('Are you sure you want to set {user_placeholder} inactive?').replace('{user_placeholder}', item.org_name);
+
     return (
       <Fragment>
         <tr className={highlighted ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
@@ -190,7 +236,17 @@ class Item extends Component {
             <UserLink email={item.creator_email} name={item.creator_name} />
           </td>
           <td>
-            <RoleSelector
+            <Selector
+              isDropdownToggleShown={highlighted}
+              currentSelectedOption={currentSelectedStatusOption}
+              options={this.statusOptions}
+              selectOption={this.updateStatus}
+              toggleItemFreezed={this.props.toggleItemFreezed}
+              operationBeforeSelect={item.is_active ? this.toggleConfirmInactiveDialog : undefined}
+            />
+          </td>
+          <td>
+            <Selector
               isDropdownToggleShown={highlighted}
               currentSelectedOption={currentSelectedOption}
               options={this.roleOptions}
@@ -213,6 +269,15 @@ class Item extends Component {
             toggleDialog={this.toggleDeleteDialog}
           />
         }
+        {isConfirmInactiveDialogOpen &&
+          <CommonOperationConfirmationDialog
+            title={gettext('Set organization inactive')}
+            message={confirmSetUserInactiveMsg}
+            executeOperation={this.setOrgInactive}
+            confirmBtnText={gettext('Set')}
+            toggleDialog={this.toggleConfirmInactiveDialog}
+          />
+        }
       </Fragment>
     );
   }
@@ -221,6 +286,7 @@ class Item extends Component {
 Item.propTypes = {
   item: PropTypes.object.isRequired,
   updateRole: PropTypes.func.isRequired,
+  updateStatus: PropTypes.func.isRequired,
   deleteOrg: PropTypes.func.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
   toggleItemFreezed: PropTypes.func.isRequired

frontend/src/pages/sys-admin/orgs/orgs.js

@@ -66,6 +66,24 @@ class Orgs extends Component {
     this.setState({ isAddOrgDialogOpen: !this.state.isAddOrgDialogOpen });
   };
 
+  updateStatus = (orgID, isActive) => {
+    let orgInfo = {};
+    orgInfo.isActive = isActive;
+    systemAdminAPI.sysAdminUpdateOrg(orgID, orgInfo).then(res => {
+      let newOrgList = this.state.orgList.map(org => {
+        if (org.org_id == orgID) {
+          org.is_active = isActive;
+        }
+        return org;
+      });
+      this.setState({ orgList: newOrgList });
+      toaster.success(gettext('Edit succeeded'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   updateRole = (orgID, role) => {
     let orgInfo = {};
     orgInfo.role = role;
@@ -143,6 +161,7 @@ class Orgs extends Component {
                 resetPerPage={this.resetPerPage}
                 getListByPage={this.getItemsByPage}
                 updateRole={this.updateRole}
+                updateStatus={this.updateStatus}
                 deleteOrg={this.deleteOrg}
               />
             </div>

frontend/src/utils/system-admin-api.js

@@ -608,6 +608,9 @@ class SystemAdminAPI {
     if (orgInfo.role) {
       formData.append('role', orgInfo.role);
     }
+    if (orgInfo.isActive != undefined) {
+      formData.append('is_active', orgInfo.isActive);
+    }
     return this.req.put(url, formData);
   }