create burial site from contract

closes #7

database/addBurialSite.d.ts

@@ -6,11 +6,11 @@ export interface AddBurialSiteForm {
     burialSiteNameSegment5?: string;
     burialSiteStatusId: number | string;
     burialSiteTypeId: number | string;
-    burialSiteImage: string;
+    burialSiteImage?: string;
     cemeteryId: number | string;
-    cemeterySvgId: string;
-    burialSiteLatitude: string;
-    burialSiteLongitude: string;
+    cemeterySvgId?: string;
+    burialSiteLatitude?: string;
+    burialSiteLongitude?: string;
     burialSiteTypeFieldIds?: string;
     [fieldValue_burialSiteTypeFieldId: string]: unknown;
 }
@@ -21,4 +21,7 @@ export interface AddBurialSiteForm {
  * @returns The new burial site's id.
  * @throws If an active burial site with the same name already exists.
  */
-export default function addBurialSite(burialSiteForm: AddBurialSiteForm, user: User): number;
+export default function addBurialSite(burialSiteForm: AddBurialSiteForm, user: User): {
+    burialSiteId: number;
+    burialSiteName: string;
+};

database/addBurialSite.js

@@ -48,7 +48,7 @@ export default function addBurialSite(burialSiteForm, user) {
           ?, ?, ?, ?)`)
         .run(burialSiteForm.burialSiteNameSegment1 ?? '', burialSiteForm.burialSiteNameSegment2 ?? '', burialSiteForm.burialSiteNameSegment3 ?? '', burialSiteForm.burialSiteNameSegment4 ?? '', burialSiteForm.burialSiteNameSegment5 ?? '', burialSiteName, burialSiteForm.burialSiteTypeId, burialSiteForm.burialSiteStatusId === ''
         ? undefined
-        : burialSiteForm.burialSiteStatusId, burialSiteForm.cemeteryId === '' ? undefined : burialSiteForm.cemeteryId, burialSiteForm.cemeterySvgId, burialSiteForm.burialSiteImage, burialSiteForm.burialSiteLatitude === ''
+        : burialSiteForm.burialSiteStatusId, burialSiteForm.cemeteryId === '' ? undefined : burialSiteForm.cemeteryId, burialSiteForm.cemeterySvgId, burialSiteForm.burialSiteImage ?? '', burialSiteForm.burialSiteLatitude === ''
         ? undefined
         : burialSiteForm.burialSiteLatitude, burialSiteForm.burialSiteLongitude === ''
         ? undefined
@@ -66,5 +66,8 @@ export default function addBurialSite(burialSiteForm, user) {
         }
     }
     database.close();
-    return burialSiteId;
+    return {
+        burialSiteId,
+        burialSiteName
+    };
 }

database/addBurialSite.ts

@@ -16,12 +16,12 @@ export interface AddBurialSiteForm {
   burialSiteStatusId: number | string
   burialSiteTypeId: number | string
 
-  burialSiteImage: string
+  burialSiteImage?: string
   cemeteryId: number | string
-  cemeterySvgId: string
+  cemeterySvgId?: string
 
-  burialSiteLatitude: string
-  burialSiteLongitude: string
+  burialSiteLatitude?: string
+  burialSiteLongitude?: string
 
   burialSiteTypeFieldIds?: string
 
@@ -38,7 +38,7 @@ export interface AddBurialSiteForm {
 export default function addBurialSite(
   burialSiteForm: AddBurialSiteForm,
   user: User
-): number {
+): { burialSiteId: number; burialSiteName: string } {
   const database = sqlite(sunriseDB)
 
   const rightNowMillis = Date.now()
@@ -102,7 +102,7 @@ export default function addBurialSite(
         : burialSiteForm.burialSiteStatusId,
       burialSiteForm.cemeteryId === '' ? undefined : burialSiteForm.cemeteryId,
       burialSiteForm.cemeterySvgId,
-      burialSiteForm.burialSiteImage,
+      burialSiteForm.burialSiteImage ?? '',
       burialSiteForm.burialSiteLatitude === ''
         ? undefined
         : burialSiteForm.burialSiteLatitude,
@@ -141,5 +141,8 @@ export default function addBurialSite(
 
   database.close()
 
-  return burialSiteId
+  return {
+    burialSiteId,
+    burialSiteName
+  }
 }

handlers/burialSites-post/doCreateBurialSite.js

@@ -2,10 +2,11 @@ import addBurialSite from '../../database/addBurialSite.js';
 import { clearNextPreviousBurialSiteIdCache } from '../../helpers/burialSites.helpers.js';
 export default function handler(request, response) {
     try {
-        const burialSiteId = addBurialSite(request.body, request.session.user);
+        const burialSite = addBurialSite(request.body, request.session.user);
         response.json({
             success: true,
-            burialSiteId
+            burialSiteId: burialSite.burialSiteId,
+            burialSiteName: burialSite.burialSiteName,
         });
         response.on('finish', () => {
             clearNextPreviousBurialSiteIdCache(-1);

handlers/burialSites-post/doCreateBurialSite.ts

@@ -10,7 +10,7 @@ export default function handler(
   response: Response
 ): void {
   try {
-    const burialSiteId = addBurialSite(
+    const burialSite = addBurialSite(
       request.body,
       request.session.user as User
     )
@@ -18,7 +18,8 @@ export default function handler(
     response.json({
       success: true,
 
-      burialSiteId
+      burialSiteId: burialSite.burialSiteId,
+      burialSiteName: burialSite.burialSiteName,
     })
 
     response.on('finish', () => {

handlers/contracts-get/edit.js

@@ -1,7 +1,8 @@
+import getCemeteries from '../../database/getCemeteries.js';
 import getContract from '../../database/getContract.js';
 import getFuneralHomes from '../../database/getFuneralHomes.js';
 import { getConfigProperty } from '../../helpers/config.helpers.js';
-import { getCommittalTypes, getContractTypePrintsById, getContractTypes, getIntermentContainerTypes, getWorkOrderTypes } from '../../helpers/functions.cache.js';
+import { getBurialSiteStatuses, getBurialSiteTypes, getCommittalTypes, getContractTypePrintsById, getContractTypes, getIntermentContainerTypes, getWorkOrderTypes } from '../../helpers/functions.cache.js';
 export default async function handler(request, response) {
     const contract = await getContract(request.params.contractId);
     if (contract === undefined) {
@@ -9,10 +10,22 @@ export default async function handler(request, response) {
         return;
     }
     const contractTypePrints = getContractTypePrintsById(contract.contractTypeId);
+    /*
+     * Contract Drop Lists
+     */
     const contractTypes = getContractTypes();
     const funeralHomes = getFuneralHomes();
     const committalTypes = getCommittalTypes();
     const intermentContainerTypes = getIntermentContainerTypes();
+    /*
+     * Burial Site Drop Lists
+     */
+    const burialSiteStatuses = getBurialSiteStatuses();
+    const burialSiteTypes = getBurialSiteTypes();
+    const cemeteries = getCemeteries();
+    /*
+     * Work Order Drop Lists
+     */
     const workOrderTypes = getWorkOrderTypes();
     response.render('contract-edit', {
         headTitle: 'Contract Update',
@@ -22,6 +35,9 @@ export default async function handler(request, response) {
         contractTypes,
         funeralHomes,
         intermentContainerTypes,
+        burialSiteStatuses,
+        burialSiteTypes,
+        cemeteries,
         workOrderTypes,
         isCreate: false
     });

handlers/contracts-get/edit.ts

@@ -1,9 +1,12 @@
 import type { Request, Response } from 'express'
 
+import getCemeteries from '../../database/getCemeteries.js'
 import getContract from '../../database/getContract.js'
 import getFuneralHomes from '../../database/getFuneralHomes.js'
 import { getConfigProperty } from '../../helpers/config.helpers.js'
 import {
+  getBurialSiteStatuses,
+  getBurialSiteTypes,
   getCommittalTypes,
   getContractTypePrintsById,
   getContractTypes,
@@ -28,10 +31,27 @@ export default async function handler(
 
   const contractTypePrints = getContractTypePrintsById(contract.contractTypeId)
 
+  /*
+   * Contract Drop Lists
+   */
+
   const contractTypes = getContractTypes()
   const funeralHomes = getFuneralHomes()
   const committalTypes = getCommittalTypes()
   const intermentContainerTypes = getIntermentContainerTypes()
+
+  /*
+   * Burial Site Drop Lists
+   */
+
+  const burialSiteStatuses = getBurialSiteStatuses()
+  const burialSiteTypes = getBurialSiteTypes()
+  const cemeteries = getCemeteries()
+
+  /*
+   * Work Order Drop Lists
+   */
+
   const workOrderTypes = getWorkOrderTypes()
 
   response.render('contract-edit', {
@@ -44,6 +64,11 @@ export default async function handler(
     contractTypes,
     funeralHomes,
     intermentContainerTypes,
+
+    burialSiteStatuses,
+    burialSiteTypes,
+    cemeteries,
+
     workOrderTypes,
 
     isCreate: false

handlers/contracts-get/new.js

@@ -1,8 +1,9 @@
 import { dateToInteger, dateToString } from '@cityssm/utils-datetime';
 import getBurialSite from '../../database/getBurialSite.js';
+import getCemeteries from '../../database/getCemeteries.js';
 import getFuneralHomes from '../../database/getFuneralHomes.js';
 import { getConfigProperty } from '../../helpers/config.helpers.js';
-import { getCommittalTypes, getContractTypes, getIntermentContainerTypes } from '../../helpers/functions.cache.js';
+import { getBurialSiteStatuses, getBurialSiteTypes, getCommittalTypes, getContractTypes, getIntermentContainerTypes } from '../../helpers/functions.cache.js';
 export default async function handler(request, response) {
     const startDate = new Date();
     const contract = {
@@ -21,10 +22,19 @@ export default async function handler(request, response) {
             contract.cemeteryName = burialSite.cemeteryName;
         }
     }
+    /*
+     * Contract Drop Lists
+     */
     const contractTypes = getContractTypes();
     const funeralHomes = getFuneralHomes();
     const committalTypes = getCommittalTypes();
     const intermentContainerTypes = getIntermentContainerTypes();
+    /*
+     * Burial Site Drop Lists
+     */
+    const burialSiteStatuses = getBurialSiteStatuses();
+    const burialSiteTypes = getBurialSiteTypes();
+    const cemeteries = getCemeteries();
     response.render('contract-edit', {
         headTitle: 'Create a New Contract',
         contract,
@@ -32,6 +42,9 @@ export default async function handler(request, response) {
         contractTypes,
         funeralHomes,
         intermentContainerTypes,
+        burialSiteStatuses,
+        burialSiteTypes,
+        cemeteries,
         isCreate: true
     });
 }

handlers/contracts-get/new.ts

@@ -3,9 +3,12 @@ import type { Request, Response } from 'express'
 import { dateToInteger, dateToString } from '@cityssm/utils-datetime'
 
 import getBurialSite from '../../database/getBurialSite.js'
+import getCemeteries from '../../database/getCemeteries.js'
 import getFuneralHomes from '../../database/getFuneralHomes.js'
 import { getConfigProperty } from '../../helpers/config.helpers.js'
 import {
+  getBurialSiteStatuses,
+  getBurialSiteTypes,
   getCommittalTypes,
   getContractTypes,
   getIntermentContainerTypes
@@ -38,11 +41,23 @@ export default async function handler(
     }
   }
 
+  /*
+   * Contract Drop Lists
+   */
+
   const contractTypes = getContractTypes()
   const funeralHomes = getFuneralHomes()
   const committalTypes = getCommittalTypes()
   const intermentContainerTypes = getIntermentContainerTypes()
 
+  /*
+   * Burial Site Drop Lists
+   */
+
+  const burialSiteStatuses = getBurialSiteStatuses()
+  const burialSiteTypes = getBurialSiteTypes()
+  const cemeteries = getCemeteries()
+
   response.render('contract-edit', {
     headTitle: 'Create a New Contract',
 
@@ -53,6 +68,10 @@ export default async function handler(
     funeralHomes,
     intermentContainerTypes,
 
+    burialSiteStatuses,
+    burialSiteTypes,
+    cemeteries,
+
     isCreate: true
   })
 }

public/html/contract-selectBurialSite.html

@@ -12,45 +12,113 @@
       ></button>
     </header>
     <section class="modal-card-body">
-      <div class="box">
-        <form id="form--burialSiteSelect">
-          <input name="limit" type="hidden" value="100" />
-          <input name="offset" type="hidden" value="0" />
-          <div class="field">
-            <div class="control has-icons-left">
-              <input
-                class="input"
-                id="burialSiteSelect--burialSiteName"
-                name="burialSiteName"
-                type="text"
-              />
-              <span class="icon is-small is-left">
-                <i class="fas fa-search" aria-hidden="true"></i>
-              </span>
-            </div>
-          </div>
-          <div class="field">
-            <div class="control has-icons-left">
-              <div class="select is-fullwidth">
-                <select
-                  id="burialSiteSelect--contractStatus"
-                  name="contractStatus"
-                >
-                  <option value="">(All Statuses)</option>
-                  <option value="unoccupied" selected>
-                    Currently Unoccupied
-                  </option>
-                  <option value="occupied">Currently Occupied</option>
-                </select>
-              </div>
-              <span class="icon is-small is-left">
-                <i class="fas fa-filter" aria-hidden="true"></i>
-              </span>
-            </div>
-          </div>
-        </form>
+      <div class="tabs is-boxed">
+        <ul>
+          <li class="is-active">
+            <a href="#tab--burialSiteSelect">Select Existing</a>
+          </li>
+          <li>
+            <a href="#tab--burialSiteCreate">Create New</a>
+          </li>
+        </ul>
+      </div>
+      <div class="tab-containers">
+        <div id="tab--burialSiteSelect">
+          <div class="box">
+            <form id="form--burialSiteSelect">
+              <input name="limit" type="hidden" value="100" />
+              <input name="offset" type="hidden" value="0" />
+              <div class="field">
+                <div class="control has-icons-left">
+                  <input
+                    class="input"
+                    id="burialSiteSelect--burialSiteName"
+                    name="burialSiteName"
+                    type="text"
+                  />
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-search" aria-hidden="true"></i>
+                  </span>
+                </div>
+              </div>
+              <div class="field">
+                <div class="control has-icons-left">
+                  <div class="select is-fullwidth">
+                    <select
+                      id="burialSiteSelect--contractStatus"
+                      name="contractStatus"
+                    >
+                      <option value="">(All Statuses)</option>
+                      <option value="unoccupied" selected>
+                        Currently Unoccupied
+                      </option>
+                      <option value="occupied">Currently Occupied</option>
+                    </select>
+                  </div>
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-filter" aria-hidden="true"></i>
+                  </span>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div id="resultsContainer--burialSiteSelect"></div>
+        </div>
+        <div id="tab--burialSiteCreate" class="is-hidden">
+          <form id="form--burialSiteCreate">
+            <label class="label" for="burialSiteCreate--burialSiteNameSegment1">
+              New Burial Site Name
+            </label>
+
+            <div class="field">
+              <label class="label" for="burialSiteCreate--cemeteryId">Cemetery</label>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select id="burialSiteCreate--cemeteryId" name="cemeteryId">
+                    <option value="">(No Cemetery Selected)</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="columns">
+              <div class="column">
+                <div class="field">
+                  <label class="label" for="burialSiteCreate--burialSiteTypeId">Burial Site Type</label>
+                  <div class="control">
+                    <div class="select is-fullwidth">
+                      <select id="burialSiteCreate--burialSiteTypeId" name="burialSiteTypeId" required>
+                        <option value="">(Select a Type)</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="column">
+                <div class="field">
+                  <label class="label" for="burialSiteCreate--burialSiteStatusId">Burial Site Status</label>
+                  <div class="control">
+                    <div class="select is-fullwidth">
+                      <select id="burialSiteCreate--burialSiteStatusId" name="burialSiteStatusId">
+                        <option value="">(No Status)</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <p class="has-text-right">
+              <button class="button is-primary" type="submit">
+                <span class="icon is-small">
+                  <i class="fas fa-plus" aria-hidden="true"></i>
+                </span>
+                <span>Create Burial Site and Select</span>
+              </button>
+            </p>
+          </form>
+        </div>
       </div>
-      <div id="resultsContainer--burialSiteSelect"></div>
     </section>
     <footer class="modal-card-foot is-justify-content-right">
       <button class="button is-close-modal-button" type="button">Cancel</button>

public/javascripts/contract.edit.js

@@ -238,6 +238,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         let burialSiteSelectCloseModalFunction;
         let burialSiteSelectFormElement;
         let burialSiteSelectResultsElement;
+        let burialSiteCreateFormElement;
         function renderSelectedBurialSiteAndClose(burialSiteId, burialSiteName) {
             ;
             document.querySelector('#contract--burialSiteId').value = burialSiteId.toString();
@@ -291,6 +292,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 burialSiteSelectResultsElement.append(panelElement);
             });
         }
+        function createBurialSite(createEvent) {
+            createEvent.preventDefault();
+            cityssm.postJSON(`${sunrise.urlPrefix}/burialSites/doCreateBurialSite`, burialSiteCreateFormElement, (rawResponseJSON) => {
+                const responseJSON = rawResponseJSON;
+                if (responseJSON.success) {
+                    setUnsavedChanges();
+                    renderSelectedBurialSiteAndClose(responseJSON.burialSiteId ?? 0, responseJSON.burialSiteName ?? '');
+                }
+                else {
+                    bulmaJS.alert({
+                        title: 'Error Creating Burial Site',
+                        message: responseJSON.errorMessage ?? '',
+                        contextualColorName: 'danger'
+                    });
+                }
+            });
+        }
         cityssm.openHtmlModal('contract-selectBurialSite', {
             onshow(modalElement) {
                 sunrise.populateAliases(modalElement);
@@ -317,6 +335,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     submitEvent.preventDefault();
                 });
                 searchBurialSites();
+                /*
+                 * New Burial Site Tab
+                 */
+                const burialSiteNameSegmentsFieldElement = document.querySelector('#template--burialSiteNameSegments > div.field').cloneNode(true);
+                burialSiteNameSegmentsFieldElement
+                    .querySelector('input[name="burialSiteNameSegment1"]')
+                    ?.setAttribute('id', 'burialSiteCreate--burialSiteNameSegment1');
+                modalElement
+                    .querySelector('label[for="burialSiteCreate--burialSiteNameSegment1"]')
+                    ?.insertAdjacentElement('afterend', burialSiteNameSegmentsFieldElement);
+                const cemeterySelectElement = modalElement.querySelector('#burialSiteCreate--cemeteryId');
+                for (const cemetery of exports.cemeteries) {
+                    const optionElement = document.createElement('option');
+                    optionElement.value = cemetery.cemeteryId?.toString() ?? '';
+                    optionElement.textContent =
+                        cemetery.cemeteryName === '' ? '(No Name)' : cemetery.cemeteryName;
+                    cemeterySelectElement.append(optionElement);
+                }
+                const burialSiteTypeSelectElement = modalElement.querySelector('#burialSiteCreate--burialSiteTypeId');
+                for (const burialSiteType of exports.burialSiteTypes) {
+                    const optionElement = document.createElement('option');
+                    optionElement.value = burialSiteType.burialSiteTypeId.toString();
+                    optionElement.textContent = burialSiteType.burialSiteType;
+                    burialSiteTypeSelectElement.append(optionElement);
+                }
+                const burialSiteStatusSelectElement = modalElement.querySelector('#burialSiteCreate--burialSiteStatusId');
+                for (const burialSiteStatus of exports.burialSiteStatuses) {
+                    const optionElement = document.createElement('option');
+                    optionElement.value = burialSiteStatus.burialSiteStatusId.toString();
+                    optionElement.textContent = burialSiteStatus.burialSiteStatus;
+                    burialSiteStatusSelectElement.append(optionElement);
+                }
+                burialSiteCreateFormElement = modalElement.querySelector('#form--burialSiteCreate');
+                burialSiteCreateFormElement.addEventListener('submit', createBurialSite);
             },
             onremoved() {
                 bulmaJS.toggleHtmlClipped();

public/javascripts/contract.edit.ts

@@ -4,15 +4,27 @@
 import type { BulmaJS } from '@cityssm/bulma-js/types.js'
 import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
 
-import type { BurialSite, ContractTypeField } from '../../types/record.types.js'
+import type {
+  BurialSite,
+  BurialSiteStatus,
+  BurialSiteType,
+  Cemetery,
+  ContractTypeField
+} from '../../types/record.types.js'
 
 import type { Sunrise } from './types.js'
 
 declare const cityssm: cityssmGlobal
 declare const bulmaJS: BulmaJS
-declare const exports: Record<string, unknown>
+declare const exports: {
+  sunrise: Sunrise
+
+  burialSiteStatuses: BurialSiteStatus[]
+  burialSiteTypes: BurialSiteType[]
+  cemeteries: Cemetery[]
+}
 ;(() => {
-  const sunrise = exports.sunrise as Sunrise
+  const sunrise = exports.sunrise
 
   const contractId = (
     document.querySelector('#contract--contractId') as HTMLInputElement
@@ -363,6 +375,8 @@ declare const exports: Record<string, unknown>
     let burialSiteSelectFormElement: HTMLFormElement
     let burialSiteSelectResultsElement: HTMLElement
 
+    let burialSiteCreateFormElement: HTMLFormElement
+
     function renderSelectedBurialSiteAndClose(
       burialSiteId: number | string,
       burialSiteName: string
@@ -452,6 +466,39 @@ declare const exports: Record<string, unknown>
       )
     }
 
+    function createBurialSite(createEvent: Event): void {
+      createEvent.preventDefault()
+
+      cityssm.postJSON(
+        `${sunrise.urlPrefix}/burialSites/doCreateBurialSite`,
+        burialSiteCreateFormElement,
+        (rawResponseJSON) => {
+          const responseJSON = rawResponseJSON as {
+            success: boolean
+            errorMessage?: string
+
+            burialSiteId?: number
+            burialSiteName?: string
+          }
+
+          if (responseJSON.success) {
+            setUnsavedChanges()
+
+            renderSelectedBurialSiteAndClose(
+              responseJSON.burialSiteId ?? 0,
+              responseJSON.burialSiteName ?? ''
+            )
+          } else {
+            bulmaJS.alert({
+              title: 'Error Creating Burial Site',
+              message: responseJSON.errorMessage ?? '',
+              contextualColorName: 'danger'
+            })
+          }
+        }
+      )
+    }
+
     cityssm.openHtmlModal('contract-selectBurialSite', {
       onshow(modalElement) {
         sunrise.populateAliases(modalElement)
@@ -512,7 +559,71 @@ declare const exports: Record<string, unknown>
         )
 
         searchBurialSites()
+
+        /*
+         * New Burial Site Tab
+         */
+
+        const burialSiteNameSegmentsFieldElement = (
+          document.querySelector(
+            '#template--burialSiteNameSegments > div.field'
+          ) as HTMLElement
+        ).cloneNode(true) as HTMLElement
+
+        burialSiteNameSegmentsFieldElement
+          .querySelector('input[name="burialSiteNameSegment1"]')
+          ?.setAttribute('id', 'burialSiteCreate--burialSiteNameSegment1')
+
+        modalElement
+          .querySelector(
+            'label[for="burialSiteCreate--burialSiteNameSegment1"]'
+          )
+          ?.insertAdjacentElement(
+            'afterend',
+            burialSiteNameSegmentsFieldElement
+          )
+
+        const cemeterySelectElement = modalElement.querySelector(
+          '#burialSiteCreate--cemeteryId'
+        ) as HTMLSelectElement
+
+        for (const cemetery of exports.cemeteries) {
+          const optionElement = document.createElement('option')
+          optionElement.value = cemetery.cemeteryId?.toString() ?? ''
+          optionElement.textContent =
+            cemetery.cemeteryName === '' ? '(No Name)' : cemetery.cemeteryName
+          cemeterySelectElement.append(optionElement)
+        }
+
+        const burialSiteTypeSelectElement = modalElement.querySelector(
+          '#burialSiteCreate--burialSiteTypeId'
+        ) as HTMLSelectElement
+
+        for (const burialSiteType of exports.burialSiteTypes) {
+          const optionElement = document.createElement('option')
+          optionElement.value = burialSiteType.burialSiteTypeId.toString()
+          optionElement.textContent = burialSiteType.burialSiteType
+          burialSiteTypeSelectElement.append(optionElement)
+        }
+
+        const burialSiteStatusSelectElement = modalElement.querySelector(
+          '#burialSiteCreate--burialSiteStatusId'
+        ) as HTMLSelectElement
+
+        for (const burialSiteStatus of exports.burialSiteStatuses) {
+          const optionElement = document.createElement('option')
+          optionElement.value = burialSiteStatus.burialSiteStatusId.toString()
+          optionElement.textContent = burialSiteStatus.burialSiteStatus
+          burialSiteStatusSelectElement.append(optionElement)
+        }
+
+        burialSiteCreateFormElement = modalElement.querySelector(
+          '#form--burialSiteCreate'
+        ) as HTMLFormElement
+
+        burialSiteCreateFormElement.addEventListener('submit', createBurialSite)
       },
+
       onremoved() {
         bulmaJS.toggleHtmlClipped()
       }

views/burialSite-edit.ejs

@@ -195,7 +195,7 @@
                   <% } %>
                   id="burialSite--burialSiteTypeId" name="burialSiteTypeId" required>
                   <% if (isCreate) { %>
-                    <option value="">(No Type)</option>
+                    <option value="">(Select a Type)</option>
                   <% } %>
                   <% let typeIsFound = false; %>
                   <% for (const burialSiteType of burialSiteTypes) { %>

views/contract-edit.ejs

@@ -921,6 +921,55 @@
   <option value="<%= configFunctions.getConfigProperty('settings.cityDefault') %>">
 </datalist>
 
+<%
+  const burialSiteNameSegments = configFunctions.getConfigProperty('settings.burialSites.burialSiteNameSegments')
+%>
+<div class="is-hidden" id="template--burialSiteNameSegments">
+  <div class="field has-addons">
+    <% for (let segmentIndex = 1; segmentIndex <= 5; segmentIndex += 1) { %>
+      <%
+        const segmentIndexString = segmentIndex.toString();
+        const segment = burialSiteNameSegments.segments[segmentIndexString];
+      %>
+      <% if (segment?.isAvailable ?? false) { %>
+        <% if (segmentIndex !== 1 && (burialSiteNameSegments.separator ?? '') !== '') { %>
+          <p class="control">
+            <span class="button is-static">
+              <%= burialSiteNameSegments.separator %>
+            </span>
+          </p>
+        <% } %>
+        <% if ((segment.prefix ?? '') !== '') { %>
+          <p class="control">
+            <span class="button is-static">
+              <%= segment.prefix %>
+            </span>
+          </p>
+        <% } %>
+        <div class="control"
+          data-tooltip="<%= segment.label ?? '' %>">
+
+          <input class="input"
+            name="burialSiteNameSegment<%= segmentIndexString %>"
+            type="text"
+            minlength="<%= Math.max(Math.min(segment.minLength ?? 1, 20), 1) %>" 
+            maxlength="<%= Math.max(Math.min(segment.maxLength ?? 20, 20), 1) %>"
+            placeholder="<%= segment.label ?? '' %>"
+            aria-label="<%= segment.label ?? '' %>"
+            <%= (segment.isRequired ?? false) ? ' required' : '' %> />
+        </div>
+        <% if ((segment.suffix ?? '') !== '') { %>
+          <p class="control">
+            <span class="button is-static">
+              <%= segment.suffix %>
+            </span>
+          </p>
+        <% } %>
+      <% } %>
+    <% } %>
+  </div>
+</div>
+    
 <%- include('_footerA'); -%>
 
 <% if (!isCreate) { %>
@@ -939,6 +988,12 @@
   </script>
 <% } %>
 
+<script>
+  exports.burialSiteStatuses = <%- JSON.stringify(burialSiteStatuses) %>;
+  exports.burialSiteTypes = <%- JSON.stringify(burialSiteTypes) %>;
+  exports.cemeteries = <%- JSON.stringify(cemeteries) %>;
+</script>
+
 <script src="<%= urlPrefix %>/javascripts/contract.edit.js"></script>
 <% if (!isCreate) { %>
   <script src="<%= urlPrefix %>/javascripts/contract.editInterments.js"></script>