Use new fields and fix N+1

Author: gigxz

src/api/operations/staffAssignment.fragments.graphql

@@ -1,19 +1,9 @@
+# This fragment is resolved both on an individual household (staff assignment card)
+# AND on a table of households (staff assignment optional column)
 fragment HouseholdWithStaffAssignments on Household {
   id
-  householdClients {
-    # this is included because of "My Dashboard" query I think it should be split to 2 fragments
-    id
-    relationshipToHoH
-    client {
-      id
-      ...ClientName
-    }
-  }
-  staffAssignments(limit: 100) {
-    nodesCount
-    nodes {
-      ...StaffAssignmentDetails
-    }
+  currentStaffAssignments {
+    ...StaffAssignmentDetails
   }
 }
 

src/api/operations/staffAssignment.queries.graphql

@@ -1,6 +1,18 @@
 query GetHouseholdStaffAssignments($id: ID!) {
   household(id: $id) {
     ...HouseholdWithStaffAssignments
+
+    # These are resolved just so that we can show the HoH Client Name
+    # inside the staff assignment management screen. It would be better
+    # if we added a hoh or hohName field to the Household type
+    householdClients {
+      id
+      relationshipToHoH
+      client {
+        id
+        ...ClientName
+      }
+    }
   }
 }
 

src/modules/enrollment/columns/enrollmentColumns.tsx

@@ -88,7 +88,7 @@ export const HOUSEHOLD_ASSIGNED_STAFF_COL = {
   },
   key: 'assignedStaff',
   render: (hh: HouseholdWithStaffAssignmentsFragment) => (
-    <HouseholdStaff staffAssignments={hh.staffAssignments?.nodes || []} />
+    <HouseholdStaff staffAssignments={hh.currentStaffAssignments} />
   ),
 };
 

src/modules/staffAssignment/components/EditStaffAssignmentDialog.tsx

@@ -6,7 +6,7 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import React, { useMemo } from 'react';
+import React from 'react';
 import NewStaffAssignmentForm from './NewStaffAssignmentForm';
 import StaffAssignmentHistory from './StaffAssignmentHistory';
 import StaffAssignmentTable from './StaffAssignmentTable';
@@ -15,35 +15,32 @@ import { CommonLabeledTextBlock } from '@/components/elements/CommonLabeledTextB
 import { useIsMobile } from '@/hooks/useIsMobile';
 import useEnrollmentDashboardContext from '@/modules/enrollment/hooks/useEnrollmentDashboardContext';
 import EnrollmentDateRangeWithStatus from '@/modules/hmis/components/EnrollmentDateRangeWithStatus';
-import { clientBriefName } from '@/modules/hmis/hmisUtil';
-import {
-  HouseholdWithStaffAssignmentsFragment,
-  RelationshipToHoH,
-} from '@/types/gqlTypes';
+import { HouseholdWithStaffAssignmentsFragment } from '@/types/gqlTypes';
 
 interface EditStaffAssignmentDialogProps {
   household: HouseholdWithStaffAssignmentsFragment;
   open: boolean;
   onClose: VoidFunction;
+  hohName: string;
 }
 
 const EditStaffAssignmentDialog: React.FC<EditStaffAssignmentDialogProps> = ({
   household,
   open,
   onClose,
+  hohName,
 }) => {
   const isTiny = useIsMobile('sm');
 
-  const headOfHousehold = useMemo(() => {
-    return household.householdClients.find(
-      (c) => c.relationshipToHoH === RelationshipToHoH.SelfHeadOfHousehold
-    );
-  }, [household.householdClients]);
+  // const headOfHousehold = useMemo(() => {
+  //   return household.householdClients.find(
+  //     (c) => c.relationshipToHoH === RelationshipToHoH.SelfHeadOfHousehold
+  //   );
+  // }, [household.householdClients]);
 
   const { enrollment } = useEnrollmentDashboardContext();
 
   if (!enrollment) return;
-  if (!headOfHousehold) return;
 
   return (
     <CommonDialog fullWidth open={open} onClose={onClose} maxWidth='md'>
@@ -52,7 +49,7 @@ const EditStaffAssignmentDialog: React.FC<EditStaffAssignmentDialogProps> = ({
         <Stack gap={3} sx={{ mt: 2 }}>
           <Stack direction={isTiny ? 'column' : 'row'} gap={isTiny ? 2 : 4}>
             <CommonLabeledTextBlock title='Head of Household'>
-              {clientBriefName(headOfHousehold.client)}
+              {hohName}
             </CommonLabeledTextBlock>
             <CommonLabeledTextBlock title='Project'>
               {enrollment.project.projectName}

src/modules/staffAssignment/components/StaffAssignmentCard.tsx

@@ -10,6 +10,7 @@ import Loading from '@/components/elements/Loading';
 import TitleCard from '@/components/elements/TitleCard';
 import IconButtonContainer from '@/modules/enrollment/components/IconButtonContainer';
 import useEnrollmentDashboardContext from '@/modules/enrollment/hooks/useEnrollmentDashboardContext';
+import { clientBriefName } from '@/modules/hmis/hmisUtil';
 import {
   RelationshipToHoH,
   useGetHouseholdStaffAssignmentsQuery,
@@ -35,11 +36,12 @@ const StaffAssignmentCard: React.FC<StaffAssignmentCardProps> = ({
   const [editDialogOpen, setEditDialogOpen] = useState(false);
 
   const staffAssignmentRows = useMemo(() => {
-    if (!household?.staffAssignments?.nodesCount) return;
+    if (!household?.currentStaffAssignments) return;
+    if (household.currentStaffAssignments.length === 0) return;
 
     // { relationship => [user1, user2] }
     const staff: Record<string, string[]> = {};
-    household.staffAssignments.nodes.forEach(
+    household.currentStaffAssignments.forEach(
       ({ staffAssignmentRelationship, user }) => {
         staff[staffAssignmentRelationship] ||= [];
         staff[staffAssignmentRelationship].push(user.name);
@@ -49,6 +51,14 @@ const StaffAssignmentCard: React.FC<StaffAssignmentCardProps> = ({
     return Object.entries(staff).sort(([a], [b]) => a.localeCompare(b));
   }, [household]);
 
+  const headOfHousehold = useMemo(() => {
+    if (!household) return;
+
+    return household.householdClients.find(
+      (c) => c.relationshipToHoH === RelationshipToHoH.SelfHeadOfHousehold
+    )?.client;
+  }, [household]);
+
   if (!enrollment) return;
   if (error) throw error;
 
@@ -59,6 +69,7 @@ const StaffAssignmentCard: React.FC<StaffAssignmentCardProps> = ({
           household={household}
           open={editDialogOpen}
           onClose={() => setEditDialogOpen(false)}
+          hohName={clientBriefName(headOfHousehold || enrollment.client)}
         />
       )}
       <TitleCard
@@ -77,10 +88,10 @@ const StaffAssignmentCard: React.FC<StaffAssignmentCardProps> = ({
         }
       >
         {loading && <Loading />}
-        {!loading && household?.staffAssignments && (
+        {!loading && household?.currentStaffAssignments && (
           <>
             <Divider />
-            {household.staffAssignments.nodesCount === 0 && (
+            {household.currentStaffAssignments.length === 0 && (
               <Typography variant='body2' sx={{ p: 2 }} color='text.secondary'>
                 No staff assigned
               </Typography>

src/modules/staffAssignment/components/StaffAssignmentTable.tsx

@@ -94,7 +94,7 @@ const StaffAssignmentTable: React.FC<StaffAssignmentTableProps> = ({
   return (
     <Card sx={cardSx}>
       <GenericTable<StaffAssignmentDetailsFragment>
-        rows={household.staffAssignments?.nodes || []}
+        rows={household.currentStaffAssignments}
         columns={columns || defaultColumns}
         noData={'No Staff Assigned'}
         tableProps={{ 'aria-label': 'Current staff assignments' }}

src/types/gqlTypes.ts

@@ -36351,18 +36351,14 @@ export type ProjectEnrollmentsHouseholdFieldsFragment = {
       } | null;
     };
   }>;
-  staffAssignments?: {
-    __typename?: 'StaffAssignmentsPaginated';
-    nodesCount: number;
-    nodes: Array<{
-      __typename?: 'StaffAssignment';
-      id: string;
-      staffAssignmentRelationship: string;
-      assignedAt: string;
-      unassignedAt?: string | null;
-      user: { __typename?: 'ApplicationUser'; id: string; name: string };
-    }>;
-  } | null;
+  currentStaffAssignments: Array<{
+    __typename?: 'StaffAssignment';
+    id: string;
+    staffAssignmentRelationship: string;
+    assignedAt: string;
+    unassignedAt?: string | null;
+    user: { __typename?: 'ApplicationUser'; id: string; name: string };
+  }>;
 };
 
 export type ProjectEnrollmentsHouseholdClientFieldsFragment = {
@@ -39021,18 +39017,14 @@ export type GetProjectHouseholdsQuery = {
             } | null;
           };
         }>;
-        staffAssignments?: {
-          __typename?: 'StaffAssignmentsPaginated';
-          nodesCount: number;
-          nodes: Array<{
-            __typename?: 'StaffAssignment';
-            id: string;
-            staffAssignmentRelationship: string;
-            assignedAt: string;
-            unassignedAt?: string | null;
-            user: { __typename?: 'ApplicationUser'; id: string; name: string };
-          }>;
-        } | null;
+        currentStaffAssignments: Array<{
+          __typename?: 'StaffAssignment';
+          id: string;
+          staffAssignmentRelationship: string;
+          assignedAt: string;
+          unassignedAt?: string | null;
+          user: { __typename?: 'ApplicationUser'; id: string; name: string };
+        }>;
       }>;
     };
   } | null;
@@ -42712,32 +42704,14 @@ export type GetServiceCategoryTypesQuery = {
 export type HouseholdWithStaffAssignmentsFragment = {
   __typename?: 'Household';
   id: string;
-  householdClients: Array<{
-    __typename?: 'HouseholdClient';
+  currentStaffAssignments: Array<{
+    __typename?: 'StaffAssignment';
     id: string;
-    relationshipToHoH: RelationshipToHoH;
-    client: {
-      __typename?: 'Client';
-      id: string;
-      lockVersion: number;
-      firstName?: string | null;
-      middleName?: string | null;
-      lastName?: string | null;
-      nameSuffix?: string | null;
-    };
+    staffAssignmentRelationship: string;
+    assignedAt: string;
+    unassignedAt?: string | null;
+    user: { __typename?: 'ApplicationUser'; id: string; name: string };
   }>;
-  staffAssignments?: {
-    __typename?: 'StaffAssignmentsPaginated';
-    nodesCount: number;
-    nodes: Array<{
-      __typename?: 'StaffAssignment';
-      id: string;
-      staffAssignmentRelationship: string;
-      assignedAt: string;
-      unassignedAt?: string | null;
-      user: { __typename?: 'ApplicationUser'; id: string; name: string };
-    }>;
-  } | null;
 };
 
 export type StaffAssignmentDetailsFragment = {
@@ -42873,18 +42847,14 @@ export type GetHouseholdStaffAssignmentsQuery = {
         nameSuffix?: string | null;
       };
     }>;
-    staffAssignments?: {
-      __typename?: 'StaffAssignmentsPaginated';
-      nodesCount: number;
-      nodes: Array<{
-        __typename?: 'StaffAssignment';
-        id: string;
-        staffAssignmentRelationship: string;
-        assignedAt: string;
-        unassignedAt?: string | null;
-        user: { __typename?: 'ApplicationUser'; id: string; name: string };
-      }>;
-    } | null;
+    currentStaffAssignments: Array<{
+      __typename?: 'StaffAssignment';
+      id: string;
+      staffAssignmentRelationship: string;
+      assignedAt: string;
+      unassignedAt?: string | null;
+      user: { __typename?: 'ApplicationUser'; id: string; name: string };
+    }>;
   } | null;
 };
 
@@ -45180,22 +45150,10 @@ export const StaffAssignmentDetailsFragmentDoc = gql`
 export const HouseholdWithStaffAssignmentsFragmentDoc = gql`
   fragment HouseholdWithStaffAssignments on Household {
     id
-    householdClients {
-      id
-      relationshipToHoH
-      client {
-        id
-        ...ClientName
-      }
-    }
-    staffAssignments(limit: 100) {
-      nodesCount
-      nodes {
-        ...StaffAssignmentDetails
-      }
+    currentStaffAssignments {
+      ...StaffAssignmentDetails
     }
   }
-  ${ClientNameFragmentDoc}
   ${StaffAssignmentDetailsFragmentDoc}
 `;
 export const ProjectEnrollmentsHouseholdFieldsFragmentDoc = gql`
@@ -59170,9 +59128,18 @@ export const GetHouseholdStaffAssignmentsDocument = gql`
   query GetHouseholdStaffAssignments($id: ID!) {
     household(id: $id) {
       ...HouseholdWithStaffAssignments
+      householdClients {
+        id
+        relationshipToHoH
+        client {
+          id
+          ...ClientName
+        }
+      }
     }
   }
   ${HouseholdWithStaffAssignmentsFragmentDoc}
+  ${ClientNameFragmentDoc}
 `;
 
 /**