Feat: ORV2-1928 Permit Applications in Progress Pagination (#1152)

Co-authored-by: gchauhan-aot <[email protected]>
Co-authored-by: Praveen Raju <[email protected]>

frontend/src/features/permits/apiManager/permitsAPI.ts

@@ -92,49 +92,74 @@ export const updateTermOversize = async (
  * Fetch All Permit Application in Progress
  * @return An array of permit applications
  */
-export const getApplicationsInProgress = async (): Promise<
-  PermitApplicationInProgress[]
-> => {
-  try {
-    const companyId = getCompanyIdFromSession();
-    let applicationsUrl = `${APPLICATIONS_API_ROUTES.IN_PROGRESS}`;
-    if (companyId) {
-      applicationsUrl += `&companyId=${companyId}`;
-    }
+export const getApplicationsInProgress = async (
+  {
+    page = 0,
+    take = 10,
+    searchString,
+    sorting = [],
+  }: PaginationAndFilters,
+): Promise<PaginatedResponse<PermitApplicationInProgress>> => {
+
+  const companyId = getCompanyIdFromSession();
+  const applicationsURL = new URL(APPLICATIONS_API_ROUTES.IN_PROGRESS);
+  if (companyId) {
+    applicationsURL.searchParams.set("companyId", companyId);
+  }
 
-    const response = await httpGETRequest(applicationsUrl);
-    const applications = (
-      getDefaultRequiredVal([], response.data) as PermitApplicationInProgress[]
-    ).map((application) => {
-      return {
-        ...application,
-        permitType: getPermitTypeName(application.permitType) as string,
-        createdDateTime: toLocal(
-          application.createdDateTime,
-          DATE_FORMATS.DATETIME_LONG_TZ,
-        ),
-        updatedDateTime: toLocal(
-          application.updatedDateTime,
-          DATE_FORMATS.DATETIME_LONG_TZ,
-        ),
-        permitData: {
-          ...application.permitData,
-          startDate: toLocal(
-            application.permitData.startDate,
-            DATE_FORMATS.DATEONLY_SHORT_NAME,
-          ),
-          expiryDate: toLocal(
-            application.permitData.expiryDate,
-            DATE_FORMATS.DATEONLY_SHORT_NAME,
-          ),
+  // API pagination index starts at 1. Hence page + 1.
+  applicationsURL.searchParams.set("page", (page + 1).toString());
+  applicationsURL.searchParams.set("take", take.toString());
+  if (searchString) {
+    applicationsURL.searchParams.set("searchString", searchString);
+  }
+  if (sorting.length > 0) {
+    applicationsURL.searchParams.set("sorting", JSON.stringify(sorting));
+  }
+
+  const applications = await httpGETRequest(applicationsURL.toString())
+    .then((response) => {
+      const paginatedResponseObject = getDefaultRequiredVal(
+        {},
+        response.data,
+      ) as PaginatedResponse<PermitApplicationInProgress>;
+      return paginatedResponseObject;
+    })
+    .then((paginatedApplications: PaginatedResponse<PermitApplicationInProgress>) => {
+      const applicationsWithDateTransformations = paginatedApplications.items.map(
+        (application) => {
+          return {
+            ...application,
+            permitType: getPermitTypeName(application.permitType) as string,
+            createdDateTime: toLocal(
+              application?.createdDateTime,
+              DATE_FORMATS.DATETIME_LONG_TZ,
+            ),
+            updatedDateTime: toLocal(
+              application?.updatedDateTime,
+              DATE_FORMATS.DATETIME_LONG_TZ,
+            ),
+            permitData: {
+              ...application.permitData,
+              startDate: toLocal(
+                application?.permitData?.startDate,
+                DATE_FORMATS.DATEONLY_SHORT_NAME,
+              ),
+              expiryDate: toLocal(
+                application?.permitData?.expiryDate,
+                DATE_FORMATS.DATEONLY_SHORT_NAME,
+              ),
+            }
+          } as PermitApplicationInProgress;
         },
-      } as PermitApplicationInProgress;
+      );
+      return {
+        ...paginatedApplications,
+        items: applicationsWithDateTransformations,
+      };
     });
+
     return applications;
-  } catch (err) {
-    console.error(err);
-    return [];
-  }
 };
 
 /**

frontend/src/features/permits/components/dashboard/PermitLists.tsx

@@ -1,50 +1,20 @@
 import React from "react";
-import { AxiosError } from "axios";
-import { Navigate } from "react-router-dom";
-
 import { TabLayout } from "../../../../common/components/dashboard/TabLayout";
-import { Loading } from "../../../../common/pages/Loading";
-import { ErrorFallback } from "../../../../common/pages/ErrorFallback";
-import { List } from "../list/List";
 import { StartApplicationAction } from "../../pages/TermOversize/components/dashboard/StartApplicationAction";
 import { ActivePermitList } from "../permit-list/ActivePermitList";
 import { ExpiredPermitList } from "../permit-list/ExpiredPermitList";
+import { ApplicationsInProgressList } from "../permit-list/ApplicationsInProgressList";
 import { useApplicationsInProgressQuery } from "../../hooks/hooks";
-import { NoRecordsFound } from "../../../../common/components/table/NoRecordsFound";
-import { ERROR_ROUTES } from "../../../../routes/constants";
-
-export const PermitLists = React.memo(() => {
-  const { applicationsInProgressQuery } = useApplicationsInProgressQuery();
-  const {
-    data: applicationsInProgress,
-    isPending,
-    isError,
-    error,
-  } = applicationsInProgressQuery;
 
-  if (isPending) {
-    return <Loading />;
-  }
 
-  if (isError) {
-    if (error instanceof AxiosError) {
-      if (error.response?.status === 401) {
-        return <Navigate to={ERROR_ROUTES.UNAUTHORIZED} />;
-      }
-      return <ErrorFallback error={error.message} />;
-    }
-  }
+export const PermitLists = React.memo(() => {
+  const query = useApplicationsInProgressQuery({});
 
   const tabs = [
     {
       label: "Applications in Progress",
-      count: applicationsInProgress?.length,
-      component:
-        applicationsInProgress?.length === 0 ? (
-          <NoRecordsFound />
-        ) : (
-          <List query={applicationsInProgressQuery} />
-        ),
+      count: query?.applicationsInProgressQuery?.data?.items?.length,
+      component: <ApplicationsInProgressList />,
     },
     {
       label: "Active Permits",

frontend/src/features/permits/components/permit-list/ApplicationInProgressColumnDefinition.tsx

@@ -0,0 +1,51 @@
+import { MRT_ColumnDef } from "material-react-table";
+import { ApplicationInProgress } from "../../types/application";
+import { APPLICATIONS_ROUTES } from "../../../../routes/constants";
+import { CustomNavLink } from "../../../../common/components/links/CustomNavLink";
+
+export const ApplicationInProgressColumnDefinition: MRT_ColumnDef<ApplicationInProgress>[] =
+  [
+    {
+      accessorKey: "applicationNumber",
+      header: "Application #",
+      accessorFn: (row) => row.applicationNumber,
+      Cell: (props: { cell: any; row: any }) => {
+        const permitIdStr = `${props.row.original.permitId}`;
+        return (
+          <CustomNavLink
+            to={`${APPLICATIONS_ROUTES.DETAILS(permitIdStr)}`}
+            className="column-link column-link--application-details"
+          >
+            {props.cell.getValue()}
+          </CustomNavLink>
+        );
+      },
+    },
+    {
+      accessorKey: "permitType",
+      header: "Permit Type",
+    },
+    {
+      accessorKey: "permitData.vehicleDetails.unitNumber",
+      header: "Unit #",
+    },
+    {
+      accessorKey: "permitData.vehicleDetails.vin",
+      header: "VIN",
+    },
+    {
+      accessorKey: "permitData.vehicleDetails.plate",
+      header: "Plate",
+    },
+    {
+      accessorKey: "permitData.startDate",
+      header: "Permit Start Date",
+    },
+    {
+      accessorKey: "updatedDateTime",
+      header: "Last Updated",
+    },
+  ];
+
+export const ApplicationNotFoundColumnDefinition: MRT_ColumnDef<ApplicationInProgress>[] =
+  [];

frontend/src/features/permits/components/permit-list/ApplicationsInProgressList.scss

@@ -0,0 +1 @@
+@use "../list/List";