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,7 +616,9 @@ 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">
+          <p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p>
+          </div>
           </td></tr>`;
             return;
         }
@@ -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,7 +95,9 @@ 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">
+      <p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p>
+      </div>
       </td></tr>`;
         return;
     }
@@ -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,7 +143,9 @@ 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">
+      <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()
+
+      const lotOccupantTypeIdElement = modalElement.querySelector(
+        '#lotOccupancyOccupantEdit--lotOccupantTypeId'
+      ) as HTMLSelectElement
+
+      lotOccupantTypeIdElement.focus()
+
+      lotOccupantTypeIdElement.addEventListener('change', () => {
+        let occupantCommentTitle =
+          lotOccupantTypeIdElement.selectedOptions[0].dataset
+            .occupantCommentTitle ?? ''
+        if (occupantCommentTitle === '') {
+          occupantCommentTitle = 'Comment'
+        }
+
         ;(
           modalElement.querySelector(
-          '#lotOccupancyOccupantEdit--lotOccupantTypeId'
+            '#lotOccupancyOccupantEdit--occupantCommentTitle'
-        ) as HTMLInputElement
+          ) as HTMLLabelElement
-      ).focus()
+        ).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)
-          ;(
+
-            modalElement.querySelector(
+          const lotOccupantTypeIdElement = modalElement.querySelector(
             '#lotOccupancyOccupantAdd--lotOccupantTypeId'
-            ) as HTMLInputElement
+          ) as HTMLSelectElement
-          ).focus()
+
+          lotOccupantTypeIdElement.focus()
+
+          lotOccupantTypeIdElement.addEventListener('change', () => {
+            let occupantCommentTitle =
+              lotOccupantTypeIdElement.selectedOptions[0].dataset
+                .occupantCommentTitle ?? ''
+
+            if (occupantCommentTitle === '') {
+              occupantCommentTitle = 'Comment'
+            }
+
+            modalElement.querySelector(
+              '#lotOccupancyOccupantAdd--occupantCommentTitle'
+            )!.textContent = occupantCommentTitle
+          })
 
           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

@@ -158,15 +158,17 @@
                                   <i class="fas fa-question-circle" aria-label="Help"></i>
                               </a>
                           </th>
+                          <th>Comment Title</th>
                           <th>&nbsp;</th>
                           <th class="has-text-centered has-width-1">Options</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
-                            <td colspan="4">
+                        <td colspan="5">
                           <form id="form--addLotOccupantType">
                             <input name="fontAwesomeIconClass" type="hidden" value="user" />
+                            <input name="occupantCommentTitle" type="hidden" value="Comment" />
                             <div class="field has-addons">
                               <div class="control is-expanded">
                                 <input class="input" name="lotOccupantType" type="text" maxlength="100" placeholder="New <%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type" required />

views/lotOccupancy-view.ejs

@@ -195,7 +195,9 @@
                         <%= lotOccupancyOccupant.occupantEmailAddress %>
                     </td>
                     <td>
+                        <span data-tooltip="<%= (lotOccupancyOccupant.occupantCommentTitle ?? '') === '' ? 'Comment' : lotOccupancyOccupant.occupantCommentTitle %>">
                         <%= lotOccupancyOccupant.occupantComment %>
+                        </span>
                     </td>
                 </tr>
                 <% } %>