Add support for assessment cycle in the country preparedness

IFRCGo · Dec 14, 2023 · f757e5f · f757e5f
1 parent 493433c
commit f757e5f
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 37 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,
@@ -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
@@ -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
@@ -55,6 +55,7 @@ export function Component() {
             >
                 {!hasPer && (
                     <Message
+                        className={styles.emptyMessage}
                         // TODO: add appropriate message
                         title="Data not available!"
                     />
@@ -78,7 +79,10 @@ export function Component() {
                             actions={(
                                 <Link
                                     to="countryPreparedness"
-                                    urlParams={{ countryId }}
+                                    urlParams={{
+                                        countryId,
+                                        perId: perProcess.id,
+                                    }}
                                     variant="secondary"
                                 >
                                     View

diff --git 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
@@ -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,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 (
             <Message
@@ -375,6 +399,7 @@ export function Component() {
             />
         );
     }
+    */
 
     return (
         <Container
@@ -391,11 +416,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 +441,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}>
@@ -593,9 +628,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));