From 9637f4e8f786017e5a93fb24bd9ec3ae8707cd0d Mon Sep 17 00:00:00 2001
From: Dan Gowans <d.gowans@cityssm.on.ca>
Date: Thu, 29 Dec 2022 13:30:07 -0500
Subject: [PATCH] refactoring

---
 .../workOrders-post/doSearchWorkOrders.js     |   1 +
 .../workOrders-post/doSearchWorkOrders.ts     |   1 +
 public-typescript/workOrderSearch.js          | 316 ++++++++--------
 public-typescript/workOrderSearch.ts          | 358 +++++++++---------
 public/javascripts/workOrderSearch.min.js     |   2 +-
 5 files changed, 340 insertions(+), 338 deletions(-)

diff --git a/handlers/workOrders-post/doSearchWorkOrders.js b/handlers/workOrders-post/doSearchWorkOrders.js
index 710c3963..ece6d706 100644
--- a/handlers/workOrders-post/doSearchWorkOrders.js
+++ b/handlers/workOrders-post/doSearchWorkOrders.js
@@ -7,6 +7,7 @@ export const handler = async (request, response) => {
     });
     response.json({
         count: result.count,
+        offset: Number.parseInt(request.body.offset, 10),
         workOrders: result.workOrders
     });
 };
diff --git a/handlers/workOrders-post/doSearchWorkOrders.ts b/handlers/workOrders-post/doSearchWorkOrders.ts
index 721b13b2..024e1f9a 100644
--- a/handlers/workOrders-post/doSearchWorkOrders.ts
+++ b/handlers/workOrders-post/doSearchWorkOrders.ts
@@ -11,6 +11,7 @@ export const handler: RequestHandler = async (request, response) => {
 
     response.json({
         count: result.count,
+        offset: Number.parseInt(request.body.offset, 10),
         workOrders: result.workOrders
     });
 };
diff --git a/public-typescript/workOrderSearch.js b/public-typescript/workOrderSearch.js
index a14039ce..7426f955 100644
--- a/public-typescript/workOrderSearch.js
+++ b/public-typescript/workOrderSearch.js
@@ -9,175 +9,175 @@ Object.defineProperty(exports, "__esModule", { value: true });
     const searchResultsContainerElement = document.querySelector("#container--searchResults");
     const limit = Number.parseInt(document.querySelector("#searchFilter--limit").value, 10);
     const offsetElement = document.querySelector("#searchFilter--offset");
-    const getWorkOrders = () => {
-        const offset = Number.parseInt(offsetElement.value, 10);
+    function renderWorkOrders(responseJSON) {
+        if (responseJSON.workOrders.length === 0) {
+            searchResultsContainerElement.innerHTML =
+                '<div class="message is-info">' +
+                    '<p class="message-body">There are no work orders that meet the search criteria.</p>' +
+                    "</div>";
+            return;
+        }
+        const resultsTbodyElement = document.createElement("tbody");
+        for (const workOrder of responseJSON.workOrders) {
+            let relatedHTML = "";
+            for (const lot of workOrder.workOrderLots) {
+                relatedHTML +=
+                    '<span class="has-tooltip-left" data-tooltip="' +
+                        cityssm.escapeHTML(lot.mapName || "") +
+                        '">' +
+                        '<i class="fas fa-fw fa-vector-square" aria-label="' +
+                        cityssm.escapeHTML(exports.aliases.lot) +
+                        '"></i> ' +
+                        cityssm.escapeHTML(lot.lotName || "(No Lot Name)") +
+                        "</span><br />";
+            }
+            for (const occupancy of workOrder.workOrderLotOccupancies) {
+                for (const occupant of occupancy.lotOccupancyOccupants) {
+                    relatedHTML +=
+                        '<span class="has-tooltip-left" data-tooltip="' +
+                            cityssm.escapeHTML(occupant.lotOccupantType || "") +
+                            '">' +
+                            '<i class="fas fa-fw fa-' + cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + '" aria-label="' +
+                            cityssm.escapeHTML(exports.aliases.occupant) +
+                            '"></i> ' +
+                            cityssm.escapeHTML(occupant.occupantName || "(No Name)") +
+                            "</span><br />";
+                }
+            }
+            resultsTbodyElement.insertAdjacentHTML("beforeend", "<tr>" +
+                ("<td>" +
+                    '<a class="has-text-weight-bold" href="' +
+                    los.urlPrefix +
+                    "/workOrders/" +
+                    workOrder.workOrderId +
+                    '">' +
+                    (workOrder.workOrderNumber.trim()
+                        ? cityssm.escapeHTML(workOrder.workOrderNumber || "")
+                        : "(No Number)") +
+                    "</a>" +
+                    "</td>") +
+                ("<td>" +
+                    cityssm.escapeHTML(workOrder.workOrderType || "") +
+                    "<br />" +
+                    '<span class="is-size-7">' +
+                    cityssm.escapeHTML(workOrder.workOrderDescription || "") +
+                    "</span>" +
+                    "</td>") +
+                ('<td class="is-nowrap"><span class="is-size-7">' +
+                    relatedHTML +
+                    "</span></td>") +
+                ('<td class="is-nowrap">' +
+                    ('<span class="has-tooltip-left" data-tooltip="' +
+                        cityssm.escapeHTML(exports.aliases.workOrderOpenDate) +
+                        '">' +
+                        '<i class="fas fa-fw fa-play" aria-label="' +
+                        cityssm.escapeHTML(exports.aliases.workOrderOpenDate) +
+                        '"></i> ' +
+                        workOrder.workOrderOpenDateString +
+                        "</span><br />") +
+                    ('<span class="has-tooltip-left" data-tooltip="' +
+                        cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
+                        '">' +
+                        '<i class="fas fa-fw fa-stop" aria-label="' +
+                        cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
+                        '"></i> ' +
+                        (workOrder.workOrderCloseDate
+                            ? workOrder.workOrderCloseDateString
+                            : '<span class="has-text-grey">(No ' +
+                                cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
+                                ")</span>") +
+                        "</span>") +
+                    "</td>") +
+                ("<td>" +
+                    (workOrder.workOrderMilestoneCount === 0
+                        ? "-"
+                        : workOrder.workOrderMilestoneCompletionCount +
+                            " / " +
+                            workOrder.workOrderMilestoneCount) +
+                    "</td>") +
+                (workOrderPrints.length > 0
+                    ? "<td>" +
+                        '<a class="button is-small" data-tooltip="Print" href="' +
+                        los.urlPrefix +
+                        "/print/" +
+                        workOrderPrints[0] +
+                        "/?workOrderId=" +
+                        workOrder.workOrderId +
+                        '" target="_blank">' +
+                        '<i class="fas fa-print" aria-label="Print"></i>' +
+                        "</a>" +
+                        "</td>"
+                    : "") +
+                "</tr>");
+        }
+        searchResultsContainerElement.innerHTML =
+            '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
+                "<thead><tr>" +
+                "<th>Work Order Number</th>" +
+                "<th>Description</th>" +
+                "<th>Related</th>" +
+                "<th>Date</th>" +
+                '<th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>' +
+                (workOrderPrints.length > 0 ? '<th class="has-width-1"></th>' : "") +
+                "</tr></thead>" +
+                "<table>" +
+                '<div class="level">' +
+                ('<div class="level-left">' +
+                    '<div class="level-item has-text-weight-bold">' +
+                    "Displaying " +
+                    (responseJSON.offset + 1).toString() +
+                    " to " +
+                    Math.min(responseJSON.count, limit + responseJSON.offset) +
+                    " of " +
+                    responseJSON.count +
+                    "</div>" +
+                    "</div>") +
+                ('<div class="level-right">' +
+                    (responseJSON.offset > 0
+                        ? '<div class="level-item">' +
+                            '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
+                            '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
+                            "</button>" +
+                            "</div>"
+                        : "") +
+                    (limit + responseJSON.offset < responseJSON.count
+                        ? '<div class="level-item">' +
+                            '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
+                            "<span>Next</span>" +
+                            '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
+                            "</button>" +
+                            "</div>"
+                        : "") +
+                    "</div>") +
+                "</div>";
+        searchResultsContainerElement.querySelector("table").append(resultsTbodyElement);
+        if (responseJSON.offset > 0) {
+            searchResultsContainerElement.querySelector("button[data-page='previous']").addEventListener("click", previousAndGetWorkOrders);
+        }
+        if (limit + responseJSON.offset < responseJSON.count) {
+            searchResultsContainerElement.querySelector("button[data-page='next']").addEventListener("click", nextAndGetWorkOrders);
+        }
+    }
+    function getWorkOrders() {
         searchResultsContainerElement.innerHTML =
             '<div class="has-text-grey has-text-centered">' +
                 '<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />' +
                 "Loading Work Orders..." +
                 "</div>";
-        cityssm.postJSON(los.urlPrefix + "/workOrders/doSearchWorkOrders", searchFilterFormElement, (responseJSON) => {
-            if (responseJSON.workOrders.length === 0) {
-                searchResultsContainerElement.innerHTML =
-                    '<div class="message is-info">' +
-                        '<p class="message-body">There are no work orders that meet the search criteria.</p>' +
-                        "</div>";
-                return;
-            }
-            const resultsTbodyElement = document.createElement("tbody");
-            for (const workOrder of responseJSON.workOrders) {
-                let relatedHTML = "";
-                for (const lot of workOrder.workOrderLots) {
-                    relatedHTML +=
-                        '<span class="has-tooltip-left" data-tooltip="' +
-                            cityssm.escapeHTML(lot.mapName || "") +
-                            '">' +
-                            '<i class="fas fa-fw fa-vector-square" aria-label="' +
-                            cityssm.escapeHTML(exports.aliases.lot) +
-                            '"></i> ' +
-                            cityssm.escapeHTML(lot.lotName || "(No Lot Name)") +
-                            "</span><br />";
-                }
-                for (const occupancy of workOrder.workOrderLotOccupancies) {
-                    for (const occupant of occupancy.lotOccupancyOccupants) {
-                        relatedHTML +=
-                            '<span class="has-tooltip-left" data-tooltip="' +
-                                cityssm.escapeHTML(occupant.lotOccupantType || "") +
-                                '">' +
-                                '<i class="fas fa-fw fa-' + cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + '" aria-label="' +
-                                cityssm.escapeHTML(exports.aliases.occupant) +
-                                '"></i> ' +
-                                cityssm.escapeHTML(occupant.occupantName || "(No Name)") +
-                                "</span><br />";
-                    }
-                }
-                resultsTbodyElement.insertAdjacentHTML("beforeend", "<tr>" +
-                    ("<td>" +
-                        '<a class="has-text-weight-bold" href="' +
-                        los.urlPrefix +
-                        "/workOrders/" +
-                        workOrder.workOrderId +
-                        '">' +
-                        (workOrder.workOrderNumber.trim()
-                            ? cityssm.escapeHTML(workOrder.workOrderNumber || "")
-                            : "(No Number)") +
-                        "</a>" +
-                        "</td>") +
-                    ("<td>" +
-                        cityssm.escapeHTML(workOrder.workOrderType || "") +
-                        "<br />" +
-                        '<span class="is-size-7">' +
-                        cityssm.escapeHTML(workOrder.workOrderDescription || "") +
-                        "</span>" +
-                        "</td>") +
-                    ('<td class="is-nowrap"><span class="is-size-7">' +
-                        relatedHTML +
-                        "</span></td>") +
-                    ('<td class="is-nowrap">' +
-                        ('<span class="has-tooltip-left" data-tooltip="' +
-                            cityssm.escapeHTML(exports.aliases.workOrderOpenDate) +
-                            '">' +
-                            '<i class="fas fa-fw fa-play" aria-label="' +
-                            cityssm.escapeHTML(exports.aliases.workOrderOpenDate) +
-                            '"></i> ' +
-                            workOrder.workOrderOpenDateString +
-                            "</span><br />") +
-                        ('<span class="has-tooltip-left" data-tooltip="' +
-                            cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
-                            '">' +
-                            '<i class="fas fa-fw fa-stop" aria-label="' +
-                            cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
-                            '"></i> ' +
-                            (workOrder.workOrderCloseDate
-                                ? workOrder.workOrderCloseDateString
-                                : '<span class="has-text-grey">(No ' +
-                                    cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
-                                    ")</span>") +
-                            "</span>") +
-                        "</td>") +
-                    ("<td>" +
-                        (workOrder.workOrderMilestoneCount === 0
-                            ? "-"
-                            : workOrder.workOrderMilestoneCompletionCount +
-                                " / " +
-                                workOrder.workOrderMilestoneCount) +
-                        "</td>") +
-                    (workOrderPrints.length > 0
-                        ? "<td>" +
-                            '<a class="button is-small" data-tooltip="Print" href="' +
-                            los.urlPrefix +
-                            "/print/" +
-                            workOrderPrints[0] +
-                            "/?workOrderId=" +
-                            workOrder.workOrderId +
-                            '" target="_blank">' +
-                            '<i class="fas fa-print" aria-label="Print"></i>' +
-                            "</a>" +
-                            "</td>"
-                        : "") +
-                    "</tr>");
-            }
-            searchResultsContainerElement.innerHTML =
-                '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
-                    "<thead><tr>" +
-                    "<th>Work Order Number</th>" +
-                    "<th>Description</th>" +
-                    "<th>Related</th>" +
-                    "<th>Date</th>" +
-                    '<th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>' +
-                    (workOrderPrints.length > 0 ? '<th class="has-width-1"></th>' : "") +
-                    "</tr></thead>" +
-                    "<table>" +
-                    '<div class="level">' +
-                    ('<div class="level-left">' +
-                        '<div class="level-item has-text-weight-bold">' +
-                        "Displaying " +
-                        (offset + 1).toString() +
-                        " to " +
-                        Math.min(responseJSON.count, limit + offset) +
-                        " of " +
-                        responseJSON.count +
-                        "</div>" +
-                        "</div>") +
-                    ('<div class="level-right">' +
-                        (offset > 0
-                            ? '<div class="level-item">' +
-                                '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
-                                '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
-                                "</button>" +
-                                "</div>"
-                            : "") +
-                        (limit + offset < responseJSON.count
-                            ? '<div class="level-item">' +
-                                '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
-                                "<span>Next</span>" +
-                                '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
-                                "</button>" +
-                                "</div>"
-                            : "") +
-                        "</div>") +
-                    "</div>";
-            searchResultsContainerElement.querySelector("table").append(resultsTbodyElement);
-            if (offset > 0) {
-                searchResultsContainerElement.querySelector("button[data-page='previous']").addEventListener("click", previousAndGetWorkOrders);
-            }
-            if (limit + offset < responseJSON.count) {
-                searchResultsContainerElement.querySelector("button[data-page='next']").addEventListener("click", nextAndGetWorkOrders);
-            }
-        });
-    };
-    const resetOffsetAndGetWorkOrders = () => {
+        cityssm.postJSON(los.urlPrefix + "/workOrders/doSearchWorkOrders", searchFilterFormElement, renderWorkOrders);
+    }
+    function resetOffsetAndGetWorkOrders() {
         offsetElement.value = "0";
         getWorkOrders();
-    };
-    const previousAndGetWorkOrders = () => {
+    }
+    function previousAndGetWorkOrders() {
         offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) - limit, 0).toString();
         getWorkOrders();
-    };
-    const nextAndGetWorkOrders = () => {
+    }
+    function nextAndGetWorkOrders() {
         offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
         getWorkOrders();
-    };
+    }
     const filterElements = searchFilterFormElement.querySelectorAll("input, select");
     for (const filterElement of filterElements) {
         filterElement.addEventListener("change", resetOffsetAndGetWorkOrders);
diff --git a/public-typescript/workOrderSearch.ts b/public-typescript/workOrderSearch.ts
index e5747d4c..c9b7ef16 100644
--- a/public-typescript/workOrderSearch.ts
+++ b/public-typescript/workOrderSearch.ts
@@ -28,9 +28,178 @@ declare const cityssm: cityssmGlobal;
 
     const offsetElement = document.querySelector("#searchFilter--offset") as HTMLInputElement;
 
-    const getWorkOrders = () => {
-        const offset = Number.parseInt(offsetElement.value, 10);
+    function renderWorkOrders(responseJSON: { count: number; offset: number; workOrders: recordTypes.WorkOrder[]; }) {
+        if (responseJSON.workOrders.length === 0) {
+            searchResultsContainerElement.innerHTML =
+                '<div class="message is-info">' +
+                '<p class="message-body">There are no work orders that meet the search criteria.</p>' +
+                "</div>";
 
+            return;
+        }
+
+        const resultsTbodyElement = document.createElement("tbody");
+
+        for (const workOrder of responseJSON.workOrders) {
+            let relatedHTML = "";
+
+            for (const lot of workOrder.workOrderLots!) {
+                relatedHTML +=
+                    '<span class="has-tooltip-left" data-tooltip="' +
+                    cityssm.escapeHTML(lot.mapName || "") +
+                    '">' +
+                    '<i class="fas fa-fw fa-vector-square" aria-label="' +
+                    cityssm.escapeHTML(exports.aliases.lot) +
+                    '"></i> ' +
+                    cityssm.escapeHTML(lot.lotName || "(No Lot Name)") +
+                    "</span><br />";
+            }
+
+            for (const occupancy of workOrder.workOrderLotOccupancies!) {
+                for (const occupant of occupancy.lotOccupancyOccupants!) {
+                    relatedHTML +=
+                        '<span class="has-tooltip-left" data-tooltip="' +
+                        cityssm.escapeHTML(occupant.lotOccupantType || "") +
+                        '">' +
+                        '<i class="fas fa-fw fa-' + cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + '" aria-label="' +
+                        cityssm.escapeHTML(exports.aliases.occupant) +
+                        '"></i> ' +
+                        cityssm.escapeHTML(occupant.occupantName || "(No Name)") +
+                        "</span><br />";
+                }
+            }
+
+            resultsTbodyElement.insertAdjacentHTML(
+                "beforeend",
+                "<tr>" +
+                ("<td>" +
+                    '<a class="has-text-weight-bold" href="' +
+                    los.urlPrefix +
+                    "/workOrders/" +
+                    workOrder.workOrderId +
+                    '">' +
+                    (workOrder.workOrderNumber!.trim()
+                        ? cityssm.escapeHTML(workOrder.workOrderNumber || "")
+                        : "(No Number)") +
+                    "</a>" +
+                    "</td>") +
+                ("<td>" +
+                    cityssm.escapeHTML(workOrder.workOrderType || "") +
+                    "<br />" +
+                    '<span class="is-size-7">' +
+                    cityssm.escapeHTML(workOrder.workOrderDescription || "") +
+                    "</span>" +
+                    "</td>") +
+                ('<td class="is-nowrap"><span class="is-size-7">' +
+                    relatedHTML +
+                    "</span></td>") +
+                ('<td class="is-nowrap">' +
+                    ('<span class="has-tooltip-left" data-tooltip="' +
+                        cityssm.escapeHTML(exports.aliases.workOrderOpenDate) +
+                        '">' +
+                        '<i class="fas fa-fw fa-play" aria-label="' +
+                        cityssm.escapeHTML(exports.aliases.workOrderOpenDate) +
+                        '"></i> ' +
+                        workOrder.workOrderOpenDateString +
+                        "</span><br />") +
+                    ('<span class="has-tooltip-left" data-tooltip="' +
+                        cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
+                        '">' +
+                        '<i class="fas fa-fw fa-stop" aria-label="' +
+                        cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
+                        '"></i> ' +
+                        (workOrder.workOrderCloseDate
+                            ? workOrder.workOrderCloseDateString
+                            : '<span class="has-text-grey">(No ' +
+                            cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
+                            ")</span>") +
+                        "</span>") +
+                    "</td>") +
+                ("<td>" +
+                    (workOrder.workOrderMilestoneCount === 0
+                        ? "-"
+                        : workOrder.workOrderMilestoneCompletionCount +
+                        " / " +
+                        workOrder.workOrderMilestoneCount) +
+                    "</td>") +
+                (workOrderPrints.length > 0
+                    ? "<td>" +
+                    '<a class="button is-small" data-tooltip="Print" href="' +
+                    los.urlPrefix +
+                    "/print/" +
+                    workOrderPrints[0] +
+                    "/?workOrderId=" +
+                    workOrder.workOrderId +
+                    '" target="_blank">' +
+                    '<i class="fas fa-print" aria-label="Print"></i>' +
+                    "</a>" +
+                    "</td>"
+                    : "") +
+                "</tr>"
+            );
+        }
+
+        searchResultsContainerElement.innerHTML =
+            '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
+            "<thead><tr>" +
+            "<th>Work Order Number</th>" +
+            "<th>Description</th>" +
+            "<th>Related</th>" +
+            "<th>Date</th>" +
+            '<th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>' +
+            (workOrderPrints.length > 0 ? '<th class="has-width-1"></th>' : "") +
+            "</tr></thead>" +
+            "<table>" +
+            '<div class="level">' +
+            ('<div class="level-left">' +
+                '<div class="level-item has-text-weight-bold">' +
+                "Displaying " +
+                (responseJSON.offset + 1).toString() +
+                " to " +
+                Math.min(responseJSON.count, limit + responseJSON.offset) +
+                " of " +
+                responseJSON.count +
+                "</div>" +
+                "</div>") +
+            ('<div class="level-right">' +
+                (responseJSON.offset > 0
+                    ? '<div class="level-item">' +
+                    '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
+                    '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
+                    "</button>" +
+                    "</div>"
+                    : "") +
+                (limit + responseJSON.offset < responseJSON.count
+                    ? '<div class="level-item">' +
+                    '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
+                    "<span>Next</span>" +
+                    '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
+                    "</button>" +
+                    "</div>"
+                    : "") +
+                "</div>") +
+            "</div>";
+
+        searchResultsContainerElement.querySelector("table")!.append(resultsTbodyElement);
+
+        if (responseJSON.offset > 0) {
+            (
+                searchResultsContainerElement.querySelector(
+                    "button[data-page='previous']"
+                ) as HTMLButtonElement
+            ).addEventListener("click", previousAndGetWorkOrders);
+        }
+
+        if (limit + responseJSON.offset < responseJSON.count) {
+            (
+                searchResultsContainerElement.querySelector(
+                    "button[data-page='next']"
+                ) as HTMLButtonElement
+            ).addEventListener("click", nextAndGetWorkOrders);
+        }
+    }
+
+    function getWorkOrders() {
         searchResultsContainerElement.innerHTML =
             '<div class="has-text-grey has-text-centered">' +
             '<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />' +
@@ -40,196 +209,27 @@ declare const cityssm: cityssmGlobal;
         cityssm.postJSON(
             los.urlPrefix + "/workOrders/doSearchWorkOrders",
             searchFilterFormElement,
-            (responseJSON: { count: number; workOrders: recordTypes.WorkOrder[] }) => {
-                if (responseJSON.workOrders.length === 0) {
-                    searchResultsContainerElement.innerHTML =
-                        '<div class="message is-info">' +
-                        '<p class="message-body">There are no work orders that meet the search criteria.</p>' +
-                        "</div>";
-
-                    return;
-                }
-
-                const resultsTbodyElement = document.createElement("tbody");
-
-                for (const workOrder of responseJSON.workOrders) {
-                    let relatedHTML = "";
-
-                    for (const lot of workOrder.workOrderLots!) {
-                        relatedHTML +=
-                            '<span class="has-tooltip-left" data-tooltip="' +
-                            cityssm.escapeHTML(lot.mapName || "") +
-                            '">' +
-                            '<i class="fas fa-fw fa-vector-square" aria-label="' +
-                            cityssm.escapeHTML(exports.aliases.lot) +
-                            '"></i> ' +
-                            cityssm.escapeHTML(lot.lotName || "(No Lot Name)") +
-                            "</span><br />";
-                    }
-
-                    for (const occupancy of workOrder.workOrderLotOccupancies!) {
-                        for (const occupant of occupancy.lotOccupancyOccupants!) {
-                            relatedHTML +=
-                                '<span class="has-tooltip-left" data-tooltip="' +
-                                cityssm.escapeHTML(occupant.lotOccupantType || "") +
-                                '">' +
-                                '<i class="fas fa-fw fa-' + cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + '" aria-label="' +
-                                cityssm.escapeHTML(exports.aliases.occupant) +
-                                '"></i> ' +
-                                cityssm.escapeHTML(occupant.occupantName || "(No Name)") +
-                                "</span><br />";
-                        }
-                    }
-
-                    resultsTbodyElement.insertAdjacentHTML(
-                        "beforeend",
-                        "<tr>" +
-                            ("<td>" +
-                                '<a class="has-text-weight-bold" href="' +
-                                los.urlPrefix +
-                                "/workOrders/" +
-                                workOrder.workOrderId +
-                                '">' +
-                                (workOrder.workOrderNumber!.trim()
-                                    ? cityssm.escapeHTML(workOrder.workOrderNumber || "")
-                                    : "(No Number)") +
-                                "</a>" +
-                                "</td>") +
-                            ("<td>" +
-                                cityssm.escapeHTML(workOrder.workOrderType || "") +
-                                "<br />" +
-                                '<span class="is-size-7">' +
-                                cityssm.escapeHTML(workOrder.workOrderDescription || "") +
-                                "</span>" +
-                                "</td>") +
-                            ('<td class="is-nowrap"><span class="is-size-7">' +
-                                relatedHTML +
-                                "</span></td>") +
-                            ('<td class="is-nowrap">' +
-                                ('<span class="has-tooltip-left" data-tooltip="' +
-                                    cityssm.escapeHTML(exports.aliases.workOrderOpenDate) +
-                                    '">' +
-                                    '<i class="fas fa-fw fa-play" aria-label="' +
-                                    cityssm.escapeHTML(exports.aliases.workOrderOpenDate) +
-                                    '"></i> ' +
-                                    workOrder.workOrderOpenDateString +
-                                    "</span><br />") +
-                                ('<span class="has-tooltip-left" data-tooltip="' +
-                                    cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
-                                    '">' +
-                                    '<i class="fas fa-fw fa-stop" aria-label="' +
-                                    cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
-                                    '"></i> ' +
-                                    (workOrder.workOrderCloseDate
-                                        ? workOrder.workOrderCloseDateString
-                                        : '<span class="has-text-grey">(No ' +
-                                          cityssm.escapeHTML(exports.aliases.workOrderCloseDate) +
-                                          ")</span>") +
-                                    "</span>") +
-                                "</td>") +
-                            ("<td>" +
-                                (workOrder.workOrderMilestoneCount === 0
-                                    ? "-"
-                                    : workOrder.workOrderMilestoneCompletionCount +
-                                      " / " +
-                                      workOrder.workOrderMilestoneCount) +
-                                "</td>") +
-                            (workOrderPrints.length > 0
-                                ? "<td>" +
-                                  '<a class="button is-small" data-tooltip="Print" href="' +
-                                  los.urlPrefix +
-                                  "/print/" +
-                                  workOrderPrints[0] +
-                                  "/?workOrderId=" +
-                                  workOrder.workOrderId +
-                                  '" target="_blank">' +
-                                  '<i class="fas fa-print" aria-label="Print"></i>' +
-                                  "</a>" +
-                                  "</td>"
-                                : "") +
-                            "</tr>"
-                    );
-                }
-
-                searchResultsContainerElement.innerHTML =
-                    '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
-                    "<thead><tr>" +
-                    "<th>Work Order Number</th>" +
-                    "<th>Description</th>" +
-                    "<th>Related</th>" +
-                    "<th>Date</th>" +
-                    '<th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>' +
-                    (workOrderPrints.length > 0 ? '<th class="has-width-1"></th>' : "") +
-                    "</tr></thead>" +
-                    "<table>" +
-                    '<div class="level">' +
-                    ('<div class="level-left">' +
-                        '<div class="level-item has-text-weight-bold">' +
-                        "Displaying " +
-                        (offset + 1).toString() +
-                        " to " +
-                        Math.min(responseJSON.count, limit + offset) +
-                        " of " +
-                        responseJSON.count +
-                        "</div>" +
-                        "</div>") +
-                    ('<div class="level-right">' +
-                        (offset > 0
-                            ? '<div class="level-item">' +
-                              '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
-                              '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
-                              "</button>" +
-                              "</div>"
-                            : "") +
-                        (limit + offset < responseJSON.count
-                            ? '<div class="level-item">' +
-                              '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
-                              "<span>Next</span>" +
-                              '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
-                              "</button>" +
-                              "</div>"
-                            : "") +
-                        "</div>") +
-                    "</div>";
-
-                searchResultsContainerElement.querySelector("table")!.append(resultsTbodyElement);
-
-                if (offset > 0) {
-                    (
-                        searchResultsContainerElement.querySelector(
-                            "button[data-page='previous']"
-                        ) as HTMLButtonElement
-                    ).addEventListener("click", previousAndGetWorkOrders);
-                }
-
-                if (limit + offset < responseJSON.count) {
-                    (
-                        searchResultsContainerElement.querySelector(
-                            "button[data-page='next']"
-                        ) as HTMLButtonElement
-                    ).addEventListener("click", nextAndGetWorkOrders);
-                }
-            }
+            renderWorkOrders
         );
-    };
+    }
 
-    const resetOffsetAndGetWorkOrders = () => {
+    function resetOffsetAndGetWorkOrders() {
         offsetElement.value = "0";
         getWorkOrders();
-    };
+    }
 
-    const previousAndGetWorkOrders = () => {
+    function previousAndGetWorkOrders() {
         offsetElement.value = Math.max(
             Number.parseInt(offsetElement.value, 10) - limit,
             0
         ).toString();
         getWorkOrders();
-    };
+    }
 
-    const nextAndGetWorkOrders = () => {
+    function nextAndGetWorkOrders() {
         offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
         getWorkOrders();
-    };
+    }
 
     const filterElements = searchFilterFormElement.querySelectorAll("input, select") as NodeListOf<
         HTMLInputElement | HTMLSelectElement
diff --git a/public/javascripts/workOrderSearch.min.js b/public/javascripts/workOrderSearch.min.js
index fae674cf..4bc37e1e 100644
--- a/public/javascripts/workOrderSearch.min.js
+++ b/public/javascripts/workOrderSearch.min.js
@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,t=exports.workOrderPrints,s=document.querySelector("#form--searchFilters");e.initializeDatePickers(s);const a=document.querySelector("#container--searchResults"),r=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),o=document.querySelector("#searchFilter--offset"),i=()=>{const i=Number.parseInt(o.value,10);a.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading Work Orders...</div>',cityssm.postJSON(e.urlPrefix+"/workOrders/doSearchWorkOrders",s,s=>{if(0===s.workOrders.length)return void(a.innerHTML='<div class="message is-info"><p class="message-body">There are no work orders that meet the search criteria.</p></div>');const o=document.createElement("tbody");for(const a of s.workOrders){let s="";for(const e of a.workOrderLots)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(e.mapName||"")+'"><i class="fas fa-fw fa-vector-square" aria-label="'+cityssm.escapeHTML(exports.aliases.lot)+'"></i> '+cityssm.escapeHTML(e.lotName||"(No Lot Name)")+"</span><br />";for(const e of a.workOrderLotOccupancies)for(const t of e.lotOccupancyOccupants)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(t.lotOccupantType||"")+'"><i class="fas fa-fw fa-'+cityssm.escapeHTML(t.fontAwesomeIconClass||"user")+'" aria-label="'+cityssm.escapeHTML(exports.aliases.occupant)+'"></i> '+cityssm.escapeHTML(t.occupantName||"(No Name)")+"</span><br />";o.insertAdjacentHTML("beforeend",'<tr><td><a class="has-text-weight-bold" href="'+e.urlPrefix+"/workOrders/"+a.workOrderId+'">'+(a.workOrderNumber.trim()?cityssm.escapeHTML(a.workOrderNumber||""):"(No Number)")+"</a></td><td>"+cityssm.escapeHTML(a.workOrderType||"")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(a.workOrderDescription||"")+'</span></td><td class="is-nowrap"><span class="is-size-7">'+s+'</span></td><td class="is-nowrap"><span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(exports.aliases.workOrderOpenDate)+'"><i class="fas fa-fw fa-play" aria-label="'+cityssm.escapeHTML(exports.aliases.workOrderOpenDate)+'"></i> '+a.workOrderOpenDateString+'</span><br /><span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+'"><i class="fas fa-fw fa-stop" aria-label="'+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+'"></i> '+(a.workOrderCloseDate?a.workOrderCloseDateString:'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+")</span>")+"</span></td><td>"+(0===a.workOrderMilestoneCount?"-":a.workOrderMilestoneCompletionCount+" / "+a.workOrderMilestoneCount)+"</td>"+(t.length>0?'<td><a class="button is-small" data-tooltip="Print" href="'+e.urlPrefix+"/print/"+t[0]+"/?workOrderId="+a.workOrderId+'" target="_blank"><i class="fas fa-print" aria-label="Print"></i></a></td>':"")+"</tr>")}a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"><thead><tr><th>Work Order Number</th><th>Description</th><th>Related</th><th>Date</th><th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>'+(t.length>0?'<th class="has-width-1"></th>':"")+'</tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(i+1).toString()+" to "+Math.min(s.count,r+i)+" of "+s.count+'</div></div><div class="level-right">'+(i>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(r+i<s.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",a.querySelector("table").append(o),i>0&&a.querySelector("button[data-page='previous']").addEventListener("click",c),r+i<s.count&&a.querySelector("button[data-page='next']").addEventListener("click",n)})},l=()=>{o.value="0",i()},c=()=>{o.value=Math.max(Number.parseInt(o.value,10)-r,0).toString(),i()},n=()=>{o.value=(Number.parseInt(o.value,10)+r).toString(),i()},d=s.querySelectorAll("input, select");for(const e of d)e.addEventListener("change",l);s.addEventListener("submit",e=>{e.preventDefault(),l()}),i()})();
\ No newline at end of file
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,t=exports.workOrderPrints,s=document.querySelector("#form--searchFilters");e.initializeDatePickers(s);const a=document.querySelector("#container--searchResults"),r=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),o=document.querySelector("#searchFilter--offset");function i(s){if(0===s.workOrders.length)return void(a.innerHTML='<div class="message is-info"><p class="message-body">There are no work orders that meet the search criteria.</p></div>');const o=document.createElement("tbody");for(const a of s.workOrders){let s="";for(const e of a.workOrderLots)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(e.mapName||"")+'"><i class="fas fa-fw fa-vector-square" aria-label="'+cityssm.escapeHTML(exports.aliases.lot)+'"></i> '+cityssm.escapeHTML(e.lotName||"(No Lot Name)")+"</span><br />";for(const e of a.workOrderLotOccupancies)for(const t of e.lotOccupancyOccupants)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(t.lotOccupantType||"")+'"><i class="fas fa-fw fa-'+cityssm.escapeHTML(t.fontAwesomeIconClass||"user")+'" aria-label="'+cityssm.escapeHTML(exports.aliases.occupant)+'"></i> '+cityssm.escapeHTML(t.occupantName||"(No Name)")+"</span><br />";o.insertAdjacentHTML("beforeend",'<tr><td><a class="has-text-weight-bold" href="'+e.urlPrefix+"/workOrders/"+a.workOrderId+'">'+(a.workOrderNumber.trim()?cityssm.escapeHTML(a.workOrderNumber||""):"(No Number)")+"</a></td><td>"+cityssm.escapeHTML(a.workOrderType||"")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(a.workOrderDescription||"")+'</span></td><td class="is-nowrap"><span class="is-size-7">'+s+'</span></td><td class="is-nowrap"><span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(exports.aliases.workOrderOpenDate)+'"><i class="fas fa-fw fa-play" aria-label="'+cityssm.escapeHTML(exports.aliases.workOrderOpenDate)+'"></i> '+a.workOrderOpenDateString+'</span><br /><span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+'"><i class="fas fa-fw fa-stop" aria-label="'+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+'"></i> '+(a.workOrderCloseDate?a.workOrderCloseDateString:'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+")</span>")+"</span></td><td>"+(0===a.workOrderMilestoneCount?"-":a.workOrderMilestoneCompletionCount+" / "+a.workOrderMilestoneCount)+"</td>"+(t.length>0?'<td><a class="button is-small" data-tooltip="Print" href="'+e.urlPrefix+"/print/"+t[0]+"/?workOrderId="+a.workOrderId+'" target="_blank"><i class="fas fa-print" aria-label="Print"></i></a></td>':"")+"</tr>")}a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"><thead><tr><th>Work Order Number</th><th>Description</th><th>Related</th><th>Date</th><th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>'+(t.length>0?'<th class="has-width-1"></th>':"")+'</tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(s.offset+1).toString()+" to "+Math.min(s.count,r+s.offset)+" of "+s.count+'</div></div><div class="level-right">'+(s.offset>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(r+s.offset<s.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",a.querySelector("table").append(o),s.offset>0&&a.querySelector("button[data-page='previous']").addEventListener("click",c),r+s.offset<s.count&&a.querySelector("button[data-page='next']").addEventListener("click",d)}function l(){a.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading Work Orders...</div>',cityssm.postJSON(e.urlPrefix+"/workOrders/doSearchWorkOrders",s,i)}function n(){o.value="0",l()}function c(){o.value=Math.max(Number.parseInt(o.value,10)-r,0).toString(),l()}function d(){o.value=(Number.parseInt(o.value,10)+r).toString(),l()}const p=s.querySelectorAll("input, select");for(const e of p)e.addEventListener("change",n);s.addEventListener("submit",e=>{e.preventDefault(),n()}),l()})();
\ No newline at end of file