web: People: Added opportunity to Enable/Disable group of users

products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js

@@ -1,11 +1,59 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { GroupButtonsMenu, DropDownItem, Text, toastr, ContextMenuButton } from 'asc-web-components';
 import { connect } from 'react-redux';
-import { getSelectedGroup } from '../../../../../store/people/selectors';
+import { getSelectedGroup, getSelectionIds } from '../../../../../store/people/selectors';
 import { isAdmin } from '../../../../../store/auth/selectors';
 import { withTranslation } from 'react-i18next';
+import { updateUserStatus } from '../../../../../store/people/actions';
+import { EmployeeStatus } from '../../../../../helpers/constants';
 
-const getPeopleItems = (onSelect, t) => [
+const contextOptions = () => {
+  return [
+    {
+      key: "edit-group",
+      label: "Edit",
+      onClick: toastr.success.bind(this, "Edit group action")
+    },
+    {
+      key: "delete-group",
+      label: "Delete",
+      onClick: toastr.success.bind(this, "Delete group action")
+    }
+  ];
+};
+
+const wrapperStyle = {
+  display: "flex",
+  alignItems: "center"
+};
+
+const SectionHeaderContent = ({
+    isHeaderVisible,
+    isHeaderIndeterminate,
+    isHeaderChecked,
+    onCheck,
+    onSelect,
+    onClose,
+    group,
+    isAdmin,
+    t,
+    selection,
+    updateUserStatus
+  }) => {
+    const selectedUserIds = getSelectionIds(selection);
+    console.log("SectionHeaderContent render", selection, selectedUserIds);
+
+    const onSetActive = useCallback(() => { 
+      updateUserStatus(EmployeeStatus.Active, selectedUserIds);
+      toastr.success("Set active action"); 
+    }, [selectedUserIds, updateUserStatus]);
+
+    const onSetDisabled = useCallback(() => { 
+      updateUserStatus(EmployeeStatus.Disabled, selectedUserIds);
+          toastr.success("Set disabled action"); 
+    }, [selectedUserIds, updateUserStatus]);
+
+    const menuItems = [
       {
         label: "Select",
         isDropdown: true,
@@ -21,67 +69,41 @@ const getPeopleItems = (onSelect, t) => [
       },
       {
         label: "Make employee",
+        disabled: !selection.length,
         onClick: toastr.success.bind(this, "Make employee action")
       },
       {
         label: "Make guest",
+        disabled: !selection.length,
         onClick: toastr.success.bind(this, "Make guest action")
       },
       {
         label: "Set active",
-      onClick: toastr.success.bind(this, "Set active action")
+        disabled: !selection.length,
+        onClick: onSetActive
       },
       {
         label: "Set disabled",
-      onClick: toastr.success.bind(this, "Set disabled action")
+        disabled: !selection.length,
+        onClick: onSetDisabled
       },
       {
         label: "Invite again",
+        disabled: !selection.length,
         onClick: toastr.success.bind(this, "Invite again action")
       },
       {
         label: "Send e-mail",
+        disabled: !selection.length,
         onClick: toastr.success.bind(this, "Send e-mail action")
       },
       {
         label: t('PeopleResource:DeleteButton'),
+        disabled: !selection.length,
         onClick: toastr.success.bind(this, "Delete action")
       }
     ];
 
-  const contextOptions = () => {
-    return [
-      {
-        key: "edit-group",
-        label: "Edit",
-        onClick: toastr.success.bind(this, "Edit group action")
-      },
-      {
-        key: "delete-group",
-        label: "Delete",
-        onClick: toastr.success.bind(this, "Delete group action")
-      }
-    ];
-  };
-
-  const wrapperStyle = {
-    display: "flex",
-    alignItems: "center"
-  };
-
-const SectionHeaderContent = React.memo(({
-    isHeaderVisible,
-    isHeaderIndeterminate,
-    isHeaderChecked,
-    onCheck,
-    onSelect,
-    onClose,
-    group,
-    isAdmin,
-    t
-  }) => {
-    console.log("SectionHeaderContent render");
-    const menuItems = getPeopleItems(onSelect, t);
     return (
     isHeaderVisible ? (
       <div style={{ margin: "0 -16px" }}>
@@ -94,7 +116,7 @@ const SectionHeaderContent = React.memo(({
           moreLabel="More"
           closeTitle="Close"
           onClose={onClose}
-          selected={getPeopleItems(onSelect, t)[0].label}
+          selected={menuItems[0].label}
         />
       </div>
     ) : (
@@ -115,13 +137,14 @@ const SectionHeaderContent = React.memo(({
       : <Text.ContentHeader>People</Text.ContentHeader>
     )
     );
-  });
+  };
 
   const mapStateToProps = (state) => {
     return {
       group: getSelectedGroup(state.people.groups, state.people.selectedGroup),
+      selection: state.people.selection,
       isAdmin: isAdmin(state.auth.user)
     }
   }
 
-export default connect(mapStateToProps)(withTranslation()(SectionHeaderContent));
+export default connect(mapStateToProps, { updateUserStatus })(withTranslation()(SectionHeaderContent));

products/ASC.People/Client/src/store/people/selectors.js

@@ -116,3 +116,7 @@ export function isUserDisabled(user) {
 export function getSelectedGroup(groups, selectedGroupId) {
     return find(groups, (group) => group.id === selectedGroupId);
 }
+
+export function getSelectionIds(selections) {
+    return selections.map((user) => { return user.id });
+}