Add source information field in ops update and final Report in dref event detail form

Author: utsukta1

src/views/DrefFinalReportForm/EventDetail/i18n.json

@@ -24,6 +24,9 @@
         "finalReportPeopleTargeted": "Number of people targeted",
         "drefFormPeopleTargetedDescription": "Include all those whose the National Society is aiming or planning to assist",
         "drefFormPeopleTargeted": "Number of people targeted",
-        "drefFormPeopleInNeedDescriptionSlowSudden": "People in Need (PIN) are those members whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection is inadequate to re-establish normal living conditions without additional assistance."
+        "drefFormPeopleInNeedDescriptionSlowSudden": "People in Need (PIN) are those members whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection is inadequate to re-establish normal living conditions without additional assistance.",
+        "drefFormSourceInformationAddButton": "Add New Source Information",
+        "drefFormSourceInformationTitle": "Source Information",
+        "drefFormSourceInformationDescription": "Add the links and the name of the sources, the name will be shown in the export, as an hyperlink."
     }
 }

src/views/DrefFinalReportForm/EventDetail/index.tsx

@@ -1,7 +1,10 @@
+import { useCallback } from 'react';
+import { randomString } from '@togglecorp/fujs';
 import {
     type Error,
     type EntriesAsList,
     getErrorObject,
+    useFormArray,
 } from '@togglecorp/toggle-form';
 import { WikiHelpSectionLineIcon } from '@ifrc-go/icons';
 
@@ -14,6 +17,9 @@ import Link from '#components/Link';
 import useTranslation from '#hooks/useTranslation';
 import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput';
 
+import SourceInformationInput from '#views/DrefApplicationForm/EventDetail/SourceInformationInput';
+import NonFieldError from '#components/NonFieldError';
+import Button from '#components/Button';
 import {
     TYPE_IMMINENT,
     TYPE_ASSESSMENT,
@@ -25,6 +31,7 @@ import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 type Value = PartialFinalReport;
+type SourceInformationFormFields = NonNullable<PartialFinalReport['source_information']>[number];
 interface Props {
     value: Value;
     setFieldValue: (...entries: EntriesAsList<Value>) => void;
@@ -53,6 +60,27 @@ function EventDetail(props: Props) {
 
     const error = getErrorObject(formError);
 
+    const {
+        setValue: onSourceInformationChange,
+        removeValue: onSourceInformationRemove,
+    } = useFormArray<'source_information', SourceInformationFormFields>(
+        'source_information',
+        setFieldValue,
+    );
+
+    const handleSourceInformationAdd = useCallback(() => {
+        const newSourceInformationItem: SourceInformationFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: SourceInformationFormFields[] | undefined) => (
+                [...(oldValue ?? []), newSourceInformationItem]
+            ),
+            'source_information' as const,
+        );
+    }, [setFieldValue]);
+
     return (
         <div className={styles.eventDetail}>
             <Container
@@ -246,6 +274,32 @@ function EventDetail(props: Props) {
                         />
                     </InputSection>
                 )}
+                <InputSection
+                    title={strings.drefFormSourceInformationTitle}
+                    description={strings.drefFormSourceInformationDescription}
+                >
+                    <NonFieldError error={getErrorObject(error?.source_information)} />
+                    {value.source_information?.map((source, index) => (
+                        <SourceInformationInput
+                            key={source.client_id}
+                            index={index}
+                            value={source}
+                            onChange={onSourceInformationChange}
+                            onRemove={onSourceInformationRemove}
+                            error={getErrorObject(error?.source_information)}
+                            disabled={disabled}
+                        />
+                    ))}
+                    <Button
+                        className={styles.actions}
+                        name={undefined}
+                        onClick={handleSourceInformationAdd}
+                        variant="secondary"
+                        disabled={disabled}
+                    >
+                        {strings.drefFormSourceInformationAddButton}
+                    </Button>
+                </InputSection>
             </Container>
         </div>
     );

src/views/DrefFinalReportForm/schema.ts

@@ -10,6 +10,7 @@ import {
     nullValue,
     lessThanOrEqualToCondition,
     emailCondition,
+    urlCondition,
 } from '@togglecorp/toggle-form';
 import { isDefined } from '@togglecorp/fujs';
 import { type DeepReplace } from '#utils/common';
@@ -52,11 +53,13 @@ type InterventionResponse = NonNullable<FinalReportRequestBody['planned_interven
 type IndicatorResponse = NonNullable<InterventionResponse['indicators']>[number];
 type RiskSecurityResponse = NonNullable<FinalReportRequestBody['risk_security']>[number];
 type ImagesFileResponse = NonNullable<FinalReportRequestBody['images_file']>[number];
+type SourceInformationResponse = NonNullable<FinalReportRequestBody['source_information']>[number];
 
 type NeedIdentifiedFormFields = NeedIdentifiedResponse & { client_id: string };
 type NsActionFormFields = NsActionResponse & { client_id: string; }
 type InterventionFormFields = InterventionResponse & { client_id: string };
 type IndicatorFormFields = IndicatorResponse & { client_id: string };
+type SourceInformationFormFields = SourceInformationResponse & { client_id: string };
 
 type RiskSecurityFormFields = RiskSecurityResponse & { client_id: string; };
 type ImagesFileFormFields = ImagesFileResponse & { client_id: string };
@@ -76,30 +79,34 @@ type FinalReportFormFields = (
                         DeepReplace<
                             DeepReplace<
                                 DeepReplace<
-                                    FinalReportRequestBody,
-                                    NeedIdentifiedResponse,
-                                    NeedIdentifiedFormFields
+                                    DeepReplace<
+                                        FinalReportRequestBody,
+                                        NeedIdentifiedResponse,
+                                        NeedIdentifiedFormFields
+                                    >,
+                                    NsActionResponse,
+                                    NsActionFormFields
                                 >,
-                                NsActionResponse,
-                                NsActionFormFields
+                                InterventionResponse,
+                                InterventionFormFields
                             >,
-                            InterventionResponse,
-                            InterventionFormFields
+                            IndicatorResponse,
+                            IndicatorFormFields
                         >,
                         IndicatorResponse,
                         IndicatorFormFields
                     >,
-                    IndicatorResponse,
-                    IndicatorFormFields
+                    RiskSecurityResponse,
+                    RiskSecurityFormFields
                 >,
-                RiskSecurityResponse,
-                RiskSecurityFormFields
+                ImagesFileResponse,
+                ImagesFileFormFields
             >,
-            ImagesFileResponse,
-            ImagesFileFormFields
+            EventMapFileResponse,
+            EventMapFileFormField
         >,
-        EventMapFileResponse,
-        EventMapFileFormField
+        SourceInformationResponse,
+        SourceInformationFormFields
     >
 );
 
@@ -116,6 +123,7 @@ type CoverImageFileFields = ReturnType<ObjectSchema<PartialFinalReport['cover_im
 type ImageFileFields = ReturnType<ObjectSchema<NonNullable<PartialFinalReport['images_file']>[number], PartialFinalReport>['fields']>;
 type NeedsIdentifiedFields = ReturnType<ObjectSchema<NonNullable<PartialFinalReport['needs_identified']>[number], PartialFinalReport>['fields']>;
 type RiskSecurityFields = ReturnType<ObjectSchema<NonNullable<PartialFinalReport['risk_security']>[number], PartialFinalReport>['fields']>;
+type SourceInformationFields = ReturnType<ObjectSchema<NonNullable<PartialFinalReport['source_information']>[number], PartialFinalReport>['fields']>;
 type PlannedInterventionFields = ReturnType<ObjectSchema<NonNullable<PartialFinalReport['planned_interventions']>[number], PartialFinalReport>['fields']>;
 type IndicatorFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialFinalReport['planned_interventions']>[number]['indicators']>[number], PartialFinalReport>['fields']>;
 
@@ -335,6 +343,7 @@ const schema: FinalReportFormSchema = {
         const eventDetailDrefTypeRelatedFields = [
             'event_text',
             'event_date',
+            'source_information',
         ] as const;
         type EventDetailDrefTypeRelatedFields = Pick<
             FinalReportFormSchemaFields,
@@ -349,6 +358,22 @@ const schema: FinalReportFormSchema = {
                 const conditionalFields: EventDetailDrefTypeRelatedFields = {
                     event_text: { forceValue: nullValue },
                     event_date: { forceValue: nullValue },
+                    source_information: {
+                        keySelector: (source) => source.client_id,
+                        member: () => ({
+                            fields: (): SourceInformationFields => ({
+                                client_id: {},
+                                source_name: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                },
+                                source_link: {
+                                    required: true,
+                                    validations: [urlCondition],
+                                },
+                            }),
+                        }),
+                    },
                 };
 
                 if (val?.type_of_dref === TYPE_IMMINENT) {

src/views/DrefOperationalUpdateForm/EventDetail/i18n.json

@@ -18,6 +18,10 @@
         "drefFormImminentDisaster": "Provide any updates in the situation since the field report and explain what is expected to happen.",
         "drefFormScopeAndScaleDescription": "Describe the extent this hazard will produce negative impacts on lives, livelihoods, well-being and infrastructure. Explain which people are most likely to experience the impacts of this hazard? Where do they live, and why are they vulnerable? Please explain which groups (e.g elderly, children, people with disabilities, IDPs, Refugees, etc.) are most likely to be affected? Provide historic information on how communities have been affected by the magnitude of this hazard in the past?",
         "drefFormScopeAndScaleEvent": "Scope and scale of the event",
+        "drefFormSourceInformationTitle": "Source Information",
+        "drefFormSourceInformationDescription": "Add the links and the name of the sources, the name will be shown in the export, as an hyperlink.",
+        "drefFormSourceInformationAddButton": "Add New Source Information",
+        "drefFormSelectImages": "Select images",
         "drefFormSlowEventDate": "Date when the trigger was met",
         "drefFormTargetCommunities": "Explain why your National Society is acting now and what criteria is used to launch this operation.",
         "drefFormTargetCommunitiesDescription": "If the operation uses triggers related to different phases (such as readiness activities and early actions) add your triggers and data sources",

src/views/DrefOperationalUpdateForm/EventDetail/index.tsx

@@ -1,7 +1,10 @@
+import { useCallback } from 'react';
+import { randomString } from '@togglecorp/fujs';
 import {
     type Error,
     type EntriesAsList,
     getErrorObject,
+    useFormArray,
 } from '@togglecorp/toggle-form';
 import { WikiHelpSectionLineIcon } from '@ifrc-go/icons';
 
@@ -15,6 +18,9 @@ import Link from '#components/Link';
 import useTranslation from '#hooks/useTranslation';
 import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput';
 
+import NonFieldError from '#components/NonFieldError';
+import Button from '#components/Button';
+import SourceInformationInput from '#views/DrefApplicationForm/EventDetail/SourceInformationInput';
 import {
     TYPE_IMMINENT,
     TYPE_ASSESSMENT,
@@ -27,6 +33,8 @@ import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 type Value = PartialOpsUpdate;
+type SourceInformationFormFields = NonNullable<PartialOpsUpdate['source_information']>[number];
+
 interface Props {
     value: Value;
     setFieldValue: (...entries: EntriesAsList<Value>) => void;
@@ -55,6 +63,27 @@ function EventDetail(props: Props) {
 
     const error = getErrorObject(formError);
 
+    const {
+        setValue: onSourceInformationChange,
+        removeValue: onSourceInformationRemove,
+    } = useFormArray<'source_information', SourceInformationFormFields>(
+        'source_information',
+        setFieldValue,
+    );
+
+    const handleSourceInformationAdd = useCallback(() => {
+        const newSourceInformationItem: SourceInformationFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: SourceInformationFormFields[] | undefined) => (
+                [...(oldValue ?? []), newSourceInformationItem]
+            ),
+            'source_information' as const,
+        );
+    }, [setFieldValue]);
+
     return (
         <div className={styles.eventDetail}>
             {value.type_of_dref !== TYPE_LOAN && (
@@ -357,6 +386,34 @@ function EventDetail(props: Props) {
                         />
                     </InputSection>
                 )}
+                {value.type_of_dref !== TYPE_LOAN && (
+                    <InputSection
+                        title={strings.drefFormSourceInformationTitle}
+                        description={strings.drefFormSourceInformationDescription}
+                    >
+                        <NonFieldError error={getErrorObject(error?.source_information)} />
+                        {value.source_information?.map((source, index) => (
+                            <SourceInformationInput
+                                key={source.client_id}
+                                index={index}
+                                value={source}
+                                onChange={onSourceInformationChange}
+                                onRemove={onSourceInformationRemove}
+                                error={getErrorObject(error?.source_information)}
+                                disabled={disabled}
+                            />
+                        ))}
+                        <Button
+                            className={styles.actions}
+                            name={undefined}
+                            onClick={handleSourceInformationAdd}
+                            variant="secondary"
+                            disabled={disabled}
+                        >
+                            {strings.drefFormSourceInformationAddButton}
+                        </Button>
+                    </InputSection>
+                )}
             </Container>
         </div>
     );