Skip to content

Commit afc0f00

Browse files
samsharafrozenhelium
samshara
authored and
frozenhelium
committed
feat: eru readiness ui updates
1 parent ff93fb3 commit afc0f00

15 files changed

Lines changed: 225 additions & 86 deletions

File tree

‎app/src/components/DisplayName/index.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
interface DisplayNameOuputProps {
2+
name: string;
3+
}
4+
5+
function DisplayName({ name }: DisplayNameOuputProps) {
6+
return name;
7+
}
8+
9+
export default DisplayName;

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

Lines changed: 66 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import { useMemo } from 'react';
1+
import {
2+
useCallback,
3+
useMemo,
4+
} from 'react';
25
import {
36
Container,
47
KeyFigure,
8+
ReducedListDisplay,
59
TextOutput,
610
} from '@ifrc-go/ui';
711
import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -10,16 +14,17 @@ import {
1014
maxSafe,
1115
minSafe,
1216
resolveToComponent,
17+
stringNameSelector,
1318
} from '@ifrc-go/ui/utils';
1419
import {
1520
_cs,
1621
isDefined,
1722
unique,
1823
} from '@togglecorp/fujs';
1924

25+
import DisplayName from '#components/DisplayName';
2026
import SeverityIndicator from '#components/domain/SeverityIndicator';
2127
import Link from '#components/Link';
22-
import { joinStrings } from '#utils/common';
2328
import { type GoApiResponse } from '#utils/restRequest';
2429

2530
import i18n from './i18n.json';
@@ -62,29 +67,44 @@ function SurgeCard(props: Props) {
6267
? getDuration(new Date(operationStartDate), new Date(operationEndDate)) : undefined;
6368

6469
const deployedERUTypes = useMemo(() => (
65-
joinStrings(erus.map((eru) => eru.type_display).filter(isDefined))
70+
unique(erus
71+
.map((eru) => eru.type_display)
72+
.filter(isDefined)
73+
.map((eruType) => ({ name: eruType })))
6674
), [erus]);
6775

6876
const personnel = useMemo(() => (
6977
deployments.flatMap((deployment) => deployment.personnel)
7078
), [deployments]);
7179

7280
const deployedPersonnelTypes = useMemo(() => (
73-
joinStrings(unique(personnel.map((person) => person.role).filter(isDefined)))
81+
unique(personnel
82+
.map((person) => person.role)
83+
.filter(isDefined)
84+
.map((role) => ({ name: role })))
7485
), [personnel]);
7586

7687
const eruDeployingOrganizations = useMemo(() => (
77-
joinStrings(unique(erus.map((eru) => (
78-
eru.eru_owner_details.national_society_country_details.society_name
79-
)).filter(isDefined)))
88+
unique(erus
89+
.map((eru) => eru.eru_owner_details.national_society_country_details.society_name)
90+
.filter(isDefined)
91+
.map((nationalSociety) => ({ name: nationalSociety })))
8092
), [erus]);
8193

8294
const personnelDeployingOrganizations = useMemo(() => (
83-
joinStrings(unique(personnel.map((person) => (
84-
person.country_from.society_name
85-
)).filter(isDefined)))
95+
unique(personnel
96+
.map((person) => (person.country_from.society_name))
97+
.filter(isDefined)
98+
.map((nationalSociety) => ({ name: nationalSociety })))
8699
), [personnel]);
87100

101+
const rendererParams = useCallback(
102+
(value: { name: string }) => ({
103+
name: value.name,
104+
}),
105+
[],
106+
);
107+
88108
return (
89109
<Container
90110
className={_cs(styles.surgeCard, className)}
@@ -132,11 +152,18 @@ function SurgeCard(props: Props) {
132152
childrenContainerClassName={styles.figures}
133153
footerContent={(
134154
<TextOutput
135-
value={eruDeployingOrganizations}
155+
value={(
156+
<ReducedListDisplay
157+
list={eruDeployingOrganizations}
158+
keySelector={stringNameSelector}
159+
renderer={DisplayName}
160+
rendererParams={rendererParams}
161+
maxItems={3}
162+
/>
163+
)}
136164
label={strings.surgeDeployingOrganizations}
137165
strongValue
138166
withoutLabelColon
139-
valueType="text"
140167
/>
141168
)}
142169
>
@@ -150,7 +177,15 @@ function SurgeCard(props: Props) {
150177
<TextOutput
151178
className={styles.figure}
152179
labelClassName={styles.label}
153-
label={deployedERUTypes}
180+
label={(
181+
<ReducedListDisplay
182+
list={deployedERUTypes}
183+
keySelector={stringNameSelector}
184+
renderer={DisplayName}
185+
rendererParams={rendererParams}
186+
maxItems={3}
187+
/>
188+
)}
154189
value={strings.surgeDeployedERUs}
155190
strongLabel
156191
withoutLabelColon
@@ -168,11 +203,18 @@ function SurgeCard(props: Props) {
168203
footerClassName={styles.footerContent}
169204
footerContent={(
170205
<TextOutput
171-
value={personnelDeployingOrganizations}
206+
value={(
207+
<ReducedListDisplay
208+
list={personnelDeployingOrganizations}
209+
keySelector={stringNameSelector}
210+
renderer={DisplayName}
211+
rendererParams={rendererParams}
212+
maxItems={3}
213+
/>
214+
)}
172215
label={strings.surgeDeployingOrganizations}
173216
strongValue
174217
withoutLabelColon
175-
valueType="text"
176218
/>
177219
)}
178220
>
@@ -185,7 +227,15 @@ function SurgeCard(props: Props) {
185227
<div className={styles.separator} />
186228
<TextOutput
187229
className={styles.figure}
188-
label={deployedPersonnelTypes}
230+
label={(
231+
<ReducedListDisplay
232+
list={deployedPersonnelTypes}
233+
keySelector={stringNameSelector}
234+
renderer={DisplayName}
235+
rendererParams={rendererParams}
236+
maxItems={3}
237+
/>
238+
)}
189239
value={strings.surgeDeployedRRs}
190240
strongLabel
191241
withoutLabelColon

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"strings": {
44
"eruHeading": "Ongoing ERU Deployments",
55
"eruEmergency": "Emergency / Name",
6-
"eruOrganisation": "Organisation",
6+
"eruOrganisation": "Deploying Organisation",
77
"eruName": "Name",
88
"eruViewAll": "View All",
99
"eruTypes": "ERU Types",
@@ -12,6 +12,7 @@
1212
"eruStartDate": "Deployment Start Date",
1313
"eruEndDate": "Deployment End Date",
1414
"eruEmergencyTimeline": "Emergency Timeline",
15-
"eruDeploymentTimeline": "Deployment Timeline"
15+
"eruDeploymentTimeline": "Deployment Timeline",
16+
"eruDeploymentCountry": "Deployed To"
1617
}
1718
}

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,19 @@ function OngoingEruDeployments() {
142142
'organisation',
143143
strings.eruOrganisation,
144144
() => '',
145-
{ columnClassName: styles.organisation },
145+
{
146+
defaultEmptyValue: '',
147+
columnClassName: styles.organisation,
148+
},
149+
),
150+
createStringColumn<EruByEvent, number>(
151+
'country',
152+
strings.eruDeploymentCountry,
153+
() => '',
154+
{
155+
defaultEmptyValue: '',
156+
columnClassName: styles.country,
157+
},
146158
),
147159
createMultiTimelineColumn<EruByEvent, number>(
148160
'timeline',
@@ -181,6 +193,7 @@ function OngoingEruDeployments() {
181193
strings.ongoingEmergencyEndDate,
182194
strings.eruStartDate,
183195
strings.eruEndDate,
196+
strings.eruDeploymentCountry,
184197
],
185198
);
186199

@@ -196,6 +209,17 @@ function OngoingEruDeployments() {
196209
strings.eruOrganisation,
197210
(item) => item?.eru_owner_details?.national_society_country_details.society_name,
198211
),
212+
createLinkColumn<EruListItem, number>(
213+
'country',
214+
strings.eruDeploymentCountry,
215+
(item) => item.deployed_to.name,
216+
(item) => ({
217+
to: 'countriesLayout',
218+
urlParams: {
219+
countryId: item.deployed_to.id,
220+
},
221+
}),
222+
),
199223
createTimelineColumn<EruListItem, number>(
200224
'timeline',
201225
timelineDateRange,
@@ -210,6 +234,7 @@ function OngoingEruDeployments() {
210234
[
211235
timelineDateRange,
212236
strings.eruOrganisation,
237+
strings.eruDeploymentCountry,
213238
strings.eruName,
214239
],
215240
);

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
.ongoing-eru-deployments {
22
.table {
3-
min-height: var(--go-ui-compact-content-min-height);
3+
min-height: 5rem;
44
.organisation {
55
min-width: 10rem;
66
}
77

8+
.country {
9+
min-width: 10rem;
10+
}
11+
812
.timeline {
913
min-width: 24rem;
1014
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"deploymentStartDate": "Deployment Start Date",
1414
"deploymentEndDate": "Deployment End Date",
1515
"emergencyTimeline": "Emergency Timeline",
16-
"deploymentDate": "Deployment Timeline"
16+
"deploymentDate": "Deployment Timeline",
17+
"rapidReponseDeploymentCountry": "Deployed To"
1718
}
1819
}

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

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ import styles from './styles.module.css';
4141

4242
type GetRapidResponseByEvent = GoApiResponse<'/api/v2/personnel_by_event/'>;
4343
type RapidResponseByEventItem = NonNullable<GetRapidResponseByEvent['results']>[number];
44-
type Personnel = NonNullable<NonNullable<RapidResponseByEventItem['deployments']>[number]['personnel'] > [number];
44+
type Personnel = NonNullable<NonNullable<RapidResponseByEventItem['deployments']>[number]['personnel']>[number] & {
45+
country_deployed_to?: NonNullable<RapidResponseByEventItem['deployments']>[number]['country_deployed_to'];
46+
};
4547

4648
const rapidResponsesKeySelector = (item: RapidResponseByEventItem) => item.id;
4749

@@ -126,13 +128,27 @@ function OngoingRapidResponseDeployments() {
126128
strings.rapidResponsePosition,
127129
() => '',
128130
{
131+
defaultEmptyValue: '',
129132
columnClassName: styles.role,
130133
},
131134
),
132135
createStringColumn<RapidResponseByEventItem, number>(
133136
'organisation',
134137
strings.rapidResponseDeployingOrganisation,
135138
() => '',
139+
{
140+
columnClassName: styles.organisation,
141+
defaultEmptyValue: '',
142+
},
143+
),
144+
createStringColumn<RapidResponseByEventItem, number>(
145+
'country',
146+
strings.rapidReponseDeploymentCountry,
147+
() => '',
148+
{
149+
defaultEmptyValue: '',
150+
columnClassName: styles.country,
151+
},
136152
),
137153
createMultiTimelineColumn<RapidResponseByEventItem, number>(
138154
'timeline',
@@ -168,6 +184,7 @@ function OngoingRapidResponseDeployments() {
168184
strings.rapidResponseEmergency,
169185
strings.rapidResponsePosition,
170186
strings.rapidResponseDeployingOrganisation,
187+
strings.rapidReponseDeploymentCountry,
171188
strings.emergencyEndDate,
172189
strings.emergencyStartDate,
173190
strings.deploymentStartDate,
@@ -198,6 +215,17 @@ function OngoingRapidResponseDeployments() {
198215
strings.rapidResponseOrganisation,
199216
(item) => item?.country_from?.society_name,
200217
),
218+
createLinkColumn<Personnel, number>(
219+
'country',
220+
strings.rapidReponseDeploymentCountry,
221+
(item) => item?.country_deployed_to?.name,
222+
(item) => ({
223+
to: 'countriesLayout',
224+
urlParams: {
225+
countryId: item?.country_deployed_to?.id,
226+
},
227+
}),
228+
),
201229
createTimelineColumn<Personnel, number>(
202230
'timeline',
203231
timelineDateRange,
@@ -214,6 +242,7 @@ function OngoingRapidResponseDeployments() {
214242
strings.rapidResponseRole,
215243
strings.rapidResponseName,
216244
strings.rapidResponseOrganisation,
245+
strings.rapidReponseDeploymentCountry,
217246
],
218247
);
219248

@@ -223,7 +252,10 @@ function OngoingRapidResponseDeployments() {
223252
return row;
224253
}
225254

226-
const subRows = datum.deployments?.flatMap((deployment) => deployment.personnel);
255+
const subRows = datum.deployments?.flatMap((deployment) => ({
256+
...deployment.personnel,
257+
country_deployed_to: deployment.country_deployed_to,
258+
}));
227259

228260
return (
229261
<>

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
.rapid-response-deployments {
22
.table {
3-
min-height: var(--go-ui-compact-content-min-height);
3+
min-height: 5rem;
44
.name {
55
min-width: 8rem;
66
}
77

88
.role {
9+
min-width: 12rem;
10+
}
11+
12+
.organisation {
13+
min-width: 12rem;
14+
}
15+
16+
.country {
917
min-width: 8rem;
1018
}
1119

0 commit comments

Comments
 (0)