BCAT-541 | add sort header

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);

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 {

client/components/form/ApplicationTable.tsx

@@ -1,34 +1,93 @@
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
 import { ApplicationTableProps } from '../../constants/interfaces';
 import { formatDate } from 'utils';
 
 type Props = { applications: ApplicationTableProps[] };
+enum Order {
+  ASC = 'ASC',
+  DESC = 'DESC',
+}
+
+enum OrderBy {
+  CONFIRMATION_ID = 'confirmationId',
+  ASSIGNED_TO = 'assignedTo',
+  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 = () => {
-  const headers = [
-    'Confirmation ID',
-    'Funding Year',
-    'Applicant Name',
-    'Application Type',
-    'Project Title',
-    'Estimated Cost',
-    'Asks',
-    'Assigned to',
-    'Last Updated',
-    'Status',
+  const router = useRouter();
+  const { query } = router;
+  const currentSort: OrderBy | '' = (query.orderBy as OrderBy) || '';
+  const sortOrder: Order | undefined = (query.order as Order) || undefined;
+
+  const handleSort = (field: string) => {
+    let order: Order | undefined = Order.ASC;
+    if (field === currentSort && sortOrder === Order.ASC) {
+      order = Order.DESC;
+    } else if (field === currentSort && sortOrder === Order.DESC) {
+      order = undefined;
+    }
+    const newQuery = { ...query };
+    if (order) {
+      newQuery.orderBy = field;
+      newQuery.order = order;
+    } else {
+      delete newQuery.orderBy;
+      delete newQuery.order;
+    }
+    router.push({ query: newQuery });
+  };
+
+  const getSortIcon = (field: string) => {
+    if (field === currentSort) {
+      return sortOrder === Order.ASC ? '↑' : sortOrder === Order.DESC ? '↓' : '';
+    }
+    return '';
+  };
+
+  type Column = {
+    name: string;
+    field: string;
+    sortable?: boolean;
+  };
+
+  const columns: Column[] = [
+    { 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 px-6 py-4 text-left text-sm font-strong border-b-2  border-bcYellowWarning';
+    'table-td table-header cursor-pointer px-6 py-4 text-left text-sm font-strong border-b-2  border-bcYellowWarning';
+
+  const headers = useMemo(() => {
+    return columns.map(({ name, field }) => (
+      <th key={field} className={tdStyles} onClick={() => handleSort(field)}>
+        {name} {getSortIcon(field)}
+      </th>
+    ));
+  }, [columns, currentSort, sortOrder]);
   return (
     <thead className='border-b bg-bcGrayInput table-header'>
-      <tr>
-        {headers &&
-          headers.map((title: string, index: number) => (
-            <th key={`th${index}`} className={tdStyles}>
-              {title}
-            </th>
-          ))}
-      </tr>
+      <tr>{headers}</tr>
     </thead>
   );
 };