project: Update Local Unit edit, validation, and delete workflow

.changeset/pink-ties-smash.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": minor
+---
+
+Add local unit validation workflow

app/src/components/DiffWrapper/index.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { isNotDefined } from '@togglecorp/fujs';
+
+interface Props<T> {
+    diffContainerClassName?: string;
+    value?: T;
+    oldValue?: T;
+    children: React.ReactNode;
+    enabled: boolean;
+    showOnlyDiff?: boolean;
+}
+
+function DiffWrapper<T>(props: Props<T>) {
+    const {
+        diffContainerClassName,
+        oldValue,
+        value,
+        children,
+        enabled = false,
+        showOnlyDiff,
+    } = props;
+
+    const hasChanged = useMemo(() => {
+        // NOTE: we consider `null` and `undefined` as same for
+        // this scenario
+        if (isNotDefined(oldValue) && isNotDefined(value)) {
+            return false;
+        }
+
+        return JSON.stringify(oldValue) !== JSON.stringify(value);
+    }, [oldValue, value]);
+
+    if (!enabled) {
+        return children;
+    }
+
+    if (!hasChanged && showOnlyDiff) {
+        return null;
+    }
+
+    if (!hasChanged) {
+        return children;
+    }
+
+    return (
+        <div className={diffContainerClassName}>
+            {children}
+        </div>
+    );
+}
+
+export default DiffWrapper;

app/src/components/MultiSelectOutput/index.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { TextOutput } from '@ifrc-go/ui';
+import { listToMap } from '@togglecorp/fujs';
+
+interface Props<VALUE, OPTION> {
+    value: VALUE[] | undefined;
+    options: OPTION[] | undefined;
+    keySelector: (datum: OPTION) => VALUE;
+    labelSelector: (datum: OPTION) => React.ReactNode;
+    label: React.ReactNode;
+}
+
+function MultiSelectOutput<VALUE extends string | number, OPTION>(props: Props<VALUE, OPTION>) {
+    const {
+        value,
+        options,
+        keySelector,
+        labelSelector,
+        label,
+    } = props;
+
+    const valueMap = useMemo(
+        () => listToMap(value ?? [], (val) => val, () => true),
+        [value],
+    );
+
+    const selectedOptions = useMemo(() => options?.filter(
+        (option) => valueMap[keySelector(option)],
+    ), [keySelector, options, valueMap]);
+
+    const valueLabel = useMemo(
+        () => selectedOptions?.map(
+            (selectedOption) => labelSelector(selectedOption),
+        ).join(', ') ?? '--',
+        [labelSelector, selectedOptions],
+    );
+
+    return (
+        <TextOutput
+            label={label}
+            value={valueLabel}
+            strongLabel
+        />
+    );
+}
+
+export default MultiSelectOutput;

app/src/components/SelectOutput/index.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { TextOutput } from '@ifrc-go/ui';
+import { isDefined } from '@togglecorp/fujs';
+
+interface Props<VALUE, OPTION> {
+    value: VALUE | undefined;
+    options: OPTION[] | undefined;
+    keySelector: (datum: OPTION) => VALUE;
+    labelSelector: (datum: OPTION) => React.ReactNode;
+    label: React.ReactNode;
+}
+
+function SelectOutput<VALUE, OPTION>(props: Props<VALUE, OPTION>) {
+    const {
+        value,
+        options,
+        keySelector,
+        labelSelector,
+        label,
+    } = props;
+
+    const selectedOption = useMemo(() => options?.find(
+        (option) => keySelector(option) === value,
+    ), [options, keySelector, value]);
+
+    const valueLabel = useMemo(() => (
+        isDefined(selectedOption)
+            ? labelSelector(selectedOption)
+            : '--'
+    ), [labelSelector, selectedOption]);
+
+    return (
+        <TextOutput
+            label={label}
+            value={valueLabel}
+            strongLabel
+        />
+    );
+}
+
+export default SelectOutput;

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

@@ -56,6 +56,9 @@ interface Props<NAME> extends BaseMapProps {
     readOnly?: boolean;
     required?: boolean;
     error?: ObjectError<Value>;
+    showChanges: boolean;
+    latitudeInputSectionClassName?: string;
+    longitudeInputSectionClassName?: string;
 }
 
 function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
@@ -74,6 +77,8 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
         country,
         required,
         error,
+        latitudeInputSectionClassName,
+        longitudeInputSectionClassName,
         ...otherProps
     } = props;
 
@@ -183,6 +188,7 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
         <div className={_cs(styles.baseMapPointInput, className)}>
             <div className={styles.locationInputs}>
                 <NumberInput
+                    inputSectionClassName={latitudeInputSectionClassName}
                     className={styles.input}
                     name="lat"
                     label={strings.latitude}
@@ -193,6 +199,7 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
                     required={required}
                 />
                 <NumberInput
+                    inputSectionClassName={longitudeInputSectionClassName}
                     className={styles.input}
                     name="lng"
                     label={strings.longitude}

app/src/components/domain/BaseMapPointInput/styles.module.css

@@ -3,6 +3,12 @@
     flex-direction: column;
     gap: var(--go-ui-spacing-md);
 
+    .diff-container{
+        .changes {
+            background-color: var(--go-ui-color-semantic-yellow) !important;
+        }
+    }
+
     .location-inputs {
         display: flex;
         gap: var(--go-ui-spacing-sm);

app/src/utils/constants.ts

@@ -109,7 +109,7 @@ export const DREF_TYPE_ASSESSMENT = 1 satisfies TypeOfDrefEnum;
 export const DREF_TYPE_RESPONSE = 2 satisfies TypeOfDrefEnum;
 export const DREF_TYPE_LOAN = 3 satisfies TypeOfDrefEnum;
 
-type TypeOfOnsetEnum = components<'read'>['schemas']['TypeValidatedEnum'];
+type TypeOfOnsetEnum = components<'read'>['schemas']['DrefDrefOnsetTypeEnumKey'];
 export const ONSET_SLOW = 1 satisfies TypeOfOnsetEnum;
 
 // Subscriptions

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

@@ -0,0 +1,23 @@
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+function FormGrid(props: Props) {
+    const {
+        className,
+        children,
+    } = props;
+
+    return (
+        <div className={_cs(styles.formGrid, className)}>
+            {children}
+        </div>
+    );
+}
+
+export default FormGrid;

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/FormGrid/styles.module.css

@@ -0,0 +1,10 @@
+/* NOTE: this element is portaled */
+.form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--go-ui-spacing-lg);
+
+    @media screen and (max-width: 60rem) {
+        grid-template-columns: 1fr;
+    }
+}

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

@@ -0,0 +1,11 @@
+{
+    "namespace": "countryNsOverviewContextAndStructure",
+    "strings": {
+        "submitLabel": "Submit",
+        "deleteSuccessMessage": "{localUnitName} has been successfully deleted.",
+        "deleteFailureMessage": "Unable to delete {localUnitName}. Please try again.",
+        "chooseDeleteReasonMessage": "Choose the reason to delete local unit.",
+        "deleteReasonExplanation": "Explain the reason why the local unit is being deleted.",
+        "deleteLocalUnitHeading": "Are you sure you want to delete \"{localUnitName}\"?"
+    }
+}