feat: add active operations table to country ongoing activities

IFRCGo · Dec 6, 2023 · 97b7f41 · 97b7f41
1 parent 47ad2fd
commit 97b7f41
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 48 deletions.
diff --git 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
@@ -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' && (
                         <MultiSelectInput
                             name="district"
+                            placeholder={strings.operationFilterDistrictPlaceholder}
                             label={strings.operationMapProvinces}
                             options={districtList}
                             value={rawFilter.district}
@@ -407,7 +408,7 @@ function ActiveOperationMap(props: Props) {
                             variant="tertiary"
                             disabled={!filtered}
                         >
-                            {strings.clearFilters}
+                            {strings.operationMapClearFilters}
                         </Button>
                     </div>
                 </>

diff --git 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
@@ -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<AppealResponse['results']>[number];
 
 type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
 type AppealTypeOption = NonNullable<GlobalEnumsResponse['api_appeal_type']>[number];
+type DistrictListItem = NonNullable<GoApiResponse<'/api/v2/district/'>['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<AppealListItem, string>(
-                'country',
-                strings.appealsTableCountry,
-                (item) => item.country.name,
-                (item) => ({
-                    to: 'countriesLayout',
-                    urlParams: { countryId: item.country.id },
-                }),
-            ),
-        ]),
+            variant !== 'country'
+                ? createLinkColumn<AppealListItem, string>(
+                    '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 (
         <Container
             className={_cs(styles.appealsTable, className)}
+            filtersContainerClassName={styles.filters}
+            childrenContainerClassName={styles.content}
             filters={(
                 <>
                     <DateInput
@@ -232,6 +259,18 @@ function AppealsTable(props: Props) {
                         onChange={setFilterField}
                         value={rawFilter.startDateBefore}
                     />
+                    {variant === 'country' && (
+                        <MultiSelectInput
+                            name="district"
+                            placeholder={strings.appealsTableFilterDistrictPlaceholder}
+                            label={strings.appealsTableProvinces}
+                            options={districtList}
+                            value={rawFilter.district}
+                            keySelector={numericIdSelector}
+                            labelSelector={stringNameSelector}
+                            onChange={setFilterField}
+                        />
+                    )}
                     <SelectInput
                         placeholder={strings.appealsTableFilterTypePlaceholder}
                         label={strings.appealsTableType}
@@ -249,9 +288,19 @@ function AppealsTable(props: Props) {
                         value={rawFilter.displacement}
                         onChange={setFilterField}
                     />
+                    <div className={styles.clearButton}>
+                        <Button
+                            name={undefined}
+                            icons={<CloseLineIcon />}
+                            onClick={handleClearFiltersButtonclick}
+                            variant="tertiary"
+                            disabled={!filtered}
+                        >
+                            {strings.appealsTableClearFilters}
+                        </Button>
+                    </div>
                 </>
             )}
-            withGridViewInFilter
             footerActions={(
                 <Pager
                     activePage={page}

diff --git a/src/components/domain/AppealsTable/styles.module.css b/src/components/domain/AppealsTable/styles.module.css
@@ -1,4 +1,15 @@
 .appeals-table {
+    .filters {
+        display: grid;
+        grid-gap: var(--go-ui-spacing-md);
+        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+
+        .clear-button {
+            display: flex;
+            align-items: center;
+        }
+    }
+
     .table {
         .start-date {
             width: 0%;

diff --git a/src/views/AllAppeals/index.tsx b/src/views/AllAppeals/index.tsx
@@ -138,8 +138,8 @@ export function Component() {
             ordering,
             atype: filterAppealType,
             dtype: filterDisasterType,
-            country: filterCountry,
-            region: filterRegion,
+            country: filterCountry ? [filterCountry] : undefined,
+            region: filterRegion ? [filterRegion] : undefined,
             start_date__gte: filter.startDateAfter,
             start_date__lte: filter.startDateBefore,
         }),

diff --git a/src/views/CountryOngoingActivitiesEmergencies/index.tsx b/src/views/CountryOngoingActivitiesEmergencies/index.tsx
@@ -15,6 +15,7 @@ import {
     CloseLineIcon,
 } from '@ifrc-go/icons';
 
+import AppealsTable from '#components/domain/AppealsTable';
 import ActiveOperationMap from '#components/domain/ActiveOperationMap';
 import Container from '#components/Container';
 import IconButton from '#components/IconButton';
@@ -90,6 +91,11 @@ export function Component() {
                 districtList={districtList}
                 bbox={bbox}
             />
+            <AppealsTable
+                variant="country"
+                countryId={Number(countryId)}
+                districtList={districtList}
+            />
             <div
                 className={_cs(presentationMode && styles.presentationMode)}
                 ref={containerRef}