Merge pull request #1940 from IFRCGo/feature/update-localunit-feature

Update local unit feature

Author: frozenhelium

.changeset/bitter-pans-travel.md

@@ -0,0 +1,14 @@
+---
+"go-web-app": minor
+---
+
+Update Local Units
+
+- Add option to manage local units externally by types for each country.
+  - Externally managed local units cannot be edited or removed from the UI
+- Add option to bulk upload local units
+- Add option to view bulk upload history
+- Update permission in local unit
+- Fix legend and map icon mismatch
+- Add option to show changes while validating a local unit
+- Add an additional validation state to reflect validation of changes

.changeset/free-clocks-boil.md

@@ -0,0 +1,6 @@
+---
+"@ifrc-go/ui": patch
+---
+
+- Update `name` prop in Switch component to support number
+- Update value of `--go-ui-color-semantic-yellow`

app/src/components/DiffWrapper/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "previousValueLabel":"Previous Value"
+    }
+}

app/src/components/DiffWrapper/index.tsx

@@ -1,25 +1,38 @@
 import { useMemo } from 'react';
+import { TextOutput } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isNotDefined } from '@togglecorp/fujs';
 
-interface Props<T> {
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface Props<VALUE> {
     diffContainerClassName?: string;
-    value?: T;
-    oldValue?: T;
+    value?: VALUE | undefined;
+    oldValue?: VALUE | undefined;
     children: React.ReactNode;
     enabled: boolean;
     showOnlyDiff?: boolean;
+    showPreviousValue?: boolean;
 }
 
-function DiffWrapper<T>(props: Props<T>) {
+function DiffWrapper<
+    VALUE extends string | number | boolean | null
+>(
+    props: Props<VALUE>,
+) {
     const {
         diffContainerClassName,
         oldValue,
         value,
         children,
         enabled = false,
         showOnlyDiff,
+        showPreviousValue,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     const hasChanged = useMemo(() => {
         // NOTE: we consider `null` and `undefined` as same for
         // this scenario
@@ -45,6 +58,14 @@ function DiffWrapper<T>(props: Props<T>) {
     return (
         <div className={diffContainerClassName}>
             {children}
+            {showPreviousValue
+                && (
+                    <TextOutput
+                        className={styles.previousValue}
+                        label={strings.previousValueLabel}
+                        value={oldValue}
+                    />
+                )}
         </div>
     );
 }

app/src/components/DiffWrapper/styles.module.css

@@ -0,0 +1,3 @@
+.previous-value {
+    color: var(--go-ui-color-gray-70);
+}

app/src/components/MultiSelectDiffWrapper/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "multiSelectPreviousValueLabel":"Previous Value"
+    }
+}

app/src/components/MultiSelectDiffWrapper/index.tsx

@@ -0,0 +1,83 @@
+import { useMemo } from 'react';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import MultiSelectOutput from '../MultiSelectOutput';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface Props<VALUE, OPTION> {
+    value: VALUE[] | undefined;
+    oldValue: VALUE[] | undefined;
+    options: OPTION[] | undefined;
+    keySelector: (datum: OPTION) => VALUE;
+    labelSelector: (datum: OPTION) => React.ReactNode;
+    diffContainerClassName?: string;
+    children: React.ReactNode;
+    enabled: boolean;
+    showOnlyDiff?: boolean;
+    showPreviousValue?: boolean;
+}
+
+function MultiSelectDiffWrapper<
+    VALUE extends number | string, OPTION
+>(
+    props: Props<VALUE, OPTION>,
+) {
+    const {
+        diffContainerClassName,
+        oldValue,
+        value,
+        children,
+        enabled = false,
+        showOnlyDiff,
+        showPreviousValue,
+        options,
+        keySelector,
+        labelSelector,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    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}
+            {showPreviousValue
+                && (
+                    <MultiSelectOutput
+                        className={styles.previousValue}
+                        label={strings.multiSelectPreviousValueLabel}
+                        value={oldValue}
+                        options={options}
+                        keySelector={keySelector}
+                        labelSelector={labelSelector}
+                    />
+                )}
+        </div>
+    );
+}
+
+export default MultiSelectDiffWrapper;

app/src/components/MultiSelectDiffWrapper/styles.module.css

@@ -0,0 +1,3 @@
+.previous-value {
+    color: var(--go-ui-color-gray-70);
+}

app/src/components/MultiSelectOutput/index.tsx

@@ -3,6 +3,7 @@ import { TextOutput } from '@ifrc-go/ui';
 import { listToMap } from '@togglecorp/fujs';
 
 interface Props<VALUE, OPTION> {
+    className?: string;
     value: VALUE[] | undefined;
     options: OPTION[] | undefined;
     keySelector: (datum: OPTION) => VALUE;
@@ -12,6 +13,7 @@ interface Props<VALUE, OPTION> {
 
 function MultiSelectOutput<VALUE extends string | number, OPTION>(props: Props<VALUE, OPTION>) {
     const {
+        className,
         value,
         options,
         keySelector,
@@ -37,6 +39,7 @@ function MultiSelectOutput<VALUE extends string | number, OPTION>(props: Props<V
 
     return (
         <TextOutput
+            className={className}
             label={label}
             value={valueLabel}
             strongLabel

app/src/components/SelectDiffWrapper/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "selectPreviousValueLabel":"Previous Value"
+    }
+}