linting

app.js

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import * as dateTimeFns from '@cityssm/utils-datetime';
+import * as dateTimeFunctions from '@cityssm/utils-datetime';
 import compression from 'compression';
 import cookieParser from 'cookie-parser';
 import csurf from 'csurf';
@@ -129,7 +129,7 @@ app.use((request, response, next) => {
     response.locals.csrfToken = request.csrfToken();
     response.locals.configFunctions = configFunctions;
     response.locals.printFunctions = printFunctions;
-    response.locals.dateTimeFunctions = dateTimeFns;
+    response.locals.dateTimeFunctions = dateTimeFunctions;
     response.locals.urlPrefix = configFunctions.getConfigProperty('reverseProxy.urlPrefix');
     next();
 });

app.ts

@@ -1,6 +1,6 @@
 import path from 'node:path'
 
-import * as dateTimeFns from '@cityssm/utils-datetime'
+import * as dateTimeFunctions from '@cityssm/utils-datetime'
 import compression from 'compression'
 import cookieParser from 'cookie-parser'
 import csurf from 'csurf'
@@ -230,7 +230,7 @@ app.use((request, response, next) => {
 
   response.locals.configFunctions = configFunctions
   response.locals.printFunctions = printFunctions
-  response.locals.dateTimeFunctions = dateTimeFns
+  response.locals.dateTimeFunctions = dateTimeFunctions
 
   response.locals.urlPrefix = configFunctions.getConfigProperty(
     'reverseProxy.urlPrefix'

handlers/api-get/milestoneICS.js

@@ -42,7 +42,7 @@ function buildEventSummary(milestone) {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function buildEventDescriptionHTML_occupancies(request, milestone) {
     let descriptionHTML = '';
-    if (milestone.workOrderContracts.length > 0) {
+    if ((milestone.workOrderContracts ?? []).length > 0) {
         const urlRoot = getUrlRoot(request);
         descriptionHTML = `<h2>
       Related Contracts
@@ -248,7 +248,7 @@ export default async function handler(request, response) {
         const location = buildEventLocation(milestone);
         calendarEvent.location(location);
         // Set organizer / attendees
-        if (milestone.workOrderContracts.length > 0) {
+        if ((milestone.workOrderContracts ?? []).length > 0) {
             let organizerSet = false;
             for (const contract of milestone.workOrderContracts ?? []) {
                 for (const interment of contract.contractInterments ?? []) {

handlers/api-get/milestoneICS.ts

@@ -75,7 +75,7 @@ function buildEventDescriptionHTML_occupancies(
 ): string {
   let descriptionHTML = ''
 
-  if (milestone.workOrderContracts!.length > 0) {
+  if ((milestone.workOrderContracts ?? []).length > 0) {
     const urlRoot = getUrlRoot(request)
 
     descriptionHTML = `<h2>
@@ -366,7 +366,7 @@ export default async function handler(
     calendarEvent.location(location)
 
     // Set organizer / attendees
-    if (milestone.workOrderContracts!.length > 0) {
+    if ((milestone.workOrderContracts ?? []).length > 0) {
       let organizerSet = false
       for (const contract of milestone.workOrderContracts ?? []) {
         for (const interment of contract.contractInterments ?? []) {

public/javascripts/contract.editComments.js

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
         const contractCommentId = Number.parseInt(clickEvent.currentTarget.closest('tr')?.dataset
             .contractCommentId ?? '', 10);
         const contractComment = contractComments.find((currentComment) => currentComment.contractCommentId === contractCommentId);
-        let editFormElement = undefined;
-        let editCloseModalFunction = undefined;
+        let editFormElement;
+        let editCloseModalFunction;
         function editContractComment(submitEvent) {
             submitEvent.preventDefault();
             cityssm.postJSON(`${sunrise.urlPrefix}/contracts/doUpdateContractComment`, editFormElement, (rawResponseJSON) => {

public/javascripts/contract.editComments.ts

@@ -29,8 +29,8 @@ declare const exports: Record<string, unknown>
       (currentComment) => currentComment.contractCommentId === contractCommentId
     ) as ContractComment
 
-    let editFormElement: HTMLFormElement | undefined = undefined
-    let editCloseModalFunction: (() => void) | undefined = undefined
+    let editFormElement: HTMLFormElement | undefined
+    let editCloseModalFunction: (() => void) | undefined
 
     function editContractComment(submitEvent: SubmitEvent): void {
       submitEvent.preventDefault()

public/javascripts/workOrder.edit.js

@@ -419,81 +419,88 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 ?.addEventListener('click', deleteMilestone);
             milestonesPanelElement.append(panelBlockElement);
         }
+        if (workOrderMilestones.length === 0) {
+            milestonesPanelElement.insertAdjacentHTML('beforeend', `<div class="panel-block is-block">
+          <div class="message is-info">
+            <p class="message-body">There are no milestones on this work order.</p>
+          </div>
+        </div>`);
+        }
         bulmaJS.init(milestonesPanelElement);
     }
     if (!isCreate) {
         workOrderMilestones = exports.workOrderMilestones;
         delete exports.workOrderMilestones;
         renderMilestones();
-        document
-            .querySelector('#button--addMilestone')
-            ?.addEventListener('click', () => {
-            let addFormElement;
-            let workOrderMilestoneDateStringElement;
-            let addCloseModalFunction;
-            function doAdd(submitEvent) {
-                if (submitEvent) {
-                    submitEvent.preventDefault();
-                }
-                const currentDateString = cityssm.dateToString(new Date());
-                function _doAdd() {
-                    cityssm.postJSON(`${sunrise.urlPrefix}/workOrders/doAddWorkOrderMilestone`, addFormElement, (rawResponseJSON) => {
-                        const responseJSON = rawResponseJSON;
-                        processMilestoneResponse(responseJSON);
-                        if (responseJSON.success) {
-                            addCloseModalFunction();
-                        }
-                    });
-                }
-                const milestoneDateString = workOrderMilestoneDateStringElement.value;
-                if (milestoneDateString !== '' &&
-                    milestoneDateString < currentDateString) {
-                    bulmaJS.confirm({
-                        title: 'Milestone Date in the Past',
-                        message: 'Are you sure you want to create a milestone with a date in the past?',
-                        contextualColorName: 'warning',
-                        okButton: {
-                            text: 'Yes, Create a Past Milestone',
-                            callbackFunction: _doAdd
-                        }
-                    });
-                }
-                else {
-                    _doAdd();
-                }
-            }
-            cityssm.openHtmlModal('workOrder-addMilestone', {
-                onshow(modalElement) {
-                    ;
-                    modalElement.querySelector('#milestoneAdd--workOrderId').value = workOrderId;
-                    const milestoneTypeElement = modalElement.querySelector('#milestoneAdd--workOrderMilestoneTypeId');
-                    for (const milestoneType of exports.workOrderMilestoneTypes) {
-                        const optionElement = document.createElement('option');
-                        optionElement.value =
-                            milestoneType.workOrderMilestoneTypeId.toString();
-                        optionElement.textContent = milestoneType.workOrderMilestoneType;
-                        milestoneTypeElement.append(optionElement);
-                    }
-                    workOrderMilestoneDateStringElement = modalElement.querySelector('#milestoneAdd--workOrderMilestoneDateString');
-                    workOrderMilestoneDateStringElement.valueAsDate = new Date();
-                },
-                onshown(modalElement, closeModalFunction) {
-                    addCloseModalFunction = closeModalFunction;
-                    bulmaJS.toggleHtmlClipped();
-                    modalElement.querySelector('#milestoneAdd--workOrderMilestoneTypeId').focus();
-                    addFormElement = modalElement.querySelector('form');
-                    addFormElement.addEventListener('submit', doAdd);
-                    const conflictingMilestonePanelElement = document.querySelector('#milestoneAdd--conflictingMilestonesPanel');
-                    workOrderMilestoneDateStringElement.addEventListener('change', () => {
-                        refreshConflictingMilestones(workOrderMilestoneDateStringElement.value, conflictingMilestonePanelElement);
-                    });
-                    refreshConflictingMilestones(workOrderMilestoneDateStringElement.value, conflictingMilestonePanelElement);
-                },
-                onremoved() {
-                    bulmaJS.toggleHtmlClipped();
-                    document.querySelector('#button--addMilestone').focus();
-                }
-            });
-        });
     }
+    document
+        .querySelector('#button--addMilestone')
+        ?.addEventListener('click', () => {
+        let addFormElement;
+        let workOrderMilestoneDateStringElement;
+        let addCloseModalFunction;
+        function doAdd(submitEvent) {
+            if (submitEvent) {
+                submitEvent.preventDefault();
+            }
+            const currentDateString = cityssm.dateToString(new Date());
+            function _doAdd() {
+                cityssm.postJSON(`${sunrise.urlPrefix}/workOrders/doAddWorkOrderMilestone`, addFormElement, (rawResponseJSON) => {
+                    const responseJSON = rawResponseJSON;
+                    processMilestoneResponse(responseJSON);
+                    if (responseJSON.success) {
+                        addCloseModalFunction();
+                    }
+                });
+            }
+            const milestoneDateString = workOrderMilestoneDateStringElement.value;
+            if (milestoneDateString !== '' &&
+                milestoneDateString < currentDateString) {
+                bulmaJS.confirm({
+                    title: 'Milestone Date in the Past',
+                    message: 'Are you sure you want to create a milestone with a date in the past?',
+                    contextualColorName: 'warning',
+                    okButton: {
+                        text: 'Yes, Create a Past Milestone',
+                        callbackFunction: _doAdd
+                    }
+                });
+            }
+            else {
+                _doAdd();
+            }
+        }
+        cityssm.openHtmlModal('workOrder-addMilestone', {
+            onshow(modalElement) {
+                ;
+                modalElement.querySelector('#milestoneAdd--workOrderId').value = workOrderId;
+                const milestoneTypeElement = modalElement.querySelector('#milestoneAdd--workOrderMilestoneTypeId');
+                for (const milestoneType of exports.workOrderMilestoneTypes) {
+                    const optionElement = document.createElement('option');
+                    optionElement.value =
+                        milestoneType.workOrderMilestoneTypeId.toString();
+                    optionElement.textContent = milestoneType.workOrderMilestoneType;
+                    milestoneTypeElement.append(optionElement);
+                }
+                workOrderMilestoneDateStringElement = modalElement.querySelector('#milestoneAdd--workOrderMilestoneDateString');
+                workOrderMilestoneDateStringElement.valueAsDate = new Date();
+            },
+            onshown(modalElement, closeModalFunction) {
+                addCloseModalFunction = closeModalFunction;
+                bulmaJS.toggleHtmlClipped();
+                modalElement.querySelector('#milestoneAdd--workOrderMilestoneTypeId').focus();
+                addFormElement = modalElement.querySelector('form');
+                addFormElement.addEventListener('submit', doAdd);
+                const conflictingMilestonePanelElement = document.querySelector('#milestoneAdd--conflictingMilestonesPanel');
+                workOrderMilestoneDateStringElement.addEventListener('change', () => {
+                    refreshConflictingMilestones(workOrderMilestoneDateStringElement.value, conflictingMilestonePanelElement);
+                });
+                refreshConflictingMilestones(workOrderMilestoneDateStringElement.value, conflictingMilestonePanelElement);
+            },
+            onremoved() {
+                bulmaJS.toggleHtmlClipped();
+                document.querySelector('#button--addMilestone').focus();
+            }
+        });
+    });
 })();

public/javascripts/workOrder.edit.ts

@@ -666,6 +666,17 @@ declare const exports: Record<string, unknown>
       milestonesPanelElement.append(panelBlockElement)
     }
 
+    if (workOrderMilestones.length === 0) {
+      milestonesPanelElement.insertAdjacentHTML(
+        'beforeend',
+        `<div class="panel-block is-block">
+          <div class="message is-info">
+            <p class="message-body">There are no milestones on this work order.</p>
+          </div>
+        </div>`
+      )
+    }
+
     bulmaJS.init(milestonesPanelElement)
   }
 
@@ -674,133 +685,126 @@ declare const exports: Record<string, unknown>
     delete exports.workOrderMilestones
 
     renderMilestones()
+  }
 
-    document
-      .querySelector('#button--addMilestone')
-      ?.addEventListener('click', () => {
-        let addFormElement: HTMLFormElement
-        let workOrderMilestoneDateStringElement: HTMLInputElement
-        let addCloseModalFunction: () => void
+  document
+    .querySelector('#button--addMilestone')
+    ?.addEventListener('click', () => {
+      let addFormElement: HTMLFormElement
+      let workOrderMilestoneDateStringElement: HTMLInputElement
+      let addCloseModalFunction: () => void
 
-        function doAdd(submitEvent?: SubmitEvent): void {
-          if (submitEvent) {
-            submitEvent.preventDefault()
-          }
-
-          const currentDateString = cityssm.dateToString(new Date())
-
-          function _doAdd(): void {
-            cityssm.postJSON(
-              `${sunrise.urlPrefix}/workOrders/doAddWorkOrderMilestone`,
-              addFormElement,
-              (rawResponseJSON) => {
-                const responseJSON = rawResponseJSON as {
-                  success: boolean
-                  errorMessage?: string
-                  workOrderMilestones?: WorkOrderMilestone[]
-                }
-
-                processMilestoneResponse(responseJSON)
-
-                if (responseJSON.success) {
-                  addCloseModalFunction()
-                }
-              }
-            )
-          }
-
-          const milestoneDateString = workOrderMilestoneDateStringElement.value
-
-          if (
-            milestoneDateString !== '' &&
-            milestoneDateString < currentDateString
-          ) {
-            bulmaJS.confirm({
-              title: 'Milestone Date in the Past',
-              message:
-                'Are you sure you want to create a milestone with a date in the past?',
-              contextualColorName: 'warning',
-              okButton: {
-                text: 'Yes, Create a Past Milestone',
-                callbackFunction: _doAdd
-              }
-            })
-          } else {
-            _doAdd()
-          }
+      function doAdd(submitEvent?: SubmitEvent): void {
+        if (submitEvent) {
+          submitEvent.preventDefault()
         }
 
-        cityssm.openHtmlModal('workOrder-addMilestone', {
-          onshow(modalElement) {
-            ;(
-              modalElement.querySelector(
-                '#milestoneAdd--workOrderId'
-              ) as HTMLInputElement
-            ).value = workOrderId
+        const currentDateString = cityssm.dateToString(new Date())
 
-            const milestoneTypeElement = modalElement.querySelector(
+        function _doAdd(): void {
+          cityssm.postJSON(
+            `${sunrise.urlPrefix}/workOrders/doAddWorkOrderMilestone`,
+            addFormElement,
+            (rawResponseJSON) => {
+              const responseJSON = rawResponseJSON as {
+                success: boolean
+                errorMessage?: string
+                workOrderMilestones?: WorkOrderMilestone[]
+              }
+
+              processMilestoneResponse(responseJSON)
+
+              if (responseJSON.success) {
+                addCloseModalFunction()
+              }
+            }
+          )
+        }
+
+        const milestoneDateString = workOrderMilestoneDateStringElement.value
+
+        if (
+          milestoneDateString !== '' &&
+          milestoneDateString < currentDateString
+        ) {
+          bulmaJS.confirm({
+            title: 'Milestone Date in the Past',
+            message:
+              'Are you sure you want to create a milestone with a date in the past?',
+            contextualColorName: 'warning',
+            okButton: {
+              text: 'Yes, Create a Past Milestone',
+              callbackFunction: _doAdd
+            }
+          })
+        } else {
+          _doAdd()
+        }
+      }
+
+      cityssm.openHtmlModal('workOrder-addMilestone', {
+        onshow(modalElement) {
+          ;(
+            modalElement.querySelector(
+              '#milestoneAdd--workOrderId'
+            ) as HTMLInputElement
+          ).value = workOrderId
+
+          const milestoneTypeElement = modalElement.querySelector(
+            '#milestoneAdd--workOrderMilestoneTypeId'
+          ) as HTMLSelectElement
+
+          for (const milestoneType of exports.workOrderMilestoneTypes as WorkOrderMilestoneType[]) {
+            const optionElement = document.createElement('option')
+
+            optionElement.value =
+              milestoneType.workOrderMilestoneTypeId.toString()
+            optionElement.textContent = milestoneType.workOrderMilestoneType
+
+            milestoneTypeElement.append(optionElement)
+          }
+
+          workOrderMilestoneDateStringElement = modalElement.querySelector(
+            '#milestoneAdd--workOrderMilestoneDateString'
+          ) as HTMLInputElement
+
+          workOrderMilestoneDateStringElement.valueAsDate = new Date()
+        },
+        onshown(modalElement, closeModalFunction) {
+          addCloseModalFunction = closeModalFunction
+
+          bulmaJS.toggleHtmlClipped()
+          ;(
+            modalElement.querySelector(
               '#milestoneAdd--workOrderMilestoneTypeId'
             ) as HTMLSelectElement
+          ).focus()
 
-            for (const milestoneType of exports.workOrderMilestoneTypes as WorkOrderMilestoneType[]) {
-              const optionElement = document.createElement('option')
+          addFormElement = modalElement.querySelector('form') as HTMLFormElement
+          addFormElement.addEventListener('submit', doAdd)
 
-              optionElement.value =
-                milestoneType.workOrderMilestoneTypeId.toString()
-              optionElement.textContent = milestoneType.workOrderMilestoneType
-
-              milestoneTypeElement.append(optionElement)
-            }
-
-            workOrderMilestoneDateStringElement = modalElement.querySelector(
-              '#milestoneAdd--workOrderMilestoneDateString'
-            ) as HTMLInputElement
-
-            workOrderMilestoneDateStringElement.valueAsDate = new Date()
-          },
-          onshown(modalElement, closeModalFunction) {
-            addCloseModalFunction = closeModalFunction
-
-            bulmaJS.toggleHtmlClipped()
-            ;(
-              modalElement.querySelector(
-                '#milestoneAdd--workOrderMilestoneTypeId'
-              ) as HTMLSelectElement
-            ).focus()
-
-            addFormElement = modalElement.querySelector(
-              'form'
-            ) as HTMLFormElement
-            addFormElement.addEventListener('submit', doAdd)
-
-            const conflictingMilestonePanelElement = document.querySelector(
-              '#milestoneAdd--conflictingMilestonesPanel'
-            ) as HTMLElement
-
-            workOrderMilestoneDateStringElement.addEventListener(
-              'change',
-              () => {
-                refreshConflictingMilestones(
-                  workOrderMilestoneDateStringElement.value,
-                  conflictingMilestonePanelElement
-                )
-              }
-            )
+          const conflictingMilestonePanelElement = document.querySelector(
+            '#milestoneAdd--conflictingMilestonesPanel'
+          ) as HTMLElement
 
+          workOrderMilestoneDateStringElement.addEventListener('change', () => {
             refreshConflictingMilestones(
               workOrderMilestoneDateStringElement.value,
               conflictingMilestonePanelElement
             )
-          },
-          onremoved() {
-            bulmaJS.toggleHtmlClipped()
-            ;(
-              document.querySelector(
-                '#button--addMilestone'
-              ) as HTMLButtonElement
-            ).focus()
-          }
-        })
+          })
+
+          refreshConflictingMilestones(
+            workOrderMilestoneDateStringElement.value,
+            conflictingMilestonePanelElement
+          )
+        },
+        onremoved() {
+          bulmaJS.toggleHtmlClipped()
+          ;(
+            document.querySelector('#button--addMilestone') as HTMLButtonElement
+          ).focus()
+        }
       })
-  }
+    })
 })()

types/recordTypes.d.ts

@@ -1,4 +1,4 @@
-import type { DateString, TimeString } from "@cityssm/utils-datetime";
+import type { DateString, TimeString } from '@cityssm/utils-datetime';
 export interface Record {
     recordCreate_userName?: string;
     recordCreate_timeMillis?: number;
@@ -199,7 +199,7 @@ export interface ContractInterment extends Record {
     deathDate?: number;
     deathDateString?: DateString;
     deathPlace?: string;
-    deathAge?: number;
+    deathAge?: number | null;
     deathAgePeriod?: string;
     intermentContainerTypeId?: number;
     intermentContainerType?: string;
@@ -260,6 +260,7 @@ export interface Contract extends Record {
     funeralDateString?: DateString;
     funeralTime?: number;
     funeralTimeString?: TimeString;
+    funeralTimePeriodString?: string;
     committalTypeId?: number;
     committalType?: string;
     contractFields?: ContractField[];

types/recordTypes.ts

@@ -1,4 +1,4 @@
-import type { DateString, TimeString } from "@cityssm/utils-datetime"
+import type { DateString, TimeString } from '@cityssm/utils-datetime'
 
 export interface Record {
   recordCreate_userName?: string
@@ -255,7 +255,7 @@ export interface ContractInterment extends Record {
   deathDate?: number
   deathDateString?: DateString
   deathPlace?: string
-  deathAge?: number
+  deathAge?: number | null
   deathAgePeriod?: string
 
   intermentContainerTypeId?: number
@@ -331,8 +331,11 @@ export interface Contract extends Record {
 
   funeralDate?: number
   funeralDateString?: DateString
+
   funeralTime?: number
   funeralTimeString?: TimeString
+  funeralTimePeriodString?: string
+
   committalTypeId?: number
   committalType?: string
 

views/admin-burialSiteTypes.ejs

@@ -5,45 +5,45 @@
       <%- include('_menu-admin'); -%>
     </div>
     <div class="column">
-        <nav class="breadcrumb">
-          <ul>
-            <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
-            <li>
-              <a href="#">
-                <span class="icon is-small"><i class="fas fa-cog" aria-hidden="true"></i></span>
-                <span>Administrator Tools</span>
-              </a>
-            </li>
-            <li class="is-active">
-              <a href="#" aria-current="page">
-                Burial Site Type Management
-              </a>
-            </li>
-          </ul>
-        </nav>
-        
-        <div class="columns is-vcentered">
-          <div class="column">
-            <h1 class="title is-1">
+      <nav class="breadcrumb">
+        <ul>
+          <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
+          <li>
+            <a href="#">
+              <span class="icon is-small"><i class="fas fa-cog" aria-hidden="true"></i></span>
+              <span>Administrator Tools</span>
+            </a>
+          </li>
+          <li class="is-active">
+            <a href="#" aria-current="page">
               Burial Site Type Management
-            </h1>
-          </div>
-          <div class="column has-text-right is-narrow">
-            <button class="button is-success" id="button--addBurialSiteType" type="button" accesskey="n">
-              <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
-              <span>Add Burial Site Type</span>
-            </button>
-          </div>
-        </div>
+            </a>
+          </li>
+        </ul>
+      </nav>
       
-        <div id="container--burialSiteTypes"></div>
+      <div class="columns is-vcentered">
+        <div class="column">
+          <h1 class="title is-1">
+            Burial Site Type Management
+          </h1>
+        </div>
+        <div class="column has-text-right is-narrow">
+          <button class="button is-success" id="button--addBurialSiteType" type="button" accesskey="n">
+            <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
+            <span>Add Burial Site Type</span>
+          </button>
+        </div>
+      </div>
+      
+      <div id="container--burialSiteTypes"></div>
     </div>
 </div>
 
 <%- include('_footerA'); -%>
 
 <script>
-    exports.burialSiteTypes = <%- JSON.stringify(burialSiteTypes) %>;
+  exports.burialSiteTypes = <%- JSON.stringify(burialSiteTypes) %>;
 </script>
 
 <script src="<%= urlPrefix %>/javascripts/burialSiteTypes.admin.js"></script>

views/contract-edit.ejs

@@ -368,7 +368,7 @@
           <div class="columns is-mobile mb-0">
             <div class="column">
               <div class="field">
-                <label class="label" for="contract--funeralDateString">Funeral Date</label>
+                <label class="label" for="contract--funeralDateString">Service Date</label>
                 <div class="control has-icons-left">
                   <input class="input" id="contract--funeralDateString" name="funeralDateString" type="date"
                     value="<%= contract.funeralDateString %>" />
@@ -451,7 +451,9 @@
               <div class="field">
                 <label class="label" for="contract--purchaserCity">City</label>
                 <div class="control">
-                  <input class="input" id="contract--purchaserCity" name="purchaserCity" type="text" maxlength="20" value="<%= contract.purchaserCity %>" />
+                  <input class="input" id="contract--purchaserCity" name="purchaserCity" type="text" maxlength="20"
+                    value="<%= contract.purchaserCity %>"
+                    list="datalist--cityDefault" />
                 </div>
               </div>
             </div>
@@ -560,7 +562,9 @@
                 <div class="field">
                   <label class="label" for="contract--deceasedCity">City</label>
                   <div class="control">
-                    <input class="input" id="contract--deceasedCity" name="deceasedCity" type="text" maxlength="20" value="<%= contract.deceasedCity %>" />
+                    <input class="input" id="contract--deceasedCity" name="deceasedCity" type="text" maxlength="20"
+                      value="<%= contract.deceasedCity %>"
+                      list="datalist--cityDefault" />
                   </div>
                 </div>
               </div>
@@ -601,7 +605,9 @@
                     Place of Birth
                   </label>
                   <div class="control">
-                    <input class="input" id="contract--birthPlace" name="birthPlace" type="text" maxlength="100" autocomplete="off" value="<%= contract.deceasedPlaceOfBirth %>" />
+                    <input class="input" id="contract--birthPlace" name="birthPlace" type="text" maxlength="100" autocomplete="off"
+                      value="<%= contract.deceasedPlaceOfBirth %>"
+                      list="datalist--cityDefault" />
                   </div>
                 </div>
               </div>
@@ -626,7 +632,9 @@
                     Place of Death
                   </label>
                   <div class="control">
-                    <input class="input" id="contract--deathPlace" name="deathPlace" type="text" maxlength="100" autocomplete="off" value="<%= contract.deathPlace %>" />
+                    <input class="input" id="contract--deathPlace" name="deathPlace" type="text" maxlength="100" autocomplete="off"
+                      value="<%= contract.deathPlace %>"
+                      list="datalist--cityDefault" />
                   </div>
                 </div>
               </div>
@@ -859,10 +867,14 @@
   </div>
 <% } %>
 
+<datalist id="datalist--cityDefault">
+  <option value="<%= configFunctions.getConfigProperty('settings.cityDefault') %>">
+</datalist>
+    
 <%- include('_footerA'); -%>
 
-<script>
-  <% if (!isCreate) { %>
+<% if (!isCreate) { %>
+  <script>
     exports.cityDefault = "<%= configFunctions.getConfigProperty('settings.cityDefault') %>";
     exports.provinceDefault = "<%= configFunctions.getConfigProperty('settings.provinceDefault') %>";
 
@@ -874,8 +886,8 @@
     exports.contractTransactions = <%- JSON.stringify(contract.contractTransactions) %>;
 
     exports.workOrderTypes = <%- JSON.stringify(workOrderTypes) %>;
-  <% } %>
-</script>
+  </script>
+<% } %>
 
 <script src="<%= urlPrefix %>/javascripts/contract.edit.js"></script>
 <% if (!isCreate) { %>