From f757e5f427d239e258c93ba900e744dfd1443735 Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Wed, 6 Dec 2023 14:03:18 +0545 Subject: [PATCH] Add support for assessment cycle in the country preparedness --- src/App/routes/CountryRoutes.tsx | 28 ++++---- src/hooks/useRouting.ts | 6 +- src/views/AccountMyFormsPer/index.tsx | 5 +- src/views/CountryNsOverviewCapacity/index.tsx | 6 +- .../styles.module.css | 4 ++ src/views/CountryPreparedness/i18n.json | 1 + src/views/CountryPreparedness/index.tsx | 71 ++++++++++++++----- .../CountryPreparedness/styles.module.css | 5 ++ 8 files changed, 89 insertions(+), 37 deletions(-) diff --git a/src/App/routes/CountryRoutes.tsx b/src/App/routes/CountryRoutes.tsx index 5011a60a29..a6286e2618 100644 --- a/src/App/routes/CountryRoutes.tsx +++ b/src/App/routes/CountryRoutes.tsx @@ -256,6 +256,19 @@ const countryNsOverviewCapacity = customWrapRoute({ }, }); +const countryPreparedness = customWrapRoute({ + parent: countriesLayout, + path: 'ns-overview/per/:perId', + component: { + render: () => import('#views/CountryPreparedness'), + props: {}, + }, + context: { + title: 'Country Preparedness', + visibility: 'anything', + }, +}); + type DefaultCountryProfileChild = 'overview'; const countryProfileLayout = customWrapRoute({ parent: countriesLayout, @@ -385,19 +398,6 @@ const countryThreeWIndex = customWrapRoute({ }, }); -const countryPreparedness = customWrapRoute({ - parent: countriesLayout, - path: 'preparedness', - component: { - render: () => import('#views/CountryPreparedness'), - props: {}, - }, - context: { - title: 'Country Preparedness', - visibility: 'anything', - }, -}); - const countryAdditionalInfo = customWrapRoute({ parent: countriesLayout, path: 'additional-info', @@ -427,6 +427,7 @@ export default { countryNsOverviewContextAndStructure, countryNsOverviewStrategicPriorities, countryNsOverviewCapacity, + countryPreparedness, countryProfileLayout, countryProfileIndex, @@ -441,5 +442,4 @@ export default { countryOperations, countriesThreeWLayout, countryThreeWIndex, - countryPreparedness, }; diff --git a/src/hooks/useRouting.ts b/src/hooks/useRouting.ts index d5081712bd..5449795fb1 100644 --- a/src/hooks/useRouting.ts +++ b/src/hooks/useRouting.ts @@ -43,12 +43,12 @@ function useRouting() { const goBack = useCallback( ( - fallbackPath: keyof WrappedRoutes, - options?: { + fallbackPath: keyof WrappedRoutes = 'home', + options: { params?: UrlParams, search?: string, hash?: string, - }, + } = {}, ) => { if (historyEntryExist) { navigateFromLib(-1); diff --git a/src/views/AccountMyFormsPer/index.tsx b/src/views/AccountMyFormsPer/index.tsx index 33ce89382e..1f21e22d2f 100644 --- a/src/views/AccountMyFormsPer/index.tsx +++ b/src/views/AccountMyFormsPer/index.tsx @@ -110,7 +110,10 @@ export function Component() { (item) => item.country_details?.name, (item) => ({ to: 'countryPreparedness', - urlParams: { countryId: item.country }, + urlParams: { + countryId: item.country, + perId: item.id, + }, }), ), createDateColumn( diff --git a/src/views/CountryNsOverviewCapacity/index.tsx b/src/views/CountryNsOverviewCapacity/index.tsx index 9baface25e..62a2522b0f 100644 --- a/src/views/CountryNsOverviewCapacity/index.tsx +++ b/src/views/CountryNsOverviewCapacity/index.tsx @@ -55,6 +55,7 @@ export function Component() { > {!hasPer && ( @@ -78,7 +79,10 @@ export function Component() { actions={( View diff --git a/src/views/CountryNsOverviewCapacity/styles.module.css b/src/views/CountryNsOverviewCapacity/styles.module.css index 24a4809591..fcff41b41d 100644 --- a/src/views/CountryNsOverviewCapacity/styles.module.css +++ b/src/views/CountryNsOverviewCapacity/styles.module.css @@ -4,6 +4,10 @@ gap: var(--go-ui-spacing-2xl); padding: var(--go-ui-spacing-2xl) 0; + .empty-message { + grid-column: -1 / 1; + } + .per-cycle-item { border-radius: var(--go-ui-box-shadow-lg); box-shadow: var(--go-ui-box-shadow-md); diff --git a/src/views/CountryPreparedness/i18n.json b/src/views/CountryPreparedness/i18n.json index 240f077aac..487bd69144 100644 --- a/src/views/CountryPreparedness/i18n.json +++ b/src/views/CountryPreparedness/i18n.json @@ -2,6 +2,7 @@ "namespace": "countryPreparedness", "strings": { "nsPreparednessAndResponseCapacityHeading": "NS Preparedness and Response Capacity", + "goBackButtonTitle": "Go back", "startDateLabel": "Start Date", "perPhaseLabel": "PER Phase", "perCycleLabel": "PER Cycle", diff --git a/src/views/CountryPreparedness/index.tsx b/src/views/CountryPreparedness/index.tsx index afeb53f890..59ede8503e 100644 --- a/src/views/CountryPreparedness/index.tsx +++ b/src/views/CountryPreparedness/index.tsx @@ -1,10 +1,9 @@ -import { Fragment, useMemo } from 'react'; +import { Fragment, useCallback, useMemo } from 'react'; import { useParams } from 'react-router-dom'; import { - AnalysisIcon, AnalyzingIcon, + ArrowLeftLineIcon, CheckboxFillIcon, - CloseCircleLineIcon, } from '@ifrc-go/icons'; import { compareNumber, @@ -36,6 +35,7 @@ import { stringLabelSelector, stringTitleSelector, } from '#utils/selectors'; +import useRouting from '#hooks/useRouting'; import PreviousAssessmentCharts from './PreviousAssessmentChart'; import PublicCountryPreparedness from './PublicCountryPreparedness'; @@ -59,25 +59,27 @@ function primaryRedColorShadeSelector(_: unknown, i: number) { // eslint-disable-next-line import/prefer-default-export export function Component() { const strings = useTranslation(i18n); - const { countryId } = useParams<{ countryId: string }>(); + const { perId, countryId } = useParams<{ perId: string, countryId: string }>(); + // const { countryId } = useParams<{ countryId: string }>(); const { pending: pendingLatestPerResponse, response: latestPerResponse, - error: latestPerResponseError, + // error: latestPerResponseError, } = useRequest({ skip: isNotDefined(countryId), url: '/api/v2/latest-per-overview/', query: { country_id: Number(countryId) }, }); - const countryHasNoPer = latestPerResponse?.results?.length === 0; + // const countryHasNoPer = latestPerResponse?.results?.length === 0; // FIXME: add feature on server (low priority) // we get a list form the server because we are using a filter on listing api - const perId = latestPerResponse?.results?.[0]?.id; + // const perId = latestPerResponse?.results?.[0]?.id; + const latestPerOverview = latestPerResponse?.results?.[0]; - const prevAssessmentRatings = latestPerResponse?.results?.[0]?.assessment_ratings; + const prevAssessmentRatings = latestPerOverview?.assessment_ratings; const { pending: formAnswerPending, @@ -108,9 +110,20 @@ export function Component() { } = useRequest({ skip: isNotDefined(perId), url: '/api/v2/per-process-status/{id}/', - pathVariables: { + pathVariables: isDefined(perId) ? { id: Number(perId), - }, + } : undefined, + }); + + const { + pending: overviewPending, + response: overviewResponse, + } = useRequest({ + skip: isNotDefined(perId), + url: '/api/v2/per-overview/{id}/', + pathVariables: isDefined(perId) ? { + id: Number(perId), + } : undefined, }); const { @@ -319,7 +332,15 @@ export function Component() { [prioritizationResponse, assessmentStats], ); - const hasPer = isDefined(latestPerResponse); + const { goBack } = useRouting(); + const handleBackButtonClick = useCallback(() => { + goBack(); + }, [goBack]); + + const hasPer = isDefined(perId); + // const hasPrevAssessments = true; + + // const hasPer = isDefined(latestPerResponse); const limitedAccess = hasPer && isNotDefined(processStatusResponse); const hasAssessmentStats = hasPer && isDefined(assessmentStats); @@ -337,12 +358,15 @@ export function Component() { && perFormAreaResponse; const pending = formAnswerPending + || pendingLatestPerResponse || perOptionsPending || perFormAreaPending || perProcessStatusPending + || overviewPending || assessmentResponsePending || prioritizationResponsePending; + /* if (pendingLatestPerResponse) { return ( ); } + */ return ( )} + icons={( + + )} >
@@ -406,23 +441,23 @@ export function Component() { />
@@ -593,9 +628,9 @@ export function Component() { description={strings.componentChartNotAvailableDescription} /> )} - {!pending && limitedAccess && ( + {!pending && limitedAccess && isDefined(perId) && (
- +