@iamproperty/components 3.7.1 → 3.7.3

package/assets/js/modules/table.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 // @ts-nocheck
 import { zeroPad, isNumeric, ucfirst } from "./helpers.js";
 import createPaginationButttons from "./pagination.js";
@@ -30,16 +39,15 @@ export const addDataAttributes = (table) => {
 };
 export const getLargestLastColWidth = (table) => {
     let largestWidth = 0;
-    Array.from(table.querySelectorAll('tr')).forEach((row, index) => {
+    Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
         let htmlStyles = window.getComputedStyle(document.querySelector('html'));
         let lastColChild = row.querySelector(':scope > *:last-child > *:first-child');
         if (lastColChild) {
+            lastColChild.classList.add('text-nowrap');
             let responsiveWidth = lastColChild.offsetWidth / parseFloat(htmlStyles.fontSize);
-            responsiveWidth += 1.5;
+            responsiveWidth += 1.7;
             largestWidth = largestWidth > responsiveWidth ? largestWidth : responsiveWidth;
         }
-        let rowHeight = row.offsetHeight / parseFloat(htmlStyles.fontSize);
-        row.style.setProperty("--row-height", `${rowHeight}rem`);
     });
     return largestWidth;
 };
@@ -191,8 +199,8 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             let parentForm = mimicInput.closest('form');
             if (!forms.includes(parentForm))
                 forms.push(parentForm);
-            if (!fields.includes(mimicInput))
-                fields.push(mimicInput);
+            if (!fields.includes(mimicField))
+                fields.push(mimicField);
         });
     });
     // For each form add change listener
@@ -214,6 +222,14 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
                 const event = new Event("force");
                 form.dispatchEvent(event);
             }
+            // Check for empties
+            for (const field of fields) {
+                if (!formData.has(field) && parentForm.querySelector(`[name="${field}"]`)) {
+                    document.querySelector(`[data-mimic="${field}"]`).value = "";
+                    const event = new Event("force");
+                    form.dispatchEvent(event);
+                }
+            }
         };
         parentForm.addEventListener('force', (event) => {
             updateMimicInput();
@@ -542,76 +558,129 @@ export const makeTableFunctional = function (table, form, pagination, wrapper) {
     if (wrapper && wrapper.classList.contains('table--cta')) {
         const largestWidth = getLargestLastColWidth(table);
         wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
+        function outputsize() {
+            Array.from(table.querySelectorAll('tr')).forEach((row, index) => {
+                let rowHeight = row.offsetHeight;
+                row.style.setProperty("--row-height", `${rowHeight}px`);
+            });
+        }
+        new ResizeObserver(outputsize).observe(table);
     }
 };
 export const loadAjaxTable = function (table, form, pagination, wrapper) {
-    const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
-    let formData = new FormData(form);
-    let queryString = new URLSearchParams(formData).toString();
-    let columns = table.querySelectorAll('thead tr th');
-    let tbody = table.querySelector('tbody');
-    wrapper.classList.add('table--loading');
-    fetch(form.getAttribute('data-ajax') + '?' + queryString, {
-        method: 'get',
-        credentials: 'same-origin',
-        headers: new Headers({
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
-            'X-Requested-With': 'XMLHttpRequest'
-        })
-    }).then((response) => response.json()).then((response) => {
-        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 currentPage = resolvePath(response, currentPageSchema, 1);
-        let data = resolvePath(response, schema);
-        if (data) {
-            tbody.innerHTML = '';
-            data.forEach((row, index) => {
-                var table_row = document.createElement('tr');
-                columns.forEach((col, index) => {
-                    let cellOutput = '';
-                    var table_cell = document.createElement('td');
-                    // Add some data to help with the mobile layout design
-                    table_cell.setAttribute('data-label', col.innerText);
-                    if (col.getAttribute('data-output')) {
-                        var cellTemplate = col.getAttribute('data-output');
-                        // Use a regex to replace {var} with actual values from the json data
-                        cellOutput = cellTemplate.replace(new RegExp(/{(.*?)}/, "gm"), function (matched) { return resolvePath(row, matched.replace('{', '').replace('}', '')); });
+    return __awaiter(this, void 0, void 0, function* () {
+        const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
+        let formData = new FormData(form);
+        let queryString = new URLSearchParams(formData).toString();
+        let columns = table.querySelectorAll('thead tr th');
+        let tbody = table.querySelector('tbody');
+        let ajaxURL = form.getAttribute('data-ajax');
+        wrapper.classList.add('table--loading');
+        // Setup controller vars if not already set
+        if (!window.controller)
+            window.controller = [];
+        // Abort if controller already present for this url
+        if (window.controller[ajaxURL])
+            window.controller[ajaxURL].abort();
+        // Create a new controller so it can be aborted if new fetch made
+        window.controller[ajaxURL] = new AbortController();
+        const { signal } = controller[ajaxURL];
+        try {
+            yield fetch(ajaxURL + '?' + queryString, {
+                signal: signal,
+                method: 'get',
+                credentials: 'same-origin',
+                headers: new Headers({
+                    'Content-Type': 'application/json',
+                    Accept: 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                })
+            })
+                .then((response) => response.json()).then((response) => {
+                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 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";
+                if (data) {
+                    tbody.innerHTML = '';
+                    data.forEach((row, index) => {
+                        var table_row = document.createElement('tr');
+                        columns.forEach((col, index) => {
+                            let cellOutput = '';
+                            var table_cell = document.createElement('td');
+                            // Add some data to help with the mobile layout design
+                            table_cell.setAttribute('data-label', col.innerText);
+                            if (col.getAttribute('data-output')) {
+                                var cellTemplate = col.getAttribute('data-output');
+                                // Use a regex to replace {var} with actual values from the json data
+                                cellOutput = cellTemplate.replace(new RegExp(/{(.*?)}/, "gm"), function (matched) { return resolvePath(row, matched.replace('{', '').replace('}', '')); });
+                            }
+                            // If an output array is defined then the content is going to made of of multiple values from an array
+                            if (col.hasAttribute('data-output-array')) {
+                                var cellTemplate = col.getAttribute('data-output');
+                                let arrValue = resolvePath(row, cellTemplate.replace('{', '').replace('}', ''));
+                                cellOutput = "";
+                                arrValue.forEach((rowValue, i) => {
+                                    let cellTemplateValue = col.getAttribute('data-output-array');
+                                    let cellOutputValue = "";
+                                    // If we need to transform some of the data
+                                    if (col.hasAttribute('data-output-array-property') && col.hasAttribute('data-output-array-transform')) {
+                                        const propertyValue = resolvePath(rowValue, col.getAttribute('data-output-array-property'));
+                                        const transforms = JSON.parse(col.getAttribute('data-output-array-transform'));
+                                        const transformValue = transforms[propertyValue];
+                                        cellOutputValue = cellTemplateValue.replace(`{${col.getAttribute('data-output-array-property')}}`, transformValue);
+                                    }
+                                    cellOutputValue = cellOutputValue.replace(new RegExp(/{(.*?)}/, "gm"), function (matched) { return resolvePath(rowValue, matched.replace('{', '').replace('}', '')); });
+                                    cellOutput += cellOutputValue;
+                                });
+                            }
+                            if (col.hasAttribute('data-transform')) {
+                                const transforms = JSON.parse(col.getAttribute('data-transform'));
+                                cellOutput = transforms[cellOutput];
+                                if (!cellOutput && col.hasAttribute('data-default'))
+                                    cellOutput = col.getAttribute('data-default');
+                            }
+                            table_cell.innerHTML = cellOutput;
+                            table_row.appendChild(table_cell);
+                        });
+                        tbody.appendChild(table_row);
+                    });
+                    createSearchDataList(table, form);
+                    // 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);
+                    if (parseInt(totalNumber) == 0) {
+                        tbody.innerHTML = `<tr><td colspan="100%"><span>${emptyMsg}</span></td></tr>`;
                     }
-                    if (col.hasAttribute('data-transform')) {
-                        const transforms = JSON.parse(col.getAttribute('data-transform'));
-                        cellOutput = transforms[cellOutput];
-                        if (!cellOutput && col.hasAttribute('data-default'))
-                            cellOutput = col.getAttribute('data-default');
-                    }
-                    table_cell.innerHTML = cellOutput;
-                    table_row.appendChild(table_cell);
-                });
-                tbody.appendChild(table_row);
+                    wrapper.classList.remove('table--loading');
+                    window.dataLayer = window.dataLayer || [];
+                    window.dataLayer.push({
+                        "event": "Ajax table loaded",
+                        "url": ajaxURL,
+                        "formData": queryString
+                    });
+                }
+                else {
+                    tbody.innerHTML = '<tr><td colspan="100%"><span>Error loading table</span></td></tr>';
+                }
+                // Pass post data back to the page
+                if (form.hasAttribute('data-ajax-post')) {
+                    const http = new XMLHttpRequest();
+                    http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
+                    http.send();
+                }
             });
-            createSearchDataList(table, form);
-            // 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);
-            if (response.data.length == 0) {
-                tbody.innerHTML = '<tr><td colspan="100%"><span class="h4 m-0">No results found</span></td></tr>';
-            }
-            wrapper.classList.remove('table--loading');
         }
-        else {
-            tbody.innerHTML = '<tr><td colspan="100%"><span class="h6 m-0">Error loading table</span></td></tr>';
+        catch (error) {
+            console.log(error);
         }
     });
-    if (form.hasAttribute('data-ajax-post')) {
-        const http = new XMLHttpRequest();
-        http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
-        http.send();
-    }
 };
 export const formatCell = (format, cellOutput) => {
     switch (format) {