@iamproperty/components 3.6.0 → 3.7.1

package/assets/js/modules/table.js

@@ -7,7 +7,7 @@ export const addDataAttributes = (table) => {
     const colRows = Array.from(table.querySelectorAll('tbody tr'));
     colRows.forEach((row, index) => {
         const cells = Array.from(row.querySelectorAll('th, td'));
-        const statuses = ['Low', 'Medium', 'High', 'N/A', 'Pending', 'Verified', 'Incomplete', 'Completed', 'Requires approval'];
+        const statuses = ['0', 'low', 'medium', 'high', 'unknown', 'n/a', 'pending', 'verified', 'incomplete', 'completed', 'requires approval'];
         cells.forEach((cell, cellIndex) => {
             const heading = colHeadings[cellIndex];
             if (typeof heading != "undefined") {
@@ -19,10 +19,10 @@ export const addDataAttributes = (table) => {
                     cell.setAttribute('class', heading.getAttribute('data-td-class'));
                 if (heading.hasAttribute('data-format')) {
                     cell.setAttribute('data-format', heading.getAttribute('data-format'));
-                    cell.innerHTML = formatCell('date', cell.textContent.trim()); //Make sure date format is consistent
+                    cell.innerHTML = formatCell(heading.getAttribute('data-format'), cell.textContent.trim()); //Make sure date format is consistent
                 }
-                if (statuses.includes(cell.textContent.trim())) {
-                    cell.setAttribute('data-content', cell.textContent.trim());
+                if (statuses.includes(cell.textContent.trim().toLowerCase())) {
+                    cell.setAttribute('data-content', cell.textContent.trim().toLowerCase());
                 }
             }
         });
@@ -46,6 +46,8 @@ export const getLargestLastColWidth = (table) => {
 export const createMobileButton = (table) => {
     if (table.closest('.table--fullwidth'))
         return false;
+    if (table.querySelectorAll('thead tr th').length < 4)
+        return false;
     Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
         let firstCol = row.querySelector(':scope > :is(td,th):first-child');
         let colContent = firstCol.textContent;
@@ -98,9 +100,16 @@ 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 () {
-        if (form.hasAttribute('data-ajax'))
+    let formSubmit = function (paginate = false) {
+        if (form.hasAttribute('data-ajax')) {
+            // Default back to page 1
+            if (!paginate) {
+                let paginationInput = form.querySelector('[data-pagination]');
+                paginationInput.value = 1;
+                wrapper.setAttribute('data-page', 1);
+            }
             loadAjaxTable(table, form, pagination, wrapper);
+        }
         else if (form.hasAttribute('data-submit'))
             form.submit();
         else {
@@ -137,6 +146,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')) {
             formSubmit();
         }
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-mimic]')) {
+            formSubmit();
+        }
     });
     form.addEventListener('click', (event) => {
         clearTimeout(timer);
@@ -166,6 +178,50 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     form.addEventListener('force', (event) => {
         formSubmit();
     });
+    form.addEventListener('paginate', (event) => {
+        formSubmit(true);
+    });
+    // Mmimic fields
+    let forms = [];
+    let fields = [];
+    // Collect the forms that we need to add an event listener for.
+    Array.from(form.querySelectorAll('[data-mimic]')).forEach((input, index) => {
+        let mimicField = input.getAttribute('data-mimic');
+        Array.from(document.querySelectorAll(`[name="${mimicField}"]`)).forEach((mimicInput, index) => {
+            let parentForm = mimicInput.closest('form');
+            if (!forms.includes(parentForm))
+                forms.push(parentForm);
+            if (!fields.includes(mimicInput))
+                fields.push(mimicInput);
+        });
+    });
+    // For each form add change listener
+    forms.forEach((parentForm, index) => {
+        const updateMimicInput = function () {
+            let mimickedAlready = [];
+            let formData = new FormData(parentForm);
+            let i = 1;
+            for (const [key, value] of formData) {
+                if (document.querySelector(`[data-mimic="${key}"]`) && !mimickedAlready.includes(key)) {
+                    mimickedAlready.push(key);
+                    document.querySelector(`[data-mimic="${key}"]`).value = value;
+                }
+                else if (document.querySelector(`[data-mimic="${key}"]`))
+                    document.querySelector(`[data-mimic="${key}"]`).value += "," + value;
+                i++;
+            }
+            for (const value of mimickedAlready) {
+                const event = new Event("force");
+                form.dispatchEvent(event);
+            }
+        };
+        parentForm.addEventListener('force', (event) => {
+            updateMimicInput();
+        });
+        parentForm.addEventListener('change', (event) => {
+            updateMimicInput();
+        });
+    });
 };
 export const sortTable = (table, form, savedTableBody) => {
     if (form.getAttribute('data-ajax')) {
@@ -246,10 +302,11 @@ export const filterTable = (table, form, wrapper) => {
                 filters[filterInput.getAttribute('data-filter')].push(value);
             }
         }
-        else if (filterInput.value) {
-            if (!filters[filterInput.getAttribute('data-filter')])
-                filters[filterInput.getAttribute('data-filter')] = new Array();
-            filters[filterInput.getAttribute('data-filter')].push(filterInput.value);
+        else if (filterInput && filterInput.value) {
+            let dataFilter = filterInput.getAttribute('data-filter');
+            if (!filters[dataFilter])
+                filters[dataFilter] = new Array();
+            filters[dataFilter].push(filterInput.value);
         }
     });
     // Add search columns too
@@ -269,11 +326,8 @@ export const filterTable = (table, form, wrapper) => {
             element.innerHTML += `(${filters.length})`;
         });
     }
-    // Stop function if no filters identified
-    if (!Object.keys(searches).length && !Object.keys(filters).length)
-        return false;
-    table.classList.add('table--filtered');
     // Filter the table
+    table.classList.add('table--filtered');
     for (const [key, filterValue] of Object.entries(filters)) {
         Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
             let isMatched = false;
@@ -354,7 +408,8 @@ export const filterTable = (table, form, wrapper) => {
         matched++;
         row.classList.add('filtered--matched');
         // pagination bit 
-        if (Math.ceil(matched / showRows) == parseInt(page))
+        let matchesPage = Math.ceil(matched / showRows);
+        if (matchesPage == parseInt(page))
             row.classList.add('filtered--show');
     });
     if (wrapper) {
@@ -364,13 +419,16 @@ export const filterTable = (table, form, wrapper) => {
         wrapper.setAttribute('data-show', showRows);
     }
 };
-export const populateDataQueries = (table, form) => {
+export const populateDataQueries = (table, form, wrapper) => {
     const dataQueries = Array.from(form.querySelectorAll('[data-query]'));
     dataQueries.forEach((queryElement, index) => {
         let query = queryElement.getAttribute('data-query');
         let numberOfMatchedRows;
         if (query == 'total') {
-            numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr').length : table.querySelectorAll('tbody tr').length;
+            if (wrapper.hasAttribute('data-total'))
+                numberOfMatchedRows = wrapper.getAttribute('data-total');
+            else
+                numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr').length : table.querySelectorAll('tbody tr').length;
         }
         else if (!query.includes(' == ') && query.includes(' & ')) {
             let queries = query.split(' & ');
@@ -416,10 +474,12 @@ export const addPaginationEventListeners = function (table, form, pagination, wr
             let newPage = event.target.closest('[data-page]').getAttribute('data-page');
             paginationInput.value = newPage;
             wrapper.setAttribute('data-page', newPage);
-            form.dispatchEvent(new Event("submit"));
-            const url = new URL(location);
-            url.searchParams.set("page", newPage);
-            history.pushState({ 'type': 'pagination', 'form': form.getAttribute('id'), 'page': newPage }, "", url);
+            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);
+            }
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')) {
             event.preventDefault();
@@ -475,9 +535,9 @@ export const exportAsCSV = function (table) {
 };
 // After table is loaded
 export const makeTableFunctional = function (table, form, pagination, wrapper) {
-    createMobileButton(table);
     addDataAttributes(table);
-    populateDataQueries(table, form);
+    createMobileButton(table);
+    populateDataQueries(table, form, wrapper);
     // Work out the largest width of the CTA's in the last column
     if (wrapper && wrapper.classList.contains('table--cta')) {
         const largestWidth = getLargestLastColWidth(table);
@@ -486,10 +546,12 @@ export const makeTableFunctional = function (table, form, pagination, wrapper) {
 };
 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 queryString = new URLSearchParams(new FormData(form)).toString();
+    let formData = new FormData(form);
+    let queryString = new URLSearchParams(formData).toString();
     let columns = table.querySelectorAll('thead tr th');
     let tbody = table.querySelector('tbody');
-    fetch(form.getAttribute('data-ajax'), {
+    wrapper.classList.add('table--loading');
+    fetch(form.getAttribute('data-ajax') + '?' + queryString, {
         method: 'get',
         credentials: 'same-origin',
         headers: new Headers({
@@ -498,9 +560,15 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
             'X-Requested-With': 'XMLHttpRequest'
         })
     }).then((response) => response.json()).then((response) => {
-        if (response.data) {
+        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 = '';
-            response.data.forEach((row, index) => {
+            data.forEach((row, index) => {
                 var table_row = document.createElement('tr');
                 columns.forEach((col, index) => {
                     let cellOutput = '';
@@ -512,8 +580,11 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                         // 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 (col.hasAttribute('data-format')) {
-                        cellOutput = formatCell(col.getAttribute('data-format'), cellOutput);
+                    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);
@@ -522,28 +593,33 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
             });
             createSearchDataList(table, form);
             // Add data to the pagination 
-            makeTableFunctional(table, form, pagination, wrapper);
-            wrapper.setAttribute('data-total', (response.meta.total ? response.meta.total : 1));
-            wrapper.setAttribute('data-page', (response.meta.current_page ? response.meta.current_page : 1));
+            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>';
         }
     });
+    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) {
+        case 'datetime':
+            return new Date(cellOutput).toLocaleDateString('en-gb', { weekday: 'short', year: "2-digit", month: "long", day: "numeric", }) + " " + new Date(cellOutput).toLocaleTimeString("en-gb", { hour: "2-digit", minute: "2-digit" });
         case 'date':
-            cellOutput = new Date(cellOutput).toLocaleDateString('en-gb', { year: "2-digit", month: "long", day: "numeric" });
-            break;
+            return new Date(cellOutput).toLocaleDateString('en-gb', { year: "2-digit", month: "long", day: "numeric" });
         case 'capitalise':
-            cellOutput = ucfirst(cellOutput);
-            break;
+            return cellOutput = ucfirst(cellOutput);
     }
-    return cellOutput;
 };

package/assets/js/modules/tabs.js

@@ -35,11 +35,9 @@ export const setTabsEventHandlers = function (tabsElement) {
     let buttons = tabsElement.querySelectorAll(':scope .tabs__links > .link');
     if (tabsElement.shadowRoot)
         buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > .link');
-    console.log(buttons);
     // Set the on click for the tab buttons, these will open the details box it matches too
     buttons.forEach((button) => {
         button.addEventListener("click", (e) => {
-            console.log('hi');
             e.preventDefault();
             buttons.forEach((buttonLoopItem) => {
                 let buttonPressed = buttonLoopItem == button ? true : false;