Merge pull request #929 from IFRCGo/project/healthcare-local-units

Health care data integration

.changeset/chilly-mails-type.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": minor
+---
+
+Add table view in NS local units

app/src/hooks/useFilterState.ts

@@ -134,6 +134,13 @@ function useFilterState<FILTER extends object>(options: {
         [],
     );
 
+    const resetFilter = useCallback(
+        () => {
+            dispatch({ type: 'reset-filter' });
+        },
+        [],
+    );
+
     const setFilterField = useCallback(
         (...args: EntriesAsList<FILTER>) => {
             const [val, key] = args;
@@ -190,6 +197,8 @@ function useFilterState<FILTER extends object>(options: {
         setFilter,
         setFilterField,
 
+        resetFilter,
+
         page: state.page,
         offset: pageSize * (debouncedState.page - 1),
         limit: pageSize,

app/src/views/AccountDetails/GenerateMontandonTokenModal/i18n.json

@@ -3,7 +3,7 @@
     "strings": {
         "title": "Generate token for Montandon",
         "description": "By clicking 'Accept & Generate' button, you'll  accept the {termsLink} of the Montandon API. Please make sure to review it.",
-        "termsAndConditionLabel": "Terms & Condition",
+        "termsAndConditionLabel": "Terms & Conditions",
         "cancelButtonLabel": "Cancel",
         "acceptButtonLabel": "Accept & Generate",
         "doneButtonLabel": "Done",

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

@@ -0,0 +1,14 @@
+{
+    "namespace": "nsLocalUnitsFilters",
+    "strings": {
+        "validated": "Validated",
+        "notValidated": "Not Validated",
+        "localUnitsFilterTypePlaceholder": "Type (All)",
+        "localUnitsFilterTypeLabel": "Type",
+        "localUnitsFilterClear": "Clear filters",
+        "localUnitsFilterValidatedPlaceholder": "Validation (All)",
+        "localUnitsFilterValidatedLabel": "Validation",
+        "localUnitsFilterSearchLabel": "Search",
+        "localUnitsFilterSearchPlaceholderLabel": "Search Local Units"
+    }
+}

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

@@ -0,0 +1,121 @@
+import { useMemo } from 'react';
+import { SearchLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    SelectInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    stringLabelSelector,
+    stringNameSelector,
+} from '@ifrc-go/ui/utils';
+import { EntriesAsList } from '@togglecorp/toggle-form';
+
+import { GoApiResponse } from '#utils/restRequest';
+
+import {
+    NOT_VALIDATED,
+    VALIDATED,
+    Validation,
+} from '../common';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface ValidationOption {
+    key: Validation
+    label: string;
+}
+
+export interface FilterValue {
+    search?: string | undefined;
+    type?: number | undefined;
+    isValidated?: Validation | undefined;
+}
+
+type LocalUnitOptions = GoApiResponse<'/api/v2/local-units-options/'>;
+type LocalUnitType = LocalUnitOptions['type'][number];
+
+function localUnitCodeSelector(localUnit: LocalUnitType) {
+    return localUnit.code;
+}
+
+function validationKeySelector(option: ValidationOption) {
+    return option.key;
+}
+
+interface Props {
+    value: FilterValue;
+    setFieldValue: (...entries: EntriesAsList<FilterValue>) => void;
+    options: LocalUnitOptions | undefined;
+    resetFilter: () => void;
+    filtered: boolean;
+}
+
+function Filters(props: Props) {
+    const {
+        value,
+        setFieldValue: onChange,
+        options,
+        resetFilter,
+        filtered,
+    } = props;
+    const strings = useTranslation(i18n);
+
+    const validationOptions = useMemo((): ValidationOption[] => ([
+        {
+            key: VALIDATED,
+            label: strings.validated,
+        },
+        {
+            key: NOT_VALIDATED,
+            label: strings.notValidated,
+        },
+    ]), [strings.validated, strings.notValidated]);
+
+    return (
+        <>
+            <SelectInput
+                placeholder={strings.localUnitsFilterTypePlaceholder}
+                label={strings.localUnitsFilterTypeLabel}
+                name="type"
+                value={value.type}
+                onChange={onChange}
+                keySelector={localUnitCodeSelector}
+                labelSelector={stringNameSelector}
+                options={options?.type}
+            />
+            <SelectInput
+                placeholder={strings.localUnitsFilterValidatedPlaceholder}
+                label={strings.localUnitsFilterValidatedLabel}
+                name="isValidated"
+                value={value.isValidated}
+                onChange={onChange}
+                keySelector={validationKeySelector}
+                labelSelector={stringLabelSelector}
+                options={validationOptions}
+            />
+            <TextInput
+                name="search"
+                label={strings.localUnitsFilterSearchLabel}
+                placeholder={strings.localUnitsFilterSearchPlaceholderLabel}
+                value={value.search}
+                onChange={onChange}
+                icons={<SearchLineIcon />}
+            />
+            <div className={styles.actions}>
+                <Button
+                    name={undefined}
+                    variant="secondary"
+                    onClick={resetFilter}
+                    disabled={!filtered}
+                >
+                    {strings.localUnitsFilterClear}
+                </Button>
+            </div>
+        </>
+    );
+}
+
+export default Filters;

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

@@ -0,0 +1,4 @@
+.actions {
+    display: flex;
+    align-items: flex-end;
+}

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

@@ -0,0 +1,15 @@
+{
+    "namespace": "nationalSocietyLocalUnits",
+    "strings": {
+        "localUnitDetailAddress": "Address",
+        "localUnitDetailPhoneNumber": "Phone Number",
+        "localUnitDetailLastUpdate": "Last Updated",
+        "localUnitDetailFocalPerson": "Focal Person",
+        "localUnitTooltipMoreDetails": "More Details",
+        "localUnitLegendLocalUnitTitle": "Local Units",
+        "localUnitLocalUnitType": "Local Unit Type",
+        "localUnitHealthFacilityType": "Health Facility Type",
+        "localUnitLegendHealthCareTitle": "Health Care Local Units",
+        "localUnitDetailEmail": "Email"
+    }
+}