Merge pull request #55 from Alternative-Die-Cutting-Inc/38-search-fun…

…ctionality

38 search functionality

.vscode/launch.json

@@ -1,33 +1,16 @@
 {
+  "version": "0.2.0",
   "configurations": [
     {
-      "type": "pwa-msedge",
-      "name": "Launch Microsoft Edge",
-      "request": "launch",
-      "runtimeArgs": ["--remote-debugging-port=9222"],
-      "url": "http://localhost:5173",
+      "name": "Launch Debugger",
+      "type": "firefox",
       "webRoot": "${workspaceFolder}/frontend/",
-      "presentation": {
-        "hidden": true
-      }
-    },
-    {
-      "type": "vscode-edge-devtools.debug",
-      "name": "Open Edge DevTools",
-      "request": "attach",
-      "url": "http://localhost:5173",
-      "presentation": {
-        "hidden": true
-      }
-    }
-  ],
-  "compounds": [
-    {
-      "name": "Launch Edge and attach DevTools",
-      "configurations": [
-        "Launch Microsoft Edge",
-        "Open Edge DevTools"
-      ]
+      "url": "http://localhost:5173/",
+      "skipFiles": [
+        "${workspaceFolder}/frontend/node_modules/**/*"
+      ],
+      "showConsoleCallLocation": true,
+      "request": "launch"
     }
   ]
 }

frontend/src/components/JobsTable/JobsTable.jsx

@@ -5,13 +5,16 @@ import {
   getCoreRowModel,
   flexRender,
   getPaginationRowModel,
+  getFilteredRowModel,
 } from "@tanstack/react-table";
-import { useMemo, useEffect } from "react";
+import { useMemo, useEffect, useState } from "react";
 import "../../scssStyles/tableStyle.scss";
 import { useDispatch, useSelector } from "react-redux";
 import { docketsSelector } from "../../state/dockets/docketSlice";
 import { getDockets } from "../../state/dockets/saga";
 import { Link } from "react-router-dom";
+import { PropTypes } from "prop-types";
+
 
 /**
  * The jobs table component.
@@ -29,7 +32,7 @@ const JobsTable = () => {
     () => [
       {
         header: "Docket Number",
-        accessorKey: "docketNumber",
+        accessorFn: (row) => row.docketNumber?.toString(),
         // eslint-disable-next-line react/prop-types
         cell: (value) => (
           <Link to={`/dockettool?docketNumber=${value.getValue()}`}>
@@ -39,7 +42,7 @@ const JobsTable = () => {
       },
       {
         header: "Quote Number",
-        accessorKey: "quoteNumber",
+        accessorFn: (row) => row.quoteNumber?.toString(),
         cell: (value) => (
           <Link to={`/quotetool?quoteNumber=${value.getValue()}`}>
             {value.getValue()}
@@ -48,8 +51,7 @@ const JobsTable = () => {
       },
       {
         header: "Customer",
-        accessorKey: "customer",
-        cell: (value) => value.getValue()?.name,
+        accessorFn: (row) => row.customer.name,
       },
       {
         header: "Customer PO",
@@ -65,42 +67,61 @@ const JobsTable = () => {
       },
       {
         header: "Finishing",
-        accessorKey: "finishing",
-        cell: (info) =>
-          info.getValue()?.reduce((a, b) => b.label + ", " + a, ""),
+        accessorFn: (row) =>
+          row.finishing?.reduce((a, b) => b.label + ", " + a, ""),
       },
       {
         header: "Special Instructions",
-        accessorKey: "specialInstructions",
+        accessorFn: (row) => row?.specialInstructions?.toString(),
       },
       {
         header: "Number of Units",
-        accessorKey: "numOfUnits",
+        accessorFn: (row) => row?.numOfUnits?.toString(),
       },
       {
         header: "Sold For",
-        accessorKey: "soldFor",
+        accessorFn: (row) => row?.soldFor?.toString(),
         cell: (value) =>
-          value.getValue()?.toLocaleString("en-CA", {
+          (parseFloat(value.getValue()) || 0).toLocaleString("en-CA", {
             style: "currency",
             currency: "CAD",
             currencyDisplay: "symbol",
           }),
       },
       {
         header: "Date Created",
-        accessorKey: "creationDate",
-        cell: (value) => new Date(value.getValue()).toLocaleDateString(),
+        id: "creationDate",
+        accessorFn: (row) => new Date(row.creationDate).toLocaleDateString(),
+        filterFn: (row, columnId, filterValue) => {
+          const [startDate, endDate] = filterValue;
+          if (startDate == "" && endDate == "") return true;
+          return (
+            Date.parse(startDate) <= Date.parse(row.getValue(columnId)) &&
+            Date.parse(row.getValue(columnId)) <= Date.parse(endDate)
+          );
+        },
       },
       {
         header: "Status",
-        accessorKey: "status",
-        cell: (value) => <StatusLabels values={value.getValue()} />,
+        enableColumnFilter: false,
+        accessorFn: (row) => row.status.map((status) => status.label).join(","),
+        cell: (value) => {
+          const labels = value.getValue()?.split(",");
+          return (
+            <StatusLabels
+              values={labels.map((status) => ({
+                label: status,
+                value: status,
+              }))}
+            />
+          );
+        },
       },
       {
         header: "Shipping",
         accessorKey: "docketNumber",
         id: "shipping",
+        enableColumnFilter: false,
         cell: (value) => (
           <Link to={`/shipments?docketNumber=${value.getValue()}`}>
             Make New Shipment
@@ -110,7 +131,8 @@ const JobsTable = () => {
     ],
     []
   );
-
+  const [globalFilter, setGlobalFilter] = useState("");
+  const [columnFilters, setColumnFilters] = useState([]);
   const {
     getHeaderGroups,
     getRowModel,
@@ -127,26 +149,51 @@ const JobsTable = () => {
     data: dockets || [],
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      globalFilter,
+      columnFilters,
+    },
     autoResetPageIndex: true,
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnFiltersChange: setColumnFilters,
   });
 
   return (
     <>
+      <div className="global-search">
+        <label htmlFor="globalFilter">
+          Search:{" "}
+          <input
+            name="globalFilter"
+            type="text"
+            value={globalFilter}
+            onChange={(event) => {
+              setGlobalFilter(event.target.value);
+            }}
+          />
+        </label>
+      </div>
       <table>
         <thead>
           {getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
-                    {header.isPlaceholder ? null : (
-                      <div>
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      </div>
-                    )}
+                    <div className="header-container">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                      {header.column.getCanFilter() ? (
+                        <div>
+                          <TableFilter column={header.column} />
+                        </div>
+                      ) : null}
+                    </div>
                   </th>
                 );
               })}
@@ -196,4 +243,39 @@ const JobsTable = () => {
   );
 };
 
+function TableFilter({ column }) {
+  const columnFilterValue = column.getFilterValue();
+  if (column.id == "creationDate") {
+    return (
+      <>
+        <input
+          className="filter-input"
+          type="date"
+          onChange={(event) => {
+            column.setFilterValue((old) => [event.target.value, old?.[1]]);
+          }}
+        />
+        <input
+          className="filter-input"
+          type="date"
+          onChange={(event) => {
+            column.setFilterValue((old) => [old?.[0], event.target.value]);
+          }}
+        />
+      </>
+    );
+  } else {
+    return (
+      <input
+        className="filter-input"
+        type="text"
+        value={columnFilterValue ?? ""}
+        onChange={(event) => column.setFilterValue(event.target.value)}
+      />
+    );
+  }
+}
+TableFilter.propTypes = {
+  column: PropTypes.any,
+};
 export { JobsTable };