occupant comment title

to label relationship to deceased

helpers/initializer.database.cemetery.js

@@ -35,18 +35,23 @@ async function initializeCemeteryDatabase() {
     await addRecord('LotStatuses', 'Taken', 3, session);
     await addLotOccupantType({
         lotOccupantType: 'Deceased',
+        fontAwesomeIconClass: 'cross',
         orderNumber: 1
     }, session);
     await addLotOccupantType({
         lotOccupantType: 'Funeral Director',
+        fontAwesomeIconClass: 'church',
         orderNumber: 2
     }, session);
     await addLotOccupantType({
         lotOccupantType: 'Preneed Owner',
+        fontAwesomeIconClass: 'user',
         orderNumber: 3
     }, session);
     await addLotOccupantType({
         lotOccupantType: 'Purchaser',
+        fontAwesomeIconClass: 'hand-holding-usd',
+        occupantCommentTitle: 'Relationship to Owner/Deceased',
         orderNumber: 4
     }, session);
     await addRecord('OccupancyTypes', 'Preneed', 1, session);

helpers/initializer.database.cemetery.ts

@@ -67,6 +67,7 @@ async function initializeCemeteryDatabase(): Promise<void> {
   await addLotOccupantType(
     {
       lotOccupantType: 'Deceased',
+      fontAwesomeIconClass: 'cross',
       orderNumber: 1
     },
     session
@@ -75,6 +76,7 @@ async function initializeCemeteryDatabase(): Promise<void> {
   await addLotOccupantType(
     {
       lotOccupantType: 'Funeral Director',
+      fontAwesomeIconClass: 'church',
       orderNumber: 2
     },
     session
@@ -83,6 +85,7 @@ async function initializeCemeteryDatabase(): Promise<void> {
   await addLotOccupantType(
     {
       lotOccupantType: 'Preneed Owner',
+      fontAwesomeIconClass: 'user',
       orderNumber: 3
     },
     session
@@ -91,6 +94,8 @@ async function initializeCemeteryDatabase(): Promise<void> {
   await addLotOccupantType(
     {
       lotOccupantType: 'Purchaser',
+      fontAwesomeIconClass: 'hand-holding-usd',
+      occupantCommentTitle: 'Relationship to Owner/Deceased',
       orderNumber: 4
     },
     session

helpers/initializer.database.js

@@ -26,7 +26,13 @@ const createStatements = [
     'create index if not exists idx_occupancytypefields_ordernumber on OccupancyTypeFields (occupancyTypeId, orderNumber, occupancyTypeField)',
     `create table if not exists OccupancyTypePrints (occupancyTypeId integer not null, printEJS varchar(100) not null, orderNumber smallint not null default 0, ${recordColumns}, primary key (occupancyTypeId, printEJS), foreign key (occupancyTypeId) references OccupancyTypes (occupancyTypeId))`,
     'create index if not exists idx_occupancytypeprints_ordernumber on OccupancyTypePrints (occupancyTypeId, orderNumber, printEJS)',
-    `create table if not exists LotOccupantTypes (lotOccupantTypeId integer not null primary key autoincrement, lotOccupantType varchar(100) not null, fontAwesomeIconClass varchar(50) not null default '', orderNumber smallint not null default 0, ${recordColumns})`,
+    `create table if not exists LotOccupantTypes (
+    lotOccupantTypeId integer not null primary key autoincrement,
+    lotOccupantType varchar(100) not null,
+    fontAwesomeIconClass varchar(50) not null default '',
+    occupantCommentTitle varchar(50) not null default '',
+    orderNumber smallint not null default 0,
+    ${recordColumns})`,
     'create index if not exists idx_lotoccupanttypes_ordernumber on LotOccupantTypes (orderNumber, lotOccupantType)',
     `create table if not exists LotOccupancies (lotOccupancyId integer not null primary key autoincrement, occupancyTypeId integer not null, lotId integer, occupancyStartDate integer not null check (occupancyStartDate > 0), occupancyEndDate integer check (occupancyEndDate > 0), ${recordColumns}, foreign key (lotId) references Lots (lotId), foreign key (occupancyTypeId) references OccupancyTypes (occupancyTypeId))`,
     `create table if not exists LotOccupancyOccupants (lotOccupancyId integer not null, lotOccupantIndex  integer not null, occupantName varchar(200) not null, occupantAddress1 varchar(50), occupantAddress2 varchar(50), occupantCity varchar(20), occupantProvince varchar(2), occupantPostalCode varchar(7), occupantPhoneNumber varchar(30), occupantEmailAddress varchar(200), lotOccupantTypeId integer not null, occupantComment text not null default '', ${recordColumns}, primary key (lotOccupancyId, lotOccupantIndex), foreign key (lotOccupancyId) references LotOccupancies (lotOccupancyId), foreign key (lotOccupantTypeId) references LotOccupantTypes (lotOccupantTypeId)) without rowid`,

helpers/initializer.database.ts

@@ -37,7 +37,13 @@ const createStatements = [
   'create index if not exists idx_occupancytypefields_ordernumber on OccupancyTypeFields (occupancyTypeId, orderNumber, occupancyTypeField)',
   `create table if not exists OccupancyTypePrints (occupancyTypeId integer not null, printEJS varchar(100) not null, orderNumber smallint not null default 0, ${recordColumns}, primary key (occupancyTypeId, printEJS), foreign key (occupancyTypeId) references OccupancyTypes (occupancyTypeId))`,
   'create index if not exists idx_occupancytypeprints_ordernumber on OccupancyTypePrints (occupancyTypeId, orderNumber, printEJS)',
-  `create table if not exists LotOccupantTypes (lotOccupantTypeId integer not null primary key autoincrement, lotOccupantType varchar(100) not null, fontAwesomeIconClass varchar(50) not null default '', orderNumber smallint not null default 0, ${recordColumns})`,
+  `create table if not exists LotOccupantTypes (
+    lotOccupantTypeId integer not null primary key autoincrement,
+    lotOccupantType varchar(100) not null,
+    fontAwesomeIconClass varchar(50) not null default '',
+    occupantCommentTitle varchar(50) not null default '',
+    orderNumber smallint not null default 0,
+    ${recordColumns})`,
   'create index if not exists idx_lotoccupanttypes_ordernumber on LotOccupantTypes (orderNumber, lotOccupantType)',
   `create table if not exists LotOccupancies (lotOccupancyId integer not null primary key autoincrement, occupancyTypeId integer not null, lotId integer, occupancyStartDate integer not null check (occupancyStartDate > 0), occupancyEndDate integer check (occupancyEndDate > 0), ${recordColumns}, foreign key (lotId) references Lots (lotId), foreign key (occupancyTypeId) references OccupancyTypes (occupancyTypeId))`,
   `create table if not exists LotOccupancyOccupants (lotOccupancyId integer not null, lotOccupantIndex  integer not null, occupantName varchar(200) not null, occupantAddress1 varchar(50), occupantAddress2 varchar(50), occupantCity varchar(20), occupantProvince varchar(2), occupantPostalCode varchar(7), occupantPhoneNumber varchar(30), occupantEmailAddress varchar(200), lotOccupantTypeId integer not null, occupantComment text not null default '', ${recordColumns}, primary key (lotOccupancyId, lotOccupantIndex), foreign key (lotOccupancyId) references LotOccupancies (lotOccupancyId), foreign key (lotOccupantTypeId) references LotOccupantTypes (lotOccupantTypeId)) without rowid`,

helpers/lotOccupancyDB/addLotOccupantType.d.ts

@@ -2,6 +2,7 @@ import type * as recordTypes from '../../types/recordTypes';
 interface AddLotOccupantTypeForm {
     lotOccupantType: string;
     fontAwesomeIconClass?: string;
+    occupantCommentTitle?: string;
     orderNumber?: number;
 }
 export declare function addLotOccupantType(lotOccupantTypeForm: AddLotOccupantTypeForm, requestSession: recordTypes.PartialSession): Promise<number>;

helpers/lotOccupancyDB/addLotOccupantType.js

@@ -5,11 +5,11 @@ export async function addLotOccupantType(lotOccupantTypeForm, requestSession) {
     const rightNowMillis = Date.now();
     const result = database
         .prepare(`insert into LotOccupantTypes (
-        lotOccupantType, fontAwesomeIconClass, orderNumber,
+        lotOccupantType, fontAwesomeIconClass, occupantCommentTitle, orderNumber,
         recordCreate_userName, recordCreate_timeMillis,
         recordUpdate_userName, recordUpdate_timeMillis)
-        values (?, ?, ?, ?, ?, ?, ?)`)
+        values (?, ?, ?, ?, ?, ?, ?, ?)`)
-        .run(lotOccupantTypeForm.lotOccupantType, lotOccupantTypeForm.fontAwesomeIconClass ?? '', lotOccupantTypeForm.orderNumber ?? -1, requestSession.user.userName, rightNowMillis, requestSession.user.userName, rightNowMillis);
+        .run(lotOccupantTypeForm.lotOccupantType, lotOccupantTypeForm.fontAwesomeIconClass ?? '', lotOccupantTypeForm.occupantCommentTitle ?? '', lotOccupantTypeForm.orderNumber ?? -1, requestSession.user.userName, rightNowMillis, requestSession.user.userName, rightNowMillis);
     database.release();
     clearCacheByTableName('LotOccupantTypes');
     return result.lastInsertRowid;

helpers/lotOccupancyDB/addLotOccupantType.ts

@@ -6,6 +6,7 @@ import { clearCacheByTableName } from '../functions.cache.js'
 interface AddLotOccupantTypeForm {
   lotOccupantType: string
   fontAwesomeIconClass?: string
+  occupantCommentTitle?: string
   orderNumber?: number
 }
 
@@ -20,14 +21,15 @@ export async function addLotOccupantType(
   const result = database
     .prepare(
       `insert into LotOccupantTypes (
-        lotOccupantType, fontAwesomeIconClass, orderNumber,
+        lotOccupantType, fontAwesomeIconClass, occupantCommentTitle, orderNumber,
         recordCreate_userName, recordCreate_timeMillis,
         recordUpdate_userName, recordUpdate_timeMillis)
-        values (?, ?, ?, ?, ?, ?, ?)`
+        values (?, ?, ?, ?, ?, ?, ?, ?)`
     )
     .run(
       lotOccupantTypeForm.lotOccupantType,
       lotOccupantTypeForm.fontAwesomeIconClass ?? '',
+      lotOccupantTypeForm.occupantCommentTitle ?? '',
       lotOccupantTypeForm.orderNumber ?? -1,
       requestSession.user!.userName,
       rightNowMillis,

helpers/lotOccupancyDB/getLotOccupancyOccupants.js

@@ -9,7 +9,7 @@ export async function getLotOccupancyOccupants(lotOccupancyId, connectedDatabase
         o.occupantPhoneNumber, o.occupantEmailAddress,
         o.occupantComment,
         o.lotOccupantTypeId, t.lotOccupantType,
-        t.fontAwesomeIconClass
+        t.fontAwesomeIconClass, t.occupantCommentTitle
         from LotOccupancyOccupants o
         left join LotOccupantTypes t on o.lotOccupantTypeId = t.lotOccupantTypeId
         where o.recordDelete_timeMillis is null

helpers/lotOccupancyDB/getLotOccupancyOccupants.ts

@@ -18,7 +18,7 @@ export async function getLotOccupancyOccupants(
         o.occupantPhoneNumber, o.occupantEmailAddress,
         o.occupantComment,
         o.lotOccupantTypeId, t.lotOccupantType,
-        t.fontAwesomeIconClass
+        t.fontAwesomeIconClass, t.occupantCommentTitle
         from LotOccupancyOccupants o
         left join LotOccupantTypes t on o.lotOccupantTypeId = t.lotOccupantTypeId
         where o.recordDelete_timeMillis is null

helpers/lotOccupancyDB/getLotOccupantTypes.js

@@ -3,7 +3,8 @@ import { updateRecordOrderNumber } from './updateRecordOrderNumber.js';
 export async function getLotOccupantTypes() {
     const database = await acquireConnection();
     const lotOccupantTypes = database
-        .prepare(`select lotOccupantTypeId, lotOccupantType, fontAwesomeIconClass, orderNumber
+        .prepare(`select lotOccupantTypeId, lotOccupantType, fontAwesomeIconClass, occupantCommentTitle,
+        orderNumber
         from LotOccupantTypes
         where recordDelete_timeMillis is null
         order by orderNumber, lotOccupantType`)

helpers/lotOccupancyDB/getLotOccupantTypes.ts

@@ -13,7 +13,8 @@ export async function getLotOccupantTypes(): Promise<
 
   const lotOccupantTypes: recordTypes.LotOccupantType[] = database
     .prepare(
-      `select lotOccupantTypeId, lotOccupantType, fontAwesomeIconClass, orderNumber
+      `select lotOccupantTypeId, lotOccupantType, fontAwesomeIconClass, occupantCommentTitle,
+        orderNumber
         from LotOccupantTypes
         where recordDelete_timeMillis is null
         order by orderNumber, lotOccupantType`

helpers/lotOccupancyDB/updateLotOccupantType.d.ts

@@ -2,7 +2,8 @@ import type * as recordTypes from '../../types/recordTypes';
 interface UpdateLotOccupantTypeForm {
     lotOccupantTypeId: number | string;
     lotOccupantType: string;
-    fontAwesomeIconClass?: string;
+    fontAwesomeIconClass: string;
+    occupantCommentTitle: string;
 }
 export declare function updateLotOccupantType(lotOccupantTypeForm: UpdateLotOccupantTypeForm, requestSession: recordTypes.PartialSession): Promise<boolean>;
 export default updateLotOccupantType;

helpers/lotOccupancyDB/updateLotOccupantType.js

@@ -7,11 +7,12 @@ export async function updateLotOccupantType(lotOccupantTypeForm, requestSession)
         .prepare(`update LotOccupantTypes
         set lotOccupantType = ?,
         fontAwesomeIconClass = ?,
+        occupantCommentTitle = ?,
         recordUpdate_userName = ?,
         recordUpdate_timeMillis = ?
         where lotOccupantTypeId = ?
         and recordDelete_timeMillis is null`)
-        .run(lotOccupantTypeForm.lotOccupantType, lotOccupantTypeForm.fontAwesomeIconClass ?? '', requestSession.user.userName, rightNowMillis, lotOccupantTypeForm.lotOccupantTypeId);
+        .run(lotOccupantTypeForm.lotOccupantType, lotOccupantTypeForm.fontAwesomeIconClass, lotOccupantTypeForm.occupantCommentTitle, requestSession.user.userName, rightNowMillis, lotOccupantTypeForm.lotOccupantTypeId);
     database.release();
     clearCacheByTableName('LotOccupantTypes');
     return result.changes > 0;

helpers/lotOccupancyDB/updateLotOccupantType.ts

@@ -7,7 +7,8 @@ import type * as recordTypes from '../../types/recordTypes'
 interface UpdateLotOccupantTypeForm {
   lotOccupantTypeId: number | string
   lotOccupantType: string
-  fontAwesomeIconClass?: string
+  fontAwesomeIconClass: string
+  occupantCommentTitle: string
 }
 
 export async function updateLotOccupantType(
@@ -23,6 +24,7 @@ export async function updateLotOccupantType(
       `update LotOccupantTypes
         set lotOccupantType = ?,
         fontAwesomeIconClass = ?,
+        occupantCommentTitle = ?,
         recordUpdate_userName = ?,
         recordUpdate_timeMillis = ?
         where lotOccupantTypeId = ?
@@ -30,7 +32,8 @@ export async function updateLotOccupantType(
     )
     .run(
       lotOccupantTypeForm.lotOccupantType,
-      lotOccupantTypeForm.fontAwesomeIconClass ?? '',
+      lotOccupantTypeForm.fontAwesomeIconClass,
+      lotOccupantTypeForm.occupantCommentTitle,
       requestSession.user!.userName,
       rightNowMillis,
       lotOccupantTypeForm.lotOccupantTypeId

public-typescript/adminTables.js

@@ -616,8 +616,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
         const containerElement = document.querySelector('#container--lotOccupantTypes');
         if (lotOccupantTypes.length === 0) {
             containerElement.innerHTML = `<tr><td colspan="3">
-                <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div>
+          <div class="message is-warning">
-                </td></tr>`;
+          <p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p>
+          </div>
+          </td></tr>`;
             return;
         }
         containerElement.innerHTML = '';
@@ -663,6 +665,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
                         '"></i></span></div>' +
                         '</div>') +
                     '</td>' +
+                    '<td>' +
+                    ('<div class="field">' +
+                        '<div class="control">' +
+                        '<input class="input" name="occupantCommentTitle" type="text"' +
+                        (' value="' +
+                            cityssm.escapeHTML(lotOccupantType.occupantCommentTitle) +
+                            '"') +
+                        (' form="' + formId + '"') +
+                        (' aria-label="' +
+                            los.escapedAliases.Occupant +
+                            ' Comment Title"') +
+                        ' maxlength="50" />' +
+                        '</div>' +
+                        '</div>') +
+                    '</td>' +
                     ('<td>' +
                         ('<form id="' + formId + '">') +
                         '<input name="lotOccupantTypeId" type="hidden"' +

public-typescript/adminTables/adminTablesLotOccupantTypes.js

@@ -95,8 +95,10 @@ function renderLotOccupantTypes() {
     const containerElement = document.querySelector('#container--lotOccupantTypes');
     if (lotOccupantTypes.length === 0) {
         containerElement.innerHTML = `<tr><td colspan="3">
-            <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div>
+      <div class="message is-warning">
-            </td></tr>`;
+      <p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p>
+      </div>
+      </td></tr>`;
         return;
     }
     containerElement.innerHTML = '';
@@ -142,6 +144,21 @@ function renderLotOccupantTypes() {
                     '"></i></span></div>' +
                     '</div>') +
                 '</td>' +
+                '<td>' +
+                ('<div class="field">' +
+                    '<div class="control">' +
+                    '<input class="input" name="occupantCommentTitle" type="text"' +
+                    (' value="' +
+                        cityssm.escapeHTML(lotOccupantType.occupantCommentTitle) +
+                        '"') +
+                    (' form="' + formId + '"') +
+                    (' aria-label="' +
+                        los.escapedAliases.Occupant +
+                        ' Comment Title"') +
+                    ' maxlength="50" />' +
+                    '</div>' +
+                    '</div>') +
+                '</td>' +
                 ('<td>' +
                     ('<form id="' + formId + '">') +
                     '<input name="lotOccupantTypeId" type="hidden"' +

public-typescript/adminTables/adminTablesLotOccupantTypes.ts

@@ -143,8 +143,10 @@ function renderLotOccupantTypes(): void {
 
   if (lotOccupantTypes.length === 0) {
     containerElement.innerHTML = `<tr><td colspan="3">
-            <div class="message is-warning"><p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p></div>
+      <div class="message is-warning">
-            </td></tr>`
+      <p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p>
+      </div>
+      </td></tr>`
 
     return
   }
@@ -197,6 +199,21 @@ function renderLotOccupantTypes(): void {
         '"></i></span></div>' +
         '</div>') +
       '</td>' +
+      '<td>' +
+      ('<div class="field">' +
+        '<div class="control">' +
+        '<input class="input" name="occupantCommentTitle" type="text"' +
+        (' value="' +
+          cityssm.escapeHTML(lotOccupantType.occupantCommentTitle) +
+          '"') +
+        (' form="' + formId + '"') +
+        (' aria-label="' +
+          los.escapedAliases.Occupant +
+          ' Comment Title"') +
+        ' maxlength="50" />' +
+        '</div>' +
+        '</div>') +
+      '</td>' +
       ('<td>' +
         ('<form id="' + formId + '">') +
         '<input name="lotOccupantTypeId" type="hidden"' +

public-typescript/lotOccupancyEdit.js

@@ -487,7 +487,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         }
         cityssm.openHtmlModal('lotOccupancy-editOccupant', {
-            onshow: (modalElement) => {
+            onshow(modalElement) {
+                var _a;
                 los.populateAliases(modalElement);
                 modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupancyId').value = lotOccupancyId;
                 modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantIndex').value = lotOccupantIndex.toString();
@@ -497,6 +498,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     const optionElement = document.createElement('option');
                     optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
                     optionElement.textContent = lotOccupantType.lotOccupantType;
+                    optionElement.dataset.occupantCommentTitle =
+                        lotOccupantType.occupantCommentTitle;
                     if (lotOccupantType.lotOccupantTypeId ===
                         lotOccupancyOccupant.lotOccupantTypeId) {
                         optionElement.selected = true;
@@ -507,8 +510,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 if (!lotOccupantTypeSelected) {
                     const optionElement = document.createElement('option');
                     optionElement.value = lotOccupancyOccupant.lotOccupantTypeId.toString();
-                    optionElement.textContent =
+                    optionElement.textContent = lotOccupancyOccupant.lotOccupantType;
-                        lotOccupancyOccupant.lotOccupantType;
+                    optionElement.dataset.occupantCommentTitle =
+                        lotOccupancyOccupant.occupantCommentTitle;
                     optionElement.selected = true;
                     lotOccupantTypeSelectElement.append(optionElement);
                 }
@@ -521,16 +525,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 modalElement.querySelector('#lotOccupancyOccupantEdit--occupantPostalCode').value = lotOccupancyOccupant.occupantPostalCode;
                 modalElement.querySelector('#lotOccupancyOccupantEdit--occupantPhoneNumber').value = lotOccupancyOccupant.occupantPhoneNumber;
                 modalElement.querySelector('#lotOccupancyOccupantEdit--occupantEmailAddress').value = lotOccupancyOccupant.occupantEmailAddress;
+                modalElement.querySelector('#lotOccupancyOccupantEdit--occupantCommentTitle').textContent =
+                    ((_a = lotOccupancyOccupant.occupantCommentTitle) !== null && _a !== void 0 ? _a : '') === ''
+                        ? 'Comment'
+                        : lotOccupancyOccupant.occupantCommentTitle;
                 modalElement.querySelector('#lotOccupancyOccupantEdit--occupantComment').value = lotOccupancyOccupant.occupantComment;
             },
-            onshown: (modalElement, closeModalFunction) => {
+            onshown(modalElement, closeModalFunction) {
                 bulmaJS.toggleHtmlClipped();
-                modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId').focus();
+                const lotOccupantTypeIdElement = modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId');
+                lotOccupantTypeIdElement.focus();
+                lotOccupantTypeIdElement.addEventListener('change', () => {
+                    var _a;
+                    let occupantCommentTitle = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                        .occupantCommentTitle) !== null && _a !== void 0 ? _a : '';
+                    if (occupantCommentTitle === '') {
+                        occupantCommentTitle = 'Comment';
+                    }
+                    ;
+                    modalElement.querySelector('#lotOccupancyOccupantEdit--occupantCommentTitle').textContent = occupantCommentTitle;
+                });
                 editFormElement = modalElement.querySelector('form');
                 editFormElement.addEventListener('submit', editOccupant);
                 editCloseModalFunction = closeModalFunction;
             },
-            onremoved: () => {
+            onremoved() {
                 bulmaJS.toggleHtmlClipped();
             }
         });
@@ -567,7 +586,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
     }
     function renderLotOccupancyOccupants() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const occupantsContainer = document.querySelector('#container--lotOccupancyOccupants');
         cityssm.clearElement(occupantsContainer);
         if (lotOccupancyOccupants.length === 0) {
@@ -631,7 +650,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
                             : cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress)) +
                         '</td>') +
                     ('<td>' +
-                        cityssm.escapeHTML(lotOccupancyOccupant.occupantComment) +
+                        '<span data-tooltip="' + cityssm.escapeHTML(((_j = lotOccupancyOccupant.occupantCommentTitle) !== null && _j !== void 0 ? _j : '') === '' ? 'Comment' : lotOccupancyOccupant.occupantCommentTitle) + '">' +
+                        cityssm.escapeHTML((_k = lotOccupancyOccupant.occupantComment) !== null && _k !== void 0 ? _k : '') +
+                        '</span>' +
                         '</td>') +
                     ('<td class="is-hidden-print">' +
                         '<div class="buttons are-small is-justify-content-end">' +
@@ -773,7 +794,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 });
             }
             cityssm.openHtmlModal('lotOccupancy-addOccupant', {
-                onshow: (modalElement) => {
+                onshow(modalElement) {
                     los.populateAliases(modalElement);
                     modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupancyId').value = lotOccupancyId;
                     const lotOccupantTypeSelectElement = modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId');
@@ -782,6 +803,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
                         const optionElement = document.createElement('option');
                         optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
                         optionElement.textContent = lotOccupantType.lotOccupantType;
+                        optionElement.dataset.occupantCommentTitle =
+                            lotOccupantType.occupantCommentTitle;
                         lotOccupantTypeSelectElement.append(optionElement);
                         lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
                     }
@@ -792,7 +815,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 onshown: (modalElement, closeModalFunction) => {
                     bulmaJS.toggleHtmlClipped();
                     bulmaJS.init(modalElement);
-                    modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId').focus();
+                    const lotOccupantTypeIdElement = modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId');
+                    lotOccupantTypeIdElement.focus();
+                    lotOccupantTypeIdElement.addEventListener('change', () => {
+                        var _a;
+                        let occupantCommentTitle = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                            .occupantCommentTitle) !== null && _a !== void 0 ? _a : '';
+                        if (occupantCommentTitle === '') {
+                            occupantCommentTitle = 'Comment';
+                        }
+                        modalElement.querySelector('#lotOccupancyOccupantAdd--occupantCommentTitle').textContent = occupantCommentTitle;
+                    });
                     addFormElement = modalElement.querySelector('#form--lotOccupancyOccupantAdd');
                     addFormElement.addEventListener('submit', addOccupantFromForm);
                     searchResultsElement = modalElement.querySelector('#lotOccupancyOccupantCopy--searchResults');

public-typescript/lotOccupancyEdit/lotOccupancyEditOccupants.js

@@ -29,7 +29,8 @@ function openEditLotOccupancyOccupant(clickEvent) {
         });
     }
     cityssm.openHtmlModal('lotOccupancy-editOccupant', {
-        onshow: (modalElement) => {
+        onshow(modalElement) {
+            var _a;
             los.populateAliases(modalElement);
             modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupancyId').value = lotOccupancyId;
             modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantIndex').value = lotOccupantIndex.toString();
@@ -39,6 +40,8 @@ function openEditLotOccupancyOccupant(clickEvent) {
                 const optionElement = document.createElement('option');
                 optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
                 optionElement.textContent = lotOccupantType.lotOccupantType;
+                optionElement.dataset.occupantCommentTitle =
+                    lotOccupantType.occupantCommentTitle;
                 if (lotOccupantType.lotOccupantTypeId ===
                     lotOccupancyOccupant.lotOccupantTypeId) {
                     optionElement.selected = true;
@@ -49,8 +52,9 @@ function openEditLotOccupancyOccupant(clickEvent) {
             if (!lotOccupantTypeSelected) {
                 const optionElement = document.createElement('option');
                 optionElement.value = lotOccupancyOccupant.lotOccupantTypeId.toString();
-                optionElement.textContent =
+                optionElement.textContent = lotOccupancyOccupant.lotOccupantType;
-                    lotOccupancyOccupant.lotOccupantType;
+                optionElement.dataset.occupantCommentTitle =
+                    lotOccupancyOccupant.occupantCommentTitle;
                 optionElement.selected = true;
                 lotOccupantTypeSelectElement.append(optionElement);
             }
@@ -63,16 +67,31 @@ function openEditLotOccupancyOccupant(clickEvent) {
             modalElement.querySelector('#lotOccupancyOccupantEdit--occupantPostalCode').value = lotOccupancyOccupant.occupantPostalCode;
             modalElement.querySelector('#lotOccupancyOccupantEdit--occupantPhoneNumber').value = lotOccupancyOccupant.occupantPhoneNumber;
             modalElement.querySelector('#lotOccupancyOccupantEdit--occupantEmailAddress').value = lotOccupancyOccupant.occupantEmailAddress;
+            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantCommentTitle').textContent =
+                ((_a = lotOccupancyOccupant.occupantCommentTitle) !== null && _a !== void 0 ? _a : '') === ''
+                    ? 'Comment'
+                    : lotOccupancyOccupant.occupantCommentTitle;
             modalElement.querySelector('#lotOccupancyOccupantEdit--occupantComment').value = lotOccupancyOccupant.occupantComment;
         },
-        onshown: (modalElement, closeModalFunction) => {
+        onshown(modalElement, closeModalFunction) {
             bulmaJS.toggleHtmlClipped();
-            modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId').focus();
+            const lotOccupantTypeIdElement = modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId');
+            lotOccupantTypeIdElement.focus();
+            lotOccupantTypeIdElement.addEventListener('change', () => {
+                var _a;
+                let occupantCommentTitle = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                    .occupantCommentTitle) !== null && _a !== void 0 ? _a : '';
+                if (occupantCommentTitle === '') {
+                    occupantCommentTitle = 'Comment';
+                }
+                ;
+                modalElement.querySelector('#lotOccupancyOccupantEdit--occupantCommentTitle').textContent = occupantCommentTitle;
+            });
             editFormElement = modalElement.querySelector('form');
             editFormElement.addEventListener('submit', editOccupant);
             editCloseModalFunction = closeModalFunction;
         },
-        onremoved: () => {
+        onremoved() {
             bulmaJS.toggleHtmlClipped();
         }
     });
@@ -109,7 +128,7 @@ function deleteLotOccupancyOccupant(clickEvent) {
     });
 }
 function renderLotOccupancyOccupants() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const occupantsContainer = document.querySelector('#container--lotOccupancyOccupants');
     cityssm.clearElement(occupantsContainer);
     if (lotOccupancyOccupants.length === 0) {
@@ -173,7 +192,9 @@ function renderLotOccupancyOccupants() {
                         : cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress)) +
                     '</td>') +
                 ('<td>' +
-                    cityssm.escapeHTML(lotOccupancyOccupant.occupantComment) +
+                    '<span data-tooltip="' + cityssm.escapeHTML(((_j = lotOccupancyOccupant.occupantCommentTitle) !== null && _j !== void 0 ? _j : '') === '' ? 'Comment' : lotOccupancyOccupant.occupantCommentTitle) + '">' +
+                    cityssm.escapeHTML((_k = lotOccupancyOccupant.occupantComment) !== null && _k !== void 0 ? _k : '') +
+                    '</span>' +
                     '</td>') +
                 ('<td class="is-hidden-print">' +
                     '<div class="buttons are-small is-justify-content-end">' +
@@ -315,7 +336,7 @@ else {
             });
         }
         cityssm.openHtmlModal('lotOccupancy-addOccupant', {
-            onshow: (modalElement) => {
+            onshow(modalElement) {
                 los.populateAliases(modalElement);
                 modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupancyId').value = lotOccupancyId;
                 const lotOccupantTypeSelectElement = modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId');
@@ -324,6 +345,8 @@ else {
                     const optionElement = document.createElement('option');
                     optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
                     optionElement.textContent = lotOccupantType.lotOccupantType;
+                    optionElement.dataset.occupantCommentTitle =
+                        lotOccupantType.occupantCommentTitle;
                     lotOccupantTypeSelectElement.append(optionElement);
                     lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
                 }
@@ -334,7 +357,17 @@ else {
             onshown: (modalElement, closeModalFunction) => {
                 bulmaJS.toggleHtmlClipped();
                 bulmaJS.init(modalElement);
-                modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId').focus();
+                const lotOccupantTypeIdElement = modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId');
+                lotOccupantTypeIdElement.focus();
+                lotOccupantTypeIdElement.addEventListener('change', () => {
+                    var _a;
+                    let occupantCommentTitle = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                        .occupantCommentTitle) !== null && _a !== void 0 ? _a : '';
+                    if (occupantCommentTitle === '') {
+                        occupantCommentTitle = 'Comment';
+                    }
+                    modalElement.querySelector('#lotOccupancyOccupantAdd--occupantCommentTitle').textContent = occupantCommentTitle;
+                });
                 addFormElement = modalElement.querySelector('#form--lotOccupancyOccupantAdd');
                 addFormElement.addEventListener('submit', addOccupantFromForm);
                 searchResultsElement = modalElement.querySelector('#lotOccupancyOccupantCopy--searchResults');

public-typescript/lotOccupancyEdit/lotOccupancyEditOccupants.ts

@@ -61,7 +61,7 @@ function openEditLotOccupancyOccupant(clickEvent: Event): void {
   }
 
   cityssm.openHtmlModal('lotOccupancy-editOccupant', {
-    onshow: (modalElement) => {
+    onshow(modalElement) {
       los.populateAliases(modalElement)
       ;(
         modalElement.querySelector(
@@ -84,6 +84,8 @@ function openEditLotOccupancyOccupant(clickEvent: Event): void {
         const optionElement = document.createElement('option')
         optionElement.value = lotOccupantType.lotOccupantTypeId.toString()
         optionElement.textContent = lotOccupantType.lotOccupantType
+        optionElement.dataset.occupantCommentTitle =
+          lotOccupantType.occupantCommentTitle
 
         if (
           lotOccupantType.lotOccupantTypeId ===
@@ -100,8 +102,9 @@ function openEditLotOccupancyOccupant(clickEvent: Event): void {
         const optionElement = document.createElement('option')
 
         optionElement.value = lotOccupancyOccupant.lotOccupantTypeId!.toString()
-        optionElement.textContent =
+        optionElement.textContent = lotOccupancyOccupant.lotOccupantType!
-          lotOccupancyOccupant.lotOccupantType as string
+        optionElement.dataset.occupantCommentTitle =
+          lotOccupancyOccupant.occupantCommentTitle!
         optionElement.selected = true
 
         lotOccupantTypeSelectElement.append(optionElement)
@@ -147,26 +150,50 @@ function openEditLotOccupancyOccupant(clickEvent: Event): void {
           '#lotOccupancyOccupantEdit--occupantEmailAddress'
         ) as HTMLInputElement
       ).value = lotOccupancyOccupant.occupantEmailAddress!
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyOccupantEdit--occupantCommentTitle'
+        ) as HTMLLabelElement
+      ).textContent =
+        (lotOccupancyOccupant.occupantCommentTitle ?? '') === ''
+          ? 'Comment'
+          : lotOccupancyOccupant.occupantCommentTitle!
       ;(
         modalElement.querySelector(
           '#lotOccupancyOccupantEdit--occupantComment'
         ) as HTMLTextAreaElement
       ).value = lotOccupancyOccupant.occupantComment!
     },
-    onshown: (modalElement, closeModalFunction) => {
+    onshown(modalElement, closeModalFunction) {
       bulmaJS.toggleHtmlClipped()
-      ;(
+
-        modalElement.querySelector(
+      const lotOccupantTypeIdElement = modalElement.querySelector(
-          '#lotOccupancyOccupantEdit--lotOccupantTypeId'
+        '#lotOccupancyOccupantEdit--lotOccupantTypeId'
-        ) as HTMLInputElement
+      ) as HTMLSelectElement
-      ).focus()
+
+      lotOccupantTypeIdElement.focus()
+
+      lotOccupantTypeIdElement.addEventListener('change', () => {
+        let occupantCommentTitle =
+          lotOccupantTypeIdElement.selectedOptions[0].dataset
+            .occupantCommentTitle ?? ''
+        if (occupantCommentTitle === '') {
+          occupantCommentTitle = 'Comment'
+        }
+
+        ;(
+          modalElement.querySelector(
+            '#lotOccupancyOccupantEdit--occupantCommentTitle'
+          ) as HTMLLabelElement
+        ).textContent = occupantCommentTitle
+      })
 
       editFormElement = modalElement.querySelector('form')!
       editFormElement.addEventListener('submit', editOccupant)
 
       editCloseModalFunction = closeModalFunction
     },
-    onremoved: () => {
+    onremoved() {
       bulmaJS.toggleHtmlClipped()
     }
   })
@@ -289,7 +316,9 @@ function renderLotOccupancyOccupants(): void {
           : cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress!)) +
         '</td>') +
       ('<td>' +
-        cityssm.escapeHTML(lotOccupancyOccupant.occupantComment!) +
+      '<span data-tooltip="' + cityssm.escapeHTML((lotOccupancyOccupant.occupantCommentTitle ?? '') === '' ? 'Comment' : lotOccupancyOccupant.occupantCommentTitle!) + '">' +
+        cityssm.escapeHTML(lotOccupancyOccupant.occupantComment ?? '') +
+        '</span>' +
         '</td>') +
       ('<td class="is-hidden-print">' +
         '<div class="buttons are-small is-justify-content-end">' +
@@ -489,7 +518,7 @@ if (isCreate) {
       }
 
       cityssm.openHtmlModal('lotOccupancy-addOccupant', {
-        onshow: (modalElement) => {
+        onshow(modalElement) {
           los.populateAliases(modalElement)
           ;(
             modalElement.querySelector(
@@ -509,6 +538,8 @@ if (isCreate) {
             const optionElement = document.createElement('option')
             optionElement.value = lotOccupantType.lotOccupantTypeId.toString()
             optionElement.textContent = lotOccupantType.lotOccupantType
+            optionElement.dataset.occupantCommentTitle =
+              lotOccupantType.occupantCommentTitle
 
             lotOccupantTypeSelectElement.append(optionElement)
 
@@ -531,11 +562,26 @@ if (isCreate) {
         onshown: (modalElement, closeModalFunction) => {
           bulmaJS.toggleHtmlClipped()
           bulmaJS.init(modalElement)
-          ;(
+
+          const lotOccupantTypeIdElement = modalElement.querySelector(
+            '#lotOccupancyOccupantAdd--lotOccupantTypeId'
+          ) as HTMLSelectElement
+
+          lotOccupantTypeIdElement.focus()
+
+          lotOccupantTypeIdElement.addEventListener('change', () => {
+            let occupantCommentTitle =
+              lotOccupantTypeIdElement.selectedOptions[0].dataset
+                .occupantCommentTitle ?? ''
+
+            if (occupantCommentTitle === '') {
+              occupantCommentTitle = 'Comment'
+            }
+
             modalElement.querySelector(
-              '#lotOccupancyOccupantAdd--lotOccupantTypeId'
+              '#lotOccupancyOccupantAdd--occupantCommentTitle'
-            ) as HTMLInputElement
+            )!.textContent = occupantCommentTitle
-          ).focus()
+          })
 
           addFormElement = modalElement.querySelector(
             '#form--lotOccupancyOccupantAdd'

public/html/lotOccupancy-addOccupant.html

@@ -98,7 +98,7 @@
                             </div>
                         </div>
                         <div class="field">
-                            <label class="label" for="lotOccupancyOccupantAdd--occupantComment">Comment</label>
+                            <label class="label" id="lotOccupancyOccupantAdd--occupantCommentTitle" for="lotOccupancyOccupantAdd--occupantComment">Comment</label>
                             <div class="control">
                                 <textarea class="textarea" id="lotOccupancyOccupantAdd--occupantComment" name="occupantComment"></textarea>
                             </div>

public/html/lotOccupancy-editOccupant.html

@@ -81,7 +81,7 @@
                     </div>
                 </div>
                 <div class="field">
-                    <label class="label" for="lotOccupancyOccupantEdit--occupantComment">Comment</label>
+                    <label class="label" id="lotOccupancyOccupantEdit--occupantCommentTitle" for="lotOccupancyOccupantEdit--occupantComment">Comment</label>
                     <div class="control">
                         <textarea class="textarea" id="lotOccupancyOccupantEdit--occupantComment" name="occupantComment"></textarea>
                     </div>

types/recordTypes.d.ts

@@ -102,6 +102,7 @@ export interface LotOccupantType extends Record {
     lotOccupantTypeId: number;
     lotOccupantType: string;
     fontAwesomeIconClass: string;
+    occupantCommentTitle: string;
     orderNumber?: number;
 }
 export interface FeeCategory extends Record {
@@ -151,6 +152,7 @@ export interface LotOccupancyOccupant extends Record {
     lotOccupantTypeId?: number;
     lotOccupantType?: string;
     fontAwesomeIconClass?: string;
+    occupantCommentTitle?: string;
     occupantName?: string;
     occupantAddress1?: string;
     occupantAddress2?: string;

types/recordTypes.ts

@@ -134,6 +134,7 @@ export interface LotOccupantType extends Record {
   lotOccupantTypeId: number
   lotOccupantType: string
   fontAwesomeIconClass: string
+  occupantCommentTitle: string
   orderNumber?: number
 }
 
@@ -199,6 +200,7 @@ export interface LotOccupancyOccupant extends Record {
   lotOccupantTypeId?: number
   lotOccupantType?: string
   fontAwesomeIconClass?: string
+  occupantCommentTitle?: string
 
   occupantName?: string
   occupantAddress1?: string

views/admin-tables.ejs

@@ -2,7 +2,7 @@
 
 <div class="columns">
     <div class="column is-3 is-hidden-mobile">
-        <%- include('_menu-admin'); -%>
+      <%- include('_menu-admin'); -%>
     </div>
     <div class="column">
         <nav class="breadcrumb">
@@ -24,36 +24,36 @@
         </nav>
         
         <h1 class="title is-1">
-            Config Table Management
+          Config Table Management
         </h1>
         
         <div class="tabs is-boxed">
-            <ul role="presentation">
+          <ul role="presentation">
-                <li class="is-active">
+            <li class="is-active">
-                    <a href="#tab--workOrderTypes">
+                <a href="#tab--workOrderTypes">
-                        <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
+                    <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-                        <span>Work Order Types</span>
+                    <span>Work Order Types</span>
-                    </a>
+                </a>
-                </li>
+            </li>
-                <li>
+            <li>
-                    <a href="#tab--workOrderMilestoneTypes">
+                <a href="#tab--workOrderMilestoneTypes">
-                        <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
+                    <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-                        <span>Work Order Milestone Types</span>
+                    <span>Work Order Milestone Types</span>
-                    </a>
+                </a>
-                </li>
+            </li>
-                <li>
+            <li>
-                    <a href="#tab--lotStatuses">
+                <a href="#tab--lotStatuses">
-                        <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
+                    <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-                        <span><%= configFunctions.getProperty("aliases.lot") %> Statuses</span>
+                    <span><%= configFunctions.getProperty("aliases.lot") %> Statuses</span>
-                    </a>
+                </a>
-                </li>
+            </li>
-                <li>
+            <li>
-                    <a href="#tab--lotOccupantTypes">
+                <a href="#tab--lotOccupantTypes">
-                        <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
+                    <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-                        <span><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Types</span>
+                    <span><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Types</span>
-                    </a>
+                </a>
-                </li>
+            </li>
-            </ul>
+          </ul>
         </div>
         <div class="tabs-container">
             <div id="tab--workOrderTypes">
@@ -150,36 +150,38 @@
                 <h2 class="title is-4"><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Types</h2>
                 <table class="table is-striped is-hoverable has-sticky-header">
                     <thead>
-                        <tr>
+                      <tr>
-                            <th><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type</th>
+                          <th><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type</th>
-                            <th>
+                          <th>
-                                Icon Class
+                              Icon Class
-                                <a class="has-text-weight-normal has-tooltip-right" data-tooltip="Search and View Available Icons" href="https://fontawesome.com/v5/search?o=r&m=free&s=solid" target="_blank" rel="noreferrer noopener" aria-label="Search and View Available Icons">
+                              <a class="has-text-weight-normal has-tooltip-right" data-tooltip="Search and View Available Icons" href="https://fontawesome.com/v5/search?o=r&m=free&s=solid" target="_blank" rel="noreferrer noopener" aria-label="Search and View Available Icons">
-                                    <i class="fas fa-question-circle" aria-label="Help"></i>
+                                  <i class="fas fa-question-circle" aria-label="Help"></i>
-                                </a>
+                              </a>
-                            </th>
+                          </th>
-                            <th>&nbsp;</th>
+                          <th>Comment Title</th>
-                            <th class="has-text-centered has-width-1">Options</th>
+                          <th>&nbsp;</th>
-                        </tr>
+                          <th class="has-text-centered has-width-1">Options</th>
+                      </tr>
                     </thead>
                     <tbody>
-                        <tr>
+                      <tr>
-                            <td colspan="4">
+                        <td colspan="5">
-                                <form id="form--addLotOccupantType">
+                          <form id="form--addLotOccupantType">
-                                    <input name="fontAwesomeIconClass" type="hidden" value="user" />
+                            <input name="fontAwesomeIconClass" type="hidden" value="user" />
-                                    <div class="field has-addons">
+                            <input name="occupantCommentTitle" type="hidden" value="Comment" />
-                                        <div class="control is-expanded">
+                            <div class="field has-addons">
-                                            <input class="input" name="lotOccupantType" type="text" maxlength="100" placeholder="New <%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type" required />
+                              <div class="control is-expanded">
-                                        </div>
+                                <input class="input" name="lotOccupantType" type="text" maxlength="100" placeholder="New <%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type" required />
-                                        <div class="control">
+                              </div>
-                                            <button class="button is-success has-tooltip-bottom" data-tooltip="Add Type" type="submit" aria-label="Add Type">
+                              <div class="control">
-                                                <i class="fas fa-plus" aria-hidden="true"></i>
+                                <button class="button is-success has-tooltip-bottom" data-tooltip="Add Type" type="submit" aria-label="Add Type">
-                                            </button>
+                                  <i class="fas fa-plus" aria-hidden="true"></i>
-                                        </div>
+                                </button>
-                                    </div>
+                              </div>
-                                </form>
+                            </div>
-                            </td>
+                          </form>
-                        </tr>
+                        </td>
+                      </tr>
                     </tbody>
                     <tbody id="container--lotOccupantTypes"></tbody>
                 </table>

views/lotOccupancy-view.ejs

@@ -1,25 +1,25 @@
 <%- include('_header'); -%>
 
 <nav class="breadcrumb">
-    <ul>
+  <ul>
-        <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
+    <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
-        <li>
+    <li>
-            <a href="<%= urlPrefix %>/lotOccupancies">
+      <a href="<%= urlPrefix %>/lotOccupancies">
-                <span class="icon is-small">
+        <span class="icon is-small">
-                    <span class="fa-layers fa-fw" aria-hidden="true">
+          <span class="fa-layers fa-fw" aria-hidden="true">
-                        <i class="fas fa-vector-square"></i>
+            <i class="fas fa-vector-square"></i>
-                        <i class="fas fa-user" data-fa-transform="shrink-10"></i>
+            <i class="fas fa-user" data-fa-transform="shrink-10"></i>
-                    </span>
+          </span>
-                </span>
+        </span>
-                <span><%= configFunctions.getProperty("aliases.occupancies") %></span>
+        <span><%= configFunctions.getProperty("aliases.occupancies") %></span>
-            </a>
+      </a>
-        </li>
+    </li>
-        <li class="is-active">
+    <li class="is-active">
-            <a href="#" aria-current="page">
+      <a href="#" aria-current="page">
-                <%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>: <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
+        <%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>: <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
-            </a>
+      </a>
-        </li>
+    </li>
-    </ul>
+  </ul>
 </nav>
 
 <h1 class="title is-1">
@@ -85,95 +85,95 @@
 </div>
 
 <div class="panel">
-    <div class="panel-block is-block">
+  <div class="panel-block is-block">
-        <div class="columns">
+      <div class="columns">
-            <div class="column">
+          <div class="column">
-              <p>
+            <p>
-                <strong><%= configFunctions.getProperty("aliases.occupancy") %> Type</strong><br />
+              <strong><%= configFunctions.getProperty("aliases.occupancy") %> Type</strong><br />
-                <%= lotOccupancy.occupancyType %>
+              <%= lotOccupancy.occupancyType %>
+            </p>
+          </div>
+          <div class="column">
+              <p class="mb-2">
+                  <strong><%= configFunctions.getProperty("aliases.lot") %></strong><br />
+                  <% if (lotOccupancy.lotId) { %>
+                      <a href="<%= urlPrefix %>/lots/<%= lotOccupancy.lotId %>"><%= lotOccupancy.lotName %></a>
+                  <% } else { %>
+                      <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.lot") %>)</span>
+                  <% } %>
               </p>
-            </div>
+              <p>
-            <div class="column">
+                  <strong><%= configFunctions.getProperty("aliases.map") %></strong><br />
-                <p class="mb-2">
+                  <% if (lotOccupancy.mapId) { %>
-                    <strong><%= configFunctions.getProperty("aliases.lot") %></strong><br />
+                      <a href="<%= urlPrefix %>/maps/<%= lotOccupancy.mapId %>"><%= lotOccupancy.mapName %></a>
-                    <% if (lotOccupancy.lotId) { %>
+                  <% } else { %>
-                        <a href="<%= urlPrefix %>/lots/<%= lotOccupancy.lotId %>"><%= lotOccupancy.lotName %></a>
+                      <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.map") %>)</span>
-                    <% } else { %>
+                  <% } %>
-                        <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.lot") %>)</span>
+              </p>
-                    <% } %>
+          </div>
-                </p>
+          <div class="column">
-                <p>
+              <p class="mb-2">
-                    <strong><%= configFunctions.getProperty("aliases.map") %></strong><br />
+                  <strong><%= configFunctions.getProperty("aliases.occupancyStartDate") %></strong><br />
-                    <% if (lotOccupancy.mapId) { %>
+                  <%= lotOccupancy.occupancyStartDateString %>
-                        <a href="<%= urlPrefix %>/maps/<%= lotOccupancy.mapId %>"><%= lotOccupancy.mapName %></a>
+              </p>
-                    <% } else { %>
+              <p>
-                        <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.map") %>)</span>
+                  <strong>End Date</strong><br />
-                    <% } %>
+                  <% if (lotOccupancy.occupancyEndDateString === "") { %>
-                </p>
+                      <span class="has-text-grey">(No End Date)</span>
-            </div>
+                  <% } else { %>
-            <div class="column">
+                      <%= lotOccupancy.occupancyEndDateString %>
-                <p class="mb-2">
+                  <% } %>
-                    <strong><%= configFunctions.getProperty("aliases.occupancyStartDate") %></strong><br />
+              </p>
-                    <%= lotOccupancy.occupancyStartDateString %>
+          </div>
-                </p>
+          <% if (lotOccupancy.lotOccupancyFields.length > 0) { %>
-                <p>
+              <div class="column">
-                    <strong>End Date</strong><br />
+                  <% for (const lotOccupancyField of lotOccupancy.lotOccupancyFields) { %>
-                    <% if (lotOccupancy.occupancyEndDateString === "") { %>
+                      <p class="mb-2">
-                        <span class="has-text-grey">(No End Date)</span>
+                          <strong><%= lotOccupancyField.occupancyTypeField %></strong><br />
-                    <% } else { %>
+                          <% if (lotOccupancyField.lotOccupancyFieldValue) { %>
-                        <%= lotOccupancy.occupancyEndDateString %>
+                              <%= lotOccupancyField.lotOccupancyFieldValue %>
-                    <% } %>
+                          <% } else { %>
-                </p>
+                              <span class="has-text-grey">(No Value)</span>
-            </div>
+                          <% } %>
-            <% if (lotOccupancy.lotOccupancyFields.length > 0) { %>
+                      </p>
-                <div class="column">
+                  <% } %>
-                    <% for (const lotOccupancyField of lotOccupancy.lotOccupancyFields) { %>
+              </div>
-                        <p class="mb-2">
+          <% } %>
-                            <strong><%= lotOccupancyField.occupancyTypeField %></strong><br />
+      </div>
-                            <% if (lotOccupancyField.lotOccupancyFieldValue) { %>
+  </div>
-                                <%= lotOccupancyField.lotOccupancyFieldValue %>
-                            <% } else { %>
-                                <span class="has-text-grey">(No Value)</span>
-                            <% } %>
-                        </p>
-                    <% } %>
-                </div>
-            <% } %>
-        </div>
-    </div>
 </div>
 
 <div class="panel">
     <h2 class="panel-heading">
-        <%= configFunctions.getProperty("aliases.occupants") %>
+      <%= configFunctions.getProperty("aliases.occupants") %>
     </h2>
     <div class="panel-block is-block">
         <% if (lotOccupancy.lotOccupancyOccupants.length === 0) { %>
         <div class="message is-warning">
-            <p class="message-body">
+          <p class="message-body">
-                There are no <%= configFunctions.getProperty("aliases.occupants").toLowerCase() %>
+            There are no <%= configFunctions.getProperty("aliases.occupants").toLowerCase() %>
-                associated with this record.
+            associated with this record.
-            </p>
+          </p>
         </div>
         <% } else { %>
         <table class="table is-fullwidth is-striped is-hoverable">
             <thead>
-                <tr>
+              <tr>
-                    <th><%= configFunctions.getProperty("aliases.occupant") %></th>
+                <th><%= configFunctions.getProperty("aliases.occupant") %></th>
-                    <th>Address</th>
+                <th>Address</th>
-                    <th>Other Contact</th>
+                <th>Other Contact</th>
-                    <th>Comment</th>
+                <th>Comment</th>
-                </tr>
+              </tr>
             </thead>
             <tbody>
                 <% for (const lotOccupancyOccupant of lotOccupancy.lotOccupancyOccupants) { %>
                 <tr>
                     <td>
-                        <%= lotOccupancyOccupant.occupantName %><br />
+                      <%= lotOccupancyOccupant.occupantName %><br />
-                        <span class="tag">
+                      <span class="tag">
-                            <i class="fas fa-fw fa-<%= lotOccupancyOccupant.fontAwesomeIconClass %>" aria-hidden="true"></i>
+                        <i class="fas fa-fw fa-<%= lotOccupancyOccupant.fontAwesomeIconClass %>" aria-hidden="true"></i>
-                            <span class="ml-1"><%= lotOccupancyOccupant.lotOccupantType %></span>
+                        <span class="ml-1"><%= lotOccupancyOccupant.lotOccupantType %></span>
-                        </span>
+                      </span>
                     </td>
                     <td>
                         <% if (lotOccupancyOccupant.occupantAddress1) { %>
@@ -195,7 +195,9 @@
                         <%= lotOccupancyOccupant.occupantEmailAddress %>
                     </td>
                     <td>
+                        <span data-tooltip="<%= (lotOccupancyOccupant.occupantCommentTitle ?? '') === '' ? 'Comment' : lotOccupancyOccupant.occupantCommentTitle %>">
                         <%= lotOccupancyOccupant.occupantComment %>
+                        </span>
                     </td>
                 </tr>
                 <% } %>