@iamproperty/components 4.0.0 → 4.0.1

package/assets/js/modules/dialogs.js

@@ -23,6 +23,18 @@ const extendDialogs = (body) => {
             // Open the modal!
             dialog.showModal();
             dialog.focus();
+            let firstWidth = dialog.offsetWidth;
+            dialog.setAttribute('style', `max-width: ${firstWidth}px;`);
+            // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
+            Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element, index) => {
+                const id = element.getAttribute('data-duplicate');
+                const originalInput = document.getElementById(id);
+                if (element.checked != originalInput.checked) {
+                    element.checked = originalInput.checked;
+                    let changeEvent = new Event('change');
+                    element.dispatchEvent(changeEvent);
+                }
+            });
             window.dataLayer = window.dataLayer || [];
             window.dataLayer.push({
                 "event": "openModal",
@@ -180,6 +192,7 @@ export const createDialog = (dialog) => {
 export const createMultiFormDialog = (dialog) => {
     let buttons = "";
     let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
+    let form = dialog.querySelector('form');
     fieldsets.forEach((fieldset, index) => {
         buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active" : ""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`;
         const btnWrapper = document.createElement("div");
@@ -189,8 +202,16 @@ export const createMultiFormDialog = (dialog) => {
             btnWrapper.innerHTML += `<button data-title="${fieldsets[index - 1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
         if (index != fieldsets.length - 1)
             btnWrapper.innerHTML += `<button data-title="${fieldsets[index + 1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
-        if (index == fieldsets.length - 1)
-            btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+        // Last fieldset
+        if (index == fieldsets.length - 1) {
+            if (form && form.querySelector(':scope > button[type="submit"]')) {
+                let existingButton = form.querySelector(':scope > button[type="submit"]');
+                existingButton.classList.add('mb-0');
+                btnWrapper.insertAdjacentElement('beforeend', existingButton);
+            }
+            else
+                btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+        }
     });
     dialog.insertAdjacentHTML('afterbegin', `<div class="steps bg-primary">${buttons}</div>`);
     // Open the fieldset with an error inside
@@ -258,7 +279,7 @@ export const createMultiFormDialog = (dialog) => {
     dialog.addEventListener('keydown', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
             const button = event.target.closest('button');
-            if (event.keyCode == 13) {
+            if (event.keyCode == 13 && button.getAttribute('type') != "submit") {
                 event.preventDefault();
                 validateFieldset(button);
             }
@@ -266,10 +287,17 @@ export const createMultiFormDialog = (dialog) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('input')) {
             const input = event.target.closest('input');
             input.classList.remove('is-invalid');
+            if (event.keyCode == 13) {
+                event.preventDefault();
+            }
         }
     });
     dialog.addEventListener('click', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {
+        if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')) {
+            const form = event.target.closest('form');
+            form.classList.add('was-validated');
+        }
+        else if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {
             const button = event.target.closest('button[data-title]');
             validateFieldset(button);
         }

package/assets/js/modules/table.js

@@ -108,7 +108,28 @@ export const createSearchDataList = (table, form) => {
 export const addFilterEventListeners = (table, form, pagination, wrapper, savedTableBody) => {
     var timer;
     // Check what conditions are set on the table to see what the form actions are
-    let formSubmit = function (paginate = false) {
+    let formSubmit = function (event, paginate = false) {
+        if (form.classList.contains('processing'))
+            return false;
+        // Before submitting check if any duplicate checkboxes within the filters dialog needs to upset the original input
+        if (event.type == "submit") {
+            form.classList.add('processing');
+            Array.from(form.querySelectorAll('[data-duplicate]')).forEach((element, index) => {
+                const id = element.getAttribute('data-duplicate');
+                const input = document.getElementById(id);
+                const card = document.querySelector(`[for="${id}"] iam-card`);
+                if (input.checked != element.checked) {
+                    if (card) {
+                        let clickEvent = new Event('click');
+                        card.dispatchEvent(clickEvent);
+                    }
+                    else {
+                        input.checked = element.checked;
+                    }
+                }
+            });
+            form.classList.remove('processing');
+        }
         if (form.hasAttribute('data-ajax')) {
             // Default back to page 1
             if (!paginate) {
@@ -138,7 +159,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         clearTimeout(timer);
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')) {
             timer = setTimeout(function () {
-                formSubmit();
+                formSubmit(event);
             }, 500);
         }
         ;
@@ -148,10 +169,10 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-sort]')) {
             if (!form.hasAttribute('data-submit'))
                 sortTable(table, form, savedTableBody);
-            formSubmit();
+            formSubmit(event);
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')) {
-            formSubmit();
+            formSubmit(event);
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter][data-no-ajax]')) { // Allow for input fields to filter the current results without a new ajax call
             filterTable(table, form, wrapper);
@@ -159,16 +180,16 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             populateDataQueries(table, form);
         }
         else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')) {
-            formSubmit();
+            formSubmit(event);
         }
         else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')) {
-            formSubmit();
+            formSubmit(event);
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')) {
-            formSubmit();
+            formSubmit(event);
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-mimic]')) {
-            formSubmit();
+            formSubmit(event);
         }
     });
     form.addEventListener('click', (event) => {
@@ -184,23 +205,57 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             event.stopPropagation();
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-clear]')) {
-            form.reset();
+            form.classList.add('processing');
+            // Make sure any applied filters have been removed
+            Array.from(form.querySelectorAll('.applied-filters')).forEach((filters, index) => {
+                filters.innerHTML = "";
+            });
+            // Make sure cards are unlicked
+            let frm_elements = form.elements;
+            for (let i = 0; i < frm_elements.length; i++) {
+                let field_type = frm_elements[i].type.toLowerCase() ? frm_elements[i].type.toLowerCase() : "text";
+                switch (field_type) {
+                    case "text":
+                    case "password":
+                    case "textarea":
+                        frm_elements[i].value = "";
+                        break;
+                    case "radio":
+                    case "checkbox":
+                        if (frm_elements[i].checked) {
+                            frm_elements[i].checked = false;
+                        }
+                        break;
+                    case "select-one":
+                    case "select-multi":
+                        frm_elements[i].selectedIndex = -1;
+                        break;
+                    case "hidden":
+                    default:
+                        break;
+                }
+            }
+            Array.from(form.querySelectorAll('label iam-card')).forEach((card, index) => {
+                let clickEvent = new Event('click');
+                card.dispatchEvent(clickEvent);
+            });
+            form.classList.remove('processing');
             if (!form.hasAttribute('data-submit'))
                 sortTable(table, form, savedTableBody);
-            formSubmit();
+            formSubmit(event);
         }
     });
     form.addEventListener('submit', (event) => {
         clearTimeout(timer);
         if (!form.hasAttribute('data-submit'))
             event.preventDefault();
-        formSubmit();
+        formSubmit(event);
     });
     form.addEventListener('force', (event) => {
-        formSubmit();
+        formSubmit(event);
     });
     form.addEventListener('paginate', (event) => {
-        formSubmit(true);
+        formSubmit(event, true);
     });
     // Mmimic fields
     let forms = [];