Skip to content

Commit d58f3ed

Browse files
barshathakuribarshathakuri
committed
Add Update ERU Form
1 parent 94ef49a commit d58f3ed

File tree

9 files changed

+587
-3
lines changed

9 files changed

+587
-3
lines changed

‎app/src/App/routes/SurgeRoutes.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,7 @@ const updateERUReadinessForm = customWrapRoute({
106106
parent: rootLayout,
107107
path: 'update-eru-readiness',
108108
component: {
109-
// TODO: Add ERUReadinessUpdateForm Route
110-
render: () => import('#views/Home'),
109+
render: () => import('#views/EruReadinessForm'),
111110
props: {},
112111
},
113112
wrapperComponent: Auth,

‎app/src/views/EruReadinessForm/EruInputItem/i18n.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"namespace": "eruReadinessForm",
3+
"strings": {
4+
"eruEquipmentReadiness": "Equipment Readiness",
5+
"eruPeopleReadiness": "People Readiness",
6+
"eruFundingReadiness": "Funding Readiness",
7+
"eruComments": "Comments",
8+
"eruLead": "Confirm that you have capacity to lead this type of ERU",
9+
"eruSupport": "Confirm that you have capacity to support this type of ERU"
10+
}
11+
}

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

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import {
2+
Checkbox,
3+
Container,
4+
InputSection,
5+
RadioInput,
6+
TextArea,
7+
} from '@ifrc-go/ui';
8+
import { useTranslation } from '@ifrc-go/ui/hooks';
9+
import {
10+
isDefined,
11+
randomString,
12+
} from '@togglecorp/fujs';
13+
import {
14+
type ArrayError,
15+
getErrorObject,
16+
type PartialForm,
17+
type SetValueArg,
18+
useFormObject,
19+
} from '@togglecorp/toggle-form';
20+
21+
import useGlobalEnums from '#hooks/domain/useGlobalEnums';
22+
import { type GoApiResponse } from '#utils/restRequest';
23+
24+
import { type EruType } from '../schema';
25+
26+
import i18n from './i18n.json';
27+
import styles from './styles.module.css';
28+
29+
type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
30+
31+
type ReadinessOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_status']>[number];
32+
33+
function readinessKeySelector(option: ReadinessOption) {
34+
return option.key;
35+
}
36+
37+
function readinessLabelSelector(option: ReadinessOption) {
38+
return option.value;
39+
}
40+
41+
const defaultCollectionValue: PartialForm<EruType> = {
42+
client_id: randomString(),
43+
};
44+
45+
interface Props {
46+
index: number;
47+
value: PartialForm<EruType>;
48+
onChange: (value: SetValueArg<PartialForm<EruType>>, index: number) => void;
49+
title: Record<string, string> | undefined;
50+
error: ArrayError<EruType> | undefined;
51+
}
52+
53+
function EruInputItem(props: Props) {
54+
const {
55+
index,
56+
value,
57+
onChange,
58+
title,
59+
error: errorFromProps,
60+
} = props;
61+
62+
const strings = useTranslation(i18n);
63+
64+
const {
65+
deployments_eru_readiness_status,
66+
} = useGlobalEnums();
67+
68+
const onFieldChange = useFormObject(
69+
index,
70+
onChange,
71+
defaultCollectionValue,
72+
);
73+
const eruTypeLabel = isDefined(value.type)
74+
? title?.[value.type]
75+
: undefined;
76+
const error = (value && value.client_id && errorFromProps)
77+
? getErrorObject(errorFromProps?.[value.client_id])
78+
: undefined;
79+
80+
return (
81+
<Container
82+
childrenContainerClassName={styles.eruTypes}
83+
heading={eruTypeLabel}
84+
>
85+
<InputSection
86+
className={styles.readinessOptions}
87+
title={strings.eruEquipmentReadiness}
88+
>
89+
<RadioInput
90+
listContainerClassName={styles.readinessList}
91+
name="equipment_readiness"
92+
value={value.equipment_readiness}
93+
onChange={onFieldChange}
94+
options={deployments_eru_readiness_status}
95+
keySelector={readinessKeySelector}
96+
labelSelector={readinessLabelSelector}
97+
error={error?.equipment_readiness}
98+
/>
99+
</InputSection>
100+
<InputSection
101+
className={styles.readinessOptions}
102+
title={strings.eruPeopleReadiness}
103+
>
104+
<RadioInput
105+
listContainerClassName={styles.readinessList}
106+
name="people_readiness"
107+
value={value.people_readiness}
108+
onChange={onFieldChange}
109+
options={deployments_eru_readiness_status}
110+
keySelector={readinessKeySelector}
111+
labelSelector={readinessLabelSelector}
112+
error={error?.people_readiness}
113+
/>
114+
</InputSection>
115+
<InputSection
116+
className={styles.readinessOptions}
117+
title={strings.eruFundingReadiness}
118+
>
119+
<RadioInput
120+
listContainerClassName={styles.readinessList}
121+
name="funding_readiness"
122+
value={value.funding_readiness}
123+
onChange={onFieldChange}
124+
options={deployments_eru_readiness_status}
125+
keySelector={readinessKeySelector}
126+
labelSelector={readinessLabelSelector}
127+
error={error?.funding_readiness}
128+
/>
129+
</InputSection>
130+
<InputSection
131+
className={styles.readinessOptions}
132+
title={strings.eruComments}
133+
>
134+
<TextArea
135+
name="comment"
136+
value={value?.comment}
137+
onChange={onFieldChange}
138+
error={error?.comment}
139+
/>
140+
<Checkbox
141+
label={strings.eruLead}
142+
name="has_capacity_to_lead"
143+
value={value.has_capacity_to_lead}
144+
onChange={onFieldChange}
145+
error={error?.has_capacity_to_lead}
146+
/>
147+
<Checkbox
148+
label={strings.eruSupport}
149+
name="has_capacity_to_support"
150+
value={value.has_capacity_to_support}
151+
onChange={onFieldChange}
152+
error={error?.has_capacity_to_support}
153+
/>
154+
</InputSection>
155+
</Container>
156+
157+
);
158+
}
159+
160+
export default EruInputItem;

‎app/src/views/EruReadinessForm/EruInputItem/styles.module.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.eru-types {
2+
display: flex;
3+
4+
.readiness-options {
5+
display: flex;
6+
flex-direction: column;
7+
8+
.readiness-list {
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
}
13+
}

‎app/src/views/EruReadinessForm/i18n.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"namespace": "eruReadinessForm",
3+
"strings": {
4+
"eruReadinessFormTitle": "Update ERU Readiness Form",
5+
"eruReadinessFormHeading": "ERU Deployment Readiness",
6+
"eruReadinessFormDescription": "Complete the form with the ERU Readiness data of your National Society. In case of any questions.",
7+
"eruCancelButton": "Cancel",
8+
"eruSaveAndCloseButton": "Save and Close",
9+
"eruNationalSociety": "National Society",
10+
"eruTypes": "Select ERU Type(s)",
11+
"eruFormCreatedSucessfully": "ERU Readiness Created Sucessfully",
12+
"eruFormFailedToCreate": "Failed to create a ERU Readiness",
13+
"eruFormSuccessfullyUpdated": "Sucessfully Updated ERU Readiness Form",
14+
"eruFormFailedToUpdate": "Failed to Update ERU Readiness Form"
15+
}
16+
}

0 commit comments

Comments
 (0)