Add support for assessment cycle in the country preparedness

IFRCGo · Dec 6, 2023 · 263b3ce · 263b3ce
1 parent 3773491
commit 263b3ce
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 35 deletions.
diff --git 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,
@@ -411,19 +424,6 @@ const countryThreeWNationalSocietyProjects = 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',

diff --git 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
@@ -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<PerProcessStatusItem, number>(

diff --git a/src/views/CountryNsOverviewCapacity/index.tsx b/src/views/CountryNsOverviewCapacity/index.tsx
@@ -78,7 +78,10 @@ export function Component() {
                             actions={(
                                 <Link
                                     to="countryPreparedness"
-                                    urlParams={{ countryId }}
+                                    urlParams={{
+                                        countryId,
+                                        perId: perProcess.id,
+                                    }}
                                     variant="secondary"
                                 >
                                     View

diff --git 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
@@ -1,8 +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';
@@ -42,6 +43,7 @@ import PublicCountryPreparedness from './PublicCountryPreparedness';
 import RatingByAreaChart from './RatingByAreaChart';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
+import useRouting from '#hooks/useRouting';
 
 const primaryRedColorShades = [
     'var(--go-ui-color-red-90)',
@@ -59,8 +61,10 @@ 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 } = useParams<{ perId: string }>();
+    // const { countryId } = useParams<{ countryId: string }>();
 
+    /*
     const {
         pending: pendingLatestPerResponse,
         response: latestPerResponse,
@@ -70,14 +74,15 @@ export function Component() {
         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 latestPerOverview = latestPerResponse?.results?.[0];
-    const prevAssessmentRatings = latestPerResponse?.results?.[0]?.assessment_ratings;
+    // const perId = latestPerResponse?.results?.[0]?.id;
+    // const latestPerOverview = latestPerResponse?.results?.[0];
+    // const prevAssessmentRatings = latestPerResponse?.results?.[0]?.assessment_ratings;
 
     const {
         pending: formAnswerPending,
@@ -108,9 +113,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 +335,15 @@ export function Component() {
         [prioritizationResponse, assessmentStats],
     );
 
-    const hasPer = isDefined(latestPerResponse);
+    const { goBack } = useRouting();
+    const handleBackButtonClick = useCallback(() => {
+        goBack();
+    }, [goBack]);
+
+    const hasPer = true;
+    const hasPrevAssessments = true;
+
+    // const hasPer = isDefined(latestPerResponse);
     const limitedAccess = hasPer && isNotDefined(processStatusResponse);
 
     const hasAssessmentStats = hasPer && isDefined(assessmentStats);
@@ -331,7 +355,7 @@ export function Component() {
     const hasRatingsByArea = hasAssessmentStats && assessmentStats.ratingByArea.length > 0;
     const hasPriorityComponents = hasPrioritizationStats
         && prioritizationStats.componentsWithRating.length > 0;
-    const hasPrevAssessments = prevAssessmentRatings && prevAssessmentRatings.length > 1;
+    // const hasPrevAssessments = prevAssessmentRatings && prevAssessmentRatings.length > 1;
     const showComponentsByArea = hasRatingsByArea
         && perOptionsResponse
         && perFormAreaResponse;
@@ -340,9 +364,11 @@ export function Component() {
         || perOptionsPending
         || perFormAreaPending
         || perProcessStatusPending
+        || overviewPending
         || assessmentResponsePending
         || prioritizationResponsePending;
 
+    /*
     if (pendingLatestPerResponse) {
         return (
             <Message
@@ -375,6 +401,7 @@ export function Component() {
             />
         );
     }
+    */
 
     return (
         <Container
@@ -391,11 +418,21 @@ export function Component() {
                     strongValue
                 />
             )}
+            icons={(
+                <Button
+                    name={undefined}
+                    onClick={handleBackButtonClick}
+                    variant="tertiary"
+                    title={strings.goBackButtonTitle}
+                >
+                    <ArrowLeftLineIcon className={styles.backIcon} />
+                </Button>
+            )}
         >
             <div className={styles.latestPerDetails}>
                 <TextOutput
                     label={strings.startDateLabel}
-                    value={latestPerOverview?.date_of_assessment}
+                    value={overviewResponse?.date_of_assessment}
                     valueType="date"
                     strongValue
                 />
@@ -406,23 +443,23 @@ export function Component() {
                 />
                 <TextOutput
                     label={strings.focalPointNameLabel}
-                    value={latestPerOverview?.ns_focal_point_name}
+                    value={overviewResponse?.ns_focal_point_name}
                     strongValue
                 />
                 <TextOutput
                     label={strings.perCycleLabel}
-                    value={latestPerOverview?.assessment_number}
+                    value={overviewResponse?.assessment_number}
                     valueType="number"
                     strongValue
                 />
                 <TextOutput
                     label={strings.typeOfAssessmentLabel}
-                    value={latestPerOverview?.type_of_assessment?.name}
+                    value={overviewResponse?.type_of_assessment_details?.name}
                     strongValue
                 />
                 <TextOutput
                     label={strings.focalPointEmailTitle}
-                    value={latestPerOverview?.ns_focal_point_email}
+                    value={overviewResponse?.ns_focal_point_email}
                     strongValue
                 />
                 <div className={styles.contactContainer}>
@@ -484,6 +521,7 @@ export function Component() {
                     />
                 </Container>
             )}
+            {/*
             {!pending && hasPrevAssessments && (
                 <Container
                     heading={strings.NSResponseHeading}
@@ -494,6 +532,7 @@ export function Component() {
                     />
                 </Container>
             )}
+            */}
             {hasRatedComponents && (
                 <Container
                     heading={strings.highlightedTopRatedComponentHeading}
@@ -593,9 +632,9 @@ export function Component() {
                     description={strings.componentChartNotAvailableDescription}
                 />
             )}
-            {!pending && limitedAccess && (
+            {!pending && limitedAccess && isDefined(perId) && (
                 <div className={styles.limitedAccess}>
-                    <PublicCountryPreparedness perId={perId} />
+                    <PublicCountryPreparedness perId={Number(perId)} />
                     <Message
                         title={strings.componentLimitedAccess}
                         description={strings.componentLimitedAccessDescription}

diff --git a/src/views/CountryPreparedness/styles.module.css b/src/views/CountryPreparedness/styles.module.css
@@ -2,10 +2,15 @@
     padding: var(--go-ui-spacing-2xl) 0;
     min-height: 40vh;
 
+    .back-icon {
+        font-size: var(--go-ui-font-size-3xl);
+    }
+
     .preparedness-content {
         display: grid;
         grid-gap: var(--go-ui-spacing-2xl);
         grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
+        padding: var(--go-ui-spacing-lg) 0;
 
         @media screen and (max-width: 40rem) {
             grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));