lot occupancy comments

view, add, update, delete

handlers/lotOccupancies-get/new.ts

@@ -3,7 +3,6 @@ import type {
 } from "express";
 
 import {
-    getLotOccupantTypes,
     getOccupancyTypes
 } from "../../helpers/functions.cache.js";
 

handlers/lotOccupancies-post/doAddLotOccupancyComment.d.ts

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

handlers/lotOccupancies-post/doAddLotOccupancyComment.js

@@ -0,0 +1,11 @@
+import { addLotOccupancyComment } from "../../helpers/lotOccupancyDB/addLotOccupancyComment.js";
+import { getLotOccupancyComments } from "../../helpers/lotOccupancyDB/getLotOccupancyComments.js";
+export const handler = async (request, response) => {
+    addLotOccupancyComment(request.body, request.session);
+    const lotOccupancyComments = getLotOccupancyComments(request.body.lotOccupancyId);
+    response.json({
+        success: true,
+        lotOccupancyComments
+    });
+};
+export default handler;

handlers/lotOccupancies-post/doAddLotOccupancyComment.ts

@@ -0,0 +1,27 @@
+import type {
+    RequestHandler
+} from "express";
+
+import {
+    addLotOccupancyComment
+} from "../../helpers/lotOccupancyDB/addLotOccupancyComment.js";
+
+import {
+    getLotOccupancyComments
+} from "../../helpers/lotOccupancyDB/getLotOccupancyComments.js";
+
+
+export const handler: RequestHandler = async (request, response) => {
+
+    addLotOccupancyComment(request.body, request.session);
+
+    const lotOccupancyComments = getLotOccupancyComments(request.body.lotOccupancyId);
+
+    response.json({
+        success: true,
+        lotOccupancyComments
+    });
+};
+
+
+export default handler;

handlers/lotOccupancies-post/doDeleteLotOccupancyComment.d.ts

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

handlers/lotOccupancies-post/doDeleteLotOccupancyComment.js

@@ -0,0 +1,11 @@
+import { deleteLotOccupancyComment } from "../../helpers/lotOccupancyDB/deleteLotOccupancyComment.js";
+import { getLotOccupancyComments } from "../../helpers/lotOccupancyDB/getLotOccupancyComments.js";
+export const handler = async (request, response) => {
+    const success = deleteLotOccupancyComment(request.body.lotOccupancyCommentId, request.session);
+    const lotOccupancyComments = getLotOccupancyComments(request.body.lotOccupancyId);
+    response.json({
+        success,
+        lotOccupancyComments
+    });
+};
+export default handler;

handlers/lotOccupancies-post/doDeleteLotOccupancyComment.ts

@@ -0,0 +1,25 @@
+import type {
+    RequestHandler
+} from "express";
+
+import {
+    deleteLotOccupancyComment
+} from "../../helpers/lotOccupancyDB/deleteLotOccupancyComment.js";
+
+import {getLotOccupancyComments} from "../../helpers/lotOccupancyDB/getLotOccupancyComments.js";
+
+
+export const handler: RequestHandler = async (request, response) => {
+
+    const success = deleteLotOccupancyComment(request.body.lotOccupancyCommentId, request.session);
+
+    const lotOccupancyComments = getLotOccupancyComments(request.body.lotOccupancyId);
+
+    response.json({
+        success,
+        lotOccupancyComments
+    });
+};
+
+
+export default handler;

handlers/lotOccupancies-post/doUpdateLotOccupancyComment.d.ts

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

handlers/lotOccupancies-post/doUpdateLotOccupancyComment.js

@@ -0,0 +1,11 @@
+import { updateLotOccupancyComment } from "../../helpers/lotOccupancyDB/updateLotOccupancyComment.js";
+import { getLotOccupancyComments } from "../../helpers/lotOccupancyDB/getLotOccupancyComments.js";
+export const handler = async (request, response) => {
+    const success = updateLotOccupancyComment(request.body, request.session);
+    const lotOccupancyComments = getLotOccupancyComments(request.body.lotOccupancyId);
+    response.json({
+        success,
+        lotOccupancyComments
+    });
+};
+export default handler;

handlers/lotOccupancies-post/doUpdateLotOccupancyComment.ts

@@ -0,0 +1,25 @@
+import type {
+    RequestHandler
+} from "express";
+
+import {
+    updateLotOccupancyComment
+} from "../../helpers/lotOccupancyDB/updateLotOccupancyComment.js";
+
+import {getLotOccupancyComments} from "../../helpers/lotOccupancyDB/getLotOccupancyComments.js";
+
+
+export const handler: RequestHandler = async (request, response) => {
+
+    const success = updateLotOccupancyComment(request.body, request.session);
+
+    const lotOccupancyComments = getLotOccupancyComments(request.body.lotOccupancyId);
+
+    response.json({
+        success,
+        lotOccupancyComments
+    });
+};
+
+
+export default handler;

helpers/lotOccupancyDB/addLotOccupancyComment.d.ts

@@ -1,8 +1,8 @@
 import type * as recordTypes from "../../types/recordTypes";
 interface AddLotOccupancyCommentForm {
     lotOccupancyId: string | number;
-    lotOccupancyCommentDateString: string;
-    lotOccupancyCommentTimeString: string;
+    lotOccupancyCommentDateString?: string;
+    lotOccupancyCommentTimeString?: string;
     lotOccupancyComment: string;
 }
 export declare const addLotOccupancyComment: (commentForm: AddLotOccupancyCommentForm, requestSession: recordTypes.PartialSession) => number;

helpers/lotOccupancyDB/addLotOccupancyComment.js

@@ -1,16 +1,26 @@
-import { dateStringToInteger, timeStringToInteger } from "@cityssm/expressjs-server-js/dateTimeFns.js";
 import sqlite from "better-sqlite3";
 import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+import { dateStringToInteger, dateToInteger, dateToTimeInteger, timeStringToInteger } from "@cityssm/expressjs-server-js/dateTimeFns.js";
 export const addLotOccupancyComment = (commentForm, requestSession) => {
+    const rightNow = new Date();
+    let lotOccupancyCommentDate;
+    let lotOccupancyCommentTime;
+    if (commentForm.lotOccupancyCommentDateString) {
+        lotOccupancyCommentDate = dateStringToInteger(commentForm.lotOccupancyCommentDateString);
+        lotOccupancyCommentTime = timeStringToInteger(commentForm.lotOccupancyCommentTimeString);
+    }
+    else {
+        lotOccupancyCommentDate = dateToInteger(rightNow);
+        lotOccupancyCommentTime = dateToTimeInteger(rightNow);
+    }
     const database = sqlite(databasePath);
-    const rightNowMillis = Date.now();
     const result = database
         .prepare("insert into LotOccupancyComments (" +
         "lotOccupancyId, lotOccupancyCommentDate, lotOccupancyCommentTime, lotOccupancyComment," +
         " recordCreate_userName, recordCreate_timeMillis," +
         " recordUpdate_userName, recordUpdate_timeMillis)" +
         " values (?, ?, ?, ?, ?, ?, ?, ?)")
-        .run(commentForm.lotOccupancyId, dateStringToInteger(commentForm.lotOccupancyCommentDateString), timeStringToInteger(commentForm.lotOccupancyCommentTimeString), commentForm.lotOccupancyComment, requestSession.user.userName, rightNowMillis, requestSession.user.userName, rightNowMillis);
+        .run(commentForm.lotOccupancyId, lotOccupancyCommentDate, lotOccupancyCommentTime, commentForm.lotOccupancyComment, requestSession.user.userName, rightNow.getTime(), requestSession.user.userName, rightNow.getTime());
     database.close();
     return result.lastInsertRowid;
 };

helpers/lotOccupancyDB/addLotOccupancyComment.ts

@@ -1,44 +1,64 @@
-import { dateStringToInteger, timeStringToInteger } from "@cityssm/expressjs-server-js/dateTimeFns.js";
 import sqlite from "better-sqlite3";
-import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+
+import {
+    lotOccupancyDB as databasePath
+} from "../../data/databasePaths.js";
+
+import {
+    dateStringToInteger,
+    dateToInteger,
+    dateToTimeInteger,
+    timeStringToInteger
+} from "@cityssm/expressjs-server-js/dateTimeFns.js";
 
 import type * as recordTypes from "../../types/recordTypes";
 
 
 interface AddLotOccupancyCommentForm {
     lotOccupancyId: string | number;
-    lotOccupancyCommentDateString: string;
-    lotOccupancyCommentTimeString: string;
+    lotOccupancyCommentDateString ? : string;
+    lotOccupancyCommentTimeString ? : string;
     lotOccupancyComment: string;
 }
 
 
 export const addLotOccupancyComment =
-  (commentForm: AddLotOccupancyCommentForm, requestSession: recordTypes.PartialSession): number => {
+    (commentForm: AddLotOccupancyCommentForm, requestSession: recordTypes.PartialSession): number => {
 
-    const database = sqlite(databasePath);
+        const rightNow = new Date();
 
-    const rightNowMillis = Date.now();
+        let lotOccupancyCommentDate: number;
+        let lotOccupancyCommentTime: number;
 
-    const result = database
-      .prepare("insert into LotOccupancyComments (" +
-        "lotOccupancyId, lotOccupancyCommentDate, lotOccupancyCommentTime, lotOccupancyComment," +
-        " recordCreate_userName, recordCreate_timeMillis," +
-        " recordUpdate_userName, recordUpdate_timeMillis)" +
-        " values (?, ?, ?, ?, ?, ?, ?, ?)")
-      .run(commentForm.lotOccupancyId,
-        dateStringToInteger(commentForm.lotOccupancyCommentDateString),
-        timeStringToInteger(commentForm.lotOccupancyCommentTimeString),
-        commentForm.lotOccupancyComment,
-        requestSession.user.userName,
-        rightNowMillis,
-        requestSession.user.userName,
-        rightNowMillis);
+        if (commentForm.lotOccupancyCommentDateString) {
+            lotOccupancyCommentDate = dateStringToInteger(commentForm.lotOccupancyCommentDateString);
+            lotOccupancyCommentTime = timeStringToInteger(commentForm.lotOccupancyCommentTimeString);
+        } else {
+            lotOccupancyCommentDate = dateToInteger(rightNow);
+            lotOccupancyCommentTime = dateToTimeInteger(rightNow);
+        }
 
-    database.close();
+        const database = sqlite(databasePath);
 
-    return result.lastInsertRowid as number;
-  };
+        const result = database
+            .prepare("insert into LotOccupancyComments (" +
+                "lotOccupancyId, lotOccupancyCommentDate, lotOccupancyCommentTime, lotOccupancyComment," +
+                " recordCreate_userName, recordCreate_timeMillis," +
+                " recordUpdate_userName, recordUpdate_timeMillis)" +
+                " values (?, ?, ?, ?, ?, ?, ?, ?)")
+            .run(commentForm.lotOccupancyId,
+                lotOccupancyCommentDate,
+                lotOccupancyCommentTime,
+                commentForm.lotOccupancyComment,
+                requestSession.user.userName,
+                rightNow.getTime(),
+                requestSession.user.userName,
+                rightNow.getTime());
+
+        database.close();
+
+        return result.lastInsertRowid as number;
+    };
 
 
 export default addLotOccupancyComment;

helpers/lotOccupancyDB/deleteLotOccupancyComment.d.ts

@@ -0,0 +1,3 @@
+import type * as recordTypes from "../../types/recordTypes";
+export declare const deleteLotOccupancyComment: (lotOccupancyCommentId: number | string, requestSession: recordTypes.PartialSession) => boolean;
+export default deleteLotOccupancyComment;

helpers/lotOccupancyDB/deleteLotOccupancyComment.js

@@ -0,0 +1,15 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+export const deleteLotOccupancyComment = (lotOccupancyCommentId, requestSession) => {
+    const database = sqlite(databasePath);
+    const rightNowMillis = Date.now();
+    const result = database
+        .prepare("update LotOccupancyComments" +
+        " set recordDelete_userName = ?," +
+        " recordDelete_timeMillis = ?" +
+        " where lotOccupancyCommentId = ?")
+        .run(requestSession.user.userName, rightNowMillis, lotOccupancyCommentId);
+    database.close();
+    return (result.changes > 0);
+};
+export default deleteLotOccupancyComment;

helpers/lotOccupancyDB/deleteLotOccupancyComment.ts

@@ -0,0 +1,33 @@
+import sqlite from "better-sqlite3";
+
+import {
+    lotOccupancyDB as databasePath
+} from "../../data/databasePaths.js";
+
+import type * as recordTypes from "../../types/recordTypes";
+
+
+export const deleteLotOccupancyComment =
+    (lotOccupancyCommentId: number | string,
+        requestSession: recordTypes.PartialSession): boolean => {
+
+        const database = sqlite(databasePath);
+
+        const rightNowMillis = Date.now();
+
+        const result = database
+            .prepare("update LotOccupancyComments" +
+                " set recordDelete_userName = ?," +
+                " recordDelete_timeMillis = ?" +
+                " where lotOccupancyCommentId = ?")
+            .run(requestSession.user.userName,
+                rightNowMillis,
+                lotOccupancyCommentId);
+
+        database.close();
+
+        return (result.changes > 0);
+    };
+
+
+export default deleteLotOccupancyComment;

helpers/lotOccupancyDB/getLotOccupancyComments.js

@@ -11,7 +11,8 @@ export const getLotOccupancyComments = (lotOccupancyId, connectedDatabase) => {
         .prepare("select lotOccupancyCommentId," +
         " lotOccupancyCommentDate, userFn_dateIntegerToString(lotOccupancyCommentDate) as lotOccupancyCommentDateString," +
         " lotOccupancyCommentTime, userFn_timeIntegerToString(lotOccupancyCommentTime) as lotOccupancyCommentTimeString," +
-        " lotOccupancyComment" +
+        " lotOccupancyComment," +
+        " recordCreate_userName, recordUpdate_userName" +
         " from LotOccupancyComments" +
         " where recordDelete_timeMillis is null" +
         " and lotOccupancyId = ?" +

helpers/lotOccupancyDB/getLotOccupancyComments.ts

@@ -20,7 +20,8 @@ export const getLotOccupancyComments = (lotOccupancyId: number | string, connect
         .prepare("select lotOccupancyCommentId," +
             " lotOccupancyCommentDate, userFn_dateIntegerToString(lotOccupancyCommentDate) as lotOccupancyCommentDateString," +
             " lotOccupancyCommentTime, userFn_timeIntegerToString(lotOccupancyCommentTime) as lotOccupancyCommentTimeString," +
-            " lotOccupancyComment" +
+            " lotOccupancyComment," +
+            " recordCreate_userName, recordUpdate_userName" +
             " from LotOccupancyComments" +
             " where recordDelete_timeMillis is null" +
             " and lotOccupancyId = ?" +

helpers/lotOccupancyDB/updateLotOccupancyComment.d.ts

@@ -0,0 +1,9 @@
+import type * as recordTypes from "../../types/recordTypes";
+interface UpdateLotOccupancyCommentForm {
+    lotOccupancyCommentId: string | number;
+    lotOccupancyCommentDateString: string;
+    lotOccupancyCommentTimeString: string;
+    lotOccupancyComment: string;
+}
+export declare const updateLotOccupancyComment: (commentForm: UpdateLotOccupancyCommentForm, requestSession: recordTypes.PartialSession) => boolean;
+export default updateLotOccupancyComment;

helpers/lotOccupancyDB/updateLotOccupancyComment.js

@@ -0,0 +1,20 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+import { dateStringToInteger } from "@cityssm/expressjs-server-js/dateTimeFns.js";
+export const updateLotOccupancyComment = (commentForm, requestSession) => {
+    const rightNowMillis = Date.now();
+    const database = sqlite(databasePath);
+    const result = database
+        .prepare("update LotOccupancyComments" +
+        " set lotOccupancyCommentDate = ?," +
+        " lotOccupancyCommentTime = ?," +
+        " lotOccupancyComment = ?," +
+        " recordUpdate_userName = ?," +
+        " recordUpdate_timeMillis = ?" +
+        " where recordDelete_timeMillis is null" +
+        " and lotOccupancyCommentId = ?")
+        .run(dateStringToInteger(commentForm.lotOccupancyCommentDateString), dateStringToInteger(commentForm.lotOccupancyCommentTimeString), commentForm.lotOccupancyComment, requestSession.user.userName, rightNowMillis, commentForm.lotOccupancyCommentId);
+    database.close();
+    return result.changes > 0;
+};
+export default updateLotOccupancyComment;

helpers/lotOccupancyDB/updateLotOccupancyComment.ts

@@ -0,0 +1,54 @@
+import sqlite from "better-sqlite3";
+
+import {
+    lotOccupancyDB as databasePath
+} from "../../data/databasePaths.js";
+
+import {
+    dateStringToInteger,
+    dateToInteger,
+    dateToTimeInteger,
+    timeStringToInteger
+} from "@cityssm/expressjs-server-js/dateTimeFns.js";
+
+import type * as recordTypes from "../../types/recordTypes";
+
+
+interface UpdateLotOccupancyCommentForm {
+    lotOccupancyCommentId: string | number;
+    lotOccupancyCommentDateString: string;
+    lotOccupancyCommentTimeString: string;
+    lotOccupancyComment: string;
+}
+
+
+export const updateLotOccupancyComment =
+    (commentForm: UpdateLotOccupancyCommentForm, requestSession: recordTypes.PartialSession): boolean => {
+
+        const rightNowMillis = Date.now();
+
+        const database = sqlite(databasePath);
+
+        const result = database
+            .prepare("update LotOccupancyComments" +
+                " set lotOccupancyCommentDate = ?," +
+                " lotOccupancyCommentTime = ?," +
+                " lotOccupancyComment = ?," +
+                " recordUpdate_userName = ?," +
+                " recordUpdate_timeMillis = ?" +
+                " where recordDelete_timeMillis is null" +
+                " and lotOccupancyCommentId = ?")
+            .run(dateStringToInteger(commentForm.lotOccupancyCommentDateString),
+                dateStringToInteger(commentForm.lotOccupancyCommentTimeString),
+                commentForm.lotOccupancyComment,
+                requestSession.user.userName,
+                rightNowMillis,
+                commentForm.lotOccupancyCommentId);
+
+        database.close();
+
+        return result.changes > 0;
+    };
+
+
+export default updateLotOccupancyComment;

public-typescript/lotOccupancyEdit.js

@@ -395,4 +395,162 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
         renderLotOccupancyOccupants();
     }
+    if (!isCreate) {
+        let lotOccupancyComments = exports.lotOccupancyComments;
+        const openEditLotOccupancyComment = (clickEvent) => {
+            const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupancyCommentId, 10);
+            const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => {
+                return currentLotOccupancyComment.lotOccupancyCommentId === lotOccupancyCommentId;
+            });
+            let editFormElement;
+            let editCloseModalFunction;
+            const editComment = (submitEvent) => {
+                submitEvent.preventDefault();
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doUpdateLotOccupancyComment", editFormElement, (responseJSON) => {
+                    if (responseJSON.success) {
+                        lotOccupancyComments = responseJSON.lotOccupancyComments;
+                        editCloseModalFunction();
+                        renderLotOccupancyComments();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Updating Comment",
+                            message: responseJSON.errorMessage,
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+            cityssm.openHtmlModal("lotOccupancy-editComment", {
+                onshow: (modalElement) => {
+                    los.populateAliases(modalElement);
+                    modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyId").value = lotOccupancyId;
+                    modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentId").value = lotOccupancyCommentId.toString();
+                    modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyComment").value = lotOccupancyComment.lotOccupancyComment;
+                    modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentDateString").value = lotOccupancyComment.lotOccupancyCommentDateString;
+                    modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentTimeString").value = lotOccupancyComment.lotOccupancyCommentTimeString;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+                    bulmaJS.toggleHtmlClipped();
+                    editFormElement = modalElement.querySelector("form");
+                    editFormElement.addEventListener("submit", editComment);
+                    editCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        };
+        const deleteLotOccupancyComment = (clickEvent) => {
+            const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupancyCommentId, 10);
+            const doDelete = () => {
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doDeleteLotOccupancyComment", {
+                    lotOccupancyId,
+                    lotOccupancyCommentId
+                }, (responseJSON) => {
+                    if (responseJSON.success) {
+                        lotOccupancyComments = responseJSON.lotOccupancyComments;
+                        renderLotOccupancyComments();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Removing Comment",
+                            message: responseJSON.errorMessage,
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+            bulmaJS.confirm({
+                title: "Remove Comment?",
+                message: "Are you sure you want to remove this comment?",
+                okButton: {
+                    text: "Yes, Remove Comment",
+                    callbackFunction: doDelete
+                },
+                contextualColorName: "warning"
+            });
+        };
+        const renderLotOccupancyComments = () => {
+            const containerElement = document.querySelector("#container--lotOccupancyComments");
+            if (lotOccupancyComments.length === 0) {
+                containerElement.innerHTML = "<div class=\"message is-info\">" +
+                    "<p class=\"message-body\">There are no comments associated with this record.</p>" +
+                    "</div>";
+                return;
+            }
+            const tableElement = document.createElement("table");
+            tableElement.className = "table is-fullwidth is-striped is-hoverable";
+            tableElement.innerHTML = "<thead><tr>" +
+                "<th>Commentor</th>" +
+                "<th>Comment Date</th>" +
+                "<th>Comment</th>" +
+                "<th><span class=\"is-sr-only\">Options</span></th>" +
+                "</tr></thead>" +
+                "<tbody></tbody>";
+            for (const lotOccupancyComment of lotOccupancyComments) {
+                const tableRowElement = document.createElement("tr");
+                tableRowElement.dataset.lotOccupancyCommentId = lotOccupancyComment.lotOccupancyCommentId.toString();
+                tableRowElement.innerHTML = "<td>" + cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName) + "</td>" +
+                    "<td>" +
+                    lotOccupancyComment.lotOccupancyCommentDateString +
+                    (lotOccupancyComment.lotOccupancyCommentTime === 0 ? "" : " " + lotOccupancyComment.lotOccupancyCommentTimeString) +
+                    "</td>" +
+                    "<td>" + cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment) + "</td>" +
+                    ("<td>" +
+                        "<div class=\"buttons are-small is-justify-content-end\">" +
+                        ("<button class=\"button is-primary button--edit\" type=\"button\">" +
+                            "<span class=\"icon is-small\"><i class=\"fas fa-pencil-alt\" aria-hidden=\"true\"></i></span>" +
+                            " <span>Edit</span>" +
+                            "</button>") +
+                        ("<button class=\"button is-light is-danger button--delete\" type=\"button\" aria-label=\"Delete\">" +
+                            "<i class=\"fas fa-trash\" aria-hidden=\"true\"></i>" +
+                            "</button>") +
+                        "</div>" +
+                        "</td>");
+                tableRowElement.querySelector(".button--edit").addEventListener("click", openEditLotOccupancyComment);
+                tableRowElement.querySelector(".button--delete").addEventListener("click", deleteLotOccupancyComment);
+                tableElement.querySelector("tbody").append(tableRowElement);
+            }
+            containerElement.innerHTML = "";
+            containerElement.append(tableElement);
+        };
+        document.querySelector("#button--addComment").addEventListener("click", () => {
+            let addFormElement;
+            let addCloseModalFunction;
+            const addComment = (submitEvent) => {
+                submitEvent.preventDefault();
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doAddLotOccupancyComment", addFormElement, (responseJSON) => {
+                    if (responseJSON.success) {
+                        lotOccupancyComments = responseJSON.lotOccupancyComments;
+                        addCloseModalFunction();
+                        renderLotOccupancyComments();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Adding Comment",
+                            message: responseJSON.errorMessage,
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+            cityssm.openHtmlModal("lotOccupancy-addComment", {
+                onshow: (modalElement) => {
+                    los.populateAliases(modalElement);
+                    modalElement.querySelector("#lotOccupancyCommentAdd--lotOccupancyId").value = lotOccupancyId;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+                    bulmaJS.toggleHtmlClipped();
+                    addFormElement = modalElement.querySelector("form");
+                    addFormElement.addEventListener("submit", addComment);
+                    addCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        });
+        renderLotOccupancyComments();
+    }
 })();

public-typescript/lotOccupancyEdit.ts

@@ -8,8 +8,7 @@ import type {
 } from "@cityssm/bulma-webapp-js/src/types";
 
 import type {
-    BulmaJS,
-    StringConfigProperties
+    BulmaJS
 } from "@cityssm/bulma-js/types";
 
 declare const cityssm: cityssmGlobal;
@@ -575,6 +574,221 @@ declare const bulmaJS: BulmaJS;
      * Comments
      */
 
+    if (!isCreate) {
+        let lotOccupancyComments: recordTypes.LotOccupancyComment[] = exports.lotOccupancyComments;
+
+        const openEditLotOccupancyComment = (clickEvent: Event) => {
+
+            const lotOccupancyCommentId = Number.parseInt((clickEvent.currentTarget as HTMLElement).closest("tr").dataset.lotOccupancyCommentId, 10);
+
+            const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => {
+                return currentLotOccupancyComment.lotOccupancyCommentId === lotOccupancyCommentId;
+            });
+
+            let editFormElement: HTMLFormElement;
+            let editCloseModalFunction: () => void;
+
+            const editComment = (submitEvent: SubmitEvent) => {
+
+                submitEvent.preventDefault();
+
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doUpdateLotOccupancyComment",
+                    editFormElement,
+                    (responseJSON: {
+                        success: boolean;
+                        errorMessage ? : string;
+                        lotOccupancyComments ? : recordTypes.LotOccupancyComment[];
+                    }) => {
+
+                        if (responseJSON.success) {
+                            lotOccupancyComments = responseJSON.lotOccupancyComments;
+                            editCloseModalFunction();
+                            renderLotOccupancyComments();
+                        } else {
+                            bulmaJS.alert({
+                                title: "Error Updating Comment",
+                                message: responseJSON.errorMessage,
+                                contextualColorName: "danger"
+                            });
+                        }
+                    });
+            };
+
+            cityssm.openHtmlModal("lotOccupancy-editComment", {
+                onshow: (modalElement) => {
+                    los.populateAliases(modalElement);
+
+                    (modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyId") as HTMLInputElement).value = lotOccupancyId;
+                    (modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentId") as HTMLInputElement).value = lotOccupancyCommentId.toString();
+
+                    (modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyComment") as HTMLInputElement).value = lotOccupancyComment.lotOccupancyComment;
+                    (modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentDateString") as HTMLInputElement).value = lotOccupancyComment.lotOccupancyCommentDateString;
+                    (modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentTimeString") as HTMLInputElement).value = lotOccupancyComment.lotOccupancyCommentTimeString;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+
+                    bulmaJS.toggleHtmlClipped();
+
+                    editFormElement = modalElement.querySelector("form");
+                    editFormElement.addEventListener("submit", editComment);
+
+                    editCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        };
+
+        const deleteLotOccupancyComment = (clickEvent: Event) => {
+
+            const lotOccupancyCommentId = Number.parseInt((clickEvent.currentTarget as HTMLElement).closest("tr").dataset.lotOccupancyCommentId, 10);
+
+            const doDelete = () => {
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doDeleteLotOccupancyComment", {
+                        lotOccupancyId,
+                        lotOccupancyCommentId
+                    },
+                    (responseJSON: {
+                        success: boolean;
+                        errorMessage ? : string;
+                        lotOccupancyComments: recordTypes.LotOccupancyComment[];
+                    }) => {
+                        if (responseJSON.success) {
+                            lotOccupancyComments = responseJSON.lotOccupancyComments;
+                            renderLotOccupancyComments();
+                        } else {
+                            bulmaJS.alert({
+                                title: "Error Removing Comment",
+                                message: responseJSON.errorMessage,
+                                contextualColorName: "danger"
+                            });
+                        }
+                    });
+            };
+
+            bulmaJS.confirm({
+                title: "Remove Comment?",
+                message: "Are you sure you want to remove this comment?",
+                okButton: {
+                    text: "Yes, Remove Comment",
+                    callbackFunction: doDelete
+                },
+                contextualColorName: "warning"
+            });
+        };
+
+        const renderLotOccupancyComments = () => {
+
+            const containerElement = document.querySelector("#container--lotOccupancyComments") as HTMLElement;
+
+            if (lotOccupancyComments.length === 0) {
+                containerElement.innerHTML = "<div class=\"message is-info\">" +
+                    "<p class=\"message-body\">There are no comments associated with this record.</p>" +
+                    "</div>";
+                return;
+            }
+
+            const tableElement = document.createElement("table");
+            tableElement.className = "table is-fullwidth is-striped is-hoverable";
+            tableElement.innerHTML = "<thead><tr>" +
+                "<th>Commentor</th>" +
+                "<th>Comment Date</th>" +
+                "<th>Comment</th>" +
+                "<th><span class=\"is-sr-only\">Options</span></th>" +
+                "</tr></thead>" +
+                "<tbody></tbody>";
+
+            for (const lotOccupancyComment of lotOccupancyComments) {
+
+                const tableRowElement = document.createElement("tr");
+                tableRowElement.dataset.lotOccupancyCommentId = lotOccupancyComment.lotOccupancyCommentId.toString();
+
+                tableRowElement.innerHTML = "<td>" + cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName) + "</td>" +
+                    "<td>" +
+                    lotOccupancyComment.lotOccupancyCommentDateString +
+                    (lotOccupancyComment.lotOccupancyCommentTime === 0 ? "" : " " + lotOccupancyComment.lotOccupancyCommentTimeString) +
+                    "</td>" +
+                    "<td>" + cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment) + "</td>" +
+                    ("<td>" +
+                        "<div class=\"buttons are-small is-justify-content-end\">" +
+                        ("<button class=\"button is-primary button--edit\" type=\"button\">" +
+                            "<span class=\"icon is-small\"><i class=\"fas fa-pencil-alt\" aria-hidden=\"true\"></i></span>" +
+                            " <span>Edit</span>" +
+                            "</button>") +
+                        ("<button class=\"button is-light is-danger button--delete\" type=\"button\" aria-label=\"Delete\">" +
+                            "<i class=\"fas fa-trash\" aria-hidden=\"true\"></i>" +
+                            "</button>") +
+                        "</div>" +
+                        "</td>");
+
+                tableRowElement.querySelector(".button--edit").addEventListener("click", openEditLotOccupancyComment);
+                tableRowElement.querySelector(".button--delete").addEventListener("click", deleteLotOccupancyComment);
+
+                tableElement.querySelector("tbody").append(tableRowElement);
+            }
+
+            containerElement.innerHTML = "";
+            containerElement.append(tableElement);
+        };
+
+
+        document.querySelector("#button--addComment").addEventListener("click", () => {
+
+            let addFormElement: HTMLFormElement;
+            let addCloseModalFunction: () => void;
+
+            const addComment = (submitEvent: SubmitEvent) => {
+
+                submitEvent.preventDefault();
+
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doAddLotOccupancyComment",
+                    addFormElement,
+                    (responseJSON: {
+                        success: boolean;
+                        errorMessage ? : string;
+                        lotOccupancyComments ? : recordTypes.LotOccupancyComment[];
+                    }) => {
+
+                        if (responseJSON.success) {
+                            lotOccupancyComments = responseJSON.lotOccupancyComments;
+                            addCloseModalFunction();
+                            renderLotOccupancyComments();
+                        } else {
+                            bulmaJS.alert({
+                                title: "Error Adding Comment",
+                                message: responseJSON.errorMessage,
+                                contextualColorName: "danger"
+                            });
+                        }
+                    });
+            };
+
+            cityssm.openHtmlModal("lotOccupancy-addComment", {
+                onshow: (modalElement) => {
+                    los.populateAliases(modalElement);
+
+                    (modalElement.querySelector("#lotOccupancyCommentAdd--lotOccupancyId") as HTMLInputElement).value = lotOccupancyId;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+
+                    bulmaJS.toggleHtmlClipped();
+
+                    addFormElement = modalElement.querySelector("form");
+                    addFormElement.addEventListener("submit", addComment);
+
+                    addCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        });
+
+
+        renderLotOccupancyComments();
+    }
+
     /*
      * Fees
      */

public/html/lotOccupancy-addComment.html

@@ -0,0 +1,29 @@
+<div class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <h3 class="modal-card-title">
+                Add Comment
+            </h3>
+            <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
+        </header>
+        <section class="modal-card-body">
+            <form id="form--lotOccupancyCommentAdd">
+                <input id="lotOccupancyCommentAdd--lotOccupancyId" name="lotOccupancyId" type="hidden" value="" />
+                <div class="field">
+                    <label class="label" for="lotOccupancyCommentAdd--lotOccupancyComment">Comment</label>
+                    <div class="control">
+                        <textarea class="textarea" id="lotOccupancyCommentAdd--lotOccupancyComment" name="lotOccupancyComment" required></textarea>
+                    </div>
+                </div>
+            </form>
+        </section>
+        <footer class="modal-card-foot justify-right">
+            <button class="button is-success" type="submit" form="form--lotOccupancyCommentAdd">
+                <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                <span>Add Comment</span>
+            </button>
+            <button class="button is-close-modal-button" type="button">Cancel</button>
+        </footer>
+    </div>
+</div>

public/html/lotOccupancy-editComment.html

@@ -0,0 +1,48 @@
+<div class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <h3 class="modal-card-title">
+                Add Comment
+            </h3>
+            <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
+        </header>
+        <section class="modal-card-body">
+            <form id="form--lotOccupancyCommentEdit">
+                <input id="lotOccupancyCommentEdit--lotOccupancyId" name="lotOccupancyId" type="hidden" value="" />
+                <input id="lotOccupancyCommentEdit--lotOccupancyCommentId" name="lotOccupancyCommentId" type="hidden" value="" />
+                <div class="field">
+                    <label class="label" for="lotOccupancyCommentEdit--lotOccupancyComment">Comment</label>
+                    <div class="control">
+                        <textarea class="textarea" id="lotOccupancyCommentEdit--lotOccupancyComment" name="lotOccupancyComment" required></textarea>
+                    </div>
+                </div>
+                <div class="columns">
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="lotOccupancyCommentEdit--lotOccupancyCommentDateString">Comment Date</label>
+                            <div class="control">
+                                <input class="input" id="lotOccupancyCommentEdit--lotOccupancyCommentDateString" name="lotOccupancyCommentDateString" type="date" required />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="lotOccupancyCommentEdit--lotOccupancyCommentTimeString">Comment Time</label>
+                            <div class="control">
+                                <input class="input" id="lotOccupancyCommentEdit--lotOccupancyCommentTimeString" name="lotOccupancyCommentTimeString" type="time" required />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </section>
+        <footer class="modal-card-foot justify-right">
+            <button class="button is-success" type="submit" form="form--lotOccupancyCommentEdit">
+                <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                <span>Update Comment</span>
+            </button>
+            <button class="button is-close-modal-button" type="button">Cancel</button>
+        </footer>
+    </div>
+</div>

routes/lotOccupancies.js

@@ -10,6 +10,9 @@ import handler_doUpdateLotOccupancy from "../handlers/lotOccupancies-post/doUpda
 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";
+import handler_doAddLotOccupancyComment from "../handlers/lotOccupancies-post/doAddLotOccupancyComment.js";
+import handler_doUpdateLotOccupancyComment from "../handlers/lotOccupancies-post/doUpdateLotOccupancyComment.js";
+import handler_doDeleteLotOccupancyComment from "../handlers/lotOccupancies-post/doDeleteLotOccupancyComment.js";
 import * as permissionHandlers from "../handlers/permissions.js";
 export const router = Router();
 router.get("/", handler_search);
@@ -23,4 +26,7 @@ router.post("/doUpdateLotOccupancy", permissionHandlers.updatePostHandler, handl
 router.post("/doAddLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doAddLotOccupancyOccupant);
 router.post("/doUpdateLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doUpdateLotOccupancyOccupant);
 router.post("/doDeleteLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancyOccupant);
+router.post("/doAddLotOccupancyComment", permissionHandlers.updatePostHandler, handler_doAddLotOccupancyComment);
+router.post("/doUpdateLotOccupancyComment", permissionHandlers.updatePostHandler, handler_doUpdateLotOccupancyComment);
+router.post("/doDeleteLotOccupancyComment", permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancyComment);
 export default router;

routes/lotOccupancies.ts

@@ -18,6 +18,10 @@ import handler_doAddLotOccupancyOccupant from "../handlers/lotOccupancies-post/d
 import handler_doUpdateLotOccupancyOccupant from "../handlers/lotOccupancies-post/doUpdateLotOccupancyOccupant.js";
 import handler_doDeleteLotOccupancyOccupant from "../handlers/lotOccupancies-post/doDeleteLotOccupancyOccupant.js";
 
+import handler_doAddLotOccupancyComment from "../handlers/lotOccupancies-post/doAddLotOccupancyComment.js";
+import handler_doUpdateLotOccupancyComment from "../handlers/lotOccupancies-post/doUpdateLotOccupancyComment.js";
+import handler_doDeleteLotOccupancyComment from "../handlers/lotOccupancies-post/doDeleteLotOccupancyComment.js";
+
 import * as permissionHandlers from "../handlers/permissions.js";
 
 
@@ -69,5 +73,17 @@ router.post("/doDeleteLotOccupancyOccupant",
     permissionHandlers.updatePostHandler,
     handler_doDeleteLotOccupancyOccupant);
 
+router.post("/doAddLotOccupancyComment",
+    permissionHandlers.updatePostHandler,
+    handler_doAddLotOccupancyComment);
+
+router.post("/doUpdateLotOccupancyComment",
+    permissionHandlers.updatePostHandler,
+    handler_doUpdateLotOccupancyComment);
+
+router.post("/doDeleteLotOccupancyComment",
+    permissionHandlers.updatePostHandler,
+    handler_doDeleteLotOccupancyComment);
+
 
 export default router;

temp/legacy.importFromCSV.js

@@ -181,7 +181,8 @@ function importFromCSV() {
                     occupancyTypeId: preneedOccupancyType.occupancyTypeId,
                     lotId,
                     occupancyStartDateString,
-                    occupancyEndDateString
+                    occupancyEndDateString,
+                    occupancyTypeFieldIds: ""
                 }, user);
                 const occupantPostalCode = ((masterRow.CM_POST1 || "") + " " + (masterRow.CM_POST2 || "")).trim();
                 addLotOccupancyOccupant({
@@ -228,7 +229,8 @@ function importFromCSV() {
                     occupancyTypeId: deceasedOccupancyType.occupancyTypeId,
                     lotId,
                     occupancyStartDateString,
-                    occupancyEndDateString
+                    occupancyEndDateString,
+                    occupancyTypeFieldIds: ""
                 }, user);
                 const deceasedPostalCode = ((masterRow.CM_POST1 || "") + " " + (masterRow.CM_POST2 || "")).trim();
                 addLotOccupancyOccupant({

temp/legacy.importFromCSV.ts

@@ -329,7 +329,8 @@ function importFromCSV() {
                     occupancyTypeId: preneedOccupancyType.occupancyTypeId,
                     lotId,
                     occupancyStartDateString,
-                    occupancyEndDateString
+                    occupancyEndDateString,
+                    occupancyTypeFieldIds: ""
                 }, user);
 
                 const occupantPostalCode = ((masterRow.CM_POST1 || "") + " " + (masterRow.CM_POST2 || "")).trim();
@@ -392,7 +393,8 @@ function importFromCSV() {
                     occupancyTypeId: deceasedOccupancyType.occupancyTypeId,
                     lotId,
                     occupancyStartDateString,
-                    occupancyEndDateString
+                    occupancyEndDateString,
+                    occupancyTypeFieldIds: ""
                 }, user);
 
                 const deceasedPostalCode = ((masterRow.CM_POST1 || "") + " " + (masterRow.CM_POST2 || "")).trim();

views/lotOccupancy-edit.ejs

@@ -202,10 +202,26 @@
 
     <hr />
 
-    <h2 class="title is-4 mt-2">Comments</h2>
+    <div class="level is-mobile">
+        <div class="level-left">
+            <div class="level-item">
+                <h2 class="title is-4 mt-2">Comments</h2>
+            </div>
+        </div>
+        <div class="level-right">
+            <div class="level-item">
+                <button class="button is-small is-success" id="button--addComment" type="button">
+                    <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                    <span>Add Comment</span>
+                </button>
+            </div>
+        </div>
+    </div>
 
     <div id="container--lotOccupancyComments"></div>
 
+    <hr />
+    
     <div class="columns">
         <div class="column">
             <h2 class="title is-4">Fees</h2>

views/lotOccupancy-view.ejs

@@ -81,8 +81,10 @@
 
 <% if (lotOccupancy.lotOccupancyOccupants.length === 0) { %>
 <div class="message is-warning">
-    <p class="message-body">There are no <%= configFunctions.getProperty("aliases.occupants").toLowerCase() %>
-        associated with this record.</p>
+    <p class="message-body">
+        There are no <%= configFunctions.getProperty("aliases.occupants").toLowerCase() %>
+        associated with this record.
+    </p>
 </div>
 <% } else { %>
 <table class="table is-fullwidth is-striped is-hoverable">
@@ -118,6 +120,27 @@
 
 <% if (lotOccupancy.lotOccupancyComments.length > 0) { %>
 <h2 class="title is-4">Comments</h2>
+<table class="table is-fullwidth is-striped is-hoverable">
+    <thead>
+        <tr>
+            <th>Commentor</th>
+            <th>Comment Date</th>
+            <th>Comment</th>
+        </tr>
+    </thead>
+    <tbody>
+        <% for (const lotOccupancyComment of lotOccupancy.lotOccupancyComments) { %>
+            <tr>
+                <td><%= lotOccupancyComment.recordCreate_userName %></td>
+                <td>
+                    <%= lotOccupancyComment.lotOccupancyCommentDateString %>
+                    <%= (lotOccupancyComment.lotOccupancyCommentTime === 0 ? "" : lotOccupancyComment.lotOccupancyCommentTimeString) %>
+                </td>
+                <td><%= lotOccupancyComment.lotOccupancyComment %></td>
+            </tr>
+        <% } %>
+    </tbody>
+</table>
 <% } %>
 
 <div class="columns">