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..22f9ad83ab --- /dev/null +++ b/src/views/CountryOngoingActivitiesThreeWActivities/Filters/index.tsx @@ -0,0 +1,148 @@ +import { useCallback, useState } from 'react'; +import { _cs, isDefined, isNotDefined } from '@togglecorp/fujs'; +import { EntriesAsList, type SetValueArg } from '@togglecorp/toggle-form'; + +import CountryMultiSelectInput from '#components/domain/CountryMultiSelectInput'; +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['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) => void; + disabled?: boolean; +} + +function Filters(props: Props) { + const { + className, + value, + onChange, + disabled, + } = props; + + const [districtOptions, setDistrictOptions] = useState(); + 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) => { + const [val, key] = args; + if (onChange) { + onChange((oldFilterValue) => { + const newFilterValue = { + ...oldFilterValue, + [key]: val, + }; + + return newFilterValue; + }); + } + }, [onChange]); + + const handleCountryInputChange = useCallback( + (newValue: number[]) => { + onChange((oldFilterValue) => { + const newFilterValue = { + ...oldFilterValue, + country: newValue, + districts: [], + }; + + return newFilterValue; + }); + }, + [onChange], + ); + + return ( +
+ + + + + {/* */} + +
+ ); +} + +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..fff6ad7763 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';