@iamproperty/components 4.1.0-beta-2 → 4.1.0

package/assets/js/modules/dialogs.js

@@ -192,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");
@@ -201,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
@@ -270,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);
             }
@@ -278,6 +287,9 @@ 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) => {

package/assets/js/modules/dynamicEvents.js

@@ -0,0 +1,116 @@
+// @ts-nocheck
+// Create the event listeners 
+const createDynamicEvents = () => {
+    // Change event
+    document.addEventListener('change', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))
+            readMatches(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));
+    });
+    document.addEventListener('change', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))
+            readMatches(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));
+    });
+    document.addEventListener('keyup', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))
+            readMatches(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));
+    });
+    // Click event
+    document.addEventListener('click', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-click-events]'))
+            readMatches(event.target, event.target.closest('[data-click-events]').getAttribute('data-click-events'));
+    });
+};
+// Parse the JSON and trigger the events, this may be singular or multiple set of events
+const readMatches = (element, events) => {
+    // an empty events will trigger looking up the dom chain for 
+    if (!events) {
+        events = element.parentNode.getAttribute('data-change-events');
+    }
+    // If still empty bail out
+    if (!events)
+        return false;
+    // Split out each event
+    Array.from(JSON.parse(events)).forEach((event, index) => {
+        checkMatch(element, event);
+    });
+};
+const checkMatch = (element, event) => {
+    if ("matches" in event) {
+        if (event['matches'] == 'any')
+            runEvent(element, event, 'if');
+        else if (element.value == event.matches)
+            runEvent(element, event, 'if');
+        else
+            runEvent(element, event, 'else');
+        return false;
+    }
+    else if ("in-list" in event) {
+        if (document.querySelector(`${event['in-list']} option[value="${element.value}"]`)) {
+            let match = document.querySelector(`${event['in-list']} option[value="${element.value}"]`);
+            runEvent(element, event, 'if', match);
+        }
+        else
+            runEvent(element, event, 'else');
+        return false;
+    }
+    else if ("event" in event) {
+        runEvent(element, event, 'event');
+    }
+};
+const runEvent = (element, event, eventType, match) => {
+    if (eventType in event == false)
+        return false;
+    switch (event[eventType]) {
+        case "hide":
+            let hideElement = document.querySelector(event['target']);
+            hideElement.classList.add('js-hide');
+            Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+                input.removeAttribute('required');
+            });
+            break;
+        case "show":
+            let showElement = document.querySelector(event['target']);
+            showElement.classList.remove('js-hide');
+            Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+                if (!input.closest('.js-hide'))
+                    input.setAttribute('required', 'true');
+            });
+            break;
+        case "populate-form":
+            populateForm(element, event, match);
+            break;
+        case "setAttribute":
+            document.querySelector(`${event['target']}`).setAttribute(event['attribute'], event['value']);
+            break;
+        case "removeAttribute":
+            document.querySelector(`${event['target']}`).removeAttribute(event['attribute']);
+            break;
+        case "updateValue":
+            document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : "";
+            let changeEvent = new Event('change');
+            document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);
+            break;
+        default:
+            break;
+    }
+};
+const populateForm = function (element, event, match) {
+    let response = JSON.parse(match.getAttribute('data-values'));
+    let form = document.querySelector(event['target']);
+    Object.keys(response).forEach((field, index) => {
+        if (document.getElementById(field) && document.getElementById(field).tagName == "SPAN")
+            document.getElementById(field).innerHTML = response[field];
+        if (form.querySelector(`input[name="${field}"][type="radio"][value="${response[field]}"]`)) {
+            Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function (input, index) {
+                input.disabled = true;
+            });
+            form.querySelector(`input[name="${field}"][type="radio"][value="${response[field]}"]`).checked = true;
+            form.querySelector(`input[name="${field}"][type="radio"][value="${response[field]}"]`).disabled = false;
+        }
+        else if (form.querySelector(`input[name="${field}"]`)) {
+            form.querySelector(`input[name="${field}"]`).value = response[field];
+            form.querySelector(`input[name="${field}"]`).setAttribute('readonly', 'true');
+        }
+    });
+};
+export default createDynamicEvents;

package/assets/js/modules/helpers.js

@@ -44,6 +44,15 @@ export const addGlobalEvents = (body) => {
             form.dispatchEvent(new Event("submit"));
         }
     });
+    document.addEventListener("submit", (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.matches('form')) {
+            let form = event.target;
+            if (form.querySelector(':invalid')) {
+                form.classList.add('was-validated');
+                event.preventDefault();
+            }
+        }
+    });
     return null;
 };
 export const isNumeric = function (str) {

package/assets/js/modules/pagination.js

@@ -12,18 +12,15 @@ const createPaginationButttons = function (controller, pagination) {
         pagination.innerHTML = '';
         return false;
     }
-    let strButtons = '';
+    let strOptions = '';
     for (let i = 1; i <= numberPages; i++) {
-        if (i == currentPage)
-            strButtons += `<li class="page-item active" aria-current="page"><span class="page-link">${i}</span></li>`;
-        else
-            strButtons += `<li class="page-item"><a href="?page=${i}" class="page-link" data-page="${i}">${i}</a></li>`;
+        strOptions += `<option value="${i}" ${i == currentPage ? 'selected' : ''}>${i}</option>`;
     }
-    pagination.innerHTML = `<ul class="pagination mb-0 d-none d-sm-flex">
-    ${currentPage == 1 ? `<li class="page-item disabled"><span class="page-link">Previous</span></li>` : `<li class="page-item"><a href="?page=${parseInt(currentPage) - 1}" class="page-link" data-page="${parseInt(currentPage) - 1}">Previous</a></li>`}
-    ${strButtons}
-    ${currentPage == numberPages ? `<li class="page-item disabled"><span class="page-link">Next</span></li>` : `<li class="page-item"><a href="?page=${parseInt(currentPage) + 1}" class="page-link" data-page="${parseInt(currentPage) + 1}">Next</a></li>`}
-  </ul>`;
+    pagination.innerHTML = `<div class="pagination mb-0 d-none d-sm-flex">
+    <div><select>${strOptions}</select></div>
+    <button class="prev" ${currentPage == 1 ? 'disabled' : ''} data-page="${parseInt(currentPage) - 1}">Previous</button>
+    <button class="next" ${currentPage == numberPages ? 'disabled' : ''} data-page="${parseInt(currentPage) + 1}">Next</button>
+  </div>`;
     pagination.innerHTML += `<div class="d-sm-none text-center">
   <span class="d-block pb-2">You've viewed ${showRows} of ${numberRows} results</span>
   <a href="?show=${parseInt(showRows) + parseInt(addRows)}" class="btn btn-primary w-100 m-0" data-show="${parseInt(showRows) + parseInt(addRows)}">Load more results</a>

package/assets/js/modules/table.js

@@ -9,7 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 // @ts-nocheck
 import { zeroPad, isNumeric, ucfirst } from "./helpers.js";
-import createPaginationButttons from "./pagination.js";
 // Basic functionality needed
 export const addDataAttributes = (table) => {
     const colHeadings = Array.from(table.querySelectorAll('thead th'));
@@ -51,33 +50,28 @@ export const getLargestLastColWidth = (table) => {
     });
     return largestWidth;
 };
-export const createMobileButton = (table) => {
-    if (table.closest('.table--fullwidth'))
+export const createMobileButton = (table, wrapper) => {
+    if (wrapper.classList.contains('.table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
         return false;
-    if (table.querySelectorAll('thead tr th').length < 4)
+    if (table.querySelectorAll('thead tr th').length < 4 && !wrapper.hasAttribute('data-expandable'))
         return false;
+    Array.from(table.querySelectorAll('thead tr')).forEach((row, index) => {
+        row.insertAdjacentHTML('afterbegin', `<th class="th--fixed expand-button-heading"></th>`);
+    });
     Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
-        let firstCol = row.querySelector(':scope > :is(td,th):first-child');
-        let colContent = firstCol.textContent;
-        if (colContent != "")
-            firstCol.innerHTML = `<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
-        else {
-            let secondCol = row.querySelector(':scope > :is(td,th):nth-child(2)');
-            let secondColContent = secondCol.textContent;
-            secondCol.innerHTML = `<span class="td__content">${secondColContent}</span><button type="button" class="d-none">${secondColContent}</button>`;
-        }
+        row.insertAdjacentHTML('afterbegin', `<td class="td--fixed td--expand"><button class="btn btn-compact btn-secondary" data-expand-button>Expand</button></td>`);
     });
 };
 export const addTableEventListeners = (table) => {
     table.addEventListener('click', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('tr > :is(td,th):first-child button')) {
-            let firstCol = event.target.closest('tr > :is(td,th):first-child button');
-            let tableRow = firstCol.parentNode.closest('tr');
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-expand-button]')) {
+            let button = event.target.closest('[data-expand-button]');
+            let tableRow = button.closest('tr');
             if (tableRow.getAttribute('data-view') == "full")
                 tableRow.setAttribute('data-view', 'default');
             else
                 tableRow.setAttribute('data-view', 'full');
-            firstCol.blur();
+            button.blur();
         }
         ;
     });
@@ -143,7 +137,6 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             form.submit();
         else {
             filterTable(table, form, wrapper);
-            createPaginationButttons(wrapper, pagination);
             populateDataQueries(table, form);
         }
         // Pass post data back to the page
@@ -176,7 +169,6 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         }
         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);
-            createPaginationButttons(wrapper, pagination);
             populateDataQueries(table, form);
         }
         else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')) {
@@ -223,7 +215,15 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
                     case "radio":
                     case "checkbox":
                         if (frm_elements[i].checked) {
-                            frm_elements[i].checked = false;
+                            let input = frm_elements[i];
+                            let id = input.getAttribute('id');
+                            let label = document.querySelector(`[for="${id}"`);
+                            if (label.querySelector('iam-card')) {
+                                let card = label.querySelector('iam-card');
+                                let clickEvent = new Event('click');
+                                card.dispatchEvent(clickEvent);
+                            }
+                            input.checked = false;
                         }
                         break;
                     case "select-one":
@@ -235,10 +235,6 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
                         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);
@@ -486,10 +482,9 @@ export const filterTable = (table, form, wrapper) => {
             row.classList.add('filtered--show');
     });
     if (wrapper) {
-        wrapper.setAttribute('data-page', page);
-        wrapper.setAttribute('data-pages', Math.ceil(matched / showRows));
         wrapper.setAttribute('data-total', matched);
         wrapper.setAttribute('data-show', showRows);
+        wrapper.setAttribute('data-page', page);
     }
 };
 export const populateDataQueries = (table, form, wrapper) => {
@@ -540,32 +535,32 @@ export const populateDataQueries = (table, form, wrapper) => {
 };
 // Pagination
 export const addPaginationEventListeners = function (table, form, pagination, wrapper) {
-    pagination.addEventListener('click', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('[data-page]')) {
-            event.preventDefault();
-            let paginationInput = form.querySelector('[data-pagination]');
-            let newPage = event.target.closest('[data-page]').getAttribute('data-page');
-            paginationInput.value = newPage;
-            wrapper.setAttribute('data-page', newPage);
-            form.dispatchEvent(new Event("paginate"));
-            if (table.hasAttribute('data-show-history')) {
-                const url = new URL(location);
-                url.searchParams.set("page", newPage);
-                history.pushState({ 'type': 'pagination', 'form': form.getAttribute('id'), 'page': newPage }, "", url);
-            }
-            // scroll back to the top of the table
+    pagination.addEventListener('update-page', (event) => {
+        let paginationInput = form.querySelector('[data-pagination]');
+        let newPage = event.detail.page;
+        // Set the filter value
+        paginationInput.value = newPage;
+        form.dispatchEvent(new Event("paginate"));
+        // Reset the data attribute
+        wrapper.setAttribute('data-page', newPage);
+        if (table.hasAttribute('data-show-history')) {
+            const url = new URL(location);
+            url.searchParams.set("page", newPage);
+            history.pushState({ 'type': 'pagination', 'form': form.getAttribute('id'), 'page': newPage }, "", url);
+        }
+        // scroll back to the top of the table
+        if (!wrapper.hasAttribute('data-no-scroll')) {
             const yOffset = -250;
             const y = table.getBoundingClientRect().top + window.pageYOffset + yOffset;
             window.scrollTo({ top: y, behavior: 'smooth' });
         }
-        if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')) {
-            event.preventDefault();
-            let showInput = form.querySelector('[data-show]');
-            let showRows = event.target.closest('[data-show]').getAttribute('data-show');
-            showInput.value = showRows;
-            wrapper.setAttribute('data-show', showRows);
-            form.dispatchEvent(new Event("submit"));
-        }
+    });
+    pagination.addEventListener('update-show', (event) => {
+        let showInput = form.querySelector('[data-show]');
+        let showRows = event.detail.show;
+        showInput.value = showRows;
+        wrapper.setAttribute('data-show', showRows);
+        form.dispatchEvent(new Event("submit"));
     });
 };
 // Export CSV Data
@@ -613,7 +608,7 @@ export const exportAsCSV = function (table) {
 // After table is loaded
 export const makeTableFunctional = function (table, form, pagination, wrapper) {
     addDataAttributes(table);
-    createMobileButton(table);
+    createMobileButton(table, wrapper);
     populateDataQueries(table, form, wrapper);
     // Work out the largest width of the CTA's in the last column
     if (wrapper && wrapper.classList.contains('table--cta')) {
@@ -686,6 +681,9 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
         // Create a new controller so it can be aborted if new fetch made
         window.controller[ajaxURL] = new AbortController();
         const { signal } = controller[ajaxURL];
+        // Set loading on the pagination
+        pagination.setAttribute('data-loading', 'true');
+        form.classList.add('processing');
         try {
             yield fetch(ajaxURL + '?' + queryString, {
                 signal: signal,
@@ -701,7 +699,7 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                 let schema = form.hasAttribute('data-schema') ? form.getAttribute('data-schema') : 'data';
                 let totalNumberSchema = form.hasAttribute('data-schema-total') ? form.getAttribute('data-schema-total') : 'meta.total';
                 let currentPageSchema = form.hasAttribute('data-schema-page') ? form.getAttribute('data-schema-page') : 'meta.current_page';
-                let totalNumber = resolvePath(response, totalNumberSchema, 1);
+                let totalNumber = resolvePath(response, totalNumberSchema, 15);
                 let currentPage = resolvePath(response, currentPageSchema, 1);
                 let data = resolvePath(response, schema);
                 let emptyMsg = wrapper.hasAttribute('data-empty-msg') ? wrapper.getAttribute('data-empty-msg') : "No results found";
@@ -753,9 +751,7 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                     // Add data to the pagination 
                     wrapper.setAttribute('data-total', parseInt(totalNumber));
                     wrapper.setAttribute('data-page', parseInt(currentPage));
-                    wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
                     makeTableFunctional(table, form, pagination, wrapper);
-                    createPaginationButttons(wrapper, pagination);
                     Array.from(form.querySelectorAll('[data-ajax-query]')).forEach((queryElement, index) => {
                         let totalNumber = resolvePath(response, queryElement.getAttribute('data-ajax-query'), '');
                         if (queryElement.hasAttribute('data-total'))
@@ -777,6 +773,9 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                 else {
                     tbody.innerHTML = '<tr><td colspan="100%"><span>Error loading table</span></td></tr>';
                 }
+                // Remove loading on the pagination
+                pagination.removeAttribute('data-loading');
+                form.classList.remove('processing');
             });
         }
         catch (error) {

package/assets/js/modules/tabs.js

@@ -8,11 +8,15 @@ export const createTabsLinks = function (tabsElement) {
     if (!tabLinks) {
         tabLinks = document.createElement('div');
         tabLinks.classList.add('tabs__links');
-        tabsElement.prepend(tabLinks);
+        let tabLinksWrapper = document.createElement('div');
+        tabLinksWrapper.classList.add('tabs__links__wrapper');
+        tabLinksWrapper.prepend(tabLinks);
+        tabsElement.prepend(tabLinksWrapper);
     }
     // Create the tab buttons from the summary titles
     details.forEach((detail, index) => {
         let summary = detail.querySelector(':scope > summary');
+        let isDisabled = summary.classList.contains('disabled');
         summary.classList.add('visually-hidden');
         let button = document.createElement('button');
         if (detail.hasAttribute('id')) {
@@ -26,6 +30,9 @@ export const createTabsLinks = function (tabsElement) {
         button.classList.add('link');
         button.setAttribute('data-index', index);
         button.setAttribute('tabindex', '-1');
+        if (isDisabled) {
+            button.classList.add('disabled');
+        }
         tabLinks.appendChild(button);
     });
 };
@@ -39,6 +46,8 @@ export const setTabsEventHandlers = function (tabsElement) {
     buttons.forEach((button) => {
         button.addEventListener("click", (e) => {
             e.preventDefault();
+            if (button.classList.contains('disabled'))
+                return false;
             buttons.forEach((buttonLoopItem) => {
                 let buttonPressed = buttonLoopItem == button ? true : false;
                 buttonLoopItem.setAttribute('aria-pressed', buttonPressed);