eap(lisitng): Add eap listing page

Author: barshathakuri

app/src/App/routes/index.tsx

@@ -1197,24 +1197,7 @@ const eapRegistrationLayout = customWrapRoute({
     },
 });
 
-const eapRegistrationFormIndex = customWrapRoute({
-    parent: eapRegistrationLayout,
-    index: true,
-    component: {
-        eagerLoad: true,
-        render: Navigate,
-        props: {
-            to: 'new' satisfies DefaultPerProcessChild,
-            replace: true,
-        },
-    },
-    context: {
-        title: 'EAP Registration',
-        visibility: 'anything',
-    },
-});
-
-const eapDevelopmentRegistration = customWrapRoute({
+const newEapDevelopmentRegistration = customWrapRoute({
     parent: eapRegistrationLayout,
     path: 'new' satisfies DefaultEapRegistrationChild,
     component: {
@@ -1231,14 +1214,14 @@ const eapDevelopmentRegistration = customWrapRoute({
 
 const eapDevelopmentRegistrationForm = customWrapRoute({
     parent: eapRegistrationLayout,
-    path: ':eapId/view',
+    path: ':eapId/',
     component: {
         render: () => import('#views/EapRegistration'),
         props: {},
     },
     wrapperComponent: Auth,
     context: {
-        title: 'View EAP Overview',
+        title: 'View EAP',
         visibility: 'is-authenticated',
     },
 });
@@ -1503,7 +1486,7 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
-    eapDevelopmentRegistration,
+    newEapDevelopmentRegistration,
     eapFullForm,
     simplifiedEapForm,
     ...regionRoutes,
@@ -1521,7 +1504,6 @@ const wrappedRoutes = {
     drefProcessLayout,
     eapRegistrationLayout,
     eapDevelopmentRegistrationForm,
-    eapRegistrationFormIndex,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

app/src/utils/constants.ts

@@ -195,3 +195,6 @@ export const multiMonthSelectDefaultValue = listToMap(
 export const ERU_READINESS_READY = 1;
 export const ERU_READINESS_CAN_CONTRIBUTE = 2;
 export const ERU_READINESS_NO_CAPACITY = 3;
+
+export const EAP_TYPE_SIMPLIFIED = 20;
+export const EAP_TYPE_FULL = 10;

app/src/views/EapApplications/EapTableActions/i18n.json

@@ -2,6 +2,7 @@
     "namespace":"accountMyFormsEap",
     "strings":{
         "eapViewLabel": "View",
+        "eapEditLabel": "Edit",
         "eapFormLink": "Start Full EAP",
         "simplifiedEapLink": "Start sEAP"
     }

app/src/views/EapApplications/EapTableActions/index.tsx

@@ -18,13 +18,24 @@ function EapTableActions(props: Props) {
     return (
         <TableActions
             extraActions={(
-                <DropdownMenuItem
-                    type="link"
-                    to="eapDevelopmentRegistrationForm"
-                    urlParams={{ eapId }}
-                >
-                    {strings.eapViewLabel}
-                </DropdownMenuItem>
+                <>
+                    <DropdownMenuItem
+                        type="link"
+                        to="eapDevelopmentRegistrationForm"
+                        urlParams={{ eapId }}
+                        state={{ mode: 'view' }}
+                    >
+                        {strings.eapViewLabel}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        type="link"
+                        to="eapDevelopmentRegistrationForm"
+                        urlParams={{ eapId }}
+                        state={{ mode: 'edit' }}
+                    >
+                        {strings.eapEditLabel}
+                    </DropdownMenuItem>
+                </>
             )}
         >
             <Link

app/src/views/EapApplications/i18n.json

@@ -2,6 +2,11 @@
     "namespace": "eapApplication",
     "strings": {
         "eapRegistrationLink": "Register Your EAP",
-        "eapApplicationsHeading": "EAP Application"
+        "eapApplicationsHeading": "EAP Application",
+        "eapLastUpdated": "Last Updated",
+        "eapName": "Name/Phase",
+        "eapType": "EAP Type",
+        "eapStatus": "Status",
+        "eapRegistration": "EAP Registration"
     }
 }

app/src/views/EapApplications/index.tsx

@@ -5,6 +5,7 @@ import {
 } from 'react';
 import {
     Container,
+    Pager,
     type RowOptions,
     Table,
     TableBodyContent,
@@ -22,6 +23,10 @@ import {
 
 import Link from '#components/Link';
 import useFilterState from '#hooks/useFilterState';
+import {
+    EAP_TYPE_FULL,
+    EAP_TYPE_SIMPLIFIED,
+} from '#utils/constants';
 import {
     type GoApiResponse,
     useRequest,
@@ -37,6 +42,7 @@ type EapResponse = GoApiResponse<'/api/v2/eap-registration/'>;
 type EapListItem = NonNullable<EapResponse['results']>[number];
 
 type Key = EapListItem['id'];
+const ITEM_PER_PAGE = 6;
 
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
@@ -50,9 +56,11 @@ export function Component() {
         rawFilter,
         filtered,
         setFilterField,
+        page,
+        setPage,
     } = useFilterState<FilterValue>({
         filter: {},
-        pageSize: 6,
+        pageSize: ITEM_PER_PAGE,
     });
 
     const {
@@ -82,19 +90,18 @@ export function Component() {
         () => ([
             createDateColumn<EapListItem, number>(
                 'created_at',
-                'Last Updated',
+                strings.eapLastUpdated,
                 (item) => item.created_at,
-                { columnClassName: styles.date },
             ),
             createStringColumn<EapListItem, number>(
                 'name',
-                'Name/Phase',
+                strings.eapName,
                 (item) => {
                     const baseYear = new Date(item.created_at).getFullYear();
                     let addedYear = baseYear;
-                    if (item.eap_type === 10) {
-                        addedYear = baseYear + 4;
-                    } else if (item.eap_type === 20) {
+                    if (item.eap_type === EAP_TYPE_FULL) {
+                        addedYear = baseYear + 5;
+                    } else if (item.eap_type === EAP_TYPE_SIMPLIFIED) {
                         addedYear = baseYear + 2;
                     }
                     return `${item.country_details?.name}:
@@ -105,24 +112,15 @@ export function Component() {
             ),
             createStringColumn<EapListItem, number>(
                 'eap_type_display',
-                'EAP Type',
+                strings.eapType,
                 (item) => item.eap_type_display,
-                { columnClassName: styles.type },
             ),
             createStringColumn<EapListItem, number>(
                 'status_display',
-                'Status',
+                strings.eapStatus,
                 (item) => item.status_display,
                 { columnClassName: styles.status },
             ),
-        ]),
-        [],
-    );
-
-    const aggregatedColumns = useMemo(
-        () => ([
-            createExpansionIndicatorColumn<EapListItem, Key>(false),
-            ...baseColumns,
             createExpandColumn<EapListItem, Key>(
                 'expandRow',
                 '',
@@ -132,7 +130,14 @@ export function Component() {
                 }),
             ),
         ]),
-        [baseColumns, handleExpandClick, expandedRow],
+        [
+            strings.eapLastUpdated,
+            strings.eapName,
+            strings.eapType,
+            strings.eapStatus,
+            expandedRow,
+            handleExpandClick,
+        ],
     );
 
     const detailColumns = useMemo(
@@ -141,22 +146,21 @@ export function Component() {
             createStringColumn<EapListItem, number>(
                 'title',
                 '',
-                () => 'EAP Registration',
+                () => strings.eapRegistration,
                 { columnClassName: styles.detailTitle },
             ),
+            createEmptyColumn(),
             createElementColumn<EapListItem, number, EapTableActionProps>(
                 'actions',
-                'EAP Registration',
+                '',
                 EapTableActions,
                 (eapId) => ({
                     eapId,
                 }),
             ),
             createEmptyColumn(),
-            createEmptyColumn(),
-            createEmptyColumn(),
         ]),
-        [],
+        [strings.eapRegistration],
     );
 
     const rowModifier = useCallback(
@@ -193,25 +197,33 @@ export function Component() {
             childrenContainerClassName={styles.eapFormLinks}
             heading={strings.eapApplicationsHeading}
             withHeaderBorder
-            filters={(
+            filters={(eapResponse?.count ?? 0) > 0 && (
                 <Filters
                     value={rawFilter}
                     onChange={setFilterField}
                 />
             )}
             actions={(
                 <Link
-                    to="home"
+                    to="newEapDevelopmentRegistration"
                     variant="secondary"
                 >
                     {strings.eapRegistrationLink}
                 </Link>
             )}
+            footerActions={(
+                <Pager
+                    activePage={page}
+                    itemsCount={eapResponse?.count ?? 0}
+                    maxItemsPerPage={limit}
+                    onActivePageChange={setPage}
+                />
+            )}
         >
             <Table
                 className={styles.table}
                 data={eapResponse?.results}
-                columns={aggregatedColumns}
+                columns={baseColumns}
                 rowModifier={rowModifier}
                 keySelector={numericIdSelector}
                 pending={eapPending}

app/src/views/EapApplications/styles.module.css

@@ -1,12 +1,9 @@
 .eap-form-links {
     .table {
-        .type,
-        .status,
-        .date {
+        .status {
             width: 0%;
-            min-width: 7rem;
+            min-width: 19rem;
         }
-
         .sub-cell {
             border-bottom: unset;
             background-color: var(--go-ui-color-gray-20);

app/src/views/EapRegistration/i18n.json

@@ -37,11 +37,15 @@
         "eapFocalPointEmail": "Email",
         "eapFocalPointPhoneNumber": "Phone Number",
         "eapSubmitButton": "Submit",
+        "eapBackButton": "Back",
         "eapCancelButton": "Cancel",
         "eapRegistrationFailure": "Sorry could not register new EAP right now!",
         "eapRegistrationSuccess": "Successfully created a new EAP!",
         "eapNotSure": "Not Sure",
         "eapDevelopmentRegistrationHeading": "EAP Development Registration",
-        "eapDevelopmentRegistrationDescription": "Thank you for notifying us about the start of your EAP process. We look forward to your completed application."
+        "eapDevelopmentRegistrationDescription": "Thank you for notifying us about the start of your EAP process. We look forward to your completed application.",
+        "eapFailedToLoad": "Failed to Load",
+        "eapRegistrationUpdateMessage": "EAP Registration updated Successfully.",
+        "eapRegistrationFailureMessage": "Failed to update EAP Registration"
     }
 }