add occupant from past copy

handlers/lotOccupancies-post/doSearchPastOccupants.d.ts

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

handlers/lotOccupancies-post/doSearchPastOccupants.js

@@ -0,0 +1,10 @@
+import { getPastLotOccupancyOccupants } from "../../helpers/lotOccupancyDB/getPastLotOccupancyOccupants.js";
+export const handler = (request, response) => {
+    const occupants = getPastLotOccupancyOccupants(request.body, {
+        limit: Number.parseInt(request.body.limit, 10)
+    });
+    response.json({
+        occupants
+    });
+};
+export default handler;

handlers/lotOccupancies-post/doSearchPastOccupants.ts

@@ -0,0 +1,16 @@
+import type { RequestHandler } from "express";
+
+import { getPastLotOccupancyOccupants } from "../../helpers/lotOccupancyDB/getPastLotOccupancyOccupants.js";
+
+export const handler: RequestHandler = (request, response) => {
+
+    const occupants = getPastLotOccupancyOccupants(request.body, {
+        limit: Number.parseInt(request.body.limit, 10)
+    });
+
+    response.json({
+        occupants
+    });
+};
+
+export default handler;

helpers/lotOccupancyDB/getPastLotOccupancyOccupants.d.ts

@@ -0,0 +1,9 @@
+import type * as recordTypes from "../../types/recordTypes";
+interface GetPastLotOccupancyOccupantsFilters {
+    searchFilter: string;
+}
+interface GetPastLotOccupancyOccupantsOptions {
+    limit: number;
+}
+export declare const getPastLotOccupancyOccupants: (filters: GetPastLotOccupancyOccupantsFilters, options: GetPastLotOccupancyOccupantsOptions) => recordTypes.LotOccupancyOccupant[];
+export default getPastLotOccupancyOccupants;

helpers/lotOccupancyDB/getPastLotOccupancyOccupants.js

@@ -0,0 +1,40 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+export const getPastLotOccupancyOccupants = (filters, options) => {
+    const database = sqlite(databasePath, {
+        readonly: true
+    });
+    let sqlWhereClause = " where o.recordDelete_timeMillis is null and l.recordDelete_timeMillis is null";
+    const sqlParameters = [];
+    if (filters.searchFilter) {
+        const searchFilterPieces = filters.searchFilter.split(" ");
+        for (const searchFilterPiece of searchFilterPieces) {
+            sqlWhereClause +=
+                " and (o.occupantName like '%' || ? || '%'" +
+                    " or o.occupantAddress1 like '%' || ? || '%'" +
+                    " or o.occupantAddress2 like '%' || ? || '%'" +
+                    " or o.occupantCity like '%' || ? || '%')";
+            sqlParameters.push(searchFilterPiece, searchFilterPiece, searchFilterPiece, searchFilterPiece);
+        }
+    }
+    const sql = "select" +
+        " o.occupantName, o.occupantAddress1, o.occupantAddress2," +
+        " o.occupantCity, o.occupantProvince, o.occupantPostalCode," +
+        " o.occupantPhoneNumber, o.occupantEmailAddress," +
+        " count(*) as lotOccupancyIdCount," +
+        " max(o.recordUpdate_timeMillis) as recordUpdate_timeMillisMax" +
+        " from LotOccupancyOccupants o" +
+        " left join LotOccupancies l on o.lotOccupancyId = l.lotOccupancyId" +
+        sqlWhereClause +
+        " group by occupantName, occupantAddress1, occupantAddress2, occupantCity, occupantProvince, occupantPostalCode," +
+        " occupantPhoneNumber, occupantEmailAddress" +
+        " order by lotOccupancyIdCount desc, recordUpdate_timeMillisMax desc" +
+        " limit " +
+        options.limit;
+    const lotOccupancyOccupants = database
+        .prepare(sql)
+        .all(sqlParameters);
+    database.close();
+    return lotOccupancyOccupants;
+};
+export default getPastLotOccupancyOccupants;

helpers/lotOccupancyDB/getPastLotOccupancyOccupants.ts

@@ -0,0 +1,72 @@
+import sqlite from "better-sqlite3";
+
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+
+import type * as recordTypes from "../../types/recordTypes";
+
+interface GetPastLotOccupancyOccupantsFilters {
+    searchFilter: string;
+}
+
+interface GetPastLotOccupancyOccupantsOptions {
+    limit: number;
+}
+
+export const getPastLotOccupancyOccupants = (
+    filters: GetPastLotOccupancyOccupantsFilters,
+    options: GetPastLotOccupancyOccupantsOptions
+): recordTypes.LotOccupancyOccupant[] => {
+    const database = sqlite(databasePath, {
+        readonly: true
+    });
+
+    let sqlWhereClause =
+        " where o.recordDelete_timeMillis is null and l.recordDelete_timeMillis is null";
+
+    const sqlParameters = [];
+
+    if (filters.searchFilter) {
+        const searchFilterPieces = filters.searchFilter.split(" ");
+
+        for (const searchFilterPiece of searchFilterPieces) {
+            sqlWhereClause +=
+                " and (o.occupantName like '%' || ? || '%'" +
+                " or o.occupantAddress1 like '%' || ? || '%'" +
+                " or o.occupantAddress2 like '%' || ? || '%'" +
+                " or o.occupantCity like '%' || ? || '%')";
+
+            sqlParameters.push(
+                searchFilterPiece,
+                searchFilterPiece,
+                searchFilterPiece,
+                searchFilterPiece
+            );
+        }
+    }
+
+    const sql =
+        "select" +
+        " o.occupantName, o.occupantAddress1, o.occupantAddress2," +
+        " o.occupantCity, o.occupantProvince, o.occupantPostalCode," +
+        " o.occupantPhoneNumber, o.occupantEmailAddress," +
+        " count(*) as lotOccupancyIdCount," +
+        " max(o.recordUpdate_timeMillis) as recordUpdate_timeMillisMax" +
+        " from LotOccupancyOccupants o" +
+        " left join LotOccupancies l on o.lotOccupancyId = l.lotOccupancyId" +
+        sqlWhereClause +
+        " group by occupantName, occupantAddress1, occupantAddress2, occupantCity, occupantProvince, occupantPostalCode," +
+        " occupantPhoneNumber, occupantEmailAddress" +
+        " order by lotOccupancyIdCount desc, recordUpdate_timeMillisMax desc" +
+        " limit " +
+        options.limit;
+
+    const lotOccupancyOccupants: recordTypes.LotOccupancyOccupant[] = database
+        .prepare(sql)
+        .all(sqlParameters);
+
+    database.close();
+
+    return lotOccupancyOccupants;
+};
+
+export default getPastLotOccupancyOccupants;

public-typescript/lotOccupancyEdit.js

@@ -562,11 +562,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
             occupantsContainer.append(tableElement);
         };
         document.querySelector("#button--addOccupant").addEventListener("click", () => {
-            let addFormElement;
             let addCloseModalFunction;
-            const addOccupant = (submitEvent) => {
+            let addFormElement;
-                submitEvent.preventDefault();
+            let searchFormElement;
-                cityssm.postJSON(urlPrefix + "/lotOccupancies/doAddLotOccupancyOccupant", addFormElement, (responseJSON) => {
+            let searchResultsElement;
+            const addOccupant = (formOrObject) => {
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doAddLotOccupancyOccupant", formOrObject, (responseJSON) => {
                     if (responseJSON.success) {
                         lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                         addCloseModalFunction();
@@ -581,25 +582,119 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     }
                 });
             };
+            const addOccupantFromForm = (submitEvent) => {
+                submitEvent.preventDefault();
+                addOccupant(addFormElement);
+            };
+            let pastOccupantSearchResults = [];
+            const addOccupantFromCopy = (clickEvent) => {
+                clickEvent.preventDefault();
+                const panelBlockElement = clickEvent.currentTarget;
+                const occupant = pastOccupantSearchResults[Number.parseInt(panelBlockElement.dataset.index, 10)];
+                const lotOccupantTypeId = panelBlockElement
+                    .closest(".modal")
+                    .querySelector("#lotOccupancyOccupantCopy--lotOccupantTypeId").value;
+                if (lotOccupantTypeId === "") {
+                    bulmaJS.alert({
+                        title: "No " + exports.aliases.occupant + " Type Selected",
+                        message: "Select a type to apply to the newly added " +
+                            exports.aliases.occupant.toLowerCase() +
+                            ".",
+                        contextualColorName: "warning"
+                    });
+                }
+                else {
+                    occupant.lotOccupantTypeId = Number.parseInt(lotOccupantTypeId, 10);
+                    occupant.lotOccupancyId = Number.parseInt(lotOccupancyId, 10);
+                    addOccupant(occupant);
+                }
+            };
+            const searchOccupants = (event) => {
+                event.preventDefault();
+                if (searchFormElement.querySelector("#lotOccupancyOccupantCopy--searchFilter").value === "") {
+                    searchResultsElement.innerHTML =
+                        '<div class="message is-info">' +
+                            '<p class="message-body">Enter a partial name or address in the search field above.</p>' +
+                            "</div>";
+                    return;
+                }
+                searchResultsElement.innerHTML =
+                    '<div class="has-text-grey has-text-centered">' +
+                        '<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />' +
+                        "Searching..." +
+                        "</div>";
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doSearchPastOccupants", searchFormElement, (responseJSON) => {
+                    pastOccupantSearchResults = responseJSON.occupants;
+                    const panelElement = document.createElement("div");
+                    panelElement.className = "panel";
+                    for (const [index, occupant] of pastOccupantSearchResults.entries()) {
+                        const panelBlockElement = document.createElement("a");
+                        panelBlockElement.className = "panel-block is-block";
+                        panelBlockElement.dataset.index = index.toString();
+                        panelBlockElement.innerHTML =
+                            "<strong>" +
+                                cityssm.escapeHTML(occupant.occupantName) +
+                                "</strong>" +
+                                "<br />" +
+                                '<div class="columns">' +
+                                ('<div class="column">' +
+                                    cityssm.escapeHTML(occupant.occupantAddress1) +
+                                    "<br />" +
+                                    (occupant.occupantAddress2
+                                        ? cityssm.escapeHTML(occupant.occupantAddress2) + "<br />"
+                                        : "") +
+                                    cityssm.escapeHTML(occupant.occupantCity) +
+                                    ", " +
+                                    cityssm.escapeHTML(occupant.occupantProvince) +
+                                    "<br />" +
+                                    cityssm.escapeHTML(occupant.occupantPostalCode) +
+                                    "</div>") +
+                                ('<div class="column">' +
+                                    (occupant.occupantPhoneNumber
+                                        ? cityssm.escapeHTML(occupant.occupantPhoneNumber) +
+                                            "<br />"
+                                        : "") +
+                                    cityssm.escapeHTML(occupant.occupantEmailAddress) +
+                                    "<br />" +
+                                    "</div>") +
+                                "</div>";
+                        panelBlockElement.addEventListener("click", addOccupantFromCopy);
+                        panelElement.append(panelBlockElement);
+                    }
+                    searchResultsElement.innerHTML = "";
+                    searchResultsElement.append(panelElement);
+                });
+            };
             cityssm.openHtmlModal("lotOccupancy-addOccupant", {
                 onshow: (modalElement) => {
                     los.populateAliases(modalElement);
                     modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupancyId").value = lotOccupancyId;
                     const lotOccupantTypeSelectElement = modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupantTypeId");
+                    const lotOccupantTypeCopySelectElement = modalElement.querySelector("#lotOccupancyOccupantCopy--lotOccupantTypeId");
                     for (const lotOccupantType of exports.lotOccupantTypes) {
                         const optionElement = document.createElement("option");
                         optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
                         optionElement.textContent = lotOccupantType.lotOccupantType;
                         lotOccupantTypeSelectElement.append(optionElement);
+                        lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
                     }
                     modalElement.querySelector("#lotOccupancyOccupantAdd--occupantCity").value = exports.occupantCityDefault;
                     modalElement.querySelector("#lotOccupancyOccupantAdd--occupantProvince").value = exports.occupantProvinceDefault;
                 },
                 onshown: (modalElement, closeModalFunction) => {
                     bulmaJS.toggleHtmlClipped();
+                    bulmaJS.init(modalElement);
                     modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupantTypeId").focus();
-                    addFormElement = modalElement.querySelector("form");
+                    addFormElement = modalElement.querySelector("#form--lotOccupancyOccupantAdd");
-                    addFormElement.addEventListener("submit", addOccupant);
+                    addFormElement.addEventListener("submit", addOccupantFromForm);
+                    searchResultsElement = modalElement.querySelector("#lotOccupancyOccupantCopy--searchResults");
+                    searchFormElement = modalElement.querySelector("#form--lotOccupancyOccupantCopy");
+                    searchFormElement.addEventListener("submit", (formEvent) => {
+                        formEvent.preventDefault();
+                    });
+                    modalElement
+                        .querySelector("#lotOccupancyOccupantCopy--searchFilter")
+                        .addEventListener("change", searchOccupants);
                     addCloseModalFunction = closeModalFunction;
                 },
                 onremoved: () => {

public-typescript/lotOccupancyEdit.ts

@@ -845,15 +845,19 @@ declare const bulmaJS: BulmaJS;
         };
 
         document.querySelector("#button--addOccupant").addEventListener("click", () => {
-            let addFormElement: HTMLFormElement;
             let addCloseModalFunction: () => void;
 
-            const addOccupant = (submitEvent: SubmitEvent) => {
+            let addFormElement: HTMLFormElement;
-                submitEvent.preventDefault();
 
+            let searchFormElement: HTMLFormElement;
+            let searchResultsElement: HTMLElement;
+
+            const addOccupant = (
+                formOrObject: HTMLFormElement | recordTypes.LotOccupancyOccupant
+            ) => {
                 cityssm.postJSON(
                     urlPrefix + "/lotOccupancies/doAddLotOccupancyOccupant",
-                    addFormElement,
+                    formOrObject,
                     (responseJSON: {
                         success: boolean;
                         errorMessage?: string;
@@ -874,6 +878,122 @@ declare const bulmaJS: BulmaJS;
                 );
             };
 
+            const addOccupantFromForm = (submitEvent: SubmitEvent) => {
+                submitEvent.preventDefault();
+                addOccupant(addFormElement);
+            };
+
+            let pastOccupantSearchResults: recordTypes.LotOccupancyOccupant[] = [];
+
+            const addOccupantFromCopy = (clickEvent: MouseEvent) => {
+                clickEvent.preventDefault();
+
+                const panelBlockElement = clickEvent.currentTarget as HTMLElement;
+
+                const occupant =
+                    pastOccupantSearchResults[Number.parseInt(panelBlockElement.dataset.index, 10)];
+
+                const lotOccupantTypeId = (
+                    panelBlockElement
+                        .closest(".modal")
+                        .querySelector(
+                            "#lotOccupancyOccupantCopy--lotOccupantTypeId"
+                        ) as HTMLSelectElement
+                ).value;
+
+                if (lotOccupantTypeId === "") {
+                    bulmaJS.alert({
+                        title: "No " + exports.aliases.occupant + " Type Selected",
+                        message:
+                            "Select a type to apply to the newly added " +
+                            exports.aliases.occupant.toLowerCase() +
+                            ".",
+                        contextualColorName: "warning"
+                    });
+                } else {
+                    occupant.lotOccupantTypeId = Number.parseInt(lotOccupantTypeId, 10);
+                    occupant.lotOccupancyId = Number.parseInt(lotOccupancyId, 10);
+                    addOccupant(occupant);
+                }
+            };
+
+            const searchOccupants = (event: Event) => {
+                event.preventDefault();
+
+                if (
+                    (
+                        searchFormElement.querySelector(
+                            "#lotOccupancyOccupantCopy--searchFilter"
+                        ) as HTMLInputElement
+                    ).value === ""
+                ) {
+                    searchResultsElement.innerHTML =
+                        '<div class="message is-info">' +
+                        '<p class="message-body">Enter a partial name or address in the search field above.</p>' +
+                        "</div>";
+
+                    return;
+                }
+
+                searchResultsElement.innerHTML =
+                    '<div class="has-text-grey has-text-centered">' +
+                    '<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />' +
+                    "Searching..." +
+                    "</div>";
+
+                cityssm.postJSON(
+                    urlPrefix + "/lotOccupancies/doSearchPastOccupants",
+                    searchFormElement,
+                    (responseJSON: { occupants: recordTypes.LotOccupancyOccupant[] }) => {
+                        pastOccupantSearchResults = responseJSON.occupants;
+
+                        const panelElement = document.createElement("div");
+                        panelElement.className = "panel";
+
+                        for (const [index, occupant] of pastOccupantSearchResults.entries()) {
+                            const panelBlockElement = document.createElement("a");
+                            panelBlockElement.className = "panel-block is-block";
+                            panelBlockElement.dataset.index = index.toString();
+
+                            panelBlockElement.innerHTML =
+                                "<strong>" +
+                                cityssm.escapeHTML(occupant.occupantName) +
+                                "</strong>" +
+                                "<br />" +
+                                '<div class="columns">' +
+                                ('<div class="column">' +
+                                    cityssm.escapeHTML(occupant.occupantAddress1) +
+                                    "<br />" +
+                                    (occupant.occupantAddress2
+                                        ? cityssm.escapeHTML(occupant.occupantAddress2) + "<br />"
+                                        : "") +
+                                    cityssm.escapeHTML(occupant.occupantCity) +
+                                    ", " +
+                                    cityssm.escapeHTML(occupant.occupantProvince) +
+                                    "<br />" +
+                                    cityssm.escapeHTML(occupant.occupantPostalCode) +
+                                    "</div>") +
+                                ('<div class="column">' +
+                                    (occupant.occupantPhoneNumber
+                                        ? cityssm.escapeHTML(occupant.occupantPhoneNumber) +
+                                          "<br />"
+                                        : "") +
+                                    cityssm.escapeHTML(occupant.occupantEmailAddress) +
+                                    "<br />" +
+                                    "</div>") +
+                                "</div>";
+
+                            panelBlockElement.addEventListener("click", addOccupantFromCopy);
+
+                            panelElement.append(panelBlockElement);
+                        }
+
+                        searchResultsElement.innerHTML = "";
+                        searchResultsElement.append(panelElement);
+                    }
+                );
+            };
+
             cityssm.openHtmlModal("lotOccupancy-addOccupant", {
                 onshow: (modalElement) => {
                     los.populateAliases(modalElement);
@@ -888,11 +1008,18 @@ declare const bulmaJS: BulmaJS;
                         "#lotOccupancyOccupantAdd--lotOccupantTypeId"
                     ) as HTMLSelectElement;
 
+                    const lotOccupantTypeCopySelectElement = modalElement.querySelector(
+                        "#lotOccupancyOccupantCopy--lotOccupantTypeId"
+                    ) as HTMLSelectElement;
+
                     for (const lotOccupantType of exports.lotOccupantTypes as recordTypes.LotOccupantType[]) {
                         const optionElement = document.createElement("option");
                         optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
                         optionElement.textContent = lotOccupantType.lotOccupantType;
+
                         lotOccupantTypeSelectElement.append(optionElement);
+
+                        lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
                     }
 
                     (
@@ -900,6 +1027,7 @@ declare const bulmaJS: BulmaJS;
                             "#lotOccupancyOccupantAdd--occupantCity"
                         ) as HTMLInputElement
                     ).value = exports.occupantCityDefault;
+
                     (
                         modalElement.querySelector(
                             "#lotOccupancyOccupantAdd--occupantProvince"
@@ -908,6 +1036,7 @@ declare const bulmaJS: BulmaJS;
                 },
                 onshown: (modalElement, closeModalFunction) => {
                     bulmaJS.toggleHtmlClipped();
+                    bulmaJS.init(modalElement);
 
                     (
                         modalElement.querySelector(
@@ -915,8 +1044,23 @@ declare const bulmaJS: BulmaJS;
                         ) as HTMLInputElement
                     ).focus();
 
-                    addFormElement = modalElement.querySelector("form");
+                    addFormElement = modalElement.querySelector("#form--lotOccupancyOccupantAdd");
-                    addFormElement.addEventListener("submit", addOccupant);
+                    addFormElement.addEventListener("submit", addOccupantFromForm);
+
+                    searchResultsElement = modalElement.querySelector(
+                        "#lotOccupancyOccupantCopy--searchResults"
+                    );
+
+                    searchFormElement = modalElement.querySelector(
+                        "#form--lotOccupancyOccupantCopy"
+                    );
+                    searchFormElement.addEventListener("submit", (formEvent) => {
+                        formEvent.preventDefault();
+                    });
+
+                    modalElement
+                        .querySelector("#lotOccupancyOccupantCopy--searchFilter")
+                        .addEventListener("change", searchOccupants);
 
                     addCloseModalFunction = closeModalFunction;
                 },

public/html/lotOccupancy-addOccupant.html

@@ -8,88 +8,135 @@
             <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
         </header>
         <section class="modal-card-body">
-            <form id="form--lotOccupancyOccupantAdd">
+            <div class="tabs is-boxed">
-                <input id="lotOccupancyOccupantAdd--lotOccupancyId" name="lotOccupancyId" type="hidden" value="" />
+                <ul>
-                <div class="field">
+                    <li class="is-active">
-                    <label class="label" for="lotOccupancyOccupantAdd--lotOccupantTypeId"><span class="alias" data-alias="Occupant"></span> Type</label>
+                        <a href="#tab--lotOccupancyOccupantAdd-new">
-                    <div class="control">
+                            Create New
-                        <div class="select is-fullwidth">
+                        </a>
-                            <select id="lotOccupancyOccupantAdd--lotOccupantTypeId" name="lotOccupantTypeId" required>
+                    </li>
-                                <option value="">(Select a Type)</option>
+                    <li>
-                            </select>
+                        <a href="#tab--lotOccupancyOccupantAdd-copy">
-                        </div>
+                            Copy Previous
-                    </div>
+                        </a>
-                </div>
+                    </li>
-                <div class="field">
+                </ul>
-                    <label class="label" for="lotOccupancyOccupantAdd--occupantName"><span class="alias" data-alias="Occupant"></span> Name</label>
+            </div>
-                    <div class="control">
+            <div class="tab-container">
-                        <input class="input" id="lotOccupancyOccupantAdd--occupantName" name="occupantName" type="text" maxlength="200" autocomplete="off" required />
+                <div id="tab--lotOccupancyOccupantAdd-new">
-                    </div>
+                    <form id="form--lotOccupancyOccupantAdd">
-                </div>
+                        <input id="lotOccupancyOccupantAdd--lotOccupancyId" name="lotOccupancyId" type="hidden" value="" />
-                <div class="field">
-                    <label class="label" for="lotOccupancyOccupantAdd--occupantAddress1">Address</label>
-                    <div class="control">
-                        <input class="input" id="lotOccupancyOccupantAdd--occupantAddress1" name="occupantAddress1" type="text" maxlength="50" placeholder="Line 1" autocomplete="off" />
-                    </div>
-                </div>
-                <div class="field">
-                    <div class="control">
-                        <input class="input" id="lotOccupancyOccupantAdd--occupantAddress2" name="occupantAddress2" type="text" maxlength="50" placeholder="Line 2" autocomplete="off" aria-label="Address Line 2" />
-                    </div>
-                </div>
-                <div class="columns">
-                    <div class="column">
                         <div class="field">
-                            <label class="label" for="lotOccupancyOccupantAdd--occupantCity">City</label>
+                            <label class="label" for="lotOccupancyOccupantAdd--lotOccupantTypeId"><span class="alias" data-alias="Occupant"></span> Type</label>
                             <div class="control">
-                                <input class="input" id="lotOccupancyOccupantAdd--occupantCity" name="occupantCity" type="text" maxlength="20" />
+                                <div class="select is-fullwidth">
-                            </div>
+                                    <select id="lotOccupancyOccupantAdd--lotOccupantTypeId" name="lotOccupantTypeId" required>
-                        </div>
+                                        <option value="">(Select a Type)</option>
-                    </div>
+                                    </select>
-                    <div class="column">
+                                </div>
-                        <div class="field">
+                            </div>
-                            <label class="label" for="lotOccupancyOccupantAdd--occupantProvince">Province</label>
+                        </div>
-                            <div class="control">
+                        <div class="field">
-                                <input class="input" id="lotOccupancyOccupantAdd--occupantProvince" name="occupantProvince" type="text" maxlength="2" />
+                            <label class="label" for="lotOccupancyOccupantAdd--occupantName"><span class="alias" data-alias="Occupant"></span> Name</label>
-                            </div>
+                            <div class="control">
-                        </div>
+                                <input class="input" id="lotOccupancyOccupantAdd--occupantName" name="occupantName" type="text" maxlength="200" autocomplete="off" required />
-                    </div>
+                            </div>
-                    <div class="column">
+                        </div>
-                        <div class="field">
+                        <div class="field">
-                            <label class="label" for="lotOccupancyOccupantAdd--occupantPostalCode">Postal Code</label>
+                            <label class="label" for="lotOccupancyOccupantAdd--occupantAddress1">Address</label>
-                            <div class="control">
+                            <div class="control">
-                                <input class="input" id="lotOccupancyOccupantAdd--occupantPostalCode" name="occupantPostalCode" type="text" maxlength="7" autocomplete="off" />
+                                <input class="input" id="lotOccupancyOccupantAdd--occupantAddress1" name="occupantAddress1" type="text" maxlength="50" placeholder="Line 1" autocomplete="off" />
+                            </div>
+                        </div>
+                        <div class="field">
+                            <div class="control">
+                                <input class="input" id="lotOccupancyOccupantAdd--occupantAddress2" name="occupantAddress2" type="text" maxlength="50" placeholder="Line 2" autocomplete="off" aria-label="Address Line 2" />
+                            </div>
+                        </div>
+                        <div class="columns">
+                            <div class="column">
+                                <div class="field">
+                                    <label class="label" for="lotOccupancyOccupantAdd--occupantCity">City</label>
+                                    <div class="control">
+                                        <input class="input" id="lotOccupancyOccupantAdd--occupantCity" name="occupantCity" type="text" maxlength="20" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="column">
+                                <div class="field">
+                                    <label class="label" for="lotOccupancyOccupantAdd--occupantProvince">Province</label>
+                                    <div class="control">
+                                        <input class="input" id="lotOccupancyOccupantAdd--occupantProvince" name="occupantProvince" type="text" maxlength="2" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="column">
+                                <div class="field">
+                                    <label class="label" for="lotOccupancyOccupantAdd--occupantPostalCode">Postal Code</label>
+                                    <div class="control">
+                                        <input class="input" id="lotOccupancyOccupantAdd--occupantPostalCode" name="occupantPostalCode" type="text" maxlength="7" autocomplete="off" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="columns">
+                            <div class="column">
+                                <div class="field">
+                                    <label class="label" for="lotOccupancyOccupantAdd--occupantPhoneNumber">Phone Number</label>
+                                    <div class="control">
+                                        <input class="input" id="lotOccupancyOccupantAdd--occupantPhoneNumber" name="occupantPhoneNumber" type="text" maxlength="30" autocomplete="off" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="column">
+                                <div class="field">
+                                    <label class="label" for="lotOccupancyOccupantAdd--occupantEmailAddress">Email Address</label>
+                                    <div class="control">
+                                        <input class="input" id="lotOccupancyOccupantAdd--occupantEmailAddress" name="occupantEmailAddress" type="email" maxlength="200" autocomplete="off" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="has-text-right">
+                            <button class="button is-success" type="submit">
+                                <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                                <span>Add <span class="alias" data-alias="Occupant"></span></span>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+                <div class="is-hidden" id="tab--lotOccupancyOccupantAdd-copy">
+                    <div class="box">
+                        <form id="form--lotOccupancyOccupantCopy">
+                            <input name="limit" type="hidden" value="50" />
+                            <div class="field">
+                                <div class="control has-icons-left">
+                                    <input class="input" id="lotOccupancyOccupantCopy--searchFilter" name="searchFilter" type="text" placeholder="Filter by name or address" />
+                                    <span class="icon is-left">
+                                        <i class="fas fa-filter" aria-hidden="true"></i>
+                                    </span>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="field">
+                        <label class="label" for="lotOccupancyOccupantCopy--lotOccupantTypeId"><span class="alias" data-alias="Occupant"></span> Type</label>
+                        <div class="control">
+                            <div class="select is-fullwidth">
+                                <select id="lotOccupancyOccupantCopy--lotOccupantTypeId" name="lotOccupantTypeId" required>
+                                    <option value="">(Select a Type)</option>
+                                </select>
                             </div>
                         </div>
                     </div>
+                    <div id="lotOccupancyOccupantCopy--searchResults"></div>
                 </div>
-                <div class="columns">
+            </div>
-                    <div class="column">
+
-                        <div class="field">
+            
-                            <label class="label" for="lotOccupancyOccupantAdd--occupantPhoneNumber">Phone Number</label>
-                            <div class="control">
-                                <input class="input" id="lotOccupancyOccupantAdd--occupantPhoneNumber" name="occupantPhoneNumber" type="text" maxlength="30" autocomplete="off" />
-                            </div>
-                        </div>
-                    </div>
-                    <div class="column">
-                        <div class="field">
-                            <label class="label" for="lotOccupancyOccupantAdd--occupantEmailAddress">Email Address</label>
-                            <div class="control">
-                                <input class="input" id="lotOccupancyOccupantAdd--occupantEmailAddress" name="occupantEmailAddress" type="email" maxlength="200" autocomplete="off" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-            </form>
         </section>
         <footer class="modal-card-foot justify-right">
-            <button class="button is-success" type="submit" form="form--lotOccupancyOccupantAdd">
+            <button class="button is-close-modal-button" type="button">Close</button>
-                <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
-                <span>Add <span class="alias" data-alias="Occupant"></span></span>
-            </button>
-            <button class="button is-close-modal-button" type="button">Cancel</button>
         </footer>
     </div>
 </div>

routes/lotOccupancies.js

@@ -8,6 +8,7 @@ import handler_doCreateLotOccupancy from "../handlers/lotOccupancies-post/doCrea
 import handler_edit from "../handlers/lotOccupancies-get/edit.js";
 import handler_doUpdateLotOccupancy from "../handlers/lotOccupancies-post/doUpdateLotOccupancy.js";
 import handler_doDeleteLotOccupancy from "../handlers/lotOccupancies-post/doDeleteLotOccupancy.js";
+import handler_doSearchPastOccupants from "../handlers/lotOccupancies-post/doSearchPastOccupants.js";
 import handler_doAddLotOccupancyOccupant from "../handlers/lotOccupancies-post/doAddLotOccupancyOccupant.js";
 import handler_doUpdateLotOccupancyOccupant from "../handlers/lotOccupancies-post/doUpdateLotOccupancyOccupant.js";
 import handler_doDeleteLotOccupancyOccupant from "../handlers/lotOccupancies-post/doDeleteLotOccupancyOccupant.js";
@@ -30,6 +31,7 @@ router.get("/:lotOccupancyId", handler_view);
 router.get("/:lotOccupancyId/edit", permissionHandlers.updateGetHandler, handler_edit);
 router.post("/doUpdateLotOccupancy", permissionHandlers.updatePostHandler, handler_doUpdateLotOccupancy);
 router.post("/doDeleteLotOccupancy", permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancy);
+router.post("/doSearchPastOccupants", permissionHandlers.updatePostHandler, handler_doSearchPastOccupants);
 router.post("/doAddLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doAddLotOccupancyOccupant);
 router.post("/doUpdateLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doUpdateLotOccupancyOccupant);
 router.post("/doDeleteLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancyOccupant);

routes/lotOccupancies.ts

@@ -13,6 +13,7 @@ import handler_edit from "../handlers/lotOccupancies-get/edit.js";
 import handler_doUpdateLotOccupancy from "../handlers/lotOccupancies-post/doUpdateLotOccupancy.js";
 import handler_doDeleteLotOccupancy from "../handlers/lotOccupancies-post/doDeleteLotOccupancy.js";
 
+import handler_doSearchPastOccupants from "../handlers/lotOccupancies-post/doSearchPastOccupants.js";
 import handler_doAddLotOccupancyOccupant from "../handlers/lotOccupancies-post/doAddLotOccupancyOccupant.js";
 import handler_doUpdateLotOccupancyOccupant from "../handlers/lotOccupancies-post/doUpdateLotOccupancyOccupant.js";
 import handler_doDeleteLotOccupancyOccupant from "../handlers/lotOccupancies-post/doDeleteLotOccupancyOccupant.js";
@@ -80,6 +81,12 @@ router.post(
 
 // Occupants
 
+router.post(
+    "/doSearchPastOccupants",
+    permissionHandlers.updatePostHandler,
+    handler_doSearchPastOccupants
+);
+
 router.post(
     "/doAddLotOccupancyOccupant",
     permissionHandlers.updatePostHandler,

types/recordTypes.d.ts

@@ -154,6 +154,8 @@ export interface LotOccupancyOccupant extends Record {
     occupantPostalCode?: string;
     occupantPhoneNumber?: string;
     occupantEmailAddress?: string;
+    lotOccupancyIdCount?: number;
+    recordUpdate_timeMillisMax?: number;
 }
 export interface LotOccupancyComment extends Record {
     lotOccupancyCommentId?: number;

types/recordTypes.ts

@@ -203,6 +203,9 @@ export interface LotOccupancyOccupant extends Record {
 
     occupantPhoneNumber?: string;
     occupantEmailAddress?: string;
+    
+    lotOccupancyIdCount?: number;
+    recordUpdate_timeMillisMax?: number;
 }
 
 export interface LotOccupancyComment extends Record {