transfer focus with fee and transaction modals

public-typescript/lotOccupancyEdit.js

@@ -1090,7 +1090,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
         
         "use strict";
         /* eslint-disable @typescript-eslint/indent, unicorn/prefer-module */
-        var _a;
         Object.defineProperty(exports, "__esModule", { value: true });
         let lotOccupancyFees = exports.lotOccupancyFees;
         delete exports.lotOccupancyFees;
@@ -1220,7 +1219,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
             lotOccupancyFeesContainerElement.querySelector('#lotOccupancyFees--grandTotal').textContent = '$' + (feeAmountTotal + taxAmountTotal).toFixed(2);
             renderLotOccupancyTransactions();
         }
-        (_a = document.querySelector('#button--addFee')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+        const addFeeButtonElement = document.querySelector('#button--addFee');
+        addFeeButtonElement.addEventListener('click', () => {
             if (los.hasUnsavedChanges()) {
                 bulmaJS.alert({
                     message: 'Please save all unsaved changes before adding fees.',
@@ -1378,6 +1378,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 },
                 onremoved() {
                     bulmaJS.toggleHtmlClipped();
+                    addFeeButtonElement.focus();
                 }
             });
         });
@@ -1518,9 +1519,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     '</div>');
             }
         }
-        document
+        const addTransactionButtonElement = document.querySelector('#button--addTransaction');
-            .querySelector('#button--addTransaction')
+        addTransactionButtonElement.addEventListener('click', () => {
-            .addEventListener('click', () => {
             let transactionAmountElement;
             let externalReceiptNumberElement;
             let addCloseModalFunction;
@@ -1554,8 +1554,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     .querySelector('.help');
                 if (externalReceiptNumber === '') {
                     helpTextElement.innerHTML = '&nbsp;';
-                    iconElement.innerHTML =
+                    iconElement.innerHTML = '<i class="fas fa-minus" aria-hidden="true"></i>';
-                        '<i class="fas fa-minus" aria-hidden="true"></i>';
                     return;
                 }
                 cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doGetDynamicsGPDocument', {
@@ -1606,6 +1605,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 },
                 onshown(modalElement, closeModalFunction) {
                     bulmaJS.toggleHtmlClipped();
+                    transactionAmountElement.focus();
                     addCloseModalFunction = closeModalFunction;
                     modalElement
                         .querySelector('form')
@@ -1613,6 +1613,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 },
                 onremoved() {
                     bulmaJS.toggleHtmlClipped();
+                    addTransactionButtonElement.focus();
                 }
             });
         });

public-typescript/lotOccupancyEdit/lotOccupancyEditFees.js

@@ -1,6 +1,5 @@
 "use strict";
 /* eslint-disable @typescript-eslint/indent, unicorn/prefer-module */
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 let lotOccupancyFees = exports.lotOccupancyFees;
 delete exports.lotOccupancyFees;
@@ -130,7 +129,8 @@ function renderLotOccupancyFees() {
     lotOccupancyFeesContainerElement.querySelector('#lotOccupancyFees--grandTotal').textContent = '$' + (feeAmountTotal + taxAmountTotal).toFixed(2);
     renderLotOccupancyTransactions();
 }
-(_a = document.querySelector('#button--addFee')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+const addFeeButtonElement = document.querySelector('#button--addFee');
+addFeeButtonElement.addEventListener('click', () => {
     if (los.hasUnsavedChanges()) {
         bulmaJS.alert({
             message: 'Please save all unsaved changes before adding fees.',
@@ -288,6 +288,7 @@ function renderLotOccupancyFees() {
         },
         onremoved() {
             bulmaJS.toggleHtmlClipped();
+            addFeeButtonElement.focus();
         }
     });
 });
@@ -428,9 +429,8 @@ function renderLotOccupancyTransactions() {
             '</div>');
     }
 }
-document
+const addTransactionButtonElement = document.querySelector('#button--addTransaction');
-    .querySelector('#button--addTransaction')
+addTransactionButtonElement.addEventListener('click', () => {
-    .addEventListener('click', () => {
     let transactionAmountElement;
     let externalReceiptNumberElement;
     let addCloseModalFunction;
@@ -464,8 +464,7 @@ document
             .querySelector('.help');
         if (externalReceiptNumber === '') {
             helpTextElement.innerHTML = '&nbsp;';
-            iconElement.innerHTML =
+            iconElement.innerHTML = '<i class="fas fa-minus" aria-hidden="true"></i>';
-                '<i class="fas fa-minus" aria-hidden="true"></i>';
             return;
         }
         cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doGetDynamicsGPDocument', {
@@ -516,6 +515,7 @@ document
         },
         onshown(modalElement, closeModalFunction) {
             bulmaJS.toggleHtmlClipped();
+            transactionAmountElement.focus();
             addCloseModalFunction = closeModalFunction;
             modalElement
                 .querySelector('form')
@@ -523,6 +523,7 @@ document
         },
         onremoved() {
             bulmaJS.toggleHtmlClipped();
+            addTransactionButtonElement.focus();
         }
     });
 });

public-typescript/lotOccupancyEdit/lotOccupancyEditFees.ts

@@ -185,7 +185,9 @@ function renderLotOccupancyFees(): void {
   renderLotOccupancyTransactions()
 }
 
-document.querySelector('#button--addFee')?.addEventListener('click', () => {
+const addFeeButtonElement = document.querySelector('#button--addFee') as HTMLButtonElement
+
+addFeeButtonElement.addEventListener('click', () => {
   if (los.hasUnsavedChanges()) {
     bulmaJS.alert({
       message: 'Please save all unsaved changes before adding fees.',
@@ -410,6 +412,7 @@ document.querySelector('#button--addFee')?.addEventListener('click', () => {
     },
     onremoved() {
       bulmaJS.toggleHtmlClipped()
+      addFeeButtonElement.focus()
     }
   })
 })
@@ -602,171 +605,175 @@ function renderLotOccupancyTransactions(): void {
   }
 }
 
-document
+const addTransactionButtonElement = document.querySelector(
-  .querySelector('#button--addTransaction')!
+  '#button--addTransaction'
-  .addEventListener('click', () => {
+) as HTMLButtonElement
-    let transactionAmountElement: HTMLInputElement
-    let externalReceiptNumberElement: HTMLInputElement
 
-    let addCloseModalFunction: () => void
+addTransactionButtonElement.addEventListener('click', () => {
+  let transactionAmountElement: HTMLInputElement
+  let externalReceiptNumberElement: HTMLInputElement
 
-    function doAddTransaction(submitEvent: SubmitEvent): void {
+  let addCloseModalFunction: () => void
-      submitEvent.preventDefault()
 
-      cityssm.postJSON(
+  function doAddTransaction(submitEvent: SubmitEvent): void {
-        los.urlPrefix + '/lotOccupancies/doAddLotOccupancyTransaction',
+    submitEvent.preventDefault()
-        submitEvent.currentTarget,
-        (rawResponseJSON) => {
-          const responseJSON = rawResponseJSON as {
-            success: boolean
-            errorMessage?: string
-            lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[]
-          }
 
-          if (responseJSON.success) {
+    cityssm.postJSON(
-            lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!
+      los.urlPrefix + '/lotOccupancies/doAddLotOccupancyTransaction',
-            addCloseModalFunction()
+      submitEvent.currentTarget,
-            renderLotOccupancyTransactions()
+      (rawResponseJSON) => {
-          } else {
+        const responseJSON = rawResponseJSON as {
-            bulmaJS.confirm({
+          success: boolean
-              title: 'Error Adding Transaction',
+          errorMessage?: string
-              message: responseJSON.errorMessage ?? '',
+          lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[]
-              contextualColorName: 'danger'
-            })
-          }
         }
-      )
-    }
 
-    // eslint-disable-next-line @typescript-eslint/naming-convention
+        if (responseJSON.success) {
-    function dynamicsGP_refreshExternalReceiptNumberIcon(): void {
+          lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!
-      const externalReceiptNumber = externalReceiptNumberElement.value
+          addCloseModalFunction()
-
+          renderLotOccupancyTransactions()
-      const iconElement = externalReceiptNumberElement
+        } else {
-        .closest('.control')!
+          bulmaJS.confirm({
-        .querySelector('.icon') as HTMLElement
+            title: 'Error Adding Transaction',
-
+            message: responseJSON.errorMessage ?? '',
-      const helpTextElement = externalReceiptNumberElement
+            contextualColorName: 'danger'
-        .closest('.field')!
+          })
-        .querySelector('.help') as HTMLElement
+        }
-
-      if (externalReceiptNumber === '') {
-        helpTextElement.innerHTML = ' '
-        iconElement.innerHTML =
-          '<i class="fas fa-minus" aria-hidden="true"></i>'
-        return
       }
+    )
+  }
 
-      cityssm.postJSON(
+  // eslint-disable-next-line @typescript-eslint/naming-convention
-        los.urlPrefix + '/lotOccupancies/doGetDynamicsGPDocument',
+  function dynamicsGP_refreshExternalReceiptNumberIcon(): void {
-        {
+    const externalReceiptNumber = externalReceiptNumberElement.value
-          externalReceiptNumber
-        },
-        (rawResponseJSON) => {
-          const responseJSON = rawResponseJSON as {
-            success: boolean
-            dynamicsGPDocument?: recordTypes.DynamicsGPDocument
-          }
 
-          if (
+    const iconElement = externalReceiptNumberElement
-            !responseJSON.success ||
+      .closest('.control')!
-            responseJSON.dynamicsGPDocument === undefined
+      .querySelector('.icon') as HTMLElement
-          ) {
+
-            helpTextElement.textContent = 'No Matching Document Found'
+    const helpTextElement = externalReceiptNumberElement
-            iconElement.innerHTML =
+      .closest('.field')!
-              '<i class="fas fa-times-circle" aria-hidden="true"></i>'
+      .querySelector('.help') as HTMLElement
-          } else if (
+
-            transactionAmountElement.valueAsNumber ===
+    if (externalReceiptNumber === '') {
-            responseJSON.dynamicsGPDocument.documentTotal
+      helpTextElement.innerHTML = '&nbsp;'
-          ) {
+      iconElement.innerHTML = '<i class="fas fa-minus" aria-hidden="true"></i>'
-            helpTextElement.textContent = 'Matching Document Found'
+      return
-            iconElement.innerHTML =
-              '<i class="fas fa-check-circle" aria-hidden="true"></i>'
-          } else {
-            helpTextElement.textContent =
-              'Matching Document: $' +
-              responseJSON.dynamicsGPDocument.documentTotal.toFixed(2)
-            iconElement.innerHTML =
-              '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>'
-          }
-        }
-      )
     }
 
-    cityssm.openHtmlModal('lotOccupancy-addTransaction', {
+    cityssm.postJSON(
-      onshow(modalElement) {
+      los.urlPrefix + '/lotOccupancies/doGetDynamicsGPDocument',
-        los.populateAliases(modalElement)
+      {
-        ;(
+        externalReceiptNumber
-          modalElement.querySelector(
+      },
-            '#lotOccupancyTransactionAdd--lotOccupancyId'
+      (rawResponseJSON) => {
-          ) as HTMLInputElement
+        const responseJSON = rawResponseJSON as {
-        ).value = lotOccupancyId.toString()
+          success: boolean
+          dynamicsGPDocument?: recordTypes.DynamicsGPDocument
+        }
 
-        const feeGrandTotal = getFeeGrandTotal()
+        if (
-        const transactionGrandTotal = getTransactionGrandTotal()
+          !responseJSON.success ||
+          responseJSON.dynamicsGPDocument === undefined
+        ) {
+          helpTextElement.textContent = 'No Matching Document Found'
+          iconElement.innerHTML =
+            '<i class="fas fa-times-circle" aria-hidden="true"></i>'
+        } else if (
+          transactionAmountElement.valueAsNumber ===
+          responseJSON.dynamicsGPDocument.documentTotal
+        ) {
+          helpTextElement.textContent = 'Matching Document Found'
+          iconElement.innerHTML =
+            '<i class="fas fa-check-circle" aria-hidden="true"></i>'
+        } else {
+          helpTextElement.textContent =
+            'Matching Document: $' +
+            responseJSON.dynamicsGPDocument.documentTotal.toFixed(2)
+          iconElement.innerHTML =
+            '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>'
+        }
+      }
+    )
+  }
 
-        transactionAmountElement = modalElement.querySelector(
+  cityssm.openHtmlModal('lotOccupancy-addTransaction', {
-          '#lotOccupancyTransactionAdd--transactionAmount'
+    onshow(modalElement) {
+      los.populateAliases(modalElement)
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionAdd--lotOccupancyId'
         ) as HTMLInputElement
+      ).value = lotOccupancyId.toString()
 
-        transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2)
+      const feeGrandTotal = getFeeGrandTotal()
+      const transactionGrandTotal = getTransactionGrandTotal()
 
-        transactionAmountElement.max = Math.max(
+      transactionAmountElement = modalElement.querySelector(
-          feeGrandTotal - transactionGrandTotal,
+        '#lotOccupancyTransactionAdd--transactionAmount'
-          0
+      ) as HTMLInputElement
-        ).toFixed(2)
 
-        transactionAmountElement.value = Math.max(
+      transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2)
-          feeGrandTotal - transactionGrandTotal,
-          0
-        ).toFixed(2)
 
-        if (los.dynamicsGPIntegrationIsEnabled) {
+      transactionAmountElement.max = Math.max(
-          externalReceiptNumberElement = modalElement.querySelector(
+        feeGrandTotal - transactionGrandTotal,
-            '#lotOccupancyTransactionAdd--externalReceiptNumber'
+        0
-          )!
+      ).toFixed(2)
 
-          const externalReceiptNumberControlElement =
+      transactionAmountElement.value = Math.max(
-            externalReceiptNumberElement.closest('.control')!
+        feeGrandTotal - transactionGrandTotal,
+        0
+      ).toFixed(2)
 
-          externalReceiptNumberControlElement.classList.add('has-icons-right')
+      if (los.dynamicsGPIntegrationIsEnabled) {
+        externalReceiptNumberElement = modalElement.querySelector(
+          '#lotOccupancyTransactionAdd--externalReceiptNumber'
+        )!
 
-          externalReceiptNumberControlElement.insertAdjacentHTML(
+        const externalReceiptNumberControlElement =
-            'beforeend',
+          externalReceiptNumberElement.closest('.control')!
-            '<span class="icon is-small is-right"></span>'
-          )
 
-          externalReceiptNumberControlElement.insertAdjacentHTML(
+        externalReceiptNumberControlElement.classList.add('has-icons-right')
-            'afterend',
-            '<p class="help has-text-right"></p>'
-          )
 
-          externalReceiptNumberElement.addEventListener(
+        externalReceiptNumberControlElement.insertAdjacentHTML(
-            'change',
+          'beforeend',
-            dynamicsGP_refreshExternalReceiptNumberIcon
+          '<span class="icon is-small is-right"></span>'
-          )
+        )
 
-          transactionAmountElement.addEventListener(
+        externalReceiptNumberControlElement.insertAdjacentHTML(
-            'change',
+          'afterend',
-            dynamicsGP_refreshExternalReceiptNumberIcon
+          '<p class="help has-text-right"></p>'
-          )
+        )
 
-          dynamicsGP_refreshExternalReceiptNumberIcon()
+        externalReceiptNumberElement.addEventListener(
-        }
+          'change',
-      },
+          dynamicsGP_refreshExternalReceiptNumberIcon
-      onshown(modalElement, closeModalFunction) {
+        )
-        bulmaJS.toggleHtmlClipped()
 
-        addCloseModalFunction = closeModalFunction
+        transactionAmountElement.addEventListener(
+          'change',
+          dynamicsGP_refreshExternalReceiptNumberIcon
+        )
 
-        modalElement
+        dynamicsGP_refreshExternalReceiptNumberIcon()
-          .querySelector('form')!
-          .addEventListener('submit', doAddTransaction)
-      },
-      onremoved() {
-        bulmaJS.toggleHtmlClipped()
       }
-    })
+    },
+    onshown(modalElement, closeModalFunction) {
+      bulmaJS.toggleHtmlClipped()
+
+      transactionAmountElement.focus()
+
+      addCloseModalFunction = closeModalFunction
+
+      modalElement
+        .querySelector('form')!
+        .addEventListener('submit', doAddTransaction)
+    },
+    onremoved() {
+      bulmaJS.toggleHtmlClipped()
+      addTransactionButtonElement.focus()
+    }
   })
+})
 
 renderLotOccupancyFees()