global occupancy type fields

handlers/admin-get/occupancyTypes.js

@@ -1,11 +1,13 @@
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 import * as configFunctions from "../../helpers/functions.config.js";
 export const handler = (_request, response) => {
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.render("admin-occupancyTypes", {
         headTitle: configFunctions.getProperty("aliases.occupancy") +
             " Type Management",
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-get/occupancyTypes.ts

@@ -1,17 +1,19 @@
 import type { RequestHandler } from "express";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 import * as configFunctions from "../../helpers/functions.config.js";
 
 export const handler: RequestHandler = (_request, response) => {
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.render("admin-occupancyTypes", {
         headTitle:
             configFunctions.getProperty("aliases.occupancy") +
             " Type Management",
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

handlers/admin-post/doAddOccupancyType.js

@@ -1,12 +1,14 @@
 import { addOccupancyType } from "../../helpers/lotOccupancyDB/addOccupancyType.js";
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 export const handler = async (request, response) => {
     const occupancyTypeId = addOccupancyType(request.body, request.session);
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.json({
         success: true,
         occupancyTypeId,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-post/doAddOccupancyType.ts

@@ -2,17 +2,19 @@ import type { RequestHandler } from "express";
 
 import { addOccupancyType } from "../../helpers/lotOccupancyDB/addOccupancyType.js";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 export const handler: RequestHandler = async (request, response) => {
     const occupancyTypeId = addOccupancyType(request.body, request.session);
 
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.json({
         success: true,
         occupancyTypeId,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

handlers/admin-post/doAddOccupancyTypeField.js

@@ -1,12 +1,14 @@
 import { addOccupancyTypeField } from "../../helpers/lotOccupancyDB/addOccupancyTypeField.js";
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 export const handler = async (request, response) => {
     const occupancyTypeFieldId = addOccupancyTypeField(request.body, request.session);
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.json({
         success: true,
         occupancyTypeFieldId,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-post/doAddOccupancyTypeField.ts

@@ -2,17 +2,19 @@ import type { RequestHandler } from "express";
 
 import { addOccupancyTypeField } from "../../helpers/lotOccupancyDB/addOccupancyTypeField.js";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 export const handler: RequestHandler = async (request, response) => {
     const occupancyTypeFieldId = addOccupancyTypeField(request.body, request.session);
 
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.json({
         success: true,
         occupancyTypeFieldId,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

handlers/admin-post/doDeleteOccupancyType.js

@@ -1,11 +1,13 @@
 import { deleteOccupancyType } from "../../helpers/lotOccupancyDB/deleteOccupancyType.js";
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 export const handler = async (request, response) => {
     const success = deleteOccupancyType(request.body.occupancyTypeId, request.session);
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-post/doDeleteOccupancyType.ts

@@ -2,7 +2,7 @@ import type { RequestHandler } from "express";
 
 import { deleteOccupancyType } from "../../helpers/lotOccupancyDB/deleteOccupancyType.js";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 export const handler: RequestHandler = async (request, response) => {
     const success = deleteOccupancyType(
@@ -11,10 +11,12 @@ export const handler: RequestHandler = async (request, response) => {
     );
 
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

handlers/admin-post/doDeleteOccupancyTypeField.js

@@ -1,11 +1,13 @@
 import { deleteOccupancyTypeField } from "../../helpers/lotOccupancyDB/deleteOccupancyTypeField.js";
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 export const handler = async (request, response) => {
     const success = deleteOccupancyTypeField(request.body.occupancyTypeFieldId, request.session);
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-post/doDeleteOccupancyTypeField.ts

@@ -2,7 +2,7 @@ import type { RequestHandler } from "express";
 
 import { deleteOccupancyTypeField } from "../../helpers/lotOccupancyDB/deleteOccupancyTypeField.js";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 export const handler: RequestHandler = async (request, response) => {
     const success = deleteOccupancyTypeField(
@@ -11,10 +11,12 @@ export const handler: RequestHandler = async (request, response) => {
     );
 
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

handlers/admin-post/doMoveOccupancyTypeDown.js

@@ -1,11 +1,13 @@
 import { moveOccupancyTypeDown } from "../../helpers/lotOccupancyDB/moveOccupancyTypeDown.js";
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 export const handler = async (request, response) => {
     const success = moveOccupancyTypeDown(request.body.occupancyTypeId);
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-post/doMoveOccupancyTypeDown.ts

@@ -2,16 +2,18 @@ import type { RequestHandler } from "express";
 
 import { moveOccupancyTypeDown } from "../../helpers/lotOccupancyDB/moveOccupancyTypeDown.js";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 export const handler: RequestHandler = async (request, response) => {
     const success = moveOccupancyTypeDown(request.body.occupancyTypeId);
 
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

handlers/admin-post/doMoveOccupancyTypeUp.js

@@ -1,11 +1,13 @@
 import { moveOccupancyTypeUp } from "../../helpers/lotOccupancyDB/moveOccupancyTypeUp.js";
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 export const handler = async (request, response) => {
     const success = moveOccupancyTypeUp(request.body.occupancyTypeId);
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-post/doMoveOccupancyTypeUp.ts

@@ -2,16 +2,18 @@ import type { RequestHandler } from "express";
 
 import { moveOccupancyTypeUp } from "../../helpers/lotOccupancyDB/moveOccupancyTypeUp.js";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 export const handler: RequestHandler = async (request, response) => {
     const success = moveOccupancyTypeUp(request.body.occupancyTypeId);
 
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

handlers/admin-post/doUpdateOccupancyType.js

@@ -1,11 +1,13 @@
 import { updateOccupancyType } from "../../helpers/lotOccupancyDB/updateOccupancyType.js";
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 export const handler = async (request, response) => {
     const success = updateOccupancyType(request.body, request.session);
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-post/doUpdateOccupancyType.ts

@@ -2,16 +2,18 @@ import type { RequestHandler } from "express";
 
 import { updateOccupancyType } from "../../helpers/lotOccupancyDB/updateOccupancyType.js";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 export const handler: RequestHandler = async (request, response) => {
     const success = updateOccupancyType(request.body, request.session);
 
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

handlers/admin-post/doUpdateOccupancyTypeField.js

@@ -1,11 +1,13 @@
 import { updateOccupancyTypeField } from "../../helpers/lotOccupancyDB/updateOccupancyTypeField.js";
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 export const handler = async (request, response) => {
     const success = updateOccupancyTypeField(request.body, request.session);
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 export default handler;

handlers/admin-post/doUpdateOccupancyTypeField.ts

@@ -2,16 +2,18 @@ import type { RequestHandler } from "express";
 
 import { updateOccupancyTypeField } from "../../helpers/lotOccupancyDB/updateOccupancyTypeField.js";
 
-import { getOccupancyTypes } from "../../helpers/functions.cache.js";
+import { getAllOccupancyTypeFields, getOccupancyTypes } from "../../helpers/functions.cache.js";
 
 export const handler: RequestHandler = async (request, response) => {
     const success = updateOccupancyTypeField(request.body, request.session);
 
     const occupancyTypes = getOccupancyTypes();
+    const allOccupancyTypeFields = getAllOccupancyTypeFields();
 
     response.json({
         success,
-        occupancyTypes
+        occupancyTypes,
+        allOccupancyTypeFields
     });
 };
 

helpers/functions.cache.d.ts

@@ -12,6 +12,7 @@ export declare function getLotTypeById(lotTypeId: number): recordTypes.LotType;
 export declare function getLotTypesByLotType(lotType: string): recordTypes.LotType;
 export declare function clearLotTypesCache(): void;
 export declare function getOccupancyTypes(): recordTypes.OccupancyType[];
+export declare function getAllOccupancyTypeFields(): recordTypes.OccupancyTypeField[];
 export declare function getOccupancyTypeById(occupancyTypeId: number): recordTypes.OccupancyType;
 export declare function getOccupancyTypeByOccupancyType(occupancyTypeString: string): recordTypes.OccupancyType;
 export declare function clearOccupancyTypesCache(): void;

helpers/functions.cache.js

@@ -2,6 +2,7 @@ import { getLotOccupantTypes as getLotOccupantTypesFromDatabase } from "./lotOcc
 import { getLotStatuses as getLotStatusesFromDatabase } from "./lotOccupancyDB/getLotStatuses.js";
 import { getLotTypes as getLotTypesFromDatabase } from "./lotOccupancyDB/getLotTypes.js";
 import { getOccupancyTypes as getOccupancyTypesFromDatabase } from "./lotOccupancyDB/getOccupancyTypes.js";
+import { getOccupancyTypeFields as getOccupancyTypeFieldsFromDatabase } from "./lotOccupancyDB/getOccupancyTypeFields.js";
 import { getWorkOrderTypes as getWorkOrderTypesFromDatabase } from "./lotOccupancyDB/getWorkOrderTypes.js";
 import { getWorkOrderMilestoneTypes as getWorkOrderMilestoneTypesFromDatabase } from "./lotOccupancyDB/getWorkOrderMilestoneTypes.js";
 let lotOccupantTypes;
@@ -21,8 +22,7 @@ export function getLotOccupantTypesByLotOccupantType(lotOccupantType) {
     const cachedLotOccupantTypes = getLotOccupantTypes();
     const lotOccupantTypeLowerCase = lotOccupantType.toLowerCase();
     return cachedLotOccupantTypes.find((currentLotOccupantType) => {
-        return (currentLotOccupantType.lotOccupantType.toLowerCase() ===
+        return currentLotOccupantType.lotOccupantType.toLowerCase() === lotOccupantTypeLowerCase;
-            lotOccupantTypeLowerCase);
     });
 }
 export function clearLotOccupantTypesCache() {
@@ -75,12 +75,19 @@ export function clearLotTypesCache() {
     lotTypes = undefined;
 }
 let occupancyTypes;
+let allOccupancyTypeFields;
 export function getOccupancyTypes() {
     if (!occupancyTypes) {
         occupancyTypes = getOccupancyTypesFromDatabase();
     }
     return occupancyTypes;
 }
+export function getAllOccupancyTypeFields() {
+    if (!allOccupancyTypeFields) {
+        allOccupancyTypeFields = getOccupancyTypeFieldsFromDatabase();
+    }
+    return allOccupancyTypeFields;
+}
 export function getOccupancyTypeById(occupancyTypeId) {
     const cachedOccupancyTypes = getOccupancyTypes();
     return cachedOccupancyTypes.find((currentOccupancyType) => {
@@ -91,12 +98,12 @@ export function getOccupancyTypeByOccupancyType(occupancyTypeString) {
     const cachedOccupancyTypes = getOccupancyTypes();
     const occupancyTypeLowerCase = occupancyTypeString.toLowerCase();
     return cachedOccupancyTypes.find((currentOccupancyType) => {
-        return (currentOccupancyType.occupancyType.toLowerCase() ===
+        return currentOccupancyType.occupancyType.toLowerCase() === occupancyTypeLowerCase;
-            occupancyTypeLowerCase);
     });
 }
 export function clearOccupancyTypesCache() {
     occupancyTypes = undefined;
+    allOccupancyTypeFields = undefined;
 }
 let workOrderTypes;
 export function getWorkOrderTypes() {

helpers/functions.cache.ts

@@ -5,6 +5,7 @@ import { getLotStatuses as getLotStatusesFromDatabase } from "./lotOccupancyDB/g
 import { getLotTypes as getLotTypesFromDatabase } from "./lotOccupancyDB/getLotTypes.js";
 
 import { getOccupancyTypes as getOccupancyTypesFromDatabase } from "./lotOccupancyDB/getOccupancyTypes.js";
+import { getOccupancyTypeFields as getOccupancyTypeFieldsFromDatabase } from "./lotOccupancyDB/getOccupancyTypeFields.js";
 
 import { getWorkOrderTypes as getWorkOrderTypesFromDatabase } from "./lotOccupancyDB/getWorkOrderTypes.js";
 
@@ -40,10 +41,7 @@ export function getLotOccupantTypesByLotOccupantType(lotOccupantType: string) {
     const lotOccupantTypeLowerCase = lotOccupantType.toLowerCase();
 
     return cachedLotOccupantTypes.find((currentLotOccupantType) => {
-        return (
+        return currentLotOccupantType.lotOccupantType.toLowerCase() === lotOccupantTypeLowerCase;
-            currentLotOccupantType.lotOccupantType.toLowerCase() ===
-            lotOccupantTypeLowerCase
-        );
     });
 }
 
@@ -128,6 +126,7 @@ export function clearLotTypesCache() {
  */
 
 let occupancyTypes: recordTypes.OccupancyType[];
+let allOccupancyTypeFields: recordTypes.OccupancyTypeField[];
 
 export function getOccupancyTypes() {
     if (!occupancyTypes) {
@@ -137,6 +136,13 @@ export function getOccupancyTypes() {
     return occupancyTypes;
 }
 
+export function getAllOccupancyTypeFields() {
+    if (!allOccupancyTypeFields) {
+        allOccupancyTypeFields = getOccupancyTypeFieldsFromDatabase();
+    }
+    return allOccupancyTypeFields;
+}
+
 export function getOccupancyTypeById(occupancyTypeId: number) {
     const cachedOccupancyTypes = getOccupancyTypes();
 
@@ -151,15 +157,13 @@ export function getOccupancyTypeByOccupancyType(occupancyTypeString: string) {
     const occupancyTypeLowerCase = occupancyTypeString.toLowerCase();
 
     return cachedOccupancyTypes.find((currentOccupancyType) => {
-        return (
+        return currentOccupancyType.occupancyType.toLowerCase() === occupancyTypeLowerCase;
-            currentOccupancyType.occupancyType.toLowerCase() ===
-            occupancyTypeLowerCase
-        );
     });
 }
 
 export function clearOccupancyTypesCache() {
     occupancyTypes = undefined;
+    allOccupancyTypeFields = undefined;
 }
 
 /*
@@ -194,7 +198,9 @@ export function getWorkOrderMilestoneTypes() {
     return workOrderMilestoneTypes;
 }
 
-export function getWorkOrderMilestoneTypeByWorkOrderMilestoneType(workOrderMilestoneTypeString: string) {
+export function getWorkOrderMilestoneTypeByWorkOrderMilestoneType(
+    workOrderMilestoneTypeString: string
+) {
     const cachedWorkOrderMilestoneTypes = getWorkOrderMilestoneTypes();
 
     const workOrderMilestoneTypeLowerCase = workOrderMilestoneTypeString.toLowerCase();

helpers/initializer.database.js

@@ -24,8 +24,7 @@ export const initializeDatabase = () => {
             ")")
             .run();
         lotOccupancyDB
-            .prepare("create index if not exists idx_lottypes_ordernumber" +
+            .prepare("create index if not exists idx_lottypes_ordernumber" + " on LotTypes (orderNumber, lotType)")
-            " on LotTypes (orderNumber, lotType)")
             .run();
         lotOccupancyDB
             .prepare("create table if not exists LotTypeFields (" +
@@ -56,8 +55,7 @@ export const initializeDatabase = () => {
             ")")
             .run();
         lotOccupancyDB
-            .prepare("create index if not exists idx_lotstatuses_ordernumber" +
+            .prepare("create index if not exists idx_lotstatuses_ordernumber" + " on LotStatuses (orderNumber, lotStatus)")
-            " on LotStatuses (orderNumber, lotStatus)")
             .run();
         lotOccupancyDB
             .prepare("create table if not exists Maps (" +
@@ -136,7 +134,7 @@ export const initializeDatabase = () => {
         lotOccupancyDB
             .prepare("create table if not exists OccupancyTypeFields (" +
             "occupancyTypeFieldId integer not null primary key autoincrement," +
-            " occupancyTypeId integer not null," +
+            " occupancyTypeId integer," +
             " occupancyTypeField varchar(100) not null," +
             " occupancyTypeFieldValues text," +
             " isRequired bit not null default 0," +
@@ -257,8 +255,7 @@ export const initializeDatabase = () => {
             ")")
             .run();
         lotOccupancyDB
-            .prepare("create index if not exists idx_fees_ordernumber" +
+            .prepare("create index if not exists idx_fees_ordernumber" + " on Fees (orderNumber, feeName)")
-            " on Fees (orderNumber, feeName)")
             .run();
         lotOccupancyDB
             .prepare("create table if not exists LotOccupancyFees (" +

helpers/initializer.database.ts

@@ -17,9 +17,7 @@ export const initializeDatabase = (): boolean => {
     const lotOccupancyDB = sqlite(databasePath);
 
     const row = lotOccupancyDB
-        .prepare(
+        .prepare("select name from sqlite_master where type = 'table' and name = 'WorkOrderMilestones'")
-            "select name from sqlite_master where type = 'table' and name = 'WorkOrderMilestones'"
-        )
         .get();
 
     if (!row) {
@@ -39,10 +37,7 @@ export const initializeDatabase = (): boolean => {
             .run();
 
         lotOccupancyDB
-            .prepare(
+            .prepare("create index if not exists idx_lottypes_ordernumber" + " on LotTypes (orderNumber, lotType)")
-                "create index if not exists idx_lottypes_ordernumber" +
-                    " on LotTypes (orderNumber, lotType)"
-            )
             .run();
 
         lotOccupancyDB
@@ -84,8 +79,7 @@ export const initializeDatabase = (): boolean => {
 
         lotOccupancyDB
             .prepare(
-                "create index if not exists idx_lotstatuses_ordernumber" +
+                "create index if not exists idx_lotstatuses_ordernumber" + " on LotStatuses (orderNumber, lotStatus)"
-                    " on LotStatuses (orderNumber, lotStatus)"
             )
             .run();
 
@@ -192,7 +186,7 @@ export const initializeDatabase = (): boolean => {
             .prepare(
                 "create table if not exists OccupancyTypeFields (" +
                     "occupancyTypeFieldId integer not null primary key autoincrement," +
-                    " occupancyTypeId integer not null," +
+                    " occupancyTypeId integer," +
                     " occupancyTypeField varchar(100) not null," +
                     " occupancyTypeFieldValues text," +
                     " isRequired bit not null default 0," +
@@ -347,10 +341,7 @@ export const initializeDatabase = (): boolean => {
             .run();
 
         lotOccupancyDB
-            .prepare(
+            .prepare("create index if not exists idx_fees_ordernumber" + " on Fees (orderNumber, feeName)")
-                "create index if not exists idx_fees_ordernumber" +
-                    " on Fees (orderNumber, feeName)"
-            )
             .run();
 
         lotOccupancyDB

helpers/lotOccupancyDB/addOccupancyTypeField.d.ts

@@ -1,6 +1,6 @@
 import type * as recordTypes from "../../types/recordTypes";
 interface AddOccupancyTypeFieldForm {
-    occupancyTypeId: string | number;
+    occupancyTypeId?: string | number;
     occupancyTypeField: string;
     occupancyTypeFieldValues?: string;
     isRequired?: string;

helpers/lotOccupancyDB/addOccupancyTypeField.js

@@ -13,7 +13,7 @@ export const addOccupancyTypeField = (occupancyTypeFieldForm, requestSession) =>
         " recordCreate_userName, recordCreate_timeMillis," +
         " recordUpdate_userName, recordUpdate_timeMillis)" +
         " values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)")
-        .run(occupancyTypeFieldForm.occupancyTypeId, occupancyTypeFieldForm.occupancyTypeField, occupancyTypeFieldForm.occupancyTypeFieldValues || "", occupancyTypeFieldForm.isRequired ? 1 : 0, occupancyTypeFieldForm.pattern || "", occupancyTypeFieldForm.minimumLength || 0, occupancyTypeFieldForm.maximumLength || 100, occupancyTypeFieldForm.orderNumber || -1, requestSession.user.userName, rightNowMillis, requestSession.user.userName, rightNowMillis);
+        .run(occupancyTypeFieldForm.occupancyTypeId || undefined, occupancyTypeFieldForm.occupancyTypeField, occupancyTypeFieldForm.occupancyTypeFieldValues || "", occupancyTypeFieldForm.isRequired ? 1 : 0, occupancyTypeFieldForm.pattern || "", occupancyTypeFieldForm.minimumLength || 0, occupancyTypeFieldForm.maximumLength || 100, occupancyTypeFieldForm.orderNumber || -1, requestSession.user.userName, rightNowMillis, requestSession.user.userName, rightNowMillis);
     database.close();
     clearOccupancyTypesCache();
     return result.lastInsertRowid;

helpers/lotOccupancyDB/addOccupancyTypeField.ts

@@ -6,7 +6,7 @@ import type * as recordTypes from "../../types/recordTypes";
 import { clearOccupancyTypesCache } from "../functions.cache.js";
 
 interface AddOccupancyTypeFieldForm {
-    occupancyTypeId: string | number;
+    occupancyTypeId?: string | number;
     occupancyTypeField: string;
     occupancyTypeFieldValues?: string;
     isRequired?: string;
@@ -36,7 +36,7 @@ export const addOccupancyTypeField = (
                 " values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"
         )
         .run(
-            occupancyTypeFieldForm.occupancyTypeId,
+            occupancyTypeFieldForm.occupancyTypeId || undefined,
             occupancyTypeFieldForm.occupancyTypeField,
             occupancyTypeFieldForm.occupancyTypeFieldValues || "",
             occupancyTypeFieldForm.isRequired ? 1 : 0,

helpers/lotOccupancyDB/getLotOccupancyFields.js

@@ -23,7 +23,7 @@ export const getLotOccupancyFields = (lotOccupancyId, connectedDatabase) => {
         " f.orderNumber" +
         " from OccupancyTypeFields f" +
         " where f.recordDelete_timeMillis is null" +
-        " and f.occupancyTypeId in (select occupancyTypeId from LotOccupancies where lotOccupancyId = ?)" +
+        " and (f.occupancyTypeId is null or f.occupancyTypeId in (select occupancyTypeId from LotOccupancies where lotOccupancyId = ?))" +
         " and f.occupancyTypeFieldId not in (select occupancyTypeFieldId from LotOccupancyFields where lotOccupancyId = ? and recordDelete_timeMillis is null)" +
         " order by orderNumber, occupancyTypeField")
         .all(lotOccupancyId, lotOccupancyId, lotOccupancyId, lotOccupancyId);

helpers/lotOccupancyDB/getLotOccupancyFields.ts

@@ -33,7 +33,7 @@ export const getLotOccupancyFields = (
                 " f.orderNumber" +
                 " from OccupancyTypeFields f" +
                 " where f.recordDelete_timeMillis is null" +
-                " and f.occupancyTypeId in (select occupancyTypeId from LotOccupancies where lotOccupancyId = ?)" +
+                " and (f.occupancyTypeId is null or f.occupancyTypeId in (select occupancyTypeId from LotOccupancies where lotOccupancyId = ?))" +
                 " and f.occupancyTypeFieldId not in (select occupancyTypeFieldId from LotOccupancyFields where lotOccupancyId = ? and recordDelete_timeMillis is null)" +
                 " order by orderNumber, occupancyTypeField"
         )

helpers/lotOccupancyDB/getOccupancyTypeFields.d.ts

@@ -0,0 +1,4 @@
+import sqlite from "better-sqlite3";
+import type * as recordTypes from "../../types/recordTypes";
+export declare const getOccupancyTypeFields: (occupancyTypeId?: number, connectedDatabase?: sqlite.Database) => recordTypes.OccupancyTypeField[];
+export default getOccupancyTypeFields;

helpers/lotOccupancyDB/getOccupancyTypeFields.js

@@ -0,0 +1,36 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+export const getOccupancyTypeFields = (occupancyTypeId, connectedDatabase) => {
+    const database = connectedDatabase || sqlite(databasePath);
+    const sqlParameters = [];
+    if (occupancyTypeId) {
+        sqlParameters.push(occupancyTypeId);
+    }
+    const occupancyTypeFields = database
+        .prepare("select occupancyTypeFieldId," +
+        " occupancyTypeField, occupancyTypeFieldValues, isRequired, pattern," +
+        " minimumLength, maximumLength," +
+        " orderNumber" +
+        " from OccupancyTypeFields" +
+        " where recordDelete_timeMillis is null" +
+        (occupancyTypeId ? " and occupancyTypeId = ?" : " and occupancyTypeId is null") +
+        " order by orderNumber, occupancyTypeField")
+        .all(sqlParameters);
+    let expectedFieldOrderNumber = -1;
+    for (const occupancyTypeField of occupancyTypeFields) {
+        expectedFieldOrderNumber += 1;
+        if (occupancyTypeField.orderNumber !== expectedFieldOrderNumber) {
+            database
+                .prepare("update OccupancyTypeFields" +
+                " set orderNumber = ?" +
+                " where occupancyTypeFieldId = ?")
+                .run(expectedFieldOrderNumber, occupancyTypeField.occupancyTypeFieldId);
+            occupancyTypeField.orderNumber = expectedFieldOrderNumber;
+        }
+    }
+    if (!connectedDatabase) {
+        database.close();
+    }
+    return occupancyTypeFields;
+};
+export default getOccupancyTypeFields;

helpers/lotOccupancyDB/getOccupancyTypeFields.ts

@@ -0,0 +1,57 @@
+import sqlite from "better-sqlite3";
+
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+
+import type * as recordTypes from "../../types/recordTypes";
+
+export const getOccupancyTypeFields = (
+    occupancyTypeId?: number,
+    connectedDatabase?: sqlite.Database
+): recordTypes.OccupancyTypeField[] => {
+    const database = connectedDatabase || sqlite(databasePath);
+
+    const sqlParameters = [];
+
+    if (occupancyTypeId) {
+        sqlParameters.push(occupancyTypeId);
+    }
+
+    const occupancyTypeFields: recordTypes.OccupancyTypeField[] = database
+        .prepare(
+            "select occupancyTypeFieldId," +
+                " occupancyTypeField, occupancyTypeFieldValues, isRequired, pattern," +
+                " minimumLength, maximumLength," +
+                " orderNumber" +
+                " from OccupancyTypeFields" +
+                " where recordDelete_timeMillis is null" +
+                (occupancyTypeId ? " and occupancyTypeId = ?" : " and occupancyTypeId is null") +
+                " order by orderNumber, occupancyTypeField"
+        )
+        .all(sqlParameters);
+
+    let expectedFieldOrderNumber = -1;
+
+    for (const occupancyTypeField of occupancyTypeFields) {
+        expectedFieldOrderNumber += 1;
+
+        if (occupancyTypeField.orderNumber !== expectedFieldOrderNumber) {
+            database
+                .prepare(
+                    "update OccupancyTypeFields" +
+                        " set orderNumber = ?" +
+                        " where occupancyTypeFieldId = ?"
+                )
+                .run(expectedFieldOrderNumber, occupancyTypeField.occupancyTypeFieldId);
+
+            occupancyTypeField.orderNumber = expectedFieldOrderNumber;
+        }
+    }
+
+    if (!connectedDatabase) {
+        database.close();
+    }
+
+    return occupancyTypeFields;
+};
+
+export default getOccupancyTypeFields;

helpers/lotOccupancyDB/getOccupancyTypes.js

@@ -1,5 +1,6 @@
 import sqlite from "better-sqlite3";
 import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+import { getOccupancyTypeFields } from "./getOccupancyTypeFields.js";
 export const getOccupancyTypes = () => {
     const database = sqlite(databasePath);
     const occupancyTypes = database
@@ -13,22 +14,11 @@ export const getOccupancyTypes = () => {
         expectedTypeOrderNumber += 1;
         if (occupancyType.orderNumber !== expectedTypeOrderNumber) {
             database
-                .prepare("update OccupancyTypes" +
+                .prepare("update OccupancyTypes" + " set orderNumber = ?" + " where occupancyTypeId = ?")
-                " set orderNumber = ?" +
-                " where occupancyTypeId = ?")
                 .run(expectedTypeOrderNumber, occupancyType.occupancyTypeId);
             occupancyType.orderNumber = expectedTypeOrderNumber;
         }
-        occupancyType.occupancyTypeFields = database
+        occupancyType.occupancyTypeFields = getOccupancyTypeFields(occupancyType.occupancyTypeId, database);
-            .prepare("select occupancyTypeFieldId," +
-            " occupancyTypeField, occupancyTypeFieldValues, isRequired, pattern," +
-            " minimumLength, maximumLength," +
-            " orderNumber" +
-            " from OccupancyTypeFields" +
-            " where recordDelete_timeMillis is null" +
-            " and occupancyTypeId = ?" +
-            " order by orderNumber, occupancyTypeField")
-            .all(occupancyType.occupancyTypeId);
         let expectedFieldOrderNumber = -1;
         for (const occupancyTypeField of occupancyType.occupancyTypeFields) {
             expectedFieldOrderNumber += 1;

helpers/lotOccupancyDB/getOccupancyTypes.ts

@@ -2,6 +2,8 @@ import sqlite from "better-sqlite3";
 
 import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
 
+import { getOccupancyTypeFields } from "./getOccupancyTypeFields.js";
+
 import type * as recordTypes from "../../types/recordTypes";
 
 export const getOccupancyTypes = (): recordTypes.OccupancyType[] => {
@@ -24,27 +26,17 @@ export const getOccupancyTypes = (): recordTypes.OccupancyType[] => {
         if (occupancyType.orderNumber !== expectedTypeOrderNumber) {
             database
                 .prepare(
-                    "update OccupancyTypes" +
+                    "update OccupancyTypes" + " set orderNumber = ?" + " where occupancyTypeId = ?"
-                        " set orderNumber = ?" +
-                        " where occupancyTypeId = ?"
                 )
                 .run(expectedTypeOrderNumber, occupancyType.occupancyTypeId);
 
             occupancyType.orderNumber = expectedTypeOrderNumber;
         }
 
-        occupancyType.occupancyTypeFields = database
+        occupancyType.occupancyTypeFields = getOccupancyTypeFields(
-            .prepare(
+            occupancyType.occupancyTypeId,
-                "select occupancyTypeFieldId," +
+            database
-                    " occupancyTypeField, occupancyTypeFieldValues, isRequired, pattern," +
+        );
-                    " minimumLength, maximumLength," +
-                    " orderNumber" +
-                    " from OccupancyTypeFields" +
-                    " where recordDelete_timeMillis is null" +
-                    " and occupancyTypeId = ?" +
-                    " order by orderNumber, occupancyTypeField"
-            )
-            .all(occupancyType.occupancyTypeId);
 
         let expectedFieldOrderNumber = -1;
 
@@ -58,10 +50,7 @@ export const getOccupancyTypes = (): recordTypes.OccupancyType[] => {
                             " set orderNumber = ?" +
                             " where occupancyTypeFieldId = ?"
                     )
-                    .run(
+                    .run(expectedFieldOrderNumber, occupancyTypeField.occupancyTypeFieldId);
-                        expectedFieldOrderNumber,
-                        occupancyTypeField.occupancyTypeFieldId
-                    );
 
                 occupancyTypeField.orderNumber = expectedFieldOrderNumber;
             }

public-typescript/adminOccupancyTypes.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
     const containerElement = document.querySelector("#container--occupancyTypes");
     let occupancyTypes = exports.occupancyTypes;
     delete exports.occupancyTypes;
+    let allOccupancyTypeFields = exports.allOccupancyTypeFields;
+    delete exports.allOccupancyTypeFields;
     const expandedOccupancyTypes = new Set();
     const toggleOccupancyTypeFields = (clickEvent) => {
         const toggleButtonElement = clickEvent.currentTarget;
@@ -25,26 +27,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
             panelBlockElement.classList.toggle("is-hidden");
         }
     };
+    const occupancyTypeResponseHandler = (responseJSON) => {
+        if (responseJSON.success) {
+            occupancyTypes = responseJSON.occupancyTypes;
+            allOccupancyTypeFields = responseJSON.allOccupancyTypeFields;
+            renderOccupancyTypes();
+        }
+        else {
+            bulmaJS.alert({
+                title: "Error Updating " + exports.aliases.occupancy + " Type",
+                message: responseJSON.errorMessage,
+                contextualColorName: "danger"
+            });
+        }
+    };
     const deleteOccupancyType = (clickEvent) => {
         const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId, 10);
         const doDelete = () => {
             cityssm.postJSON(urlPrefix + "/admin/doDeleteOccupancyType", {
                 occupancyTypeId
-            }, (responseJSON) => {
+            }, occupancyTypeResponseHandler);
-                if (responseJSON.success) {
-                    occupancyTypes = responseJSON.occupancyTypes;
-                    renderOccupancyTypes();
-                }
-                else {
-                    bulmaJS.alert({
-                        title: "Error Deleting " +
-                            exports.aliases.occupancy +
-                            " Type",
-                        message: responseJSON.errorMessage,
-                        contextualColorName: "danger"
-                    });
-                }
-            });
         };
         bulmaJS.confirm({
             title: "Delete " + exports.aliases.occupancy + " Type",
@@ -67,19 +69,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         const doEdit = (submitEvent) => {
             submitEvent.preventDefault();
             cityssm.postJSON(urlPrefix + "/admin/doUpdateOccupancyType", submitEvent.currentTarget, (responseJSON) => {
+                occupancyTypeResponseHandler(responseJSON);
                 if (responseJSON.success) {
                     editCloseModalFunction();
-                    occupancyTypes = responseJSON.occupancyTypes;
-                    renderOccupancyTypes();
-                }
-                else {
-                    bulmaJS.alert({
-                        title: "Error Updating " +
-                            exports.aliases.occupancy +
-                            " Type",
-                        message: responseJSON.errorMessage,
-                        contextualColorName: "danger"
-                    });
                 }
             });
         };
@@ -92,9 +84,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             onshown: (modalElement, closeModalFunction) => {
                 editCloseModalFunction = closeModalFunction;
                 modalElement.querySelector("#occupancyTypeEdit--occupancyType").focus();
-                modalElement
+                modalElement.querySelector("form").addEventListener("submit", doEdit);
-                    .querySelector("form")
-                    .addEventListener("submit", doEdit);
                 bulmaJS.toggleHtmlClipped();
             },
             onremoved: () => {
@@ -108,33 +98,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
         const doAdd = (submitEvent) => {
             submitEvent.preventDefault();
             cityssm.postJSON(urlPrefix + "/admin/doAddOccupancyTypeField", submitEvent.currentTarget, (responseJSON) => {
-                if (responseJSON.success) {
                 expandedOccupancyTypes.add(occupancyTypeId);
+                occupancyTypeResponseHandler(responseJSON);
+                if (responseJSON.success) {
                     addCloseModalFunction();
-                    occupancyTypes = responseJSON.occupancyTypes;
-                    renderOccupancyTypes();
                     openEditOccupancyTypeField(occupancyTypeId, responseJSON.occupancyTypeFieldId);
                 }
-                else {
-                    bulmaJS.alert({
-                        title: "Error Adding Field",
-                        message: responseJSON.errorMessage,
-                        contextualColorName: "danger"
-                    });
-                }
             });
         };
         cityssm.openHtmlModal("adminOccupancyTypes-addOccupancyTypeField", {
             onshow: (modalElement) => {
                 los.populateAliases(modalElement);
+                if (occupancyTypeId) {
                     modalElement.querySelector("#occupancyTypeFieldAdd--occupancyTypeId").value = occupancyTypeId.toString();
+                }
             },
             onshown: (modalElement, closeModalFunction) => {
                 addCloseModalFunction = closeModalFunction;
                 modalElement.querySelector("#occupancyTypeFieldAdd--occupancyTypeField").focus();
-                modalElement
+                modalElement.querySelector("form").addEventListener("submit", doAdd);
-                    .querySelector("form")
-                    .addEventListener("submit", doAdd);
                 bulmaJS.toggleHtmlClipped();
             },
             onremoved: () => {
@@ -147,51 +129,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
         const occupancyTypeId = clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId;
         cityssm.postJSON(urlPrefix + "/admin/doMoveOccupancyTypeUp", {
             occupancyTypeId
-        }, (responseJSON) => {
+        }, occupancyTypeResponseHandler);
-            if (responseJSON.success) {
-                occupancyTypes = responseJSON.occupancyTypes;
-                renderOccupancyTypes();
-            }
-            else {
-                bulmaJS.alert({
-                    title: "Error Moving " +
-                        exports.aliases.occupancy +
-                        " Type",
-                    message: responseJSON.errorMessage,
-                    contextualColorName: "danger"
-                });
-            }
-        });
     };
     const moveOccupancyTypeDown = (clickEvent) => {
         clickEvent.preventDefault();
         const occupancyTypeId = clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId;
         cityssm.postJSON(urlPrefix + "/admin/doMoveOccupancyTypeDown", {
             occupancyTypeId
-        }, (responseJSON) => {
+        }, occupancyTypeResponseHandler);
-            if (responseJSON.success) {
-                occupancyTypes = responseJSON.occupancyTypes;
-                renderOccupancyTypes();
-            }
-            else {
-                bulmaJS.alert({
-                    title: "Error Moving " +
-                        exports.aliases.occupancy +
-                        " Type",
-                    message: responseJSON.errorMessage,
-                    contextualColorName: "danger"
-                });
-            }
-        });
     };
     const openEditOccupancyTypeField = (occupancyTypeId, occupancyTypeFieldId) => {
+        let occupancyTypeField;
+        if (occupancyTypeId) {
             const occupancyType = occupancyTypes.find((currentOccupancyType) => {
                 return currentOccupancyType.occupancyTypeId === occupancyTypeId;
             });
-        const occupancyTypeField = occupancyType.occupancyTypeFields.find((currentOccupancyTypeField) => {
+            occupancyTypeField = occupancyType.occupancyTypeFields.find((currentOccupancyTypeField) => {
-            return (currentOccupancyTypeField.occupancyTypeFieldId ===
+                return currentOccupancyTypeField.occupancyTypeFieldId === occupancyTypeFieldId;
-                occupancyTypeFieldId);
             });
+        }
+        else {
+            occupancyTypeField = allOccupancyTypeFields.find((currentOccupancyTypeField) => {
+                return currentOccupancyTypeField.occupancyTypeFieldId === occupancyTypeFieldId;
+            });
+        }
         let minimumLengthElement;
         let maximumLengthElement;
         let patternElement;
@@ -215,17 +176,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         const doUpdate = (submitEvent) => {
             submitEvent.preventDefault();
             cityssm.postJSON(urlPrefix + "/admin/doUpdateOccupancyTypeField", submitEvent.currentTarget, (responseJSON) => {
+                occupancyTypeResponseHandler(responseJSON);
                 if (responseJSON.success) {
-                    occupancyTypes = responseJSON.occupancyTypes;
                     editCloseModalFunction();
-                    renderOccupancyTypes();
-                }
-                else {
-                    bulmaJS.alert({
-                        title: "Error Updating Field",
-                        message: responseJSON.errorMessage,
-                        contextualColorName: "danger"
-                    });
                 }
             });
         };
@@ -234,17 +187,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 cityssm.postJSON(urlPrefix + "/admin/doDeleteOccupancyTypeField", {
                     occupancyTypeFieldId
                 }, (responseJSON) => {
+                    occupancyTypeResponseHandler(responseJSON);
                     if (responseJSON.success) {
-                        occupancyTypes = responseJSON.occupancyTypes;
                         editCloseModalFunction();
-                        renderOccupancyTypes();
-                    }
-                    else {
-                        bulmaJS.alert({
-                            title: "Error Deleting Field",
-                            message: responseJSON.errorMessage,
-                            contextualColorName: "danger"
-                        });
                     }
                 });
             };
@@ -265,16 +210,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 modalElement.querySelector("#occupancyTypeFieldEdit--occupancyTypeField").value = occupancyTypeField.occupancyTypeField;
                 modalElement.querySelector("#occupancyTypeFieldEdit--isRequired").value = occupancyTypeField.isRequired ? "1" : "0";
                 minimumLengthElement = modalElement.querySelector("#occupancyTypeFieldEdit--minimumLength");
-                minimumLengthElement.value =
+                minimumLengthElement.value = occupancyTypeField.minimumLength.toString();
-                    occupancyTypeField.minimumLength.toString();
                 maximumLengthElement = modalElement.querySelector("#occupancyTypeFieldEdit--maximumLength");
-                maximumLengthElement.value =
+                maximumLengthElement.value = occupancyTypeField.maximumLength.toString();
-                    occupancyTypeField.maximumLength.toString();
                 patternElement = modalElement.querySelector("#occupancyTypeFieldEdit--pattern");
                 patternElement.value = occupancyTypeField.pattern;
                 occupancyTypeFieldValuesElement = modalElement.querySelector("#occupancyTypeFieldEdit--occupancyTypeFieldValues");
-                occupancyTypeFieldValuesElement.value =
+                occupancyTypeFieldValuesElement.value = occupancyTypeField.occupancyTypeFieldValues;
-                    occupancyTypeField.occupancyTypeFieldValues;
                 toggleInputFields();
             },
             onshown: (modalElement, closeModalFunction) => {
@@ -282,9 +224,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 bulmaJS.init(modalElement);
                 bulmaJS.toggleHtmlClipped();
                 cityssm.enableNavBlocker();
-                modalElement
+                modalElement.querySelector("form").addEventListener("submit", doUpdate);
-                    .querySelector("form")
-                    .addEventListener("submit", doUpdate);
                 minimumLengthElement.addEventListener("keyup", updateMaximumLengthMin);
                 updateMaximumLengthMin();
                 occupancyTypeFieldValuesElement.addEventListener("keyup", toggleInputFields);
@@ -304,17 +244,91 @@ Object.defineProperty(exports, "__esModule", { value: true });
         const occupancyTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--occupancyType").dataset.occupancyTypeId, 10);
         openEditOccupancyTypeField(occupancyTypeId, occupancyTypeFieldId);
     };
+    const renderOccupancyTypeFields = (panelElement, occupancyTypeId, occupancyTypeFields) => {
+        if (occupancyTypeFields.length === 0) {
+            panelElement.insertAdjacentHTML("beforeend", '<div class="panel-block is-block' +
+                (!occupancyTypeId || expandedOccupancyTypes.has(occupancyTypeId)
+                    ? ""
+                    : " is-hidden") +
+                '">' +
+                '<div class="message is-info">' +
+                '<p class="message-body">There are no additional fields.</p>' +
+                "</div>" +
+                "</div>");
+        }
+        else {
+            for (const occupancyTypeField of occupancyTypeFields) {
+                const panelBlockElement = document.createElement("div");
+                panelBlockElement.className = "panel-block is-block container--occupancyTypeField";
+                if (occupancyTypeId && !expandedOccupancyTypes.has(occupancyTypeId)) {
+                    panelBlockElement.classList.add("is-hidden");
+                }
+                panelBlockElement.dataset.occupancyTypeFieldId =
+                    occupancyTypeField.occupancyTypeFieldId.toString();
+                panelBlockElement.innerHTML =
+                    '<div class="level is-mobile">' +
+                        '<div class="level-left">' +
+                        ('<div class="level-item">' +
+                            '<a class="has-text-weight-bold button--editOccupancyTypeField" href="#">' +
+                            cityssm.escapeHTML(occupancyTypeField.occupancyTypeField) +
+                            "</a>" +
+                            "</div>") +
+                        "</div>" +
+                        '<div class="level-right">' +
+                        ('<div class="level-item">' +
+                            '<div class="field has-addons">' +
+                            '<div class="control">' +
+                            '<button class="button is-small button--moveOccupancyTypeFieldUp" data-tooltip="Move Up" type="button" aria-label="Move Up">' +
+                            '<i class="fas fa-arrow-up" aria-hidden="true"></i>' +
+                            "</button>" +
+                            "</div>" +
+                            '<div class="control">' +
+                            '<button class="button is-small button--moveOccupancyTypeFieldDown" data-tooltip="Move Down" type="button" aria-label="Move Down">' +
+                            '<i class="fas fa-arrow-down" aria-hidden="true"></i>' +
+                            "</button>" +
+                            "</div>" +
+                            "</div>" +
+                            "</div>") +
+                        "</div>" +
+                        "</div>";
+                panelBlockElement
+                    .querySelector(".button--editOccupancyTypeField")
+                    .addEventListener("click", openEditOccupancyTypeFieldByClick);
+                panelElement.append(panelBlockElement);
+            }
+        }
+    };
     const renderOccupancyTypes = () => {
-        if (occupancyTypes.length === 0) {
         containerElement.innerHTML =
-                '<div class="message is-warning>' +
+            '<div class="panel container--occupancyType" id="container--allOccupancyTypeFields" data-occupancy-type-id="">' +
+                '<div class="panel-heading">' +
+                ('<div class="level is-mobile">' +
+                    ('<div class="level-left">' +
+                        '<div class="level-item"><h2 class="title is-4">(All Occupancy Types)</h2></div>' +
+                        "</div>") +
+                    ('<div class="level-right">' +
+                        ('<div class="level-item">' +
+                            '<button class="button is-success is-small button--addOccupancyTypeField" type="button">' +
+                            '<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
+                            "<span>Add Field</span>" +
+                            "</button>" +
+                            "</div>") +
+                        "</div>") +
+                    "</div>") +
+                "</div>" +
+                "</div>";
+        renderOccupancyTypeFields(containerElement.querySelector("#container--allOccupancyTypeFields"), undefined, allOccupancyTypeFields);
+        containerElement
+            .querySelector(".button--addOccupancyTypeField")
+            .addEventListener("click", openAddOccupancyTypeField);
+        if (occupancyTypes.length === 0) {
+            containerElement.insertAdjacentHTML("afterbegin", '<div class="message is-warning>' +
                 '<p class="message-body">There are no active ' +
                 exports.aliases.occupancy.toLowerCase() +
                 " types.</p>" +
-                    "</div>";
+                "</div>");
             return;
         }
-        containerElement.innerHTML = "";
         for (const occupancyType of occupancyTypes) {
             const occupancyTypeContainer = document.createElement("div");
             occupancyTypeContainer.className = "panel container--occupancyType";
@@ -375,59 +389,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                         "</div>") +
                     "</div>" +
                     "</div>";
-            if (occupancyType.occupancyTypeFields.length === 0) {
+            renderOccupancyTypeFields(occupancyTypeContainer, occupancyType.occupancyTypeId, occupancyType.occupancyTypeFields);
-                occupancyTypeContainer.insertAdjacentHTML("beforeend", '<div class="panel-block is-block' +
-                    (expandedOccupancyTypes.has(occupancyType.occupancyTypeId)
-                        ? ""
-                        : " is-hidden") +
-                    '">' +
-                    '<div class="message is-info">' +
-                    '<p class="message-body">There are no additional fields.</p>' +
-                    "</div>" +
-                    "</div>");
-            }
-            else {
-                for (const occupancyTypeField of occupancyType.occupancyTypeFields) {
-                    const panelBlockElement = document.createElement("div");
-                    panelBlockElement.className =
-                        "panel-block is-block container--occupancyTypeField";
-                    if (!expandedOccupancyTypes.has(occupancyType.occupancyTypeId)) {
-                        panelBlockElement.classList.add("is-hidden");
-                    }
-                    panelBlockElement.dataset.occupancyTypeFieldId =
-                        occupancyTypeField.occupancyTypeFieldId.toString();
-                    panelBlockElement.innerHTML =
-                        '<div class="level is-mobile">' +
-                            '<div class="level-left">' +
-                            ('<div class="level-item">' +
-                                '<a class="has-text-weight-bold button--editOccupancyTypeField" href="#">' +
-                                cityssm.escapeHTML(occupancyTypeField.occupancyTypeField) +
-                                "</a>" +
-                                "</div>") +
-                            "</div>" +
-                            '<div class="level-right">' +
-                            ('<div class="level-item">' +
-                                '<div class="field has-addons">' +
-                                '<div class="control">' +
-                                '<button class="button is-small button--moveOccupancyTypeFieldUp" data-tooltip="Move Up" type="button" aria-label="Move Up">' +
-                                '<i class="fas fa-arrow-up" aria-hidden="true"></i>' +
-                                "</button>" +
-                                "</div>" +
-                                '<div class="control">' +
-                                '<button class="button is-small button--moveOccupancyTypeFieldDown" data-tooltip="Move Down" type="button" aria-label="Move Down">' +
-                                '<i class="fas fa-arrow-down" aria-hidden="true"></i>' +
-                                "</button>" +
-                                "</div>" +
-                                "</div>" +
-                                "</div>") +
-                            "</div>" +
-                            "</div>";
-                    panelBlockElement
-                        .querySelector(".button--editOccupancyTypeField")
-                        .addEventListener("click", openEditOccupancyTypeFieldByClick);
-                    occupancyTypeContainer.append(panelBlockElement);
-                }
-            }
             occupancyTypeContainer
                 .querySelector(".button--toggleOccupancyTypeFields")
                 .addEventListener("click", toggleOccupancyTypeFields);
@@ -449,9 +411,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             containerElement.append(occupancyTypeContainer);
         }
     };
-    document
+    document.querySelector("#button--addOccupancyType").addEventListener("click", () => {
-        .querySelector("#button--addOccupancyType")
-        .addEventListener("click", () => {
         let addCloseModalFunction;
         const doAdd = (submitEvent) => {
             submitEvent.preventDefault();
@@ -463,9 +423,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 }
                 else {
                     bulmaJS.alert({
-                        title: "Error Adding " +
+                        title: "Error Adding " + exports.aliases.occupancy + " Type",
-                            exports.aliases.occupancy +
-                            " Type",
                         message: responseJSON.errorMessage,
                         contextualColorName: "danger"
                     });
@@ -479,9 +437,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             onshown: (modalElement, closeModalFunction) => {
                 addCloseModalFunction = closeModalFunction;
                 modalElement.querySelector("#occupancyTypeAdd--occupancyType").focus();
-                modalElement
+                modalElement.querySelector("form").addEventListener("submit", doAdd);
-                    .querySelector("form")
-                    .addEventListener("submit", doAdd);
                 bulmaJS.toggleHtmlClipped();
             },
             onremoved: () => {

public-typescript/adminOccupancyTypes.ts

@@ -15,27 +15,24 @@ declare const bulmaJS: BulmaJS;
 
     const urlPrefix = document.querySelector("main").dataset.urlPrefix;
 
-    const containerElement = document.querySelector(
+    const containerElement = document.querySelector("#container--occupancyTypes") as HTMLElement;
-        "#container--occupancyTypes"
-    ) as HTMLElement;
 
     let occupancyTypes: recordTypes.OccupancyType[] = exports.occupancyTypes;
     delete exports.occupancyTypes;
 
+    let allOccupancyTypeFields: recordTypes.OccupancyTypeField[] = exports.allOccupancyTypeFields;
+    delete exports.allOccupancyTypeFields;
+
     const expandedOccupancyTypes = new Set<number>();
 
     const toggleOccupancyTypeFields = (clickEvent: Event) => {
-        const toggleButtonElement =
+        const toggleButtonElement = clickEvent.currentTarget as HTMLButtonElement;
-            clickEvent.currentTarget as HTMLButtonElement;
 
         const occupancyTypeElement = toggleButtonElement.closest(
             ".container--occupancyType"
         ) as HTMLElement;
 
-        const occupancyTypeId = Number.parseInt(
+        const occupancyTypeId = Number.parseInt(occupancyTypeElement.dataset.occupancyTypeId, 10);
-            occupancyTypeElement.dataset.occupancyTypeId,
-            10
-        );
 
         if (expandedOccupancyTypes.has(occupancyTypeId)) {
             expandedOccupancyTypes.delete(occupancyTypeId);
@@ -43,20 +40,36 @@ declare const bulmaJS: BulmaJS;
             expandedOccupancyTypes.add(occupancyTypeId);
         }
 
-        toggleButtonElement.innerHTML = expandedOccupancyTypes.has(
+        toggleButtonElement.innerHTML = expandedOccupancyTypes.has(occupancyTypeId)
-            occupancyTypeId
-        )
             ? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
             : '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>';
 
-        const panelBlockElements =
+        const panelBlockElements = occupancyTypeElement.querySelectorAll(".panel-block");
-            occupancyTypeElement.querySelectorAll(".panel-block");
 
         for (const panelBlockElement of panelBlockElements) {
             panelBlockElement.classList.toggle("is-hidden");
         }
     };
 
+    const occupancyTypeResponseHandler = (responseJSON: {
+        success: boolean;
+        errorMessage?: string;
+        occupancyTypes?: recordTypes.OccupancyType[];
+        allOccupancyTypeFields?: recordTypes.OccupancyTypeField[];
+    }) => {
+        if (responseJSON.success) {
+            occupancyTypes = responseJSON.occupancyTypes;
+            allOccupancyTypeFields = responseJSON.allOccupancyTypeFields;
+            renderOccupancyTypes();
+        } else {
+            bulmaJS.alert({
+                title: "Error Updating " + exports.aliases.occupancy + " Type",
+                message: responseJSON.errorMessage,
+                contextualColorName: "danger"
+            });
+        }
+    };
+
     const deleteOccupancyType = (clickEvent: Event) => {
         const occupancyTypeId = Number.parseInt(
             (
@@ -73,25 +86,7 @@ declare const bulmaJS: BulmaJS;
                 {
                     occupancyTypeId
                 },
-                (responseJSON: {
+                occupancyTypeResponseHandler
-                    success: boolean;
-                    errorMessage?: string;
-                    occupancyTypes?: recordTypes.OccupancyType[];
-                }) => {
-                    if (responseJSON.success) {
-                        occupancyTypes = responseJSON.occupancyTypes;
-                        renderOccupancyTypes();
-                    } else {
-                        bulmaJS.alert({
-                            title:
-                                "Error Deleting " +
-                                exports.aliases.occupancy +
-                                " Type",
-                            message: responseJSON.errorMessage,
-                            contextualColorName: "danger"
-                        });
-                    }
-                }
             );
         };
 
@@ -135,20 +130,11 @@ declare const bulmaJS: BulmaJS;
                     success: boolean;
                     errorMessage?: string;
                     occupancyTypes?: recordTypes.OccupancyType[];
+                    allOccupancyTypeFields?: recordTypes.OccupancyTypeField[];
                 }) => {
+                    occupancyTypeResponseHandler(responseJSON);
                     if (responseJSON.success) {
                         editCloseModalFunction();
-                        occupancyTypes = responseJSON.occupancyTypes;
-                        renderOccupancyTypes();
-                    } else {
-                        bulmaJS.alert({
-                            title:
-                                "Error Updating " +
-                                exports.aliases.occupancy +
-                                " Type",
-                            message: responseJSON.errorMessage,
-                            contextualColorName: "danger"
-                        });
                     }
                 }
             );
@@ -179,9 +165,7 @@ declare const bulmaJS: BulmaJS;
                     ) as HTMLInputElement
                 ).focus();
 
-                modalElement
+                modalElement.querySelector("form").addEventListener("submit", doEdit);
-                    .querySelector("form")
-                    .addEventListener("submit", doEdit);
 
                 bulmaJS.toggleHtmlClipped();
             },
@@ -213,25 +197,18 @@ declare const bulmaJS: BulmaJS;
                     success: boolean;
                     errorMessage?: string;
                     occupancyTypes?: recordTypes.OccupancyType[];
+                    allOccupancyTypeFields?: recordTypes.OccupancyTypeField[];
                     occupancyTypeFieldId?: number;
                 }) => {
-                    if (responseJSON.success) {
                     expandedOccupancyTypes.add(occupancyTypeId);
+                    occupancyTypeResponseHandler(responseJSON);
 
+                    if (responseJSON.success) {
                         addCloseModalFunction();
-                        occupancyTypes = responseJSON.occupancyTypes;
-                        renderOccupancyTypes();
-
                         openEditOccupancyTypeField(
                             occupancyTypeId,
                             responseJSON.occupancyTypeFieldId
                         );
-                    } else {
-                        bulmaJS.alert({
-                            title: "Error Adding Field",
-                            message: responseJSON.errorMessage,
-                            contextualColorName: "danger"
-                        });
                     }
                 }
             );
@@ -241,11 +218,13 @@ declare const bulmaJS: BulmaJS;
             onshow: (modalElement) => {
                 los.populateAliases(modalElement);
 
+                if (occupancyTypeId) {
                     (
                         modalElement.querySelector(
                             "#occupancyTypeFieldAdd--occupancyTypeId"
                         ) as HTMLInputElement
                     ).value = occupancyTypeId.toString();
+                }
             },
             onshown: (modalElement, closeModalFunction) => {
                 addCloseModalFunction = closeModalFunction;
@@ -256,9 +235,7 @@ declare const bulmaJS: BulmaJS;
                     ) as HTMLInputElement
                 ).focus();
 
-                modalElement
+                modalElement.querySelector("form").addEventListener("submit", doAdd);
-                    .querySelector("form")
-                    .addEventListener("submit", doAdd);
 
                 bulmaJS.toggleHtmlClipped();
             },
@@ -282,25 +259,7 @@ declare const bulmaJS: BulmaJS;
             {
                 occupancyTypeId
             },
-            (responseJSON: {
+            occupancyTypeResponseHandler
-                success: boolean;
-                errorMessage?: string;
-                occupancyTypes?: recordTypes.OccupancyType[];
-            }) => {
-                if (responseJSON.success) {
-                    occupancyTypes = responseJSON.occupancyTypes;
-                    renderOccupancyTypes();
-                } else {
-                    bulmaJS.alert({
-                        title:
-                            "Error Moving " +
-                            exports.aliases.occupancy +
-                            " Type",
-                        message: responseJSON.errorMessage,
-                        contextualColorName: "danger"
-                    });
-                }
-            }
         );
     };
 
@@ -318,44 +277,28 @@ declare const bulmaJS: BulmaJS;
             {
                 occupancyTypeId
             },
-            (responseJSON: {
+            occupancyTypeResponseHandler
-                success: boolean;
-                errorMessage?: string;
-                occupancyTypes?: recordTypes.OccupancyType[];
-            }) => {
-                if (responseJSON.success) {
-                    occupancyTypes = responseJSON.occupancyTypes;
-                    renderOccupancyTypes();
-                } else {
-                    bulmaJS.alert({
-                        title:
-                            "Error Moving " +
-                            exports.aliases.occupancy +
-                            " Type",
-                        message: responseJSON.errorMessage,
-                        contextualColorName: "danger"
-                    });
-                }
-            }
         );
     };
 
-    const openEditOccupancyTypeField = (
+    const openEditOccupancyTypeField = (occupancyTypeId: number, occupancyTypeFieldId: number) => {
-        occupancyTypeId: number,
+        let occupancyTypeField: recordTypes.OccupancyTypeField;
-        occupancyTypeFieldId: number
+
-    ) => {
+        if (occupancyTypeId) {
             const occupancyType = occupancyTypes.find((currentOccupancyType) => {
                 return currentOccupancyType.occupancyTypeId === occupancyTypeId;
             });
 
-        const occupancyTypeField = occupancyType.occupancyTypeFields.find(
+            occupancyTypeField = occupancyType.occupancyTypeFields.find(
                 (currentOccupancyTypeField) => {
-                return (
+                    return currentOccupancyTypeField.occupancyTypeFieldId === occupancyTypeFieldId;
-                    currentOccupancyTypeField.occupancyTypeFieldId ===
-                    occupancyTypeFieldId
-                );
                 }
             );
+        } else {
+            occupancyTypeField = allOccupancyTypeFields.find((currentOccupancyTypeField) => {
+                return currentOccupancyTypeField.occupancyTypeFieldId === occupancyTypeFieldId;
+            });
+        }
 
         let minimumLengthElement: HTMLInputElement;
         let maximumLengthElement: HTMLInputElement;
@@ -391,16 +334,9 @@ declare const bulmaJS: BulmaJS;
                     errorMessage?: string;
                     occupancyTypes?: recordTypes.OccupancyType[];
                 }) => {
+                    occupancyTypeResponseHandler(responseJSON);
                     if (responseJSON.success) {
-                        occupancyTypes = responseJSON.occupancyTypes;
                         editCloseModalFunction();
-                        renderOccupancyTypes();
-                    } else {
-                        bulmaJS.alert({
-                            title: "Error Updating Field",
-                            message: responseJSON.errorMessage,
-                            contextualColorName: "danger"
-                        });
                     }
                 }
             );
@@ -418,16 +354,9 @@ declare const bulmaJS: BulmaJS;
                         errorMessage?: string;
                         occupancyTypes?: recordTypes.OccupancyType[];
                     }) => {
+                        occupancyTypeResponseHandler(responseJSON);
                         if (responseJSON.success) {
-                            occupancyTypes = responseJSON.occupancyTypes;
                             editCloseModalFunction();
-                            renderOccupancyTypes();
-                        } else {
-                            bulmaJS.alert({
-                                title: "Error Deleting Field",
-                                message: responseJSON.errorMessage,
-                                contextualColorName: "danger"
-                            });
                         }
                     }
                 );
@@ -471,19 +400,15 @@ declare const bulmaJS: BulmaJS;
                     "#occupancyTypeFieldEdit--minimumLength"
                 );
 
-                minimumLengthElement.value =
+                minimumLengthElement.value = occupancyTypeField.minimumLength.toString();
-                    occupancyTypeField.minimumLength.toString();
 
                 maximumLengthElement = modalElement.querySelector(
                     "#occupancyTypeFieldEdit--maximumLength"
                 );
 
-                maximumLengthElement.value =
+                maximumLengthElement.value = occupancyTypeField.maximumLength.toString();
-                    occupancyTypeField.maximumLength.toString();
 
-                patternElement = modalElement.querySelector(
+                patternElement = modalElement.querySelector("#occupancyTypeFieldEdit--pattern");
-                    "#occupancyTypeFieldEdit--pattern"
-                );
 
                 patternElement.value = occupancyTypeField.pattern;
 
@@ -491,8 +416,7 @@ declare const bulmaJS: BulmaJS;
                     "#occupancyTypeFieldEdit--occupancyTypeFieldValues"
                 );
 
-                occupancyTypeFieldValuesElement.value =
+                occupancyTypeFieldValuesElement.value = occupancyTypeField.occupancyTypeFieldValues;
-                    occupancyTypeField.occupancyTypeFieldValues;
 
                 toggleInputFields();
             },
@@ -503,20 +427,12 @@ declare const bulmaJS: BulmaJS;
                 bulmaJS.toggleHtmlClipped();
                 cityssm.enableNavBlocker();
 
-                modalElement
+                modalElement.querySelector("form").addEventListener("submit", doUpdate);
-                    .querySelector("form")
-                    .addEventListener("submit", doUpdate);
 
-                minimumLengthElement.addEventListener(
+                minimumLengthElement.addEventListener("keyup", updateMaximumLengthMin);
-                    "keyup",
-                    updateMaximumLengthMin
-                );
                 updateMaximumLengthMin();
 
-                occupancyTypeFieldValuesElement.addEventListener(
+                occupancyTypeFieldValuesElement.addEventListener("keyup", toggleInputFields);
-                    "keyup",
-                    toggleInputFields
-                );
 
                 modalElement
                     .querySelector("#button--deleteOccupancyTypeField")
@@ -553,20 +469,115 @@ declare const bulmaJS: BulmaJS;
         openEditOccupancyTypeField(occupancyTypeId, occupancyTypeFieldId);
     };
 
+    const renderOccupancyTypeFields = (
+        panelElement: HTMLElement,
+        occupancyTypeId: number | undefined,
+        occupancyTypeFields: recordTypes.OccupancyTypeField[]
+    ) => {
+        if (occupancyTypeFields.length === 0) {
+            panelElement.insertAdjacentHTML(
+                "beforeend",
+                '<div class="panel-block is-block' +
+                    (!occupancyTypeId || expandedOccupancyTypes.has(occupancyTypeId)
+                        ? ""
+                        : " is-hidden") +
+                    '">' +
+                    '<div class="message is-info">' +
+                    '<p class="message-body">There are no additional fields.</p>' +
+                    "</div>" +
+                    "</div>"
+            );
+        } else {
+            for (const occupancyTypeField of occupancyTypeFields) {
+                const panelBlockElement = document.createElement("div");
+                panelBlockElement.className = "panel-block is-block container--occupancyTypeField";
+
+                if (occupancyTypeId && !expandedOccupancyTypes.has(occupancyTypeId)) {
+                    panelBlockElement.classList.add("is-hidden");
+                }
+
+                panelBlockElement.dataset.occupancyTypeFieldId =
+                    occupancyTypeField.occupancyTypeFieldId.toString();
+
+                panelBlockElement.innerHTML =
+                    '<div class="level is-mobile">' +
+                    '<div class="level-left">' +
+                    ('<div class="level-item">' +
+                        '<a class="has-text-weight-bold button--editOccupancyTypeField" href="#">' +
+                        cityssm.escapeHTML(occupancyTypeField.occupancyTypeField) +
+                        "</a>" +
+                        "</div>") +
+                    "</div>" +
+                    '<div class="level-right">' +
+                    ('<div class="level-item">' +
+                        '<div class="field has-addons">' +
+                        '<div class="control">' +
+                        '<button class="button is-small button--moveOccupancyTypeFieldUp" data-tooltip="Move Up" type="button" aria-label="Move Up">' +
+                        '<i class="fas fa-arrow-up" aria-hidden="true"></i>' +
+                        "</button>" +
+                        "</div>" +
+                        '<div class="control">' +
+                        '<button class="button is-small button--moveOccupancyTypeFieldDown" data-tooltip="Move Down" type="button" aria-label="Move Down">' +
+                        '<i class="fas fa-arrow-down" aria-hidden="true"></i>' +
+                        "</button>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>") +
+                    "</div>" +
+                    "</div>";
+
+                panelBlockElement
+                    .querySelector(".button--editOccupancyTypeField")
+                    .addEventListener("click", openEditOccupancyTypeFieldByClick);
+
+                panelElement.append(panelBlockElement);
+            }
+        }
+    };
+
     const renderOccupancyTypes = () => {
-        if (occupancyTypes.length === 0) {
         containerElement.innerHTML =
+            '<div class="panel container--occupancyType" id="container--allOccupancyTypeFields" data-occupancy-type-id="">' +
+            '<div class="panel-heading">' +
+            ('<div class="level is-mobile">' +
+                ('<div class="level-left">' +
+                    '<div class="level-item"><h2 class="title is-4">(All Occupancy Types)</h2></div>' +
+                    "</div>") +
+                ('<div class="level-right">' +
+                    ('<div class="level-item">' +
+                        '<button class="button is-success is-small button--addOccupancyTypeField" type="button">' +
+                        '<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
+                        "<span>Add Field</span>" +
+                        "</button>" +
+                        "</div>") +
+                    "</div>") +
+                "</div>") +
+            "</div>" +
+            "</div>";
+
+        renderOccupancyTypeFields(
+            containerElement.querySelector("#container--allOccupancyTypeFields"),
+            undefined,
+            allOccupancyTypeFields
+        );
+
+        containerElement
+            .querySelector(".button--addOccupancyTypeField")
+            .addEventListener("click", openAddOccupancyTypeField);
+
+        if (occupancyTypes.length === 0) {
+            containerElement.insertAdjacentHTML(
+                "afterbegin",
                 '<div class="message is-warning>' +
                     '<p class="message-body">There are no active ' +
                     exports.aliases.occupancy.toLowerCase() +
                     " types.</p>" +
-                "</div>";
+                    "</div>"
+            );
 
             return;
         }
 
-        containerElement.innerHTML = "";
-
         for (const occupancyType of occupancyTypes) {
             const occupancyTypeContainer = document.createElement("div");
 
@@ -631,77 +642,11 @@ declare const bulmaJS: BulmaJS;
                 "</div>" +
                 "</div>";
 
-            if (occupancyType.occupancyTypeFields.length === 0) {
+            renderOccupancyTypeFields(
-                occupancyTypeContainer.insertAdjacentHTML(
+                occupancyTypeContainer,
-                    "beforeend",
+                occupancyType.occupancyTypeId,
-                    '<div class="panel-block is-block' +
+                occupancyType.occupancyTypeFields
-                        (expandedOccupancyTypes.has(
-                            occupancyType.occupancyTypeId
-                        )
-                            ? ""
-                            : " is-hidden") +
-                        '">' +
-                        '<div class="message is-info">' +
-                        '<p class="message-body">There are no additional fields.</p>' +
-                        "</div>" +
-                        "</div>"
             );
-            } else {
-                for (const occupancyTypeField of occupancyType.occupancyTypeFields) {
-                    const panelBlockElement = document.createElement("div");
-                    panelBlockElement.className =
-                        "panel-block is-block container--occupancyTypeField";
-
-                    if (
-                        !expandedOccupancyTypes.has(
-                            occupancyType.occupancyTypeId
-                        )
-                    ) {
-                        panelBlockElement.classList.add("is-hidden");
-                    }
-
-                    panelBlockElement.dataset.occupancyTypeFieldId =
-                        occupancyTypeField.occupancyTypeFieldId.toString();
-
-                    panelBlockElement.innerHTML =
-                        '<div class="level is-mobile">' +
-                        '<div class="level-left">' +
-                        ('<div class="level-item">' +
-                            '<a class="has-text-weight-bold button--editOccupancyTypeField" href="#">' +
-                            cityssm.escapeHTML(
-                                occupancyTypeField.occupancyTypeField
-                            ) +
-                            "</a>" +
-                            "</div>") +
-                        "</div>" +
-                        '<div class="level-right">' +
-                        ('<div class="level-item">' +
-                            '<div class="field has-addons">' +
-                            '<div class="control">' +
-                            '<button class="button is-small button--moveOccupancyTypeFieldUp" data-tooltip="Move Up" type="button" aria-label="Move Up">' +
-                            '<i class="fas fa-arrow-up" aria-hidden="true"></i>' +
-                            "</button>" +
-                            "</div>" +
-                            '<div class="control">' +
-                            '<button class="button is-small button--moveOccupancyTypeFieldDown" data-tooltip="Move Down" type="button" aria-label="Move Down">' +
-                            '<i class="fas fa-arrow-down" aria-hidden="true"></i>' +
-                            "</button>" +
-                            "</div>" +
-                            "</div>" +
-                            "</div>") +
-                        "</div>" +
-                        "</div>";
-
-                    panelBlockElement
-                        .querySelector(".button--editOccupancyTypeField")
-                        .addEventListener(
-                            "click",
-                            openEditOccupancyTypeFieldByClick
-                        );
-
-                    occupancyTypeContainer.append(panelBlockElement);
-                }
-            }
 
             occupancyTypeContainer
                 .querySelector(".button--toggleOccupancyTypeFields")
@@ -731,9 +676,7 @@ declare const bulmaJS: BulmaJS;
         }
     };
 
-    document
+    document.querySelector("#button--addOccupancyType").addEventListener("click", () => {
-        .querySelector("#button--addOccupancyType")
-        .addEventListener("click", () => {
         let addCloseModalFunction: () => void;
 
         const doAdd = (submitEvent: SubmitEvent) => {
@@ -753,10 +696,7 @@ declare const bulmaJS: BulmaJS;
                         renderOccupancyTypes();
                     } else {
                         bulmaJS.alert({
-                                title:
+                            title: "Error Adding " + exports.aliases.occupancy + " Type",
-                                    "Error Adding " +
-                                    exports.aliases.occupancy +
-                                    " Type",
                             message: responseJSON.errorMessage,
                             contextualColorName: "danger"
                         });
@@ -778,9 +718,7 @@ declare const bulmaJS: BulmaJS;
                     ) as HTMLInputElement
                 ).focus();
 
-                    modalElement
+                modalElement.querySelector("form").addEventListener("submit", doAdd);
-                        .querySelector("form")
-                        .addEventListener("submit", doAdd);
 
                 bulmaJS.toggleHtmlClipped();
             },

views/admin-occupancyTypes.ejs

@@ -49,6 +49,7 @@
 
 <script>
     exports.occupancyTypes = <%- JSON.stringify(occupancyTypes) %>;
+    exports.allOccupancyTypeFields = <%- JSON.stringify(allOccupancyTypeFields) %>;
 </script>
 
 <script src="<%= urlPrefix %>/javascripts/adminOccupancyTypes.min.js"></script>