feat: UI - add assign and unassign operations

Author: gpaoloni

plugin-hrm-form/src/components/teamsView/SkillsColumn.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { WorkersDataTable, ColumnDefinition, Template, styled } from '@twilio/flex-ui';
-import { Tooltip } from '@material-ui/core';
+import { Divider, Tooltip } from '@material-ui/core';
 import { ArrowDropDown, ArrowDropUp, KeyboardArrowRight } from '@material-ui/icons';
 
 import { Flex, Column, OpaqueText, Row, Box } from '../../styles';
@@ -197,6 +197,15 @@ const DropdownPortal: React.FC<{
           <Template code="Disable Skills" />
           <KeyboardArrowRight style={{ marginLeft: '20px' }} />
         </DropDownButton>
+        <Divider variant="middle" />
+        <DropDownButton onClick={onClickAction('assign')}>
+          <Template code="Assign Skills" />
+          <KeyboardArrowRight style={{ marginLeft: '20px' }} />
+        </DropDownButton>
+        <DropDownButton onClick={onClickAction('unassign')}>
+          <Template code="Unassign Skills" />
+          <KeyboardArrowRight style={{ marginLeft: '20px' }} />
+        </DropDownButton>
       </Column>
     </div>,
     document.body,

plugin-hrm-form/src/components/teamsView/UpdateWorkersSkillsModal.tsx

@@ -192,6 +192,24 @@ const ConfirmUpdatesModal: React.FC<Props> = () => {
               .length;
           }
 
+          if (operation === 'assign') {
+            return selectedWorkersFlexState.filter(
+              w =>
+                !(
+                  w.worker.attributes.routing?.skills?.includes(skill) ||
+                  w.worker.attributes.disabled_skills?.skills?.includes(skill)
+                ),
+            ).length;
+          }
+
+          if (operation === 'unassign') {
+            return selectedWorkersFlexState.filter(
+              w =>
+                w.worker.attributes.routing?.skills?.includes(skill) ||
+                w.worker.attributes.disabled_skills?.skills?.includes(skill),
+            ).length;
+          }
+
           return 0;
         };
 

plugin-hrm-form/src/services/twilioWorkerService.ts

@@ -18,6 +18,7 @@ import { getHrmConfig } from '../hrmConfig';
 import fetchProtectedApi from './fetchProtectedApi';
 import { TaskSID } from '../types/twilio';
 import { ApiError } from './fetchApi';
+import { TeamsViewState } from '../states/teamsView';
 
 type PopulateCounselorsReturn = { sid: string; fullName: string }[];
 
@@ -74,5 +75,5 @@ export const getWorkerAttributes = async (workerSid: string) => {
 export const updateWorkersSkills = async (payload: {
   workers: Array<string>;
   skills: Array<string>;
-  operation: 'enable' | 'disable';
+  operation: Required<TeamsViewState['operation']>;
 }) => fetchProtectedApi('/updateWorkersSkills', payload, { useTwilioLambda: true, useJsonEncode: true });

plugin-hrm-form/src/states/teamsView/index.ts

@@ -21,7 +21,7 @@ import { updateWorkersSkills } from '../../services/twilioWorkerService';
 export type TeamsViewState = {
   selectedWorkers: Set<string>;
   selectedSkills: Set<string>;
-  operation?: 'enable' | 'disable';
+  operation?: 'enable' | 'disable' | 'assign' | 'unassign';
   status: {
     loading: boolean;
     error: any;