From 31d4b6df09a4d79dd9fcec4e323c031d5a633d0e Mon Sep 17 00:00:00 2001
From: puranban <puranban77@gmail.com>
Date: Tue, 5 Dec 2023 10:02:04 +0545
Subject: [PATCH] Add filter component for threeW activities in country page

---
 .../Filters/i18n.json                         |  11 ++
 .../Filters/index.tsx                         | 126 ++++++++++++++++++
 .../Filters/styles.module.css                 |   5 +
 .../index.tsx                                 |   6 +-
 4 files changed, 146 insertions(+), 2 deletions(-)
 create mode 100644 src/views/CountryOngoingActivitiesThreeWActivities/Filters/i18n.json
 create mode 100644 src/views/CountryOngoingActivitiesThreeWActivities/Filters/index.tsx
 create mode 100644 src/views/CountryOngoingActivitiesThreeWActivities/Filters/styles.module.css

diff --git a/src/views/CountryOngoingActivitiesThreeWActivities/Filters/i18n.json b/src/views/CountryOngoingActivitiesThreeWActivities/Filters/i18n.json
new file mode 100644
index 0000000000..9c107d2b2d
--- /dev/null
+++ b/src/views/CountryOngoingActivitiesThreeWActivities/Filters/i18n.json
@@ -0,0 +1,11 @@
+{
+    "namespace": "emergencyActivities",
+    "strings": {
+        "emergencyActivityFilterReportingNs": "National Society",
+        "emergencyActivityFilterEru": "ERU",
+        "emergencyActivityFilterSector": "Sector",
+        "emergencyActivityFilterStatus": "Status",
+        "emergencyActivityFilterCountry": "Country",
+        "emergencyActivityFilterDistrict": "Region/Province"
+    }
+}
diff --git a/src/views/CountryOngoingActivitiesThreeWActivities/Filters/index.tsx b/src/views/CountryOngoingActivitiesThreeWActivities/Filters/index.tsx
new file mode 100644
index 0000000000..f5d407890f
--- /dev/null
+++ b/src/views/CountryOngoingActivitiesThreeWActivities/Filters/index.tsx
@@ -0,0 +1,126 @@
+import { useCallback, useState } from 'react';
+import { _cs, isNotDefined } from '@togglecorp/fujs';
+import { EntriesAsList, type SetValueArg } from '@togglecorp/toggle-form';
+
+import DistrictMultiCountrySearchMultiSelectInput, { type DistrictItem } from '#components/domain/DistrictMultiCountrySearchMultiSelectInput';
+import MultiSelectInput from '#components/MultiSelectInput';
+import NationalSocietyMultiSelectInput from '#components/domain/NationalSocietyMultiSelectInput';
+import type { GoApiResponse } from '#utils/restRequest';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import useTranslation from '#hooks/useTranslation';
+import { numericIdSelector, stringTitleSelector, stringValueSelector } from '#utils/selectors';
+import { useRequest } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type DeploymentsEmergencyProjectStatus = NonNullable<GoApiResponse<'/api/v2/global-enums/'>['deployments_emergency_project_status']>[number];
+export type FilterValue = Partial<{
+    reporting_ns: number[];
+    deployed_eru: number[];
+    sector: number[];
+    status: string[];
+    country: number[];
+    districts: number[];
+}>
+
+function emergencyProjectStatusSelector(option: DeploymentsEmergencyProjectStatus) {
+    return option.key;
+}
+
+interface Props {
+    className?: string;
+    value: FilterValue;
+    onChange: (value: SetValueArg<FilterValue>) => void;
+    disabled?: boolean;
+    countryId?: string;
+}
+
+function Filters(props: Props) {
+    const {
+        className,
+        value,
+        countryId,
+        onChange,
+        disabled,
+    } = props;
+
+    const [districtOptions, setDistrictOptions] = useState<DistrictItem[] | null | undefined>();
+    const {
+        response: emergencyProjectOptions,
+        pending: emergencyProjectOptionsPending,
+    } = useRequest({
+        url: '/api/v2/emergency-project/options/',
+        preserveResponse: true,
+    });
+    const {
+        deployments_emergency_project_status: emergencyProjectStatusOptions,
+    } = useGlobalEnums();
+
+    const strings = useTranslation(i18n);
+
+    const handleInputChange = useCallback((...args: EntriesAsList<FilterValue>) => {
+        const [val, key] = args;
+        if (onChange) {
+            onChange((oldFilterValue) => {
+                const newFilterValue = {
+                    ...oldFilterValue,
+                    [key]: val,
+                };
+
+                return newFilterValue;
+            });
+        }
+    }, [onChange]);
+
+    return (
+        <div className={_cs(styles.filters, className)}>
+            <NationalSocietyMultiSelectInput
+                name="reporting_ns"
+                placeholder={strings.emergencyActivityFilterReportingNs}
+                value={value.reporting_ns}
+                onChange={handleInputChange}
+                disabled={disabled}
+            />
+            <NationalSocietyMultiSelectInput
+                name="deployed_eru"
+                placeholder={strings.emergencyActivityFilterEru}
+                value={value.deployed_eru}
+                onChange={handleInputChange}
+                disabled={disabled}
+            />
+            <MultiSelectInput
+                name="sector"
+                placeholder={strings.emergencyActivityFilterSector}
+                options={emergencyProjectOptions?.sectors}
+                value={value.sector}
+                keySelector={numericIdSelector}
+                labelSelector={stringTitleSelector}
+                onChange={handleInputChange}
+                disabled={disabled || emergencyProjectOptionsPending}
+            />
+            <MultiSelectInput
+                name="status"
+                placeholder={strings.emergencyActivityFilterStatus}
+                options={emergencyProjectStatusOptions}
+                value={value.status}
+                keySelector={emergencyProjectStatusSelector}
+                labelSelector={stringValueSelector}
+                onChange={handleInputChange}
+                disabled={disabled}
+            />
+            <DistrictMultiCountrySearchMultiSelectInput
+                placeholder={strings.emergencyActivityFilterDistrict}
+                name="districts"
+                disabled={isNotDefined(countryId) || disabled}
+                countryIds={[Number(countryId)]}
+                onChange={handleInputChange}
+                options={districtOptions}
+                onOptionsChange={setDistrictOptions}
+                value={value.districts}
+            />
+        </div>
+    );
+}
+
+export default Filters;
diff --git a/src/views/CountryOngoingActivitiesThreeWActivities/Filters/styles.module.css b/src/views/CountryOngoingActivitiesThreeWActivities/Filters/styles.module.css
new file mode 100644
index 0000000000..4ab193eb72
--- /dev/null
+++ b/src/views/CountryOngoingActivitiesThreeWActivities/Filters/styles.module.css
@@ -0,0 +1,5 @@
+.filters {
+    display: grid;
+    grid-gap: var(--go-ui-spacing-md);
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
diff --git a/src/views/CountryOngoingActivitiesThreeWActivities/index.tsx b/src/views/CountryOngoingActivitiesThreeWActivities/index.tsx
index 65711c0ad0..0c0febcf39 100644
--- a/src/views/CountryOngoingActivitiesThreeWActivities/index.tsx
+++ b/src/views/CountryOngoingActivitiesThreeWActivities/index.tsx
@@ -42,7 +42,6 @@ import {
     stringTitleSelector,
 } from '#utils/selectors';
 
-import Filters, { type FilterValue } from '#views/EmergencyActivities/Filters';
 import useEmergencyProjectStats, {
     getPeopleReached,
 } from '#views/EmergencyActivities/useEmergencyProjectStats';
@@ -52,6 +51,7 @@ import ActivityActions, {
 } from '#views/EmergencyActivities/ActivityActions';
 
 import ResponseActivitiesMap from './ResponseActivitiesMap';
+import Filters, { type FilterValue } from './Filters';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
@@ -131,6 +131,7 @@ function getAggregatedValues(values: { title: string, count: number }[]) {
 export function Component() {
     const { countryId, countryResponse } = useOutletContext<CountryOutletContext>();
     const strings = useTranslation(i18n);
+    const alert = useAlert();
 
     const {
         rawFilter,
@@ -165,7 +166,6 @@ export function Component() {
             limit: 9999,
         } : undefined,
     });
-    const alert = useAlert();
 
     const [
         pendingExport,
@@ -321,6 +321,7 @@ export function Component() {
             strings.emergencyProjectPeopleReached,
         ],
     );
+
     const noActivitiesBySector = (isNotDefined(sectorGroupedEmergencyProjectList)
         || (isDefined(sectorGroupedEmergencyProjectList)
             && (sectorGroupedEmergencyProjectList.length < 1)));
@@ -412,6 +413,7 @@ export function Component() {
                     <Filters
                         value={rawFilter}
                         onChange={setFilters}
+                        countryId={countryId}
                     />
                 )}
                 actions={(