milestone calendar

under development

handlers/workOrders-get/milestoneCalendar.d.ts

@@ -0,0 +1,3 @@
+import type { RequestHandler } from "express";
+export declare const handler: RequestHandler;
+export default handler;

handlers/workOrders-get/milestoneCalendar.js

@@ -0,0 +1,6 @@
+export const handler = (request, response) => {
+    response.render("workOrder-milestoneCalendar", {
+        headTitle: "Work Order Milestone Calendar"
+    });
+};
+export default handler;

handlers/workOrders-get/milestoneCalendar.ts

@@ -0,0 +1,9 @@
+import type { RequestHandler } from "express";
+
+export const handler: RequestHandler = (request, response) => {
+    response.render("workOrder-milestoneCalendar", {
+        headTitle: "Work Order Milestone Calendar"
+    });
+};
+
+export default handler;

handlers/workOrders-post/doAddWorkOrderMilestone.js

@@ -2,7 +2,9 @@ import { addWorkOrderMilestone } from "../../helpers/lotOccupancyDB/addWorkOrder
 import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
 export const handler = async (request, response) => {
     const success = addWorkOrderMilestone(request.body, request.session);
-    const workOrderMilestones = getWorkOrderMilestones(request.body.workOrderId);
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
     response.json({
         success,
         workOrderMilestones

handlers/workOrders-post/doAddWorkOrderMilestone.ts

@@ -6,9 +6,9 @@ import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrde
 export const handler: RequestHandler = async (request, response) => {
     const success = addWorkOrderMilestone(request.body, request.session);
 
-    const workOrderMilestones = getWorkOrderMilestones(
-        request.body.workOrderId
-    );
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
 
     response.json({
         success,

handlers/workOrders-post/doCompleteWorkOrderMilestone.js

@@ -4,7 +4,9 @@ export const handler = async (request, response) => {
     const success = completeWorkOrderMilestone({
         workOrderMilestoneId: request.body.workOrderMilestoneId
     }, request.session);
-    const workOrderMilestones = getWorkOrderMilestones(request.body.workOrderId);
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
     response.json({
         success,
         workOrderMilestones

handlers/workOrders-post/doCompleteWorkOrderMilestone.ts

@@ -12,9 +12,9 @@ export const handler: RequestHandler = async (request, response) => {
         request.session
     );
 
-    const workOrderMilestones = getWorkOrderMilestones(
-        request.body.workOrderId
-    );
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
 
     response.json({
         success,

handlers/workOrders-post/doDeleteWorkOrderMilestone.js

@@ -2,7 +2,9 @@ import { deleteWorkOrderMilestone } from "../../helpers/lotOccupancyDB/deleteWor
 import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
 export const handler = async (request, response) => {
     const success = deleteWorkOrderMilestone(request.body.workOrderMilestoneId, request.session);
-    const workOrderMilestones = getWorkOrderMilestones(request.body.workOrderId);
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
     response.json({
         success,
         workOrderMilestones

handlers/workOrders-post/doDeleteWorkOrderMilestone.ts

@@ -10,9 +10,9 @@ export const handler: RequestHandler = async (request, response) => {
         request.session
     );
 
-    const workOrderMilestones = getWorkOrderMilestones(
-        request.body.workOrderId
-    );
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
 
     response.json({
         success,

handlers/workOrders-post/doReopenWorkOrderMilestone.js

@@ -2,7 +2,9 @@ import { reopenWorkOrderMilestone } from "../../helpers/lotOccupancyDB/reopenWor
 import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
 export const handler = async (request, response) => {
     const success = reopenWorkOrderMilestone(request.body.workOrderMilestoneId, request.session);
-    const workOrderMilestones = getWorkOrderMilestones(request.body.workOrderId);
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
     response.json({
         success,
         workOrderMilestones

handlers/workOrders-post/doReopenWorkOrderMilestone.ts

@@ -10,9 +10,9 @@ export const handler: RequestHandler = async (request, response) => {
         request.session
     );
 
-    const workOrderMilestones = getWorkOrderMilestones(
-        request.body.workOrderId
-    );
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
 
     response.json({
         success,

handlers/workOrders-post/doUpdateWorkOrderMilestone.js

@@ -2,7 +2,9 @@ import { updateWorkOrderMilestone } from "../../helpers/lotOccupancyDB/updateWor
 import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
 export const handler = async (request, response) => {
     const success = updateWorkOrderMilestone(request.body, request.session);
-    const workOrderMilestones = getWorkOrderMilestones(request.body.workOrderId);
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
     response.json({
         success,
         workOrderMilestones

handlers/workOrders-post/doUpdateWorkOrderMilestone.ts

@@ -6,9 +6,9 @@ import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrde
 export const handler: RequestHandler = async (request, response) => {
     const success = updateWorkOrderMilestone(request.body, request.session);
 
-    const workOrderMilestones = getWorkOrderMilestones(
-        request.body.workOrderId
-    );
+    const workOrderMilestones = getWorkOrderMilestones({
+        workOrderId: request.body.workOrderId
+    });
 
     response.json({
         success,

helpers/lotOccupancyDB/getWorkOrder.js

@@ -36,7 +36,9 @@ const _getWorkOrder = (sql, workOrderId_or_workOrderNumber) => {
             includeOccupants: true
         }, database).lotOccupancies;
         workOrder.workOrderComments = getWorkOrderComments(workOrder.workOrderId, database);
-        workOrder.workOrderMilestones = getWorkOrderMilestones(workOrder.workOrderId, database);
+        workOrder.workOrderMilestones = getWorkOrderMilestones({
+            workOrderId: workOrder.workOrderId
+        }, database);
     }
     database.close();
     return workOrder;

helpers/lotOccupancyDB/getWorkOrder.ts

@@ -68,7 +68,9 @@ const _getWorkOrder = (
         );
 
         workOrder.workOrderMilestones = getWorkOrderMilestones(
-            workOrder.workOrderId,
+            {
+                workOrderId: workOrder.workOrderId
+            },
             database
         );
     }

helpers/lotOccupancyDB/getWorkOrderMilestones.d.ts

@@ -1,4 +1,7 @@
 import sqlite from "better-sqlite3";
 import type * as recordTypes from "../../types/recordTypes";
-export declare const getWorkOrderMilestones: (workOrderId: number | string, connectedDatabase?: sqlite.Database) => recordTypes.WorkOrderMilestone[];
+interface WorkOrderMilestoneFilters {
+    workOrderId?: number | string;
+}
+export declare const getWorkOrderMilestones: (filters: WorkOrderMilestoneFilters, connectedDatabase?: sqlite.Database) => recordTypes.WorkOrderMilestone[];
 export default getWorkOrderMilestones;

helpers/lotOccupancyDB/getWorkOrderMilestones.js

@@ -1,13 +1,19 @@
 import sqlite from "better-sqlite3";
 import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
 import { dateIntegerToString, timeIntegerToString } from "@cityssm/expressjs-server-js/dateTimeFns.js";
-export const getWorkOrderMilestones = (workOrderId, connectedDatabase) => {
+export const getWorkOrderMilestones = (filters, connectedDatabase) => {
     const database = connectedDatabase ||
         sqlite(databasePath, {
             readonly: true
         });
     database.function("userFn_dateIntegerToString", dateIntegerToString);
     database.function("userFn_timeIntegerToString", timeIntegerToString);
+    let sqlWhereClause = " where m.recordDelete_timeMillis is null";
+    const sqlParameters = [];
+    if (filters.workOrderId) {
+        sqlWhereClause += " and m.workOrderId = ?";
+        sqlParameters.push(filters.workOrderId);
+    }
     const workOrderMilestones = database
         .prepare("select m.workOrderMilestoneId," +
         " m.workOrderMilestoneTypeId, t.workORderMilestoneType," +
@@ -19,13 +25,12 @@ export const getWorkOrderMilestones = (workOrderId, connectedDatabase) => {
         " m.recordCreate_userName, m.recordUpdate_userName" +
         " from WorkOrderMilestones m" +
         " left join WorkOrderMilestoneTypes t on m.workOrderMilestoneTypeId = t.workOrderMilestoneTypeId" +
-        " where m.recordDelete_timeMillis is null" +
-        " and m.workOrderId = ?" +
+        sqlWhereClause +
         " order by" +
         " m.workOrderMilestoneCompletionDate, m.workOrderMilestoneCompletionTime," +
         " m.workOrderMilestoneDate, case when m.workOrderMilestoneTime = 0 then 9999 else m.workOrderMilestoneTime end," +
         " t.orderNumber, m.workOrderMilestoneId")
-        .all(workOrderId);
+        .all(sqlParameters);
     if (!connectedDatabase) {
         database.close();
     }

helpers/lotOccupancyDB/getWorkOrderMilestones.ts

@@ -9,8 +9,12 @@ import {
 
 import type * as recordTypes from "../../types/recordTypes";
 
+interface WorkOrderMilestoneFilters {
+    workOrderId?: number | string;
+}
+
 export const getWorkOrderMilestones = (
-    workOrderId: number | string,
+    filters: WorkOrderMilestoneFilters,
     connectedDatabase?: sqlite.Database
 ): recordTypes.WorkOrderMilestone[] => {
     const database =
@@ -22,6 +26,14 @@ export const getWorkOrderMilestones = (
     database.function("userFn_dateIntegerToString", dateIntegerToString);
     database.function("userFn_timeIntegerToString", timeIntegerToString);
 
+    let sqlWhereClause = " where m.recordDelete_timeMillis is null";
+    const sqlParameters = [];
+
+    if (filters.workOrderId) {
+        sqlWhereClause += " and m.workOrderId = ?";
+        sqlParameters.push(filters.workOrderId);
+    }
+
     const workOrderMilestones = database
         .prepare(
             "select m.workOrderMilestoneId," +
@@ -34,14 +46,13 @@ export const getWorkOrderMilestones = (
                 " m.recordCreate_userName, m.recordUpdate_userName" +
                 " from WorkOrderMilestones m" +
                 " left join WorkOrderMilestoneTypes t on m.workOrderMilestoneTypeId = t.workOrderMilestoneTypeId" +
-                " where m.recordDelete_timeMillis is null" +
-                " and m.workOrderId = ?" +
+                sqlWhereClause +
                 " order by" +
                 " m.workOrderMilestoneCompletionDate, m.workOrderMilestoneCompletionTime," +
                 " m.workOrderMilestoneDate, case when m.workOrderMilestoneTime = 0 then 9999 else m.workOrderMilestoneTime end," +
                 " t.orderNumber, m.workOrderMilestoneId"
         )
-        .all(workOrderId);
+        .all(sqlParameters);
 
     if (!connectedDatabase) {
         database.close();

public-typescript/workOrderMilestoneCalendar.d.ts

@@ -0,0 +1 @@
+export {};

public-typescript/workOrderMilestoneCalendar.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+(() => {
+    const urlPrefix = document.querySelector("main").dataset.urlPrefix;
+    const workOrderSearchFiltersFormElement = document.querySelector("#form--searchFilters");
+    const workOrderMilestoneDateFilterElement = workOrderSearchFiltersFormElement.querySelector("#searchFilter--workOrderMilestoneDateFilter");
+    const workOrderMilestoneDateStringElement = workOrderSearchFiltersFormElement.querySelector("#searchFilter--workOrderMilestoneDateString");
+    const renderMilestones = (workOrderMilestones) => {
+    };
+    const getMilestones = (event) => {
+        if (event) {
+            event.preventDefault();
+        }
+        cityssm.postJSON(urlPrefix + "/workOrders/doGetWorkOrderMilestones", workOrderSearchFiltersFormElement, (responseJSON) => {
+            renderMilestones(responseJSON.workOrderMilestones);
+        });
+    };
+    workOrderMilestoneDateFilterElement.addEventListener("change", () => {
+        workOrderMilestoneDateStringElement.disabled = (workOrderMilestoneDateFilterElement.value !== "date");
+        getMilestones();
+    });
+    workOrderMilestoneDateStringElement.addEventListener("change", getMilestones);
+    workOrderSearchFiltersFormElement.addEventListener("submit", getMilestones);
+    getMilestones();
+})();

public-typescript/workOrderMilestoneCalendar.ts

@@ -0,0 +1,42 @@
+/* eslint-disable unicorn/prefer-module */
+
+import type * as recordTypes from "../types/recordTypes";
+
+import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
+
+declare const cityssm: cityssmGlobal;
+
+(() => {
+    const urlPrefix = document.querySelector("main").dataset.urlPrefix;
+
+    const workOrderSearchFiltersFormElement = document.querySelector("#form--searchFilters") as HTMLFormElement;
+
+    const workOrderMilestoneDateFilterElement = workOrderSearchFiltersFormElement.querySelector("#searchFilter--workOrderMilestoneDateFilter") as HTMLSelectElement;
+    const workOrderMilestoneDateStringElement = workOrderSearchFiltersFormElement.querySelector("#searchFilter--workOrderMilestoneDateString") as HTMLInputElement;
+
+    const renderMilestones = (workOrderMilestones: recordTypes.WorkOrderMilestone[]) => {
+
+    };
+
+    const getMilestones = (event?: Event) => {
+        if (event) {
+            event.preventDefault();
+        }
+
+        cityssm.postJSON(urlPrefix + "/workOrders/doGetWorkOrderMilestones",
+        workOrderSearchFiltersFormElement,
+        (responseJSON: {workOrderMilestones: recordTypes.WorkOrderMilestone[]}) => {
+            renderMilestones(responseJSON.workOrderMilestones);
+        })
+    } ;
+
+    workOrderMilestoneDateFilterElement.addEventListener("change", () => {
+        workOrderMilestoneDateStringElement.disabled = (workOrderMilestoneDateFilterElement.value !== "date");
+        getMilestones();
+    });
+
+    workOrderMilestoneDateStringElement.addEventListener("change", getMilestones);
+    workOrderSearchFiltersFormElement.addEventListener("submit", getMilestones);
+
+    getMilestones();
+})();

public/javascripts/workOrderMilestoneCalendar.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=document.querySelector("main").dataset.urlPrefix,r=document.querySelector("#form--searchFilters"),t=r.querySelector("#searchFilter--workOrderMilestoneDateFilter"),s=r.querySelector("#searchFilter--workOrderMilestoneDateString"),o=t=>{t&&t.preventDefault(),cityssm.postJSON(e+"/workOrders/doGetWorkOrderMilestones",r,e=>{e.workOrderMilestones})};t.addEventListener("change",()=>{s.disabled="date"!==t.value,o()}),s.addEventListener("change",o),r.addEventListener("submit",o),o()})();

routes/workOrders.js

@@ -2,6 +2,7 @@ import { Router } from "express";
 import * as permissionHandlers from "../handlers/permissions.js";
 import handler_search from "../handlers/workOrders-get/search.js";
 import handler_doSearchWorkOrders from "../handlers/workOrders-post/doSearchWorkOrders.js";
+import handler_milestoneCalendar from "../handlers/workOrders-get/milestoneCalendar.js";
 import handler_view from "../handlers/workOrders-get/view.js";
 import handler_doReopenWorkOrder from "../handlers/workOrders-post/doReopenWorkOrder.js";
 import handler_new from "../handlers/workOrders-get/new.js";
@@ -20,6 +21,7 @@ import handler_doDeleteWorkOrderMilestone from "../handlers/workOrders-post/doDe
 export const router = Router();
 router.get("/", handler_search);
 router.post("/doSearchWorkOrders", handler_doSearchWorkOrders);
+router.get("/milestoneCalendar", handler_milestoneCalendar);
 router.get("/new", permissionHandlers.adminGetHandler, handler_new);
 router.post("/doCreateWorkOrder", permissionHandlers.updatePostHandler, handler_doCreateWorkOrder);
 router.get("/:workOrderId", handler_view);

routes/workOrders.ts

@@ -5,6 +5,8 @@ import * as permissionHandlers from "../handlers/permissions.js";
 import handler_search from "../handlers/workOrders-get/search.js";
 import handler_doSearchWorkOrders from "../handlers/workOrders-post/doSearchWorkOrders.js";
 
+import handler_milestoneCalendar from "../handlers/workOrders-get/milestoneCalendar.js";
+
 import handler_view from "../handlers/workOrders-get/view.js";
 import handler_doReopenWorkOrder from "../handlers/workOrders-post/doReopenWorkOrder.js";
 
@@ -28,10 +30,18 @@ import handler_doDeleteWorkOrderMilestone from "../handlers/workOrders-post/doDe
 
 export const router = Router();
 
+// Search
+
 router.get("/", handler_search);
 
 router.post("/doSearchWorkOrders", handler_doSearchWorkOrders);
 
+// Milestone Calendar
+
+router.get("/milestoneCalendar", handler_milestoneCalendar);
+
+// New
+
 router.get("/new", permissionHandlers.adminGetHandler, handler_new);
 
 router.post(
@@ -40,6 +50,8 @@ router.post(
     handler_doCreateWorkOrder
 );
 
+// View
+
 router.get("/:workOrderId", handler_view);
 
 router.post(
@@ -48,6 +60,8 @@ router.post(
     handler_doReopenWorkOrder
 );
 
+// Edit
+
 router.get(
     "/:workOrderId/edit",
     permissionHandlers.updateGetHandler,

views/_menu-workOrders.ejs

@@ -0,0 +1,19 @@
+<aside class="menu">
+    <h2 class="menu-label">
+        Work Orders
+    </h2>
+    <ul class="menu-list">
+        <li>
+            <a class="<%= (headTitle === "Work Order Search" ? "is-active" : "") %>" href="<%= urlPrefix %>/workOrders">
+                <span class="icon is-small"><i class="fas fa-fw fa-hard-hat" aria-hidden="true"></i></span>
+                <span>Work Order Search</span>
+            </a>
+        </li>
+        <li>
+            <a class="<%= (headTitle.endsWith("Milestone Calendar") ? "is-active" : "") %>" href="<%= urlPrefix %>/workOrders/milestoneCalendar">
+                <span class="icon is-small"><i class="fas fa-fw fa-calendar" aria-hidden="true"></i></span>
+                <span>Milestone Calendar</span>
+            </a>
+        </li>
+    </ul>
+</aside>

views/workOrder-milestoneCalendar.ejs

@@ -0,0 +1,66 @@
+<%- include('_header'); -%>
+
+<%- include('_header'); -%>
+
+<div class="columns">
+    <div class="column is-3 is-hidden-mobile">
+        <%- include('_menu-workOrders'); -%>
+    </div>
+    <div class="column">
+        <nav class="breadcrumb">
+            <ul>
+                <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
+                <li>
+                    <a href="<%= urlPrefix %>/workOrders">
+                        <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
+                        <span>Work Orders</span>
+                    </a>
+                </li>
+                <li class="is-active">
+                    <a href="#" aria-current="page">
+                        Milestone Calendar
+                    </a>
+                </li>
+            </ul>
+        </nav>
+
+        <h1 class="title is-1">
+            Milestone Calendar
+        </h1>
+
+        <div class="box">
+            <form id="form--searchFilters">
+                <div class="columns">
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="searchFilter--workOrderMilestoneDateFilter">Miestone Date Filter Type</label>
+                            <div class="control">
+                                <div class="select is-fullwidth">
+                                    <select id="searchFilter--workOrderMilestoneDateFilter">
+                                        <option value="upcomingMissed" selected>Upcoming and Missed</option>
+                                        <option value="recent">Recent</option>
+                                        <option value="date">Specific Date</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="searchFilter--workOrderMilestoneDateString">Milestone Date</label>
+                            <div class="control">
+                                <input class="input" id="searchFilter--workOrderMilestoneDateString" name="workOrderMilestoneDateString" type="date" value="<%= dateTimeFunctions.dateToString(new Date()) %>" disabled required />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<%- include('_footerA'); -%>
+
+<script src="<%= urlPrefix %>/javascripts/workOrderMilestoneCalendar.min.js"></script>
+
+<%- include('_footerB'); -%>

views/workOrder-search.ejs

@@ -1,76 +1,85 @@
 <%- include('_header'); -%>
 
-<nav class="breadcrumb">
-    <ul>
-        <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
-        <li class="is-active">
-            <a href="#" aria-current="page">
-                <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
-                <span>Work Orders</span>
+<%- include('_header'); -%>
+
+<div class="columns">
+    <div class="column is-3 is-hidden-mobile">
+        <%- include('_menu-workOrders'); -%>
+    </div>
+    <div class="column">
+        <nav class="breadcrumb">
+            <ul>
+                <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
+                <li class="is-active">
+                    <a href="#" aria-current="page">
+                        <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
+                        <span>Work Orders</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+
+        <h1 class="title is-1">
+            Work Order Search
+        </h1>
+
+        <% if (user.userProperties.canUpdate) { %>
+        <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
+            <a class="button is-circle is-primary has-tooltip-left"
+                data-tooltip="Create a New Work Order"
+                href="<%= urlPrefix %>/workOrders/new">
+                <i class="fas fa-plus" aria-hidden="true"></i>
+                <span class="is-sr-only">Create a New Work Order</span>
             </a>
-        </li>
-    </ul>
-</nav>
-
-<h1 class="title is-1">
-    Work Order Search
-</h1>
-
-<% if (user.userProperties.canUpdate) { %>
-<div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
-    <a class="button is-circle is-primary has-tooltip-left"
-        data-tooltip="Create a New Work Order"
-        href="<%= urlPrefix %>/workOrders/new">
-        <i class="fas fa-plus" aria-hidden="true"></i>
-        <span class="is-sr-only">Create a New Work Order</span>
-    </a>
-</div>
-<% } %>
-
-<div class="box">
-    <form id="form--searchFilters">
-        <input id="searchFilter--limit" name="limit" type="hidden" value="100" />
-        <input id="searchFilter--offset" name="offset" type="hidden" value="0" />
-
-        <div class="columns">
-            <div class="column">
-                <div class="field">
-                    <label class="label" for="searchFilter--workOrderTypeId">Work Order Type</label>
-                    <div class="control has-icons-left">
-                        <div class="select is-fullwidth">
-                        <select id="searchFilter--workOrderTypeId" name="workOrderTypeId">
-                            <option value="">(All Work Order Types)</option>
-                            <% for (const workOrderType of workOrderTypes) { %>
-                            <option value="<%= workOrderType.workOrderTypeId %>"><%= workOrderType.workOrderType || "(No Name)" %></option>
-                            <% } %>
-                        </select>
-                        </div>
-                        <span class="icon is-small is-left">
-                            <i class="fas fa-search" aria-hidden="true"></i>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div class="column">
-                <div class="field">
-                    <label class="label" for="searchFilter--workOrderOpenStatus">Open Status</label>
-                    <div class="control">
-                        <div class="select is-fullwidth">
-                            <select id="searchFilter--workOrderOpenStatus" name="workOrderOpenStatus">
-                                <option value="">(All Statuses)</option>
-                                <option value="open" selected>Open</option>
-                                <option value="closed">Closed</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-
-            </div>  
         </div>
-    </form>
-</div>
+        <% } %>
 
-<div id="container--searchResults"></div>
+        <div class="box">
+            <form id="form--searchFilters">
+                <input id="searchFilter--limit" name="limit" type="hidden" value="100" />
+                <input id="searchFilter--offset" name="offset" type="hidden" value="0" />
+
+                <div class="columns">
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="searchFilter--workOrderTypeId">Work Order Type</label>
+                            <div class="control has-icons-left">
+                                <div class="select is-fullwidth">
+                                <select id="searchFilter--workOrderTypeId" name="workOrderTypeId">
+                                    <option value="">(All Work Order Types)</option>
+                                    <% for (const workOrderType of workOrderTypes) { %>
+                                    <option value="<%= workOrderType.workOrderTypeId %>"><%= workOrderType.workOrderType || "(No Name)" %></option>
+                                    <% } %>
+                                </select>
+                                </div>
+                                <span class="icon is-small is-left">
+                                    <i class="fas fa-search" aria-hidden="true"></i>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="searchFilter--workOrderOpenStatus">Open Status</label>
+                            <div class="control">
+                                <div class="select is-fullwidth">
+                                    <select id="searchFilter--workOrderOpenStatus" name="workOrderOpenStatus">
+                                        <option value="">(All Statuses)</option>
+                                        <option value="open" selected>Open</option>
+                                        <option value="closed">Closed</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>  
+                </div>
+            </form>
+        </div>
+
+        <div id="container--searchResults"></div>
+    </div>
+</div>
 
 <%- include('_footerA'); -%>