add all headers to be sortable

bcgov · May 6, 2024 · de1a21f · de1a21f
1 parent b48a895
commit de1a21f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/api/src/application/application.service.ts b/api/src/application/application.service.ts
@@ -80,7 +80,13 @@ export class ApplicationService {
     }
 
     if (query.orderBy) {
-      queryBuilder.orderBy({ [`app.${query.orderBy}`]: query.order });
+      if (
+        ['applicationType.name', 'assignedTo.displayName', 'status.name'].includes(query.orderBy)
+      ) {
+        queryBuilder.orderBy({ [`${query.orderBy}`]: query.order });
+      } else {
+        queryBuilder.orderBy({ [`app.${query.orderBy}`]: query.order });
+      }
     }
 
     query.filter(queryBuilder);

diff --git a/api/src/common/enums.ts b/api/src/common/enums.ts
@@ -9,6 +9,14 @@ export enum ApplicationSortOptions {
   STATUS = 'status',
   SUBMISSION_ID = 'submissionId',
   UPDATED_AT = 'updatedAt',
+  FUNDING_YEAR = 'fundingYear',
+  APPLICANT_NAME = 'applicantName',
+  APPLICATION_TYPE_NAME = 'applicationType.name',
+  TOTAL_ESTIMATED_COST = 'totalEstimatedCost',
+  ASKS = 'asks',
+  ASSIGNED_TO_DISPLAYNAME = 'assignedTo.displayName',
+  STATUS_NAME = 'status.name',
+  PROJECT_TITLE = 'projectTitle'
 }
 
 export enum AxiosResponseTypes {

diff --git a/client/components/form/ApplicationTable.tsx b/client/components/form/ApplicationTable.tsx
@@ -16,6 +16,14 @@ enum OrderBy {
   STATUS = 'status',
   SUBMISSION_ID = 'submissionId',
   UPDATED_AT = 'updatedAt',
+  FUNDING_YEAR = 'fundingYear',
+  APPLICANT_NAME = 'applicantName',
+  APPLICATION_TYPE_NAME = 'applicationType.name',
+  TOTAL_ESTIMATED_COST = 'totalEstimatedCost',
+  ASKS = 'asks',
+  ASSIGNED_TO_DISPLAYNAME = 'assignedTo.displayName',
+  STATUS_NAME = 'status.name',
+  PROJECT_TITLE = 'projectTitle',
 }
 
 const TableHeader: React.FC = () => {
@@ -25,7 +33,6 @@ const TableHeader: React.FC = () => {
   const sortOrder: Order | undefined = (query.order as Order) || undefined;
 
   const handleSort = (field: string) => {
-    // const order = (field === currentSort && sortOrder === Order.ASC) ? Order.DESC : Order.ASC;
     let order: Order | undefined = Order.ASC;
     if (field === currentSort && sortOrder === Order.ASC) {
       order = Order.DESC;
@@ -53,19 +60,20 @@ const TableHeader: React.FC = () => {
   type Column = {
     name: string;
     field: string;
+    sortable?: boolean;
   };
 
   const columns: Column[] = [
-    { name: 'Confirmation ID', field: 'confirmationId' },
-    { name: 'Funding Year', field: 'fundingYear' },
-    { name: 'Applicant Name', field: 'applicantName' },
-    { name: 'Application Type', field: 'applicationType.name' },
-    { name: 'Project Title', field: 'projectTitle' },
-    { name: 'Estimated Cost', field: 'totalEstimatedCost' },
-    { name: 'Asks', field: 'asks' },
-    { name: 'Assigned to', field: 'assignedTo.displayName' },
-    { name: 'Last Updated', field: 'updatedAt' },
-    { name: 'Status', field: 'status.name' },
+    { name: 'Confirmation ID', field: 'confirmationId', sortable: true },
+    { name: 'Funding Year', field: 'fundingYear', sortable: true },
+    { name: 'Applicant Name', field: 'applicantName', sortable: true },
+    { name: 'Application Type', field: 'applicationType.name', sortable: true },
+    { name: 'Project Title', field: 'projectTitle', sortable: true },
+    { name: 'Estimated Cost', field: 'totalEstimatedCost', sortable: true },
+    { name: 'Asks', field: 'asks', sortable: true },
+    { name: 'Assigned to', field: 'assignedTo.displayName', sortable: true },
+    { name: 'Last Updated', field: 'updatedAt', sortable: true },
+    { name: 'Status', field: 'status.name', sortable: true },
   ];
   const tdStyles =
     'table-td table-header cursor-pointer px-6 py-4 text-left text-sm font-strong border-b-2  border-bcYellowWarning';