Skip to content

ERU: Update in eru form and eru page #2269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frozenhelium merged 1 commit into from
Mar 18, 2026
Merged

ERU: Update in eru form and eru page #2269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/src/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,10 @@ export const SURGE_ALERT_STATUS_OPEN = 0 satisfies SurgeAlertTypeEnum;
export const SURGE_ALERT_STATUS_STOOD_DOWN = 1 satisfies SurgeAlertTypeEnum;
export const SURGE_ALERT_STATUS_CLOSED = 2 satisfies SurgeAlertTypeEnum;

type TypeOfNsContributionEnum = components<'read'>['schemas']['DeploymentsEruReadinessNsContributionEnumKey'];
export const NS_CONTRIBUTION_HOLDS_ERU = 1 satisfies TypeOfNsContributionEnum;
export const NS_CONTRIBUTION_SUPPORTS_ERU = 2 satisfies TypeOfNsContributionEnum;

export const NUM_X_AXIS_TICKS_MIN = 3;
export const NUM_X_AXIS_TICKS_MAX = 12;

Expand Down
109 changes: 63 additions & 46 deletions app/src/views/EruReadinessForm/EruInputItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { useMemo } from 'react';
import {
InputSection,
ListView,
RadioInput,
TextArea,
} from '@ifrc-go/ui';
import { useTranslation } from '@ifrc-go/ui/hooks';
import { stringValueSelector } from '@ifrc-go/ui/utils';
import { randomString } from '@togglecorp/fujs';
import {
type ArrayError,
Expand All @@ -19,18 +21,17 @@ import { type GoApiResponse } from '#utils/restRequest';
import { type PartialEruItem } from '../schema';

import i18n from './i18n.json';
import styles from './styles.module.css';

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

type ReadinessOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_status']>[number];
type ContributionOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_ns_contribution']>[number];

function readinessKeySelector(option: ReadinessOption) {
return option.key;
}

function readinessLabelSelector(option: ReadinessOption) {
return option.value;
function contributionKeySelector(option: ContributionOption) {
return option.key;
}
Comment on lines +33 to +35
Copy link
Copy Markdown
Member

@frozenhelium frozenhelium Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If key is not enum, we should be able to re-use existing key selectors from utils/selectors

Copy link
Copy Markdown
Collaborator Author

@shreeyash07 shreeyash07 Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using existing key selectors gave error so not making any changes.


const defaultCollectionValue: PartialEruItem = {
Expand All @@ -57,6 +58,7 @@ function EruInputItem(props: Props) {
const {
deployments_eru_type: eruTypeOptions,
deployments_eru_readiness_status,
deployments_eru_readiness_ns_contribution: nsContributionOptions,
} = useGlobalEnums();

const onFieldChange = useFormObject(
Expand All @@ -76,50 +78,65 @@ function EruInputItem(props: Props) {
return (
<InputSection
title={title}
numPreferredColumns={4}
numPreferredColumns={2}
withFullWidthContent
>
<RadioInput
label={strings.eruEquipmentReadiness}
name="equipment_readiness"
value={value.equipment_readiness}
onChange={onFieldChange}
options={deployments_eru_readiness_status}
keySelector={readinessKeySelector}
labelSelector={readinessLabelSelector}
error={error?.equipment_readiness}
radioListLayout="block"
/>
<RadioInput
label={strings.eruPeopleReadiness}
name="people_readiness"
value={value.people_readiness}
onChange={onFieldChange}
options={deployments_eru_readiness_status}
keySelector={readinessKeySelector}
labelSelector={readinessLabelSelector}
error={error?.people_readiness}
radioListLayout="block"
/>
<RadioInput
label={strings.eruFundingReadiness}
name="funding_readiness"
value={value.funding_readiness}
onChange={onFieldChange}
options={deployments_eru_readiness_status}
keySelector={readinessKeySelector}
labelSelector={readinessLabelSelector}
error={error?.funding_readiness}
radioListLayout="block"
/>
<TextArea
className={styles.commentInput}
label={strings.eruComments}
name="comment"
value={value?.comment}
onChange={onFieldChange}
error={error?.comment}
/>
<ListView>
<RadioInput
label={strings.eruEquipmentReadiness}
name="equipment_readiness"
value={value.equipment_readiness}
onChange={onFieldChange}
options={deployments_eru_readiness_status}
keySelector={readinessKeySelector}
labelSelector={stringValueSelector}
error={error?.equipment_readiness}
radioListLayout="block"
/>
<RadioInput
label={strings.eruPeopleReadiness}
name="people_readiness"
value={value.people_readiness}
onChange={onFieldChange}
options={deployments_eru_readiness_status}
keySelector={readinessKeySelector}
labelSelector={stringValueSelector}
error={error?.people_readiness}
radioListLayout="block"
/>
<RadioInput
label={strings.eruFundingReadiness}
name="funding_readiness"
value={value.funding_readiness}
onChange={onFieldChange}
options={deployments_eru_readiness_status}
keySelector={readinessKeySelector}
labelSelector={stringValueSelector}
error={error?.funding_readiness}
radioListLayout="block"
/>
</ListView>
<ListView
layout="block"
>
<TextArea
label={strings.eruComments}
name="comment"
value={value?.comment}
onChange={onFieldChange}
error={error?.comment}
/>
<RadioInput
name="ns_contribution"
value={value?.ns_contribution}
onChange={onFieldChange}
options={nsContributionOptions}
keySelector={contributionKeySelector}
labelSelector={stringValueSelector}
error={error?.ns_contribution}
radioListLayout="block"
/>
</ListView>
</InputSection>
);
}
Expand Down
1 change: 1 addition & 0 deletions app/src/views/EruReadinessForm/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ const schema: FormSchema = {
equipment_readiness: { required: true },
people_readiness: { required: true },
funding_readiness: { required: true },
ns_contribution: { required: true },
comment: {},
}),
}),
Expand Down
8 changes: 4 additions & 4 deletions .../EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"emergencyResponseUnitOwnerCardLastUpdated": "Last updated",
"emergencyResponseUnitNationalSociety": "National Society",
"eruSeeReadinessInfoButton": "See readiness info",
"eruEquipmentReadiness": "Equipment",
"eruPeopleReadiness": "People",
"eruFundingReadiness": "Funding",
"eruReadinessInformationHeading": "Readiness Information by National Society"
"eruReadinessInformationHeading": "Readiness Information by National Society",
"eruReadinessNoData": "Data not available",
"eruHoldingERUTitle": "NS Holding this ERU",
"eruSupportERUTitle": "NS Supporting this ERU"
}
}
134 changes: 84 additions & 50 deletions .../EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useMemo } from 'react';
import {
Button,
Container,
Expand All @@ -9,18 +10,28 @@ import {
useBooleanState,
useTranslation,
} from '@ifrc-go/ui/hooks';
import {
isDefined,
isNotDefined,
listToGroupList,
} from '@togglecorp/fujs';

import {
NS_CONTRIBUTION_HOLDS_ERU,
NS_CONTRIBUTION_SUPPORTS_ERU,
} from '#utils/constants';
import { type GoApiResponse } from '#utils/restRequest';

import ReadinessIcon from '../ReadinessIcon';
import EruReadinessList from '../EruReadinessList';
import ReadinessIconList from '../ReadinessIconList';

import i18n from './i18n.json';

type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;
type EruReadinessTypeResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;

export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]> & {
eruOwner: NonNullable<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_readiness']>[0]['eru_owner_details'];
updatedAt: NonNullable<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_readiness']>[0]['updated_at'];
export type ReadinessList = Array<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]> & {
eruOwner: NonNullable<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]>['eru_readiness']>[number]['eru_owner_details'];
updatedAt: NonNullable<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]>['eru_readiness']>[number]['updated_at'];
}>

interface Props {
Expand Down Expand Up @@ -48,6 +59,13 @@ function EmergencyResponseUnitTypeCard(props: Props) {

const strings = useTranslation(i18n);

const groupedByNsContribution = useMemo(() => (
listToGroupList(
readinessList,
(eru) => eru.ns_contribution,
)
), [readinessList]);

const [
showReadinessInfo,
{
Expand Down Expand Up @@ -96,17 +114,10 @@ function EmergencyResponseUnitTypeCard(props: Props) {
numPreferredGridColumns={3}
minGridColumnSize="6rem"
>
<ReadinessIcon
readinessType={equipmentReadiness}
label={strings.eruEquipmentReadiness}
/>
<ReadinessIcon
readinessType={peopleReadiness}
label={strings.eruPeopleReadiness}
/>
<ReadinessIcon
readinessType={fundingReadiness}
label={strings.eruFundingReadiness}
<ReadinessIconList
fundingReadiness={fundingReadiness}
equipmentReadiness={equipmentReadiness}
peopleReadiness={peopleReadiness}
/>
</ListView>
</ListView>
Expand All @@ -118,41 +129,64 @@ function EmergencyResponseUnitTypeCard(props: Props) {
size="md"
withoutSpacingOpticalCorrection
>
<ListView
layout="block"
spacing="2xs"
>
{readinessList?.map((readiness) => (
<Container
key={readiness.id}
heading={
readiness.eruOwner.national_society_country_details.society_name
}
headingLevel={5}
withDarkBackground
withPadding
>
<ListView
layout="grid"
numPreferredGridColumns={3}
minGridColumnSize="6rem"
{isNotDefined(groupedByNsContribution)
&& (strings.eruReadinessNoData)}
{isDefined(groupedByNsContribution) && (
<ListView
layout="block"
>
{isDefined(groupedByNsContribution[NS_CONTRIBUTION_HOLDS_ERU]) && (
<Container
headingLevel={5}
heading={strings.eruHoldingERUTitle}
>
<ListView
layout="block"
spacing="2xs"
>
{groupedByNsContribution[NS_CONTRIBUTION_HOLDS_ERU]
?.map((readiness) => (
<EruReadinessList
key={readiness.id}
heading={readiness.eruOwner
.national_society_country_details
.society_name}
fundingReadiness={readiness.funding_readiness}
equipmentReadiness={readiness
.equipment_readiness}
peopleReadiness={readiness.people_readiness}
/>
))}
</ListView>
</Container>
)}
{isDefined(groupedByNsContribution[NS_CONTRIBUTION_SUPPORTS_ERU]) && (
<Container
headingLevel={5}
heading={strings.eruSupportERUTitle}
>
<ReadinessIcon
readinessType={readiness.equipment_readiness}
label={strings.eruEquipmentReadiness}
/>
<ReadinessIcon
readinessType={readiness.people_readiness}
label={strings.eruPeopleReadiness}
/>
<ReadinessIcon
readinessType={readiness.funding_readiness}
label={strings.eruFundingReadiness}
/>
</ListView>
</Container>
))}
</ListView>
<ListView
layout="block"
spacing="2xs"
>
{groupedByNsContribution[NS_CONTRIBUTION_SUPPORTS_ERU]
?.map((readiness) => (
<EruReadinessList
key={readiness.id}
heading={readiness.eruOwner
.national_society_country_details
.society_name}
fundingReadiness={readiness.funding_readiness}
equipmentReadiness={readiness
.equipment_readiness}
peopleReadiness={readiness.people_readiness}
/>
))}
</ListView>
</Container>
)}
</ListView>
)}
</Modal>
)}
</Container>
Expand Down
Loading
Loading