feat(local-unit): add new fields in local unit form

Author: shreeyash07

app/src/components/domain/LocationSearchInput/index.tsx

@@ -11,6 +11,7 @@ import { useExternalRequest } from '#utils/restRequest';
 export interface LocationSearchResult {
     addresstype: string;
     boundingbox: string[];
+    readOnly?: boolean;
     class: string;
     display_name: string;
     importance: number;
@@ -41,12 +42,14 @@ interface Props {
     className?: string;
     onResultSelect: (result: LocationSearchResult | undefined) => void;
     countryIso: string;
+    readOnly?: boolean;
 }
 
 function LocationSearchInput(props: Props) {
     const {
         className,
         onResultSelect,
+        readOnly,
         countryIso,
     } = props;
 
@@ -84,6 +87,7 @@ function LocationSearchInput(props: Props) {
             name=""
             // FIXME: use translations
             placeholder="Search for a place"
+            readOnly={readOnly}
             options={undefined}
             value={undefined}
             keySelector={keySelector}

app/src/utils/constants.ts

@@ -209,6 +209,10 @@ export const TRAINING_FACILITY_TYPE = 7 satisfies LocalUnitHealthFacilityTypeOpt
 export const SPECIALIZED_SERVICES_TYPE = 8 satisfies LocalUnitHealthFacilityTypeOptions;
 export const OTHER_TYPE = 9 satisfies LocalUnitHealthFacilityTypeOptions;
 
+type LocalUnitTrainingFacilityTypeOptions = NonNullable<NonNullable<GoApiResponse<'/api/v2/local-units-options/'>['professional_training_facilities']>[number]>['id']
+
+export const OTHER_TRAINING_FACILITIES = 9 satisfies LocalUnitTrainingFacilityTypeOptions;
+
 type LocalUnitAffiliationOptions = NonNullable<NonNullable<GoApiResponse<'/api/v2/local-units-options/'>['affiliation']>[number]>['id']
 
 export const OTHER_AFFILIATION = 9 satisfies LocalUnitAffiliationOptions;

app/src/utils/localUnits.ts

@@ -10,7 +10,7 @@ import { type GoApiResponse } from './restRequest';
 
 type LocalUnitResponse = NonNullable<GoApiResponse<'/api/v2/local-units/{id}/'>>;
 
-export function getFormFields(value: LocalUnitResponse | PartialLocalUnits) {
+export function getFormFields(value: LocalUnitResponse | PartialLocalUnits | undefined) {
     const {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         created_at,
@@ -30,7 +30,7 @@ export function getFormFields(value: LocalUnitResponse | PartialLocalUnits) {
         ...formValues
         // Note: the cast is safe as we're only trying to
         // remove fields if they exist
-    } = removeNull(value) as LocalUnitResponse;
+    } = removeNull(value ?? {}) as LocalUnitResponse || undefined;
 
     const {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/ConfirmationModal/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
 
 import useAlert from '#hooks/useAlert';
 import { type CountryOutletContext } from '#utils/outletContext';
@@ -18,7 +19,7 @@ import { useLazyRequest } from '#utils/restRequest';
 import i18n from './i18n.json';
 
 export type ManageLocalUnitsValues = {
-    id: number;
+    id: number | undefined;
     country: number;
     local_unit_type: number;
     enabled: boolean;
@@ -91,7 +92,8 @@ function ConfirmationModal(props: Props) {
         url: '/api/v2/externally-managed-local-unit/{id}/',
         method: 'PUT',
         body: (values: ManageLocalUnitsValues) => values,
-        pathVariables: manageLocalUnitsValues && { id: manageLocalUnitsValues?.id },
+        pathVariables: isDefined(manageLocalUnitsValues?.id)
+            ? { id: manageLocalUnitsValues.id } : undefined,
         onSuccess: () => {
             alert.show(
                 manageLocalUnitsValues?.enabled
@@ -111,7 +113,8 @@ function ConfirmationModal(props: Props) {
             addManageLocalUnit(manageLocalUnitsValues);
         }
         updateManageLocalUnit(manageLocalUnitsValues);
-    }, [isNewManageLocalUnit, addManageLocalUnit, manageLocalUnitsValues, updateManageLocalUnit]);
+    }, [isNewManageLocalUnit,
+        addManageLocalUnit, manageLocalUnitsValues, updateManageLocalUnit]);
 
     return (
         <Modal

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/index.tsx

@@ -19,7 +19,10 @@ import {
     numericIdSelector,
     resolveToString,
 } from '@ifrc-go/ui/utils';
-import { isDefined } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import { type CountryOutletContext } from '#utils/outletContext';
 import {
@@ -64,6 +67,16 @@ function ConfigureLocalUnitsModal(props: Props) {
 
     const handleLocalUnitSwitchChange = useCallback((value: boolean, name: number) => {
         setLocalUnitType(name);
+        if (isNotDefined(manageResponse)
+            && isDefined(countryResponse)
+        ) {
+            setManageLocalUnitsValues({
+                id: undefined,
+                country: countryResponse.id,
+                local_unit_type: name,
+                enabled: value,
+            });
+        }
         if (isDefined(manageResponse)
             && isDefined(manageResponse[name])
             && isDefined(countryResponse)
@@ -84,11 +97,12 @@ function ConfigureLocalUnitsModal(props: Props) {
     ]);
 
     const isNewManageLocalUnit = useMemo(() => {
-        if (isDefined(manageResponse) && isDefined(manageLocalUnitsValues)) {
-            return !(manageLocalUnitsValues.local_unit_type in manageResponse);
+        if (isDefined(manageLocalUnitsValues)
+            && isDefined(manageLocalUnitsValues.id)) {
+            return true;
         }
         return false;
-    }, [manageResponse, manageLocalUnitsValues]);
+    }, [manageLocalUnitsValues]);
 
     const {
         response: localUnitsOptions,

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/OtherProfilesDiffOutput/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "countryNsOverviewContextAndStructure",
+    "strings": {
+        "otherProfileOutputLabel": "Other Profiles",
+        "otherProfilePositionOutputLabel": "Position",
+        "otherProfileNumberOutputLabel": "Number"
+    }
+}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/OtherProfilesDiffOutput/index.tsx

@@ -0,0 +1,57 @@
+import { TextOutput } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import DiffWrapper from '#components/DiffWrapper';
+
+import { type PartialLocalUnits } from '../../LocalUnitsFormModal/LocalUnitsForm/schema';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type OtherProfile = NonNullable<NonNullable<PartialLocalUnits['health']>['other_profiles']>[number];
+
+interface Props {
+    newValue: OtherProfile;
+    oldValue: OtherProfile | undefined;
+}
+
+function OtherProfilesDiffOutput(props: Props) {
+    const {
+        newValue,
+        oldValue,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <div className={styles.otherProfilesInput}>
+            <DiffWrapper
+                hideOnPristine
+                value={newValue?.position}
+                previousValue={oldValue?.position}
+                diffViewEnabled
+            >
+                <TextOutput
+                    strongValue
+                    value={newValue.position}
+                    label={strings.otherProfilePositionOutputLabel}
+                />
+            </DiffWrapper>
+            <DiffWrapper
+                hideOnPristine
+                value={newValue?.number}
+                previousValue={oldValue?.number}
+                diffViewEnabled
+            >
+                <TextOutput
+                    strongValue
+                    valueType="number"
+                    label={strings.otherProfileNumberOutputLabel}
+                    value={newValue.number}
+                />
+            </DiffWrapper>
+        </div>
+    );
+}
+
+export default OtherProfilesDiffOutput;

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/OtherProfilesDiffOutput/styles.module.css

@@ -0,0 +1,5 @@
+.other-profiles-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-sm);
+}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/i18n.json

@@ -55,8 +55,9 @@
         "localUnitViewDentist": "Dentist",
         "localUnitViewNursingAid": "Nursing aid",
         "localUnitViewMidwife": "Midwife",
-        "localUnitViewOtherMedicalHeal": "Other medical heal",
         "localUnitViewOtherProfiles": "Other profiles",
+        "localUnitViewRemovedOtherProfiles": "Removed Other profiles",
+        "localUnitViewOtherMedicalHeal": "Other medical heal",
         "localUnitViewCommentsNS": "Comments by the NS",
         "localUnitViewLatitude": "Latitude",
         "localUnitViewLongitude": "Longitude",

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/index.tsx

@@ -1,10 +1,14 @@
-import { useMemo } from 'react';
+import {
+    useCallback,
+    useMemo,
+} from 'react';
 import {
     Container,
     TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
+    injectClientId,
     numericIdSelector,
     stringNameSelector,
     stringValueSelector,
@@ -27,10 +31,12 @@ import {
     useRequest,
 } from '#utils/restRequest';
 
+import { injectClientIdToResponse } from '../common';
 import {
     type PartialLocalUnits,
     TYPE_HEALTH_CARE,
 } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
+import OtherProfilesDiffOutput from './OtherProfilesDiffOutput';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -79,15 +85,49 @@ function LocalUnitView(props: Props) {
         pathVariables: isDefined(localUnitId) ? { id: localUnitId } : undefined,
     });
 
+    const previousValue = injectClientIdToResponse(
+        // eslint-disable-next-line max-len
+        localUnitPreviousResponse?.previous_data_details as unknown as (LocalUnitResponse | undefined),
+    );
+
     const newValue = isDefined(locallyChangedValue)
         ? locallyChangedValue
-        : localUnitResponse;
+        : injectClientIdToResponse(localUnitResponse);
+
     const oldValue = isDefined(locallyChangedValue)
-        ? localUnitResponse
-        : (localUnitPreviousResponse?.previous_data_details as unknown as LocalUnitResponse);
+        ? injectClientIdToResponse(localUnitResponse)
+        : previousValue;
+
+    const getPreviousProfileValue = useCallback((profileClientId: string) => (
+        oldValue?.health?.other_profiles?.find(
+            (previousProfile) => injectClientId(previousProfile)?.client_id === profileClientId,
+        )
+    ), [oldValue]);
+
+    const removedOtherProfiles = useMemo(() => (
+        oldValue?.health?.other_profiles?.filter(({ client_id: oldClientId }) => (
+            newValue?.health?.other_profiles?.findIndex(
+                ({ client_id: newClientId }) => oldClientId === newClientId,
+            ) === -1
+        ))
+    ), [oldValue, newValue]);
+
+    const changedOtherProfiles = useMemo(() => {
+        const potentiallyChanged = newValue?.health?.other_profiles?.filter(
+            (newOne) => {
+                const oldOne = oldValue?.health?.other_profiles?.find(
+                    ({ client_id: oldClientId }) => newOne.client_id === oldClientId,
+                );
+
+                return hasDifferences(newOne, oldOne);
+            },
+        );
+
+        return potentiallyChanged;
+    }, [oldValue, newValue]);
 
     const hasDifference = useMemo(() => {
-        if (isNotDefined(newValue) || isNotDefined(oldValue)) {
+        if (isNotDefined(newValue) && isNotDefined(oldValue)) {
             return false;
         }
 
@@ -852,18 +892,32 @@ function LocalUnitView(props: Props) {
                             value={newValue?.health?.midwife}
                         />
                     </DiffWrapper>
-                    <DiffWrapper
-                        hideOnPristine
-                        value={newValue?.health?.other_profiles}
-                        previousValue={oldValue?.health?.other_profiles}
-                        diffViewEnabled
-                    >
-                        <TextOutput
-                            strongValue
-                            label={strings.localUnitViewOtherProfiles}
-                            value={newValue?.health?.other_profiles}
-                        />
-                    </DiffWrapper>
+                    {isDefined(changedOtherProfiles) && changedOtherProfiles.length > 0 && (
+                        <>
+                            <span>
+                                {strings.localUnitViewOtherProfiles}
+                            </span>
+                            {newValue?.health?.other_profiles?.map((profile) => (
+                                <OtherProfilesDiffOutput
+                                    newValue={profile}
+                                    oldValue={getPreviousProfileValue(profile.client_id)}
+                                />
+                            ))}
+                        </>
+                    )}
+                    {isDefined(removedOtherProfiles) && removedOtherProfiles.length > 0 && (
+                        <>
+                            <span>
+                                {strings.localUnitViewRemovedOtherProfiles}
+                            </span>
+                            {removedOtherProfiles?.map((profile) => (
+                                <OtherProfilesDiffOutput
+                                    newValue={profile}
+                                    oldValue={undefined}
+                                />
+                            ))}
+                        </>
+                    )}
                     <DiffWrapper
                         hideOnPristine
                         value={newValue?.health?.other_medical_heal}