fix: capacity and assignment issue (#1055)

* Fix capacity and assignment issue

* formatting

* formatting

* fix test cases

---------

Co-authored-by: nikhila-aot <38471389+nikhila-aot@users.noreply.github.com>

Author: jaspalsingh-aot

backend/cats/src/app/services/staff/staff.service.spec.ts

@@ -93,7 +93,7 @@ describe('StaffService', () => {
       id: 1,
       name: 'John Doe',
       assignments: 3,
-      capacity: 10,
+      capacity: 160,
     });
     expect(dataSourceMock.query).toHaveBeenCalledTimes(2);
   });

backend/cats/src/app/services/staff/staff.service.ts

@@ -32,7 +32,7 @@ export class StaffService {
     try {
       this.loggerService.log('StaffService: getStaffs start');
 
-      const capacity = 10;
+      const capacity = 160;
       const offset = (page - 1) * pageSize;
       let havingClause = '';
       const assignmentExpr = `

cats-frontend/src/app/features/applications/search/Search.tsx

@@ -217,10 +217,10 @@ const Search: React.FC<SearchProps> = ({ filterMyTasks = false }) => {
       isSelected: filter === Filter.Unassigned,
     },
     {
-      label: 'Overcapacity',
-      value: Filter.Overcapacity,
-      onClick: () => handleFilterChange(Filter.Overcapacity),
-      isSelected: filter === Filter.Overcapacity,
+      label: 'Completed',
+      value: Filter.Completed,
+      onClick: () => handleFilterChange(Filter.Completed),
+      isSelected: filter === Filter.Completed,
     },
   ];
 

cats-frontend/src/app/features/assignment/Assignment.tsx

@@ -7,18 +7,13 @@ import GetConfig from './StaffTableConfig';
 import StaffTable from './StaffTable';
 import { RequestStatus } from '../../helpers/requests/status';
 import { useGetParticipantRolesQuery } from '../applications/application/applicationTabs/appParticipants/graphql/Participants.generated';
-
 import {
   useGetAllActiveStaffMembersForApplicationServiceTypeQuery,
   useGetAllActiveStaffMembersQuery,
   useGetApplicationServiceTypesQuery,
   useGetStaffAssignedByAppIdQuery,
   useUpdateStaffAssignedMutation,
 } from './graphql/assignment.generated';
-import {
-  UpdateDisplayTypeParams,
-  updateTableColumn,
-} from '../../helpers/utility';
 import {
   CancelButton,
   SaveButton,
@@ -43,31 +38,17 @@ const Assignment: React.FC<AssignmentProps> = ({
 }) => {
   const [isMessageModalOpen, setIsMessageModalOpen] = useState(false);
   const [messageContent, setMessageContent] = useState('');
-
-  const applicationId = id ? Number(id) : 0;
-
-  const [roleList, setRoleList] = useState<any[]>([]);
-
-  const [serviceTypes, SetServiceTypes] = useState<any[]>([]);
-
   const [assignmentServiceType, setAssignmentServiceType] =
     useState<string>('');
+  const [staffRecords, setStaffRecords] = useState<any[]>([]);
 
-  const { staffColumnInternal } = GetConfig();
-
-  const [internalRow, setInternalRow] = useState(staffColumnInternal);
-
+  const applicationId = id ? Number(id) : 0;
   const { data: rolesData } = useGetParticipantRolesQuery();
-
-  const {
-    data: staffMemebersList,
-    loading: staffMemebersLoading,
-    refetch: staffMemebersRefetch,
-  } = useGetAllActiveStaffMembersQuery();
+  const { data: staffMemebersList, refetch: staffMemebersRefetch } =
+    useGetAllActiveStaffMembersQuery();
 
   const {
     data: staffMemebersListForServiceType,
-    loading: staffMemebersLoadingForServiceType,
     refetch: staffMemebersRefetchForServiceType,
   } = useGetAllActiveStaffMembersForApplicationServiceTypeQuery({
     variables: {
@@ -77,26 +58,7 @@ const Assignment: React.FC<AssignmentProps> = ({
     },
   });
 
-  useEffect(() => {
-    if (assignmentServiceType) {
-      staffMemebersRefetchForServiceType({
-        applicationServiceTypeId: Number(assignmentServiceType),
-      });
-    }
-  }, [assignmentServiceType]);
-
-  useEffect(() => {
-    if (staffMemebersListForServiceType) {
-      processStaffMemebersList(
-        staffMemebersList?.getAllActiveStaffMembers?.data || [],
-        staffMemebersListForServiceType
-          ?.getAllActiveStaffMembersForApplicationServiceType?.data || [],
-      );
-    }
-  }, [staffMemebersListForServiceType]);
-
   const { data: serviceTypesList } = useGetApplicationServiceTypesQuery();
-
   const [updateStaffAssigned] = useUpdateStaffAssignedMutation();
 
   const { data: applicationData, loading: applicationDataLoading } =
@@ -120,22 +82,63 @@ const Assignment: React.FC<AssignmentProps> = ({
     skip: !application?.siteId,
   });
 
-  useEffect(() => {
-    SetServiceTypes(serviceTypesList?.getApplicationServiceTypes?.data || []);
-  }, [serviceTypesList]);
-
-  useEffect(() => {
-    setRoleList(rolesData?.getAllParticipantRoles?.data || []);
-  }, [rolesData]);
-
-  const [staffRecords, setStaffRecords] = useState<any[]>([]);
-
   const {
     data: staffData,
     loading: dataLoading,
     refetch: staffRefetch,
   } = useGetStaffAssignedByAppIdQuery({ variables: { applicationId } });
 
+  const [searchParam, setSearchParam] = useState('');
+  const { staffColumnInternal } = GetConfig({
+    setSearchParam,
+    options: staffMemebersList?.getAllActiveStaffMembers?.data?.map(
+      (item: any) => ({
+        key: item.personId.toString(),
+        value: item.personFullName,
+      }),
+    ) as [{ key: string; value: string }],
+    filteredOptions:
+      staffMemebersListForServiceType?.getAllActiveStaffMembersForApplicationServiceType?.data
+        ?.filter(
+          (item: any) =>
+            !staffRecords
+              ?.map((item) => item.personId)
+              ?.includes(item.personId),
+        )
+        ?.filter((item: any) =>
+          item.personFullName
+            .toLowerCase()
+            .includes(searchParam?.trim()?.toLowerCase()),
+        )
+        .map((item: any) => ({
+          key: item.personId.toString(),
+          value:
+            item.personFullName +
+            ' - (' +
+            ((item.currentCapacity / 160) * 100).toFixed(2) +
+            '%)',
+        })) as [{ key: string; value: string }],
+    rolesOptions: rolesData?.getAllParticipantRoles?.data
+      ?.filter(
+        (item: any) =>
+          item.description === 'Caseworker' ||
+          item.description === 'Statutory Decision Maker' ||
+          item.description === 'Mentor',
+      )
+      ?.map((item: any) => ({
+        key: item.id,
+        value: item.description,
+      })) as [{ key: string; value: string }],
+  });
+
+  useEffect(() => {
+    if (assignmentServiceType) {
+      staffMemebersRefetchForServiceType({
+        applicationServiceTypeId: Number(assignmentServiceType),
+      });
+    }
+  }, [assignmentServiceType]);
+
   useEffect(() => {
     setStaffRecords(staffData?.getStaffAssignedByAppId?.data?.staffList || []);
     let tempServiceType =
@@ -219,122 +222,11 @@ const Assignment: React.FC<AssignmentProps> = ({
     });
   };
 
-  // Handle search action
-  const handleSearch = (
-    value: any,
-    staffMemebersArray: any,
-    staffMemberArrayForServieType: any,
-  ) => {
-    let existingStaffIds = staffRecords.map((item) => item.personId);
-    value.trim();
-
-    setInternalRow((prev) =>
-      updateTableColumn(prev, {
-        indexToUpdate: prev.findIndex(
-          (item) => item.displayType?.graphQLPropertyName === 'personId',
-        ),
-        updates: {
-          isLoading: RequestStatus.success,
-          filteredOptions: staffMemberArrayForServieType
-            ?.filter((item: any) => !existingStaffIds.includes(item.personId))
-            ?.filter((item: any) =>
-              item.personFullName.toLowerCase().includes(value.toLowerCase()),
-            )
-            .map((item: any) => ({
-              key: item.personId.toString(),
-              value:
-                item.personFullName +
-                ' - (' +
-                ((item.currentCapacity / 160) * 100).toFixed(2) +
-                '%)',
-            })),
-          handleSearch: (term: any) =>
-            handleSearch(
-              term,
-              staffMemebersArray,
-              staffMemberArrayForServieType,
-            ),
-          customInfoMessage: <></>,
-        },
-      }),
-    );
-  };
-
-  const processStaffMemebersList = (
-    staffMemebersList: any,
-    staffMemberArrayForServieType: any,
-  ) => {
-    if (!staffMemebersList) {
-      return false;
-    }
-    let options = staffMemebersList.map((item: any) => ({
-      key: item.personId.toString(),
-      value: item.personFullName,
-    }));
-
-    let params: UpdateDisplayTypeParams = {
-      indexToUpdate: staffColumnInternal.findIndex(
-        (item) => item.displayType?.graphQLPropertyName === 'personId',
-      ),
-      updates: {
-        isLoading: RequestStatus.success,
-        options: options,
-        filteredOptions: options,
-        handleSearch: (term: string) =>
-          handleSearch(term, staffMemebersList, staffMemberArrayForServieType),
-        customInfoMessage: <></>,
-      },
-    };
-    setInternalRow(updateTableColumn(internalRow, params));
-  };
-
-  useEffect(() => {
-    processStaffMemebersList(
-      staffMemebersList?.getAllActiveStaffMembers?.data || [],
-      staffMemebersListForServiceType
-        ?.getAllActiveStaffMembersForApplicationServiceType?.data || [],
-    );
-  }, [staffMemebersLoading, staffMemebersLoadingForServiceType]);
-
   useEffect(() => {
     staffMemebersRefetch();
     staffRefetch({ applicationId: applicationId });
   }, []);
 
-  useEffect(() => {
-    let uniqueRoles = roleList.map((item: any) => ({
-      key: item.id,
-      value: item.description,
-    }));
-
-    uniqueRoles = uniqueRoles.filter(
-      (item: any) =>
-        item.value === 'Caseworker' ||
-        item.value === 'Statutory Decision Maker' ||
-        item.value === 'Mentor',
-    );
-
-    let params: UpdateDisplayTypeParams = {
-      indexToUpdate: staffColumnInternal.findIndex(
-        (item) => item.displayType?.graphQLPropertyName === 'roleId',
-      ),
-      updates: {
-        isLoading: RequestStatus.success,
-        options: uniqueRoles,
-        filteredOptions: uniqueRoles,
-        handleSearch: (term: string) =>
-          handleSearch(
-            term,
-            staffMemebersList?.getAllActiveStaffMembers?.data || [],
-            staffMemebersListForServiceType
-              ?.getAllActiveStaffMembersForApplicationServiceType?.data || [],
-          ),
-        customInfoMessage: <></>,
-      },
-    };
-    setInternalRow(updateTableColumn(internalRow, params));
-  }, [roleList]);
-
   return (
     <div role="assign staff" className="assign-section">
       <Details
@@ -385,10 +277,12 @@ const Assignment: React.FC<AssignmentProps> = ({
             label={'Application Service Type'}
             customLabelCss={''}
             placeholder={'Select Service Type'}
-            options={serviceTypes.map((item) => ({
-              key: item.key,
-              value: item.value,
-            }))}
+            options={serviceTypesList?.getApplicationServiceTypes?.data?.map(
+              (item) => ({
+                key: item.key,
+                value: item.value,
+              }),
+            )}
             customInputTextCss="panelLabel"
             value={assignmentServiceType}
             onChange={(value) => {
@@ -450,7 +344,7 @@ const Assignment: React.FC<AssignmentProps> = ({
               }
             }}
             handleWidgetCheckBox={() => {}}
-            tableColumnConfig={internalRow}
+            tableColumnConfig={staffColumnInternal}
             formData={staffRecords.filter((item) => item.action !== 'remove')}
             status={RequestStatus.success}
             handleTableSort={() => {}}

cats-frontend/src/app/features/assignment/StaffTableConfig.tsx

@@ -1,14 +1,20 @@
-import {
-  CircleExclamation,
-  ExclamationTriangleIcon,
-  XmarkIcon,
-} from '../../components/common/icon';
+import { XmarkIcon } from '../../components/common/icon';
 import { FormFieldType } from '../../components/input-controls/IFormField';
 import { ColumnSize, TableColumn } from '../../components/table/TableColumn';
 import { RequestStatus } from '../../helpers/requests/status';
 import CustomProgressBar from '../../components/progress-bar/progressBar';
 
-export const GetConfig = () => {
+export const GetConfig = ({
+  setSearchParam,
+  options,
+  filteredOptions,
+  rolesOptions,
+}: {
+  setSearchParam: (term: string) => void;
+  options: [{ key: string; value: string }] | undefined;
+  filteredOptions: [{ key: string; value: string }] | undefined;
+  rolesOptions: [{ key: string; value: string }] | undefined;
+}) => {
   const staffColumnInternal: TableColumn[] = [
     {
       id: 1,
@@ -24,8 +30,6 @@ export const GetConfig = () => {
         placeholder: 'Search Staff',
         isLoading: RequestStatus.idle,
         value: '',
-        options: [],
-        filteredOptions: [],
         colSize: 'col-lg-6 col-md-6 col-sm-12',
         customLabelCss: 'custom-participant-lbl-text',
         customInputTextCss: 'custom-participant-input-text',
@@ -34,7 +38,9 @@ export const GetConfig = () => {
         customPlaceholderCss: 'custom-participant-search-placeholder',
         customMenuMessage: <span>Please select site participant name:</span>,
         tableMode: true,
-        handleSearch: () => {},
+        options: options || [],
+        filteredOptions: filteredOptions || [],
+        handleSearch: setSearchParam,
         validation: {
           required: true,
           customMessage: 'Staff Member is required.',
@@ -72,7 +78,7 @@ export const GetConfig = () => {
         graphQLPropertyName: 'roleId',
         placeholder: 'Select Role',
         value: '',
-        options: [],
+        options: rolesOptions || [],
         colSize: 'col-lg-6 col-md-6 col-sm-12',
         customLabelCss: 'custom-participant-lbl-text',
         customInputTextCss: 'custom-participant-input-text',