From 8b67154f32955e722a991253683628bb63c39ee4 Mon Sep 17 00:00:00 2001
From: harryob <55142896+harryob@users.noreply.github.com>
Date: Fri, 22 Nov 2024 19:04:47 +0000
Subject: [PATCH] adds from/to fields for ticket searching

---
 package-lock.json             | 22 +++++++--
 package.json                  |  3 +-
 src/components/userLookup.tsx | 89 +++++++++++++++++++++++++++--------
 3 files changed, 90 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e9176f0..3d55a33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.27.0"
+        "react-router-dom": "^6.27.0",
+        "use-debounce": "^10.0.4"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -2039,10 +2040,11 @@
       "dev": true
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -5300,6 +5302,18 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
+      "integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 22b02d7..64dad66 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.27.0"
+    "react-router-dom": "^6.27.0",
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/src/components/userLookup.tsx b/src/components/userLookup.tsx
index 79a0af1..22bd486 100644
--- a/src/components/userLookup.tsx
+++ b/src/components/userLookup.tsx
@@ -21,6 +21,7 @@ import { useLoaderData, useNavigate } from "react-router-dom";
 import { NameExpand } from "./nameExpand";
 import { Ticket } from "../types/ticket";
 import { TicketModal } from "./ticketmodal";
+import { useDebounce } from "use-debounce";
 
 type ActiveLookupType = {
   updateUser: (_args: UpdateUserArguments) => void;
@@ -426,44 +427,94 @@ const UserTickets = (props: { ckey: string }) => {
   const [activePage, setActivePage] = useState(1);
   const [errored, setErrored] = useState(false);
 
-  const glob = useContext(GlobalContext);
+  const [fromDate, setFromDate] = useState<Date>();
+  const [toDate, setToDate] = useState<Date>();
+
+  const [debouncedFrom] = useDebounce(fromDate, 500);
+  const [debouncedTo] = useDebounce(toDate, 500);
+
+  const glob = useContext(GlobalContext)!;
+
+  const { updateAndShowToast } = glob;
+
+  const { ckey } = props;
+
+  const encodeDate = (date: Date) => {
+    return date.toISOString().slice(0, 19).replace("T", " ");
+  };
 
   useEffect(() => {
     if (page != activePage) {
       setTicketData(undefined);
     }
-    if (!tickets && !errored) {
-      callApi(`/Ticket/User/${props.ckey}/?page=${page}`).then((value) => {
-        if (value.status != 200) {
-          glob?.updateAndShowToast("No more tickets.");
-          if (page == 1) {
-            setErrored(true);
-          } else {
-            setPage(page - 1);
+
+    if ((debouncedFrom && !debouncedTo) || (!debouncedFrom && debouncedTo))
+      return;
+
+    if (!errored) {
+      let dateString = "";
+      if (debouncedFrom && debouncedTo) {
+        const to = new Date(debouncedTo);
+        to.setUTCHours(23, 59, 59);
+        dateString = `&from=${encodeDate(debouncedFrom)}&to=${encodeDate(to)}`;
+      }
+      callApi(`/Ticket/User/${ckey}/?page=${page}${dateString}`).then(
+        (value) => {
+          if (value.status != 200) {
+            updateAndShowToast("No more tickets.");
+            if (page == 1) {
+              setErrored(true);
+            } else {
+              setPage(page - 1);
+            }
+            return;
           }
-          return;
-        }
 
-        value.json().then((json) => {
-          setTicketData(json);
-          setActivePage(page);
-        });
-      });
+          value.json().then((json) => {
+            setTicketData(json);
+            setActivePage(page);
+          });
+        }
+      );
     }
   }, [
-    tickets,
     setTicketData,
     page,
     setPage,
-    props,
+    ckey,
     activePage,
     setActivePage,
-    glob,
+    updateAndShowToast,
     errored,
+
+    debouncedFrom,
+    debouncedTo,
   ]);
 
   return (
     <div className="flex flex-col gap-2">
+      <div className="flex flex-row justify-center gap-3">
+        <div className="flex flex-row gap-1">
+          From:
+          <input
+            type="date"
+            onChange={(val) => {
+              const date = val.target.valueAsDate;
+              if (date) setFromDate(date);
+            }}
+          />
+        </div>
+        <div className="flex flex-row gap-1">
+          To:
+          <input
+            type="date"
+            onChange={(val) => {
+              const date = val.target.valueAsDate;
+              if (date) setToDate(date);
+            }}
+          />
+        </div>
+      </div>
       <div className="flex flex-row justify-center gap-3">
         {page > 1 && (
           <LinkColor