feat: eru readiness ui updates

Author: samshara

app/src/components/DisplayName/index.tsx

@@ -0,0 +1,9 @@
+interface DisplayNameOuputProps {
+    name: string;
+}
+
+function DisplayName({ name }: DisplayNameOuputProps) {
+    return name;
+}
+
+export default DisplayName;

app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/SurgeCard/index.tsx

@@ -1,7 +1,11 @@
-import { useMemo } from 'react';
+import {
+    useCallback,
+    useMemo,
+} from 'react';
 import {
     Container,
     KeyFigure,
+    ReducedListDisplay,
     TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -10,16 +14,17 @@ import {
     maxSafe,
     minSafe,
     resolveToComponent,
+    stringNameSelector,
 } from '@ifrc-go/ui/utils';
 import {
     _cs,
     isDefined,
     unique,
 } from '@togglecorp/fujs';
 
+import DisplayName from '#components/DisplayName';
 import SeverityIndicator from '#components/domain/SeverityIndicator';
 import Link from '#components/Link';
-import { joinStrings } from '#utils/common';
 import { type GoApiResponse } from '#utils/restRequest';
 
 import i18n from './i18n.json';
@@ -62,29 +67,44 @@ function SurgeCard(props: Props) {
         ? getDuration(new Date(operationStartDate), new Date(operationEndDate)) : undefined;
 
     const deployedERUTypes = useMemo(() => (
-        joinStrings(erus.map((eru) => eru.type_display).filter(isDefined))
+        unique(erus
+            .map((eru) => eru.type_display)
+            .filter(isDefined)
+            .map((eruType) => ({ name: eruType })))
     ), [erus]);
 
     const personnel = useMemo(() => (
         deployments.flatMap((deployment) => deployment.personnel)
     ), [deployments]);
 
     const deployedPersonnelTypes = useMemo(() => (
-        joinStrings(unique(personnel.map((person) => person.role).filter(isDefined)))
+        unique(personnel
+            .map((person) => person.role)
+            .filter(isDefined)
+            .map((role) => ({ name: role })))
     ), [personnel]);
 
     const eruDeployingOrganizations = useMemo(() => (
-        joinStrings(unique(erus.map((eru) => (
-            eru.eru_owner_details.national_society_country_details.society_name
-        )).filter(isDefined)))
+        unique(erus
+            .map((eru) => eru.eru_owner_details.national_society_country_details.society_name)
+            .filter(isDefined)
+            .map((nationalSociety) => ({ name: nationalSociety })))
     ), [erus]);
 
     const personnelDeployingOrganizations = useMemo(() => (
-        joinStrings(unique(personnel.map((person) => (
-            person.country_from.society_name
-        )).filter(isDefined)))
+        unique(personnel
+            .map((person) => (person.country_from.society_name))
+            .filter(isDefined)
+            .map((nationalSociety) => ({ name: nationalSociety })))
     ), [personnel]);
 
+    const rendererParams = useCallback(
+        (value: { name: string }) => ({
+            name: value.name,
+        }),
+        [],
+    );
+
     return (
         <Container
             className={_cs(styles.surgeCard, className)}
@@ -132,11 +152,18 @@ function SurgeCard(props: Props) {
                     childrenContainerClassName={styles.figures}
                     footerContent={(
                         <TextOutput
-                            value={eruDeployingOrganizations}
+                            value={(
+                                <ReducedListDisplay
+                                    list={eruDeployingOrganizations}
+                                    keySelector={stringNameSelector}
+                                    renderer={DisplayName}
+                                    rendererParams={rendererParams}
+                                    maxItems={3}
+                                />
+                            )}
                             label={strings.surgeDeployingOrganizations}
                             strongValue
                             withoutLabelColon
-                            valueType="text"
                         />
                     )}
                 >
@@ -150,7 +177,15 @@ function SurgeCard(props: Props) {
                     <TextOutput
                         className={styles.figure}
                         labelClassName={styles.label}
-                        label={deployedERUTypes}
+                        label={(
+                            <ReducedListDisplay
+                                list={deployedERUTypes}
+                                keySelector={stringNameSelector}
+                                renderer={DisplayName}
+                                rendererParams={rendererParams}
+                                maxItems={3}
+                            />
+                        )}
                         value={strings.surgeDeployedERUs}
                         strongLabel
                         withoutLabelColon
@@ -168,11 +203,18 @@ function SurgeCard(props: Props) {
                     footerClassName={styles.footerContent}
                     footerContent={(
                         <TextOutput
-                            value={personnelDeployingOrganizations}
+                            value={(
+                                <ReducedListDisplay
+                                    list={personnelDeployingOrganizations}
+                                    keySelector={stringNameSelector}
+                                    renderer={DisplayName}
+                                    rendererParams={rendererParams}
+                                    maxItems={3}
+                                />
+                            )}
                             label={strings.surgeDeployingOrganizations}
                             strongValue
                             withoutLabelColon
-                            valueType="text"
                         />
                     )}
                 >
@@ -185,7 +227,15 @@ function SurgeCard(props: Props) {
                     <div className={styles.separator} />
                     <TextOutput
                         className={styles.figure}
-                        label={deployedPersonnelTypes}
+                        label={(
+                            <ReducedListDisplay
+                                list={deployedPersonnelTypes}
+                                keySelector={stringNameSelector}
+                                renderer={DisplayName}
+                                rendererParams={rendererParams}
+                                maxItems={3}
+                            />
+                        )}
                         value={strings.surgeDeployedRRs}
                         strongLabel
                         withoutLabelColon

app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/i18n.json

@@ -3,7 +3,7 @@
     "strings": {
         "eruHeading": "Ongoing ERU Deployments",
         "eruEmergency": "Emergency / Name",
-        "eruOrganisation": "Organisation",
+        "eruOrganisation": "Deploying Organisation",
         "eruName": "Name",
         "eruViewAll": "View All",
         "eruTypes": "ERU Types",
@@ -12,6 +12,7 @@
         "eruStartDate": "Deployment Start Date",
         "eruEndDate": "Deployment End Date",
         "eruEmergencyTimeline": "Emergency Timeline",
-        "eruDeploymentTimeline": "Deployment Timeline"
+        "eruDeploymentTimeline": "Deployment Timeline",
+        "eruDeploymentCountry": "Deployed To"
     }
 }

app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx

@@ -142,7 +142,19 @@ function OngoingEruDeployments() {
                 'organisation',
                 strings.eruOrganisation,
                 () => '',
-                { columnClassName: styles.organisation },
+                {
+                    defaultEmptyValue: '',
+                    columnClassName: styles.organisation,
+                },
+            ),
+            createStringColumn<EruByEvent, number>(
+                'country',
+                strings.eruDeploymentCountry,
+                () => '',
+                {
+                    defaultEmptyValue: '',
+                    columnClassName: styles.country,
+                },
             ),
             createMultiTimelineColumn<EruByEvent, number>(
                 'timeline',
@@ -181,6 +193,7 @@ function OngoingEruDeployments() {
             strings.ongoingEmergencyEndDate,
             strings.eruStartDate,
             strings.eruEndDate,
+            strings.eruDeploymentCountry,
         ],
     );
 
@@ -196,6 +209,17 @@ function OngoingEruDeployments() {
                 strings.eruOrganisation,
                 (item) => item?.eru_owner_details?.national_society_country_details.society_name,
             ),
+            createLinkColumn<EruListItem, number>(
+                'country',
+                strings.eruDeploymentCountry,
+                (item) => item.deployed_to.name,
+                (item) => ({
+                    to: 'countriesLayout',
+                    urlParams: {
+                        countryId: item.deployed_to.id,
+                    },
+                }),
+            ),
             createTimelineColumn<EruListItem, number>(
                 'timeline',
                 timelineDateRange,
@@ -210,6 +234,7 @@ function OngoingEruDeployments() {
         [
             timelineDateRange,
             strings.eruOrganisation,
+            strings.eruDeploymentCountry,
             strings.eruName,
         ],
     );

app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css

@@ -1,10 +1,14 @@
 .ongoing-eru-deployments {
     .table {
-        min-height: var(--go-ui-compact-content-min-height);
+        min-height: 5rem;
         .organisation {
             min-width: 10rem;
         }
 
+        .country {
+            min-width: 10rem;
+        }
+
         .timeline {
             min-width: 24rem;
         }

app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/i18n.json

@@ -13,6 +13,7 @@
         "deploymentStartDate": "Deployment Start Date",
         "deploymentEndDate": "Deployment End Date",
         "emergencyTimeline": "Emergency Timeline",
-        "deploymentDate": "Deployment Timeline"
+        "deploymentDate": "Deployment Timeline",
+        "rapidReponseDeploymentCountry": "Deployed To"
     }
 }

app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx

@@ -41,7 +41,9 @@ import styles from './styles.module.css';
 
 type GetRapidResponseByEvent = GoApiResponse<'/api/v2/personnel_by_event/'>;
 type RapidResponseByEventItem = NonNullable<GetRapidResponseByEvent['results']>[number];
-type Personnel = NonNullable<NonNullable<RapidResponseByEventItem['deployments']>[number]['personnel'] > [number];
+type Personnel = NonNullable<NonNullable<RapidResponseByEventItem['deployments']>[number]['personnel']>[number] & {
+    country_deployed_to?: NonNullable<RapidResponseByEventItem['deployments']>[number]['country_deployed_to'];
+};
 
 const rapidResponsesKeySelector = (item: RapidResponseByEventItem) => item.id;
 
@@ -126,13 +128,27 @@ function OngoingRapidResponseDeployments() {
                 strings.rapidResponsePosition,
                 () => '',
                 {
+                    defaultEmptyValue: '',
                     columnClassName: styles.role,
                 },
             ),
             createStringColumn<RapidResponseByEventItem, number>(
                 'organisation',
                 strings.rapidResponseDeployingOrganisation,
                 () => '',
+                {
+                    columnClassName: styles.organisation,
+                    defaultEmptyValue: '',
+                },
+            ),
+            createStringColumn<RapidResponseByEventItem, number>(
+                'country',
+                strings.rapidReponseDeploymentCountry,
+                () => '',
+                {
+                    defaultEmptyValue: '',
+                    columnClassName: styles.country,
+                },
             ),
             createMultiTimelineColumn<RapidResponseByEventItem, number>(
                 'timeline',
@@ -168,6 +184,7 @@ function OngoingRapidResponseDeployments() {
             strings.rapidResponseEmergency,
             strings.rapidResponsePosition,
             strings.rapidResponseDeployingOrganisation,
+            strings.rapidReponseDeploymentCountry,
             strings.emergencyEndDate,
             strings.emergencyStartDate,
             strings.deploymentStartDate,
@@ -198,6 +215,17 @@ function OngoingRapidResponseDeployments() {
                 strings.rapidResponseOrganisation,
                 (item) => item?.country_from?.society_name,
             ),
+            createLinkColumn<Personnel, number>(
+                'country',
+                strings.rapidReponseDeploymentCountry,
+                (item) => item?.country_deployed_to?.name,
+                (item) => ({
+                    to: 'countriesLayout',
+                    urlParams: {
+                        countryId: item?.country_deployed_to?.id,
+                    },
+                }),
+            ),
             createTimelineColumn<Personnel, number>(
                 'timeline',
                 timelineDateRange,
@@ -214,6 +242,7 @@ function OngoingRapidResponseDeployments() {
             strings.rapidResponseRole,
             strings.rapidResponseName,
             strings.rapidResponseOrganisation,
+            strings.rapidReponseDeploymentCountry,
         ],
     );
 
@@ -223,7 +252,10 @@ function OngoingRapidResponseDeployments() {
                 return row;
             }
 
-            const subRows = datum.deployments?.flatMap((deployment) => deployment.personnel);
+            const subRows = datum.deployments?.flatMap((deployment) => ({
+                ...deployment.personnel,
+                country_deployed_to: deployment.country_deployed_to,
+            }));
 
             return (
                 <>

app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css

@@ -1,11 +1,19 @@
 .rapid-response-deployments {
     .table {
-        min-height: var(--go-ui-compact-content-min-height);
+        min-height: 5rem;
         .name {
             min-width: 8rem;
         }
 
         .role {
+            min-width: 12rem;
+        }
+
+        .organisation {
+            min-width: 12rem;
+        }
+
+        .country {
             min-width: 8rem;
         }