From 97b7f4190ffe54eb89636bb48731a968ff485d00 Mon Sep 17 00:00:00 2001 From: samshara Date: Wed, 6 Dec 2023 10:20:58 +0545 Subject: [PATCH] feat: add active operations table to country ongoing activities --- .../domain/ActiveOperationMap/i18n.json | 3 +- .../domain/ActiveOperationMap/index.tsx | 5 +- src/components/domain/AppealsTable/i18n.json | 15 ++- src/components/domain/AppealsTable/index.tsx | 123 ++++++++++++------ .../domain/AppealsTable/styles.module.css | 11 ++ src/views/AllAppeals/index.tsx | 4 +- .../index.tsx | 6 + 7 files changed, 119 insertions(+), 48 deletions(-) diff --git a/src/components/domain/ActiveOperationMap/i18n.json b/src/components/domain/ActiveOperationMap/i18n.json index 32e9d61dc..2cda5c846 100644 --- a/src/components/domain/ActiveOperationMap/i18n.json +++ b/src/components/domain/ActiveOperationMap/i18n.json @@ -29,6 +29,7 @@ "explanationBubbleDeployments":"Deployments", "downloadMapTitle": "Ongoing operations", "operationMapProvinces": "Provinces", - "clearFilters": "Clear Filters" + "operationMapClearFilters": "Clear Filters", + "operationFilterDistrictPlaceholder": "All Provinces" } } diff --git a/src/components/domain/ActiveOperationMap/index.tsx b/src/components/domain/ActiveOperationMap/index.tsx index 3d476d44d..6d0d39a44 100644 --- a/src/components/domain/ActiveOperationMap/index.tsx +++ b/src/components/domain/ActiveOperationMap/index.tsx @@ -169,6 +169,7 @@ function ActiveOperationMap(props: Props) { const baseQuery: AppealQueryParams = { atype: filter.appeal, dtype: filter.displacement, + district: hasSomeDefinedValue(filter.district) ? filter.district : undefined, end_date__gt: now, start_date__gte: filter.startDateAfter, start_date__lte: filter.startDateBefore, @@ -183,7 +184,6 @@ function ActiveOperationMap(props: Props) { ...baseQuery, region: regionId ? [regionId] : undefined, country: countryId ? [countryId] : undefined, - district: hasSomeDefinedValue(filter.district) ? filter.district : undefined, }; }, [variant, regionId, filter, limit, countryId], @@ -374,6 +374,7 @@ function ActiveOperationMap(props: Props) { {variant === 'country' && ( - {strings.clearFilters} + {strings.operationMapClearFilters} diff --git a/src/components/domain/AppealsTable/i18n.json b/src/components/domain/AppealsTable/i18n.json index 03beee311..d58ff9417 100644 --- a/src/components/domain/AppealsTable/i18n.json +++ b/src/components/domain/AppealsTable/i18n.json @@ -4,14 +4,17 @@ "appealsTableStartDate": "Start Date", "appealsTableStartDateAfter": "Start After", "appealsTableStartDateBefore": "Start Before", - "appealsTableType": "Type of Appeal", - "appealsTableCode": "Code", - "appealsTableOperation": "Operation", + "appealsTableType": "Appeal Type", + "appealsTableCode": "Appeal Code", + "appealsTableOperation": "Active Operation", "appealsTableDisastertype": "Disaster Type", - "appealsTableRequestedAmount": "Requested Amount", - "appealsTableFundedAmount": "Funding", + "appealsTableRequestedAmount": "Funding Requirements", + "appealsTableFundedAmount": "Funding Coverage", "appealsTableCountry": "Country", "appealsTableFilterTypePlaceholder": "All Appeal Types", - "appealsTableFilterDisastersPlaceholder": "All Disaster Types" + "appealsTableFilterDisastersPlaceholder": "All Disaster Types", + "appealsTableClearFilters": "Clear Filters", + "appealsTableFilterDistrictPlaceholder": "All Provinces", + "appealsTableProvinces": "Provinces" } } diff --git a/src/components/domain/AppealsTable/index.tsx b/src/components/domain/AppealsTable/index.tsx index af2077c08..afc206267 100644 --- a/src/components/domain/AppealsTable/index.tsx +++ b/src/components/domain/AppealsTable/index.tsx @@ -1,11 +1,18 @@ -import { useMemo } from 'react'; -import { _cs } from '@togglecorp/fujs'; +import { useMemo, useCallback } from 'react'; +import { _cs, isDefined } from '@togglecorp/fujs'; +import { CloseLineIcon } from '@ifrc-go/icons'; -import { useRequest } from '#utils/restRequest'; -import type { GoApiResponse, GoApiUrlQuery } from '#utils/restRequest'; -import Table from '#components/Table'; -import SelectInput from '#components/SelectInput'; +import Button from '#components/Button'; import Container from '#components/Container'; +import DateInput from '#components/DateInput'; +import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput'; +import MultiSelectInput from '#components/MultiSelectInput'; +import Pager from '#components/Pager'; +import SelectInput from '#components/SelectInput'; +import Table from '#components/Table'; +import useFilterState from '#hooks/useFilterState'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; +import useTranslation from '#hooks/useTranslation'; import { createStringColumn, createNumberColumn, @@ -14,13 +21,13 @@ import { createProgressColumn, } from '#components/Table/ColumnShortcuts'; import { SortContext } from '#components/Table/useSorting'; -import Pager from '#components/Pager'; -import DateInput from '#components/DateInput'; -import useTranslation from '#hooks/useTranslation'; -import useGlobalEnums from '#hooks/domain/useGlobalEnums'; -import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput'; -import useFilterState from '#hooks/useFilterState'; -import { getPercentage } from '#utils/common'; +import { useRequest } from '#utils/restRequest'; +import type { GoApiResponse, GoApiUrlQuery } from '#utils/restRequest'; +import { hasSomeDefinedValue, getPercentage } from '#utils/common'; +import { + numericIdSelector, + stringNameSelector, +} from '#utils/selectors'; import i18n from './i18n.json'; import styles from './styles.module.css'; @@ -31,6 +38,7 @@ type AppealListItem = NonNullable[number]; type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>; type AppealTypeOption = NonNullable[number]; +type DistrictListItem = NonNullable['results']>[number]; const appealKeySelector = (option: AppealListItem) => option.id; const appealTypeKeySelector = (option: AppealTypeOption) => option.key; @@ -40,6 +48,11 @@ const now = new Date().toISOString(); type BaseProps = { className?: string; } +type CountryProps = { + variant: 'country'; + countryId: number; + districtList: DistrictListItem[]; +} type RegionProps = { variant: 'region'; @@ -50,7 +63,7 @@ type GlobalProps = { variant: 'global'; } -type Props = BaseProps & (RegionProps | GlobalProps); +type Props = BaseProps & (RegionProps | GlobalProps | CountryProps); function AppealsTable(props: Props) { const { @@ -59,18 +72,20 @@ function AppealsTable(props: Props) { } = props; const { - sortState, - ordering, - page, - setPage, filter, - rawFilter, filtered, - setFilterField, limit, offset, + ordering, + page, + rawFilter, + setFilter, + setFilterField, + setPage, + sortState, } = useFilterState<{ appeal?: AppealTypeOption['key'], + district?: number[], displacement?: number, startDateAfter?: string, startDateBefore?: string, @@ -81,9 +96,17 @@ function AppealsTable(props: Props) { const strings = useTranslation(i18n); const { api_appeal_type: appealTypeOptions } = useGlobalEnums(); - // + + const handleClearFiltersButtonclick = useCallback(() => { + setFilter({}); + }, [setFilter]); + // eslint-disable-next-line react/destructuring-assignment const regionId = variant === 'region' ? props.regionId : undefined; + // eslint-disable-next-line react/destructuring-assignment + const countryId = variant === 'country' ? props.countryId : undefined; + // eslint-disable-next-line react/destructuring-assignment + const districtList = variant === 'country' ? props.districtList : undefined; const columns = useMemo( () => ([ @@ -149,17 +172,19 @@ function AppealsTable(props: Props) { ), { sortable: true }, ), - createLinkColumn( - 'country', - strings.appealsTableCountry, - (item) => item.country.name, - (item) => ({ - to: 'countriesLayout', - urlParams: { countryId: item.country.id }, - }), - ), - ]), + variant !== 'country' + ? createLinkColumn( + 'country', + strings.appealsTableCountry, + (item) => item.country.name, + (item) => ({ + to: 'countriesLayout', + urlParams: { countryId: item.country.id }, + }), + ) : undefined, + ].filter(isDefined)), [ + variant, strings.appealsTableStartDate, strings.appealsTableType, strings.appealsTableCode, @@ -179,6 +204,7 @@ function AppealsTable(props: Props) { ordering, atype: filter.appeal, dtype: filter.displacement, + district: hasSomeDefinedValue(filter.district) ? filter.district : undefined, end_date__gt: now, start_date__gte: filter.startDateAfter, start_date__lte: filter.startDateBefore, @@ -190,17 +216,16 @@ function AppealsTable(props: Props) { return { ...baseQuery, - region: regionId, + country: countryId ? [countryId] : undefined, + region: regionId ? [regionId] : undefined, }; }, [ variant, + countryId, regionId, ordering, - filter.appeal, - filter.displacement, - filter.startDateAfter, - filter.startDateBefore, + filter, limit, offset, ], @@ -218,6 +243,8 @@ function AppealsTable(props: Props) { return ( + {variant === 'country' && ( + + )} +
+ +
)} - withGridViewInFilter footerActions={( +