Use separate end-point for local units map

Author: frozenhelium

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/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/styles.module.css

@@ -1,8 +1,4 @@
 .local-units-map {
-    display: flex;
-    flex-direction: column;
-    gap: var(--go-ui-spacing-md);
-
     .map-container-with-contact-details {
         position: relative;
 

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

@@ -1,7 +1,4 @@
-import {
-    useEffect,
-    useMemo,
-} from 'react';
+import { useMemo } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
@@ -28,29 +25,18 @@ import {
 } from '#utils/restRequest';
 
 import { VALIDATED } from '../common';
+import Filters, { FilterValue } from '../Filters';
 import LocalUnitsTableActions, { type Props as LocalUnitsTableActionsProps } from './LocalUnitTableActions';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 12;
 
 type LocalUnitsTableResponse = GoApiResponse<'/api/v2/local-units/'>;
 type LocalUnitsTableListItem = NonNullable<LocalUnitsTableResponse['results']>[number];
 
-interface Props {
-    filter: {
-        type?: number;
-        search?: string;
-        isValidated?: string;
-    }
-}
-
-function LocalUnitsTable(props: Props) {
-    const {
-        filter: filterFromProps,
-    } = props;
-
+function LocalUnitsTable() {
     const strings = useTranslation(i18n);
     const { countryResponse } = useOutletContext<CountryOutletContext>();
 
@@ -61,17 +47,17 @@ function LocalUnitsTable(props: Props) {
         setPage,
         filtered,
         filter,
-        setFilter,
-    } = useFilterState({
-        filter: filterFromProps,
+        setFilterField,
+        rawFilter,
+        resetFilter,
+    } = useFilterState<FilterValue>({
+        filter: {},
         pageSize: PAGE_SIZE,
     });
 
-    useEffect(() => {
-        if (filterFromProps) {
-            setFilter(filterFromProps);
-        }
-    }, [filterFromProps, setFilter]);
+    const { response: localUnitsOptionsResponse } = useRequest({
+        url: '/api/v2/local-units-options/',
+    });
 
     const {
         pending: localUnitsPending,
@@ -109,6 +95,7 @@ function LocalUnitsTable(props: Props) {
                 'type',
                 strings.localUnitsTableType,
                 (item) => item.type_details.name,
+                { columnClassName: styles.type },
             ),
             createStringColumn<LocalUnitsTableListItem, number>(
                 'focal',
@@ -156,7 +143,7 @@ function LocalUnitsTable(props: Props) {
 
     return (
         <Container
-            footerContent={isDefined(localUnitsResponse)
+            footerActions={isDefined(localUnitsResponse)
                 && isDefined(localUnitsResponse.count) && (
                 <Pager
                     activePage={page}
@@ -165,8 +152,17 @@ function LocalUnitsTable(props: Props) {
                     onActivePageChange={setPage}
                 />
             )}
-            footerClassName={styles.footerContent}
             contentViewType="vertical"
+            withGridViewInFilter
+            filters={(
+                <Filters
+                    value={rawFilter}
+                    setFieldValue={setFilterField}
+                    options={localUnitsOptionsResponse}
+                    resetFilter={resetFilter}
+                    filtered={filtered}
+                />
+            )}
         >
             <Table
                 pending={localUnitsPending}

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

@@ -1,7 +1,8 @@
 .table {
     display: flex;
-}
 
-.footer-content {
-    align-self: end;
+    .type {
+        width: 8rem;
+        min-width: 8rem;
+    }
 }

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

@@ -2,17 +2,8 @@
     "namespace": "nationalSocietyLocalUnits",
     "strings": {
         "localUnitsMapTitle": "NS Local Units",
-        "localUnitsFilterTypePlaceholder": "Type (All)",
-        "localUnitsFilterTypeLabel": "Type",
-        "localUnitsFilterValidatedPlaceholder": "Validation (All)",
-        "localUnitsFilterValidatedLabel": "Validation",
-        "validated": "Validated",
-        "notValidated": "Not Validated",
-        "localUnitsFilterSearchLabel": "Search",
-        "localUnitsFilterSearchPlaceholderLabel": "Search Local Units",
         "localUnitDetailAddressValue": "{address}, {city}, {country}",
         "localUnitDetailType": "Type",
-        "localUnitsFilterClear": "Clear Filters",
         "localUnitsMapView": "Map view",
         "localUnitsListView": "List view",
         "editLocalUnitLink": "Add/Edit Local Units"