Skip to content

Commit 5dd59da

Browse files
shreeyash07shreeyash07
committed
feat(surge-eru): update in eru surge page
- add options to select contribution type in update ERU form - group list from ns contribution in readiness info modal - filter national societies in ERU Type card to only which holds the ERU
1 parent 745058a commit 5dd59da

11 files changed

Lines changed: 324 additions & 139 deletions

File tree

‎app/src/utils/constants.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,10 @@ export const SURGE_ALERT_STATUS_OPEN = 0 satisfies SurgeAlertTypeEnum;
176176
export const SURGE_ALERT_STATUS_STOOD_DOWN = 1 satisfies SurgeAlertTypeEnum;
177177
export const SURGE_ALERT_STATUS_CLOSED = 2 satisfies SurgeAlertTypeEnum;
178178

179+
type TypeOfNsContributionEnum = components<'read'>['schemas']['DeploymentsEruReadinessNsContributionEnumKey'];
180+
export const NS_CONTRIBUTION_HOLDS_ERU = 1 satisfies TypeOfNsContributionEnum;
181+
export const NS_CONTRIBUTION_SUPPORTS_ERU = 2 satisfies TypeOfNsContributionEnum;
182+
179183
export const NUM_X_AXIS_TICKS_MIN = 3;
180184
export const NUM_X_AXIS_TICKS_MAX = 12;
181185

‎app/src/views/EruReadinessForm/EruInputItem/index.tsx‎

Lines changed: 63 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { useMemo } from 'react';
22
import {
33
InputSection,
4+
ListView,
45
RadioInput,
56
TextArea,
67
} from '@ifrc-go/ui';
78
import { useTranslation } from '@ifrc-go/ui/hooks';
9+
import { stringValueSelector } from '@ifrc-go/ui/utils';
810
import { randomString } from '@togglecorp/fujs';
911
import {
1012
type ArrayError,
@@ -19,18 +21,17 @@ import { type GoApiResponse } from '#utils/restRequest';
1921
import { type PartialEruItem } from '../schema';
2022

2123
import i18n from './i18n.json';
22-
import styles from './styles.module.css';
2324

2425
type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
2526

2627
type ReadinessOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_status']>[number];
28+
type ContributionOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_ns_contribution']>[number];
2729

2830
function readinessKeySelector(option: ReadinessOption) {
2931
return option.key;
3032
}
31-
32-
function readinessLabelSelector(option: ReadinessOption) {
33-
return option.value;
33+
function contributionKeySelector(option: ContributionOption) {
34+
return option.key;
3435
}
3536

3637
const defaultCollectionValue: PartialEruItem = {
@@ -57,6 +58,7 @@ function EruInputItem(props: Props) {
5758
const {
5859
deployments_eru_type: eruTypeOptions,
5960
deployments_eru_readiness_status,
61+
deployments_eru_readiness_ns_contribution: nsContributionOptions,
6062
} = useGlobalEnums();
6163

6264
const onFieldChange = useFormObject(
@@ -76,50 +78,65 @@ function EruInputItem(props: Props) {
7678
return (
7779
<InputSection
7880
title={title}
79-
numPreferredColumns={4}
81+
numPreferredColumns={2}
8082
withFullWidthContent
8183
>
82-
<RadioInput
83-
label={strings.eruEquipmentReadiness}
84-
name="equipment_readiness"
85-
value={value.equipment_readiness}
86-
onChange={onFieldChange}
87-
options={deployments_eru_readiness_status}
88-
keySelector={readinessKeySelector}
89-
labelSelector={readinessLabelSelector}
90-
error={error?.equipment_readiness}
91-
radioListLayout="block"
92-
/>
93-
<RadioInput
94-
label={strings.eruPeopleReadiness}
95-
name="people_readiness"
96-
value={value.people_readiness}
97-
onChange={onFieldChange}
98-
options={deployments_eru_readiness_status}
99-
keySelector={readinessKeySelector}
100-
labelSelector={readinessLabelSelector}
101-
error={error?.people_readiness}
102-
radioListLayout="block"
103-
/>
104-
<RadioInput
105-
label={strings.eruFundingReadiness}
106-
name="funding_readiness"
107-
value={value.funding_readiness}
108-
onChange={onFieldChange}
109-
options={deployments_eru_readiness_status}
110-
keySelector={readinessKeySelector}
111-
labelSelector={readinessLabelSelector}
112-
error={error?.funding_readiness}
113-
radioListLayout="block"
114-
/>
115-
<TextArea
116-
className={styles.commentInput}
117-
label={strings.eruComments}
118-
name="comment"
119-
value={value?.comment}
120-
onChange={onFieldChange}
121-
error={error?.comment}
122-
/>
84+
<ListView>
85+
<RadioInput
86+
label={strings.eruEquipmentReadiness}
87+
name="equipment_readiness"
88+
value={value.equipment_readiness}
89+
onChange={onFieldChange}
90+
options={deployments_eru_readiness_status}
91+
keySelector={readinessKeySelector}
92+
labelSelector={stringValueSelector}
93+
error={error?.equipment_readiness}
94+
radioListLayout="block"
95+
/>
96+
<RadioInput
97+
label={strings.eruPeopleReadiness}
98+
name="people_readiness"
99+
value={value.people_readiness}
100+
onChange={onFieldChange}
101+
options={deployments_eru_readiness_status}
102+
keySelector={readinessKeySelector}
103+
labelSelector={stringValueSelector}
104+
error={error?.people_readiness}
105+
radioListLayout="block"
106+
/>
107+
<RadioInput
108+
label={strings.eruFundingReadiness}
109+
name="funding_readiness"
110+
value={value.funding_readiness}
111+
onChange={onFieldChange}
112+
options={deployments_eru_readiness_status}
113+
keySelector={readinessKeySelector}
114+
labelSelector={stringValueSelector}
115+
error={error?.funding_readiness}
116+
radioListLayout="block"
117+
/>
118+
</ListView>
119+
<ListView
120+
layout="block"
121+
>
122+
<TextArea
123+
label={strings.eruComments}
124+
name="comment"
125+
value={value?.comment}
126+
onChange={onFieldChange}
127+
error={error?.comment}
128+
/>
129+
<RadioInput
130+
name="ns_contribution"
131+
value={value?.ns_contribution}
132+
onChange={onFieldChange}
133+
options={nsContributionOptions}
134+
keySelector={contributionKeySelector}
135+
labelSelector={stringValueSelector}
136+
error={error?.ns_contribution}
137+
radioListLayout="block"
138+
/>
139+
</ListView>
123140
</InputSection>
124141
);
125142
}

‎app/src/views/EruReadinessForm/schema.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const schema: FormSchema = {
5959
equipment_readiness: { required: true },
6060
people_readiness: { required: true },
6161
funding_readiness: { required: true },
62+
ns_contribution: { required: true },
6263
comment: {},
6364
}),
6465
}),

‎app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"emergencyResponseUnitOwnerCardLastUpdated": "Last updated",
55
"emergencyResponseUnitNationalSociety": "National Society",
66
"eruSeeReadinessInfoButton": "See readiness info",
7-
"eruEquipmentReadiness": "Equipment",
8-
"eruPeopleReadiness": "People",
9-
"eruFundingReadiness": "Funding",
10-
"eruReadinessInformationHeading": "Readiness Information by National Society"
7+
"eruReadinessInformationHeading": "Readiness Information by National Society",
8+
"eruReadinessNoData": "Data not available",
9+
"eruHoldingERUTitle": "NS Holding this ERU",
10+
"eruSupportERUTitle": "NS Supporting this ERU"
1111
}
1212
}

‎app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx‎

Lines changed: 84 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useMemo } from 'react';
12
import {
23
Button,
34
Container,
@@ -9,18 +10,28 @@ import {
910
useBooleanState,
1011
useTranslation,
1112
} from '@ifrc-go/ui/hooks';
13+
import {
14+
isDefined,
15+
isNotDefined,
16+
listToGroupList,
17+
} from '@togglecorp/fujs';
1218

19+
import {
20+
NS_CONTRIBUTION_HOLDS_ERU,
21+
NS_CONTRIBUTION_SUPPORTS_ERU,
22+
} from '#utils/constants';
1323
import { type GoApiResponse } from '#utils/restRequest';
1424

15-
import ReadinessIcon from '../ReadinessIcon';
25+
import EruReadinessList from '../EruReadinessList';
26+
import ReadinessIconList from '../ReadinessIconList';
1627

1728
import i18n from './i18n.json';
1829

19-
type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;
30+
type EruReadinessTypeResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;
2031

21-
export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]> & {
22-
eruOwner: NonNullable<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_readiness']>[0]['eru_owner_details'];
23-
updatedAt: NonNullable<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_readiness']>[0]['updated_at'];
32+
export type ReadinessList = Array<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]> & {
33+
eruOwner: NonNullable<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]>['eru_readiness']>[number]['eru_owner_details'];
34+
updatedAt: NonNullable<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]>['eru_readiness']>[number]['updated_at'];
2435
}>
2536

2637
interface Props {
@@ -48,6 +59,13 @@ function EmergencyResponseUnitTypeCard(props: Props) {
4859

4960
const strings = useTranslation(i18n);
5061

62+
const groupedByNsContribution = useMemo(() => (
63+
listToGroupList(
64+
readinessList,
65+
(eru) => eru.ns_contribution,
66+
)
67+
), [readinessList]);
68+
5169
const [
5270
showReadinessInfo,
5371
{
@@ -96,17 +114,10 @@ function EmergencyResponseUnitTypeCard(props: Props) {
96114
numPreferredGridColumns={3}
97115
minGridColumnSize="6rem"
98116
>
99-
<ReadinessIcon
100-
readinessType={equipmentReadiness}
101-
label={strings.eruEquipmentReadiness}
102-
/>
103-
<ReadinessIcon
104-
readinessType={peopleReadiness}
105-
label={strings.eruPeopleReadiness}
106-
/>
107-
<ReadinessIcon
108-
readinessType={fundingReadiness}
109-
label={strings.eruFundingReadiness}
117+
<ReadinessIconList
118+
fundingReadiness={fundingReadiness}
119+
equipmentReadiness={equipmentReadiness}
120+
peopleReadiness={peopleReadiness}
110121
/>
111122
</ListView>
112123
</ListView>
@@ -118,41 +129,64 @@ function EmergencyResponseUnitTypeCard(props: Props) {
118129
size="md"
119130
withoutSpacingOpticalCorrection
120131
>
121-
<ListView
122-
layout="block"
123-
spacing="2xs"
124-
>
125-
{readinessList?.map((readiness) => (
126-
<Container
127-
key={readiness.id}
128-
heading={
129-
readiness.eruOwner.national_society_country_details.society_name
130-
}
131-
headingLevel={5}
132-
withDarkBackground
133-
withPadding
134-
>
135-
<ListView
136-
layout="grid"
137-
numPreferredGridColumns={3}
138-
minGridColumnSize="6rem"
132+
{isNotDefined(groupedByNsContribution)
133+
&& (strings.eruReadinessNoData)}
134+
{isDefined(groupedByNsContribution) && (
135+
<ListView
136+
layout="block"
137+
>
138+
{isDefined(groupedByNsContribution[NS_CONTRIBUTION_HOLDS_ERU]) && (
139+
<Container
140+
headingLevel={5}
141+
heading={strings.eruHoldingERUTitle}
142+
>
143+
<ListView
144+
layout="block"
145+
spacing="2xs"
146+
>
147+
{groupedByNsContribution[NS_CONTRIBUTION_HOLDS_ERU]
148+
?.map((readiness) => (
149+
<EruReadinessList
150+
key={readiness.id}
151+
heading={readiness.eruOwner
152+
.national_society_country_details
153+
.society_name}
154+
fundingReadiness={readiness.funding_readiness}
155+
equipmentReadiness={readiness
156+
.equipment_readiness}
157+
peopleReadiness={readiness.people_readiness}
158+
/>
159+
))}
160+
</ListView>
161+
</Container>
162+
)}
163+
{isDefined(groupedByNsContribution[NS_CONTRIBUTION_SUPPORTS_ERU]) && (
164+
<Container
165+
headingLevel={5}
166+
heading={strings.eruSupportERUTitle}
139167
>
140-
<ReadinessIcon
141-
readinessType={readiness.equipment_readiness}
142-
label={strings.eruEquipmentReadiness}
143-
/>
144-
<ReadinessIcon
145-
readinessType={readiness.people_readiness}
146-
label={strings.eruPeopleReadiness}
147-
/>
148-
<ReadinessIcon
149-
readinessType={readiness.funding_readiness}
150-
label={strings.eruFundingReadiness}
151-
/>
152-
</ListView>
153-
</Container>
154-
))}
155-
</ListView>
168+
<ListView
169+
layout="block"
170+
spacing="2xs"
171+
>
172+
{groupedByNsContribution[NS_CONTRIBUTION_SUPPORTS_ERU]
173+
?.map((readiness) => (
174+
<EruReadinessList
175+
key={readiness.id}
176+
heading={readiness.eruOwner
177+
.national_society_country_details
178+
.society_name}
179+
fundingReadiness={readiness.funding_readiness}
180+
equipmentReadiness={readiness
181+
.equipment_readiness}
182+
peopleReadiness={readiness.people_readiness}
183+
/>
184+
))}
185+
</ListView>
186+
</Container>
187+
)}
188+
</ListView>
189+
)}
156190
</Modal>
157191
)}
158192
</Container>

0 commit comments

Comments
 (0)