@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/js/modules/table.js

@@ -8,20 +8,42 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 // @ts-nocheck
-import { zeroPad, isNumeric, ucfirst, resolvePath } from "./helpers.js";
+import { zeroPad, isNumeric, ucfirst, resolvePath } from './helpers.js';
 // Basic functionality needed
 export const addDataAttributes = (table) => {
     const colHeadings = Array.from(table.querySelectorAll('thead th'));
     const colRows = Array.from(table.querySelectorAll('tbody tr'));
     colRows.forEach((row, index) => {
         const cells = Array.from(row.querySelectorAll('th, td'));
-        const statuses = ['0', 'low', 'medium', 'high', 'unknown', 'n/a', 'pending', 'verified', 'due', 'overdue', 'incomplete', 'complete', 'completed', 'approval required', 'upcoming', 'requires approval', 'to do', 'on track', 'not started', 'warning', 'error'];
+        const statuses = [
+            '0',
+            'low',
+            'medium',
+            'high',
+            'unknown',
+            'n/a',
+            'pending',
+            'verified',
+            'due',
+            'overdue',
+            'incomplete',
+            'complete',
+            'completed',
+            'approval required',
+            'upcoming',
+            'requires approval',
+            'to do',
+            'on track',
+            'not started',
+            'warning',
+            'error',
+        ];
         cells.forEach((cell, cellIndex) => {
             const heading = colHeadings[cellIndex];
-            if (typeof heading != "undefined") {
-                let tempDiv = document.createElement("div");
+            if (typeof heading != 'undefined') {
+                const tempDiv = document.createElement('div');
                 tempDiv.innerHTML = heading.innerHTML;
-                let headingText = tempDiv.textContent || tempDiv.innerText || "";
+                const headingText = tempDiv.textContent || tempDiv.innerText || '';
                 cell.setAttribute('data-label', headingText);
                 if (heading.hasAttribute('data-td-class'))
                     cell.setAttribute('class', heading.getAttribute('data-td-class'));
@@ -39,8 +61,8 @@ export const addDataAttributes = (table) => {
 export const getLargestLastColWidth = (table) => {
     let largestWidth = 0;
     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');
+        const htmlStyles = window.getComputedStyle(document.querySelector('html'));
+        const lastColChild = row.querySelector(':scope > *:last-child > *:first-child');
         if (lastColChild) {
             lastColChild.classList.add('text-nowrap');
             let responsiveWidth = lastColChild.offsetWidth / parseFloat(htmlStyles.fontSize);
@@ -69,27 +91,26 @@ export const createMobileButton = (table, wrapper) => {
 export const addTableEventListeners = (table) => {
     table.addEventListener('click', (event) => {
         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');
+            const button = event.target.closest('[data-expand-button]');
+            const tableRow = button.closest('tr');
             button.toggleAttribute('aria-expanded');
-            if (tableRow.getAttribute('data-view') == "full")
+            if (tableRow.getAttribute('data-view') == 'full')
                 tableRow.setAttribute('data-view', 'default');
             else
                 tableRow.setAttribute('data-view', 'full');
             button.blur();
         }
-        ;
     });
 };
 // Filters
 export const createSearchDataList = (table, form) => {
-    let searchInput = form.querySelector('input[data-search]');
+    const searchInput = form.querySelector('input[data-search]');
     if (!searchInput)
         return false;
     const searchID = searchInput.getAttribute('id');
     const searchableColumns = searchInput.getAttribute('data-search').split(',');
-    let inputWrapper = searchInput.parentNode;
-    let searchableTerms = {};
+    const inputWrapper = searchInput.parentNode;
+    const searchableTerms = {};
     searchableColumns.forEach((columnHeading, index) => {
         Array.from(table.querySelectorAll('td[data-label="' + columnHeading.trim() + '"]')).forEach((td, index) => {
             if (td.querySelector('.td__content'))
@@ -102,23 +123,25 @@ export const createSearchDataList = (table, form) => {
     searchInput.setAttribute('autocomplete', 'off');
     if (!inputWrapper.querySelector('datalist'))
         inputWrapper.innerHTML += `<datalist id="${searchID}_list"></datalist>`;
-    inputWrapper.querySelector('datalist').innerHTML = `${Object.keys(searchableTerms).map(term => `<option value="${term}"></option>`).join("")}`;
+    inputWrapper.querySelector('datalist').innerHTML = `${Object.keys(searchableTerms)
+        .map((term) => `<option value="${term}"></option>`)
+        .join('')}`;
 };
 export const addFilterEventListeners = (table, form, pagination, wrapper, savedTableBody) => {
-    var timer;
+    let timer;
     // Check what conditions are set on the table to see what the form actions are
-    let formSubmit = function (event, paginate = false) {
+    const formSubmit = function (event, paginate = false) {
         if (wrapper.hasAttribute('data-no-submit')) {
             return false;
         }
         if (form.classList.contains('processing'))
             return false;
         Array.from(form.querySelectorAll('iam-applied-filters')).forEach((element, index) => {
-            var event = new Event('tags-set');
+            const event = new Event('tags-set');
             element.dispatchEvent(event);
         });
         // Before submitting check if any duplicate checkboxes within the filters dialog needs to upset the original input
-        if (event.type == "submit") {
+        if (event.type == 'submit') {
             form.classList.add('processing');
             Array.from(form.querySelectorAll('[data-duplicate]')).forEach((element, index) => {
                 const id = element.getAttribute('data-duplicate');
@@ -126,7 +149,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
                 const card = document.querySelector(`[for="${id}"] iam-card`);
                 if (input.checked != element.checked) {
                     if (card) {
-                        let clickEvent = new Event('click');
+                        const clickEvent = new Event('click');
                         card.dispatchEvent(clickEvent);
                     }
                     else {
@@ -139,7 +162,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         if (form.hasAttribute('data-ajax')) {
             // Default back to page 1
             if (!paginate) {
-                let paginationInput = form.querySelector('[data-pagination]');
+                const paginationInput = form.querySelector('[data-pagination]');
                 paginationInput.value = 1;
                 wrapper.setAttribute('data-page', 1);
             }
@@ -154,8 +177,8 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         }
         // Pass post data back to the page
         if (form.hasAttribute('data-ajax-post')) {
-            let formData = new FormData(form);
-            let queryString = new URLSearchParams(formData).toString();
+            const formData = new FormData(form);
+            const queryString = new URLSearchParams(formData).toString();
             const http = new XMLHttpRequest();
             http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
             http.send();
@@ -180,7 +203,6 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
                 formSubmit(event);
             }, 500);
         }
-        ;
     });
     form.addEventListener('change', (event) => {
         clearTimeout(timer);
@@ -193,14 +215,21 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         if (event && event.target instanceof HTMLElement && event.target.closest('input[data-search]')) {
             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
+        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);
             populateDataQueries(table, form);
         }
-        else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')) {
+        else if (event &&
+            event.target instanceof HTMLElement &&
+            event.target.closest('[data-filter]') &&
+            event.target.closest('form .dialog__wrapper > dialog')) {
             formSubmit(event);
         }
-        else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')) {
+        else if (event &&
+            event.target instanceof HTMLElement &&
+            event.target.closest('[data-filter]') &&
+            !event.target.closest('form dialog')) {
             formSubmit(event);
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')) {
@@ -210,7 +239,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             formSubmit(event);
         }
         if (event && event.target instanceof HTMLElement && event.target.hasAttribute('id')) {
-            let id = event.target.getAttribute('id');
+            const id = event.target.getAttribute('id');
             if (document.querySelector(`[data-duplicate="${id}"]`)) {
                 document.querySelector(`[data-duplicate="${id}"]`).checked = event.target.checked;
             }
@@ -219,8 +248,8 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     form.addEventListener('click', (event) => {
         clearTimeout(timer);
         if (event && event.target instanceof HTMLElement && event.target.closest('dialog button:not([type="button"])')) {
-            let button = event.target.closest('dialog button:not([type="button"])');
-            let modal = button.closest('dialog');
+            const button = event.target.closest('dialog button:not([type="button"])');
+            const modal = button.closest('dialog');
             modal.close();
         }
         // Prevent the form from submitting
@@ -232,37 +261,37 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             form.classList.add('processing');
             // Make sure any applied filters have been removed
             Array.from(form.querySelectorAll('.applied-filters')).forEach((filters, index) => {
-                filters.innerHTML = "";
+                filters.innerHTML = '';
             });
             // Make sure cards are unlicked
-            let frm_elements = form.elements;
+            const 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";
+                const 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 = "";
+                    case 'text':
+                    case 'password':
+                    case 'textarea':
+                        frm_elements[i].value = '';
                         break;
-                    case "radio":
-                    case "checkbox":
+                    case 'radio':
+                    case 'checkbox':
                         if (frm_elements[i].checked) {
-                            let input = frm_elements[i];
-                            let id = input.getAttribute('id');
-                            let label = document.querySelector(`[for="${id}"`);
+                            const input = frm_elements[i];
+                            const id = input.getAttribute('id');
+                            const label = document.querySelector(`[for="${id}"`);
                             if (label.querySelector('iam-card')) {
-                                let card = label.querySelector('iam-card');
-                                let clickEvent = new Event('click');
+                                const card = label.querySelector('iam-card');
+                                const clickEvent = new Event('click');
                                 card.dispatchEvent(clickEvent);
                             }
                             input.checked = false;
                         }
                         break;
-                    case "select-one":
-                    case "select-multi":
+                    case 'select-one':
+                    case 'select-multi':
                         frm_elements[i].selectedIndex = -1;
                         break;
-                    case "hidden":
+                    case 'hidden':
                     default:
                         break;
                 }
@@ -288,13 +317,13 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         formSubmit(event, true);
     });
     // Mmimic fields
-    let forms = [];
-    let fields = [];
+    const forms = [];
+    const 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');
+        const mimicField = input.getAttribute('data-mimic');
         Array.from(document.querySelectorAll(`[name="${mimicField}"]`)).forEach((mimicInput, index) => {
-            let parentForm = mimicInput.closest('form');
+            const parentForm = mimicInput.closest('form');
             if (!forms.includes(parentForm)) {
                 forms.push(parentForm);
             }
@@ -306,8 +335,8 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     // For each form add change listener
     forms.forEach((parentForm, index) => {
         const updateMimicInput = function () {
-            let mimickedAlready = [];
-            let formData = new FormData(parentForm);
+            const mimickedAlready = [];
+            const formData = new FormData(parentForm);
             let i = 1;
             for (const [key, value] of formData) {
                 if (document.querySelector(`[data-mimic="${key}"]`) && !mimickedAlready.includes(key)) {
@@ -315,18 +344,18 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
                     document.querySelector(`[data-mimic="${key}"]`).value = value;
                 }
                 else if (document.querySelector(`[data-mimic="${key}"]`))
-                    document.querySelector(`[data-mimic="${key}"]`).value += "," + value;
+                    document.querySelector(`[data-mimic="${key}"]`).value += ',' + value;
                 i++;
             }
             for (const value of mimickedAlready) {
-                const event = new Event("force");
+                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");
+                    document.querySelector(`[data-mimic="${field}"]`).value = '';
+                    const event = new Event('force');
                     form.dispatchEvent(event);
                 }
             }
@@ -343,15 +372,15 @@ export const sortTable = (table, form, savedTableBody) => {
     if (form.getAttribute('data-ajax')) {
         return false;
     }
-    let tbody = table.querySelector('tbody');
+    const tbody = table.querySelector('tbody');
     let selectedOption = form.querySelector(`input[type="radio"][data-sort]:checked`);
     if (form.querySelector('select[data-sort]')) {
-        let select = form.querySelector('select[data-sort]');
+        const select = form.querySelector('select[data-sort]');
         selectedOption = form.querySelector(`select[data-sort] option:nth-child(${select.selectedIndex + 1})`);
     }
-    let sortBy = selectedOption.getAttribute('data-sort');
-    let order = selectedOption.getAttribute('data-order');
-    let format = selectedOption.getAttribute('data-format');
+    const sortBy = selectedOption.getAttribute('data-sort');
+    const order = selectedOption.getAttribute('data-order');
+    const format = selectedOption.getAttribute('data-format');
     if (!sortBy) {
         tbody.innerHTML = savedTableBody.innerHTML;
         addDataAttributes(table);
@@ -364,7 +393,9 @@ export const sortTable = (table, form, savedTableBody) => {
     // Create an array from the table rows, the index created is then used to sort the array
     let tableArr = [];
     Array.from(tbody.querySelectorAll('tr')).forEach((tableRow, index) => {
-        let rowIndex = tableRow.querySelector('td[data-label="' + sortBy + '"], th[data-label="' + sortBy + '"]').textContent.trim();
+        let rowIndex = tableRow
+            .querySelector('td[data-label="' + sortBy + '"], th[data-label="' + sortBy + '"]')
+            .textContent.trim();
         if (tableRow.querySelector('[data-label="' + sortBy + '"] .td__content')) {
             rowIndex = tableRow.querySelector('[data-label="' + sortBy + '"] .td__content').textContent.trim();
         }
@@ -376,19 +407,19 @@ export const sortTable = (table, form, savedTableBody) => {
             rowIndex = zeroPad(rowIndex, 10);
         }
         // If the sort format is date then lets transform the index to a sortable date (this is never displayed)
-        if (format && format == "date") {
+        if (format && format == 'date') {
             rowIndex = new Date(rowIndex);
         }
         const dataRow = {
             index: rowIndex,
-            row: tableRow
+            row: tableRow,
         };
         tableArr.push(dataRow);
     });
     // Sort array alphabetically
-    tableArr.sort((a, b) => (a.index > b.index) ? 1 : -1);
+    tableArr.sort((a, b) => (a.index > b.index ? 1 : -1));
     // Reverse if descending
-    if (order == "descending" || order == "desc") {
+    if (order == 'descending' || order == 'desc') {
         tableArr = tableArr.reverse();
     }
     // Create a string to return and populate the tbody
@@ -400,11 +431,11 @@ export const sortTable = (table, form, savedTableBody) => {
 };
 export const filterTable = (table, form, wrapper) => {
     table.classList.remove('table--filtered');
-    let filters = filterFilters(form);
-    let searches = [];
+    const filters = filterFilters(form);
+    const searches = [];
     let matched = 0;
-    let page = form.querySelector('[data-pagination]') ? parseInt(form.querySelector('[data-pagination]').value) : 1;
-    let showRows = form.querySelector('[data-show]') ? parseInt(form.querySelector('[data-show]').value) : 15;
+    const page = form.querySelector('[data-pagination]') ? parseInt(form.querySelector('[data-pagination]').value) : 1;
+    const showRows = form.querySelector('[data-show]') ? parseInt(form.querySelector('[data-show]').value) : 15;
     // Reset
     Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
         row.classList.remove('filtered');
@@ -414,10 +445,10 @@ export const filterTable = (table, form, wrapper) => {
     });
     // Add search columns too
     if (form.querySelector('input[data-search]')) {
-        let searchInput = form.querySelector('input[data-search]');
-        let searchColumns = form.querySelector('input[data-search]').getAttribute('data-search').split(',');
+        const searchInput = form.querySelector('input[data-search]');
+        const searchColumns = form.querySelector('input[data-search]').getAttribute('data-search').split(',');
         searchColumns.forEach((column, index) => {
-            searches.push({ 'column': `${column.trim()}`, 'value': `${searchInput.value}` });
+            searches.push({ column: `${column.trim()}`, value: `${searchInput.value}` });
         });
     }
     //Display the filter count
@@ -427,7 +458,7 @@ export const filterTable = (table, form, wrapper) => {
     });
     let filterCount = 0;
     Object.values(filters).forEach((filter, index) => {
-        if (typeof filter == "object" && Object.values(filter).length) {
+        if (typeof filter == 'object' && Object.values(filter).length) {
             filterCount += Object.values(filter).length;
         }
         else {
@@ -446,81 +477,83 @@ export const filterTable = (table, form, wrapper) => {
         Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
             let isMatched = false;
             filterValue.forEach((filter, index) => {
-                let filterTd = row.querySelector(`[data-label="${key}"]`);
+                const filterTd = row.querySelector(`[data-label="${key}"]`);
                 if (filter.includes('-date-from')) {
-                    let fromDate = new Date(filter.replace('-date-from', ''));
-                    let checkDate = new Date(filterTd.textContent.toLowerCase());
+                    const fromDate = new Date(filter.replace('-date-from', ''));
+                    const checkDate = new Date(filterTd.textContent.toLowerCase());
                     fromDate.setHours(0, 0, 0, 0);
                     checkDate.setHours(0, 0, 0, 0);
                     if (checkDate < fromDate) {
                         row.classList.add('less-than-from-date');
                         isMatched = false;
                     }
-                    else if (!row.classList.contains('less-than-from-date') && !row.classList.contains('greater-than-to-date')) {
+                    else if (!row.classList.contains('less-than-from-date') &&
+                        !row.classList.contains('greater-than-to-date')) {
                         isMatched = true;
                     }
                 }
                 else if (filter.includes('-date-to')) {
-                    let toDate = new Date(filter.replace('-date-to', ''));
-                    let checkDate = new Date(filterTd.textContent.toLowerCase());
+                    const toDate = new Date(filter.replace('-date-to', ''));
+                    const checkDate = new Date(filterTd.textContent.toLowerCase());
                     toDate.setHours(0, 0, 0, 0);
                     checkDate.setHours(0, 0, 0, 0);
                     if (checkDate > toDate) {
                         row.classList.add('greater-than-to-date');
                         isMatched = false;
                     }
-                    else if (!row.classList.contains('less-than-from-date') && !row.classList.contains('greater-than-to-date')) {
+                    else if (!row.classList.contains('less-than-from-date') &&
+                        !row.classList.contains('greater-than-to-date')) {
                         isMatched = true;
                     }
                 }
                 // Dynamic values
-                if (filter && filter == "$today") {
+                if (filter && filter == '$today') {
                     filter = formatCell('date', new Date());
                 }
-                else if (filter && filter == "$yesterday") {
-                    let yesterday = new Date();
+                else if (filter && filter == '$yesterday') {
+                    const yesterday = new Date();
                     yesterday.setDate(yesterday.getDate() - 1);
                     filter = formatCell('date', yesterday);
                 }
-                else if (filter && (filter == "$thisWeek" || filter == "$lastWeek")) {
-                    let today = new Date();
-                    let mondayThisWeek = new Date(today.setDate(today.getDate() - (today.getDay() - 1)));
-                    let sundayThisWeek = new Date(today.setDate(today.getDate() - today.getDay() + 7));
-                    let checkDate = new Date(filterTd.textContent.toLowerCase());
+                else if (filter && (filter == '$thisWeek' || filter == '$lastWeek')) {
+                    const today = new Date();
+                    const mondayThisWeek = new Date(today.setDate(today.getDate() - (today.getDay() - 1)));
+                    const sundayThisWeek = new Date(today.setDate(today.getDate() - today.getDay() + 7));
+                    const checkDate = new Date(filterTd.textContent.toLowerCase());
                     today.setHours(0, 0, 0, 0);
                     mondayThisWeek.setHours(0, 0, 0, 0);
                     sundayThisWeek.setHours(0, 0, 0, 0);
                     checkDate.setHours(0, 0, 0, 0);
-                    if (filter == "$thisWeek") {
-                        isMatched = (checkDate >= mondayThisWeek && checkDate <= sundayThisWeek);
+                    if (filter == '$thisWeek') {
+                        isMatched = checkDate >= mondayThisWeek && checkDate <= sundayThisWeek;
                     }
                     else {
-                        let mondayLastWeek = new Date(mondayThisWeek.setDate(mondayThisWeek.getDate() - 7));
-                        let sundayLastWeek = new Date(sundayThisWeek.setDate(sundayThisWeek.getDate() - 7));
+                        const mondayLastWeek = new Date(mondayThisWeek.setDate(mondayThisWeek.getDate() - 7));
+                        const sundayLastWeek = new Date(sundayThisWeek.setDate(sundayThisWeek.getDate() - 7));
                         mondayLastWeek.setHours(0, 0, 0, 0);
                         sundayLastWeek.setHours(0, 0, 0, 0);
-                        isMatched = (checkDate >= mondayLastWeek && checkDate <= sundayLastWeek);
+                        isMatched = checkDate >= mondayLastWeek && checkDate <= sundayLastWeek;
                     }
                 }
-                else if (filter && filter == "$thisMonth") {
-                    let today = new Date(), year = today.getFullYear(), month = today.getMonth();
-                    var firstDayMonth = new Date(year, month, 1);
-                    var lastDayMonth = new Date(year, month + 1, 0);
-                    let checkDate = new Date(filterTd.textContent.toLowerCase());
+                else if (filter && filter == '$thisMonth') {
+                    const today = new Date(), year = today.getFullYear(), month = today.getMonth();
+                    const firstDayMonth = new Date(year, month, 1);
+                    const lastDayMonth = new Date(year, month + 1, 0);
+                    const checkDate = new Date(filterTd.textContent.toLowerCase());
                     firstDayMonth.setHours(0, 0, 0, 0);
                     lastDayMonth.setHours(0, 0, 0, 0);
                     checkDate.setHours(0, 0, 0, 0);
-                    isMatched = (checkDate >= firstDayMonth && checkDate <= lastDayMonth);
+                    isMatched = checkDate >= firstDayMonth && checkDate <= lastDayMonth;
                 }
-                else if (filter && filter == "$lastMonth") {
-                    let today = new Date(), year = today.getFullYear(), month = today.getMonth();
-                    var firstDayLastMonth = new Date(year, month - 1, 1);
-                    var lastDayLastMonth = new Date(year, month, 0);
-                    let checkDate = new Date(filterTd.textContent.toLowerCase());
+                else if (filter && filter == '$lastMonth') {
+                    const today = new Date(), year = today.getFullYear(), month = today.getMonth();
+                    const firstDayLastMonth = new Date(year, month - 1, 1);
+                    const lastDayLastMonth = new Date(year, month, 0);
+                    const checkDate = new Date(filterTd.textContent.toLowerCase());
                     firstDayLastMonth.setHours(0, 0, 0, 0);
                     lastDayLastMonth.setHours(0, 0, 0, 0);
                     checkDate.setHours(0, 0, 0, 0);
-                    isMatched = (checkDate >= firstDayLastMonth && checkDate <= lastDayLastMonth);
+                    isMatched = checkDate >= firstDayLastMonth && checkDate <= lastDayLastMonth;
                 }
                 if (filterTd && filterTd.textContent.toLowerCase().includes(filter.replace('-', ' ').toLowerCase())) {
                     isMatched = true;
@@ -536,8 +569,10 @@ export const filterTable = (table, form, wrapper) => {
     Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
         let isSearched = searches.length > 0 && searches[0].value.length >= 3 ? false : true;
         searches.forEach((search, index) => {
-            let searchTd = row.querySelector(`[data-label="${search.column}"]`);
-            if (searchTd && search.value.length >= 3 && searchTd.textContent.toLowerCase().includes(search.value.toLowerCase())) {
+            const searchTd = row.querySelector(`[data-label="${search.column}"]`);
+            if (searchTd &&
+                search.value.length >= 3 &&
+                searchTd.textContent.toLowerCase().includes(search.value.toLowerCase())) {
                 isSearched = true;
             }
         });
@@ -549,8 +584,8 @@ export const filterTable = (table, form, wrapper) => {
     Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
         matched++;
         row.classList.add('filtered--matched');
-        // pagination bit 
-        let matchesPage = Math.ceil(matched / showRows);
+        // pagination bit
+        const matchesPage = Math.ceil(matched / showRows);
         if (matchesPage == parseInt(page)) {
             row.classList.add('filtered--show');
         }
@@ -564,18 +599,20 @@ export const filterTable = (table, form, wrapper) => {
 export const populateDataQueries = (table, form, wrapper) => {
     const dataQueries = Array.from(form.querySelectorAll('[data-query]'));
     dataQueries.forEach((queryElement, index) => {
-        let query = queryElement.getAttribute('data-query');
+        const query = queryElement.getAttribute('data-query');
         let numberOfMatchedRows = 0;
         if (query == 'total') {
             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;
+                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(' & ');
+            const queries = query.split(' & ');
             let selector = '';
-            queries.forEach(element => {
+            queries.forEach((element) => {
                 selector += `:not([data-filtered-by="${element}"])`;
             });
             numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr${selector}`)).length;
@@ -584,19 +621,20 @@ export const populateDataQueries = (table, form, wrapper) => {
             numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr:not([data-filtered-by="${query}"])`)).length;
         }
         else if (query.includes(' && ')) {
-            let queries = query.split(' && ');
+            const queries = query.split(' && ');
             numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr:not(.filtered)`)).filter(function (row) {
                 let matched = true;
                 for (const [index, value] of Object.entries(queries)) {
-                    let queryParts = value.split(' == ');
-                    if (!row.querySelector(`td[data-label="${queryParts[0]}"]`) || row.querySelector(`td[data-label="${queryParts[0]}"]`).textContent != `${queryParts[1]}`)
+                    const queryParts = value.split(' == ');
+                    if (!row.querySelector(`td[data-label="${queryParts[0]}"]`) ||
+                        row.querySelector(`td[data-label="${queryParts[0]}"]`).textContent != `${queryParts[1]}`)
                         matched = false;
                 }
                 return matched;
             }).length;
         }
         else {
-            let queryParts = query.split(' == ');
+            const queryParts = query.split(' == ');
             numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr.filtered--matched td[data-label="${queryParts[0]}"], tbody tr[data-filtered-by="${queryParts[0]}"] td[data-label="${queryParts[0]}"]`)).filter(function (element) {
                 return element.textContent === queryParts[1];
             }).length;
@@ -615,17 +653,17 @@ export const addPaginationEventListeners = function (table, form, pagination, wr
         return false;
     }
     pagination.addEventListener('update-page', (event) => {
-        let paginationInput = form.querySelector('[data-pagination]');
-        let newPage = event.detail.page;
+        const paginationInput = form.querySelector('[data-pagination]');
+        const newPage = event.detail.page;
         // Set the filter value
         paginationInput.value = newPage;
-        form.dispatchEvent(new Event("paginate"));
+        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);
+            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')) {
@@ -635,11 +673,11 @@ export const addPaginationEventListeners = function (table, form, pagination, wr
         }
     });
     pagination.addEventListener('update-show', (event) => {
-        let showInput = form.querySelector('[data-show]');
-        let showRows = event.detail.show;
+        const showInput = form.querySelector('[data-show]');
+        const showRows = event.detail.show;
         showInput.value = showRows;
         wrapper.setAttribute('data-show', showRows);
-        form.dispatchEvent(new Event("submit"));
+        form.dispatchEvent(new Event('submit'));
     });
 };
 // Export CSV Data
@@ -652,34 +690,34 @@ export const addExportEventListeners = (button, table) => {
     });
 };
 export const exportAsCSV = function (table) {
-    var csvData = [];
+    let csvData = [];
     // Get each row data
-    var rows = table.getElementsByTagName('tr');
-    for (var i = 0; i < rows.length; i++) {
+    const rows = table.getElementsByTagName('tr');
+    for (let i = 0; i < rows.length; i++) {
         // Get each column data
-        var cols = rows[i].querySelectorAll('td,th');
+        const cols = rows[i].querySelectorAll('td,th');
         // Stores each csv row data
-        var csvRow = [];
-        for (var j = 0; j < cols.length; j++) {
+        const csvRow = [];
+        for (let j = 0; j < cols.length; j++) {
             // Get the text data of each cell of a row and push it to csvrow
             csvRow.push(`"${cols[j].textContent}"`);
         }
         // Combine each column value with comma
-        csvData.push(csvRow.join(","));
+        csvData.push(csvRow.join(','));
     }
     // Combine each row data with new line character
     csvData = csvData.join('\n');
     // Create CSV file object and feed our csvData into it
-    let CSVFile = new Blob([csvData], {
-        type: "text/csv"
+    const CSVFile = new Blob([csvData], {
+        type: 'text/csv',
     });
     // Create to temporary link to initiate download process
-    var tempLink = document.createElement('a');
-    tempLink.download = "export.csv";
-    var url = window.URL.createObjectURL(CSVFile);
+    const tempLink = document.createElement('a');
+    tempLink.download = 'export.csv';
+    const url = window.URL.createObjectURL(CSVFile);
     tempLink.href = url;
     // This link should not be displayed
-    tempLink.style.display = "none";
+    tempLink.style.display = 'none';
     document.body.appendChild(tempLink);
     // Automatically click the link to trigger download
     tempLink.click();
@@ -693,20 +731,20 @@ export const makeTableFunctional = function (table, form, pagination, 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);
-        wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
+        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`);
+                const rowHeight = row.offsetHeight;
+                row.style.setProperty('--row-height', `${rowHeight}px`);
             });
         }
         new ResizeObserver(outputsize).observe(table);
     }
 };
 const filterFilters = function (form) {
-    let filters = new Object();
+    const filters = new Object();
     // Filter
-    let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
+    const filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
     filterInputs.forEach((filterInput, index) => {
         // Ignore uncked radio inputs
         if (filterInput.type == 'radio' && !filterInput.checked) {
@@ -716,14 +754,14 @@ const filterFilters = function (form) {
             return;
         }
         if (filterInput && filterInput.value) {
-            let dataFilter = filterInput.getAttribute('data-filter');
+            const dataFilter = filterInput.getAttribute('data-filter');
             let filterValue = filterInput.value;
             if (filterInput.hasAttribute('data-date-from'))
                 filterValue += '-date-from';
             if (filterInput.hasAttribute('data-date-to'))
                 filterValue += '-date-to';
             if (!filters[dataFilter])
-                filters[dataFilter] = new Array();
+                filters[dataFilter] = [];
             filters[dataFilter].push(filterValue);
         }
     });
@@ -731,21 +769,21 @@ const filterFilters = function (form) {
 };
 export const loadAjaxTable = function (table, form, pagination, wrapper) {
     return __awaiter(this, void 0, void 0, function* () {
-        let formData = new FormData(form);
-        let queryString = new URLSearchParams(formData).toString();
-        let columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');
-        let tbody = table.querySelector('tbody');
-        let ajaxURL = form.getAttribute('data-ajax');
+        const formData = new FormData(form);
+        const queryString = new URLSearchParams(formData).toString();
+        const columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');
+        const tbody = table.querySelector('tbody');
+        const ajaxURL = form.getAttribute('data-ajax');
         wrapper.classList.add('table--loading');
         // Display the filter count
-        let filters = filterFilters(form);
+        const filters = filterFilters(form);
         Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
             element.innerHTML = '';
             element.parentNode.classList.remove('hover');
         });
         let filterCount = 0;
         Object.values(filters).forEach((filter, index) => {
-            if (typeof filter == "object" && Object.values(filter).length)
+            if (typeof filter == 'object' && Object.values(filter).length)
                 filterCount += Object.values(filter).length;
             else
                 filterCount++;
@@ -776,47 +814,59 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                 headers: new Headers({
                     'Content-Type': 'application/json',
                     Accept: 'application/json',
-                    'X-Requested-With': 'XMLHttpRequest'
-                })
+                    '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, 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";
+                .then((response) => response.json())
+                .then((response) => {
+                const schema = form.hasAttribute('data-schema') ? form.getAttribute('data-schema') : 'data';
+                const totalNumberSchema = form.hasAttribute('data-schema-total')
+                    ? form.getAttribute('data-schema-total')
+                    : 'meta.total';
+                const currentPageSchema = form.hasAttribute('data-schema-page')
+                    ? form.getAttribute('data-schema-page')
+                    : 'meta.current_page';
+                const totalNumber = resolvePath(response, totalNumberSchema, 15);
+                const currentPage = resolvePath(response, currentPageSchema, 1);
+                const data = resolvePath(response, schema);
+                const 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');
+                        const table_row = document.createElement('tr');
                         columns.forEach((col, index) => {
                             let cellOutput = '';
-                            var table_cell = document.createElement('td');
+                            const 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('}', '')); });
+                                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 = "";
+                                const arrValue = resolvePath(row, cellTemplate.replace('{', '').replace('}', ''));
+                                cellOutput = '';
                                 arrValue.forEach((rowValue, i) => {
-                                    let cellTemplateValue = col.getAttribute('data-output-array');
-                                    let cellOutputValue = "";
+                                    const 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')) {
+                                    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('}', '')); });
+                                    cellOutputValue = cellOutputValue.replace(new RegExp(/{(.*?)}/, 'gm'), function (matched) {
+                                        return resolvePath(rowValue, matched.replace('{', '').replace('}', ''));
+                                    });
                                     cellOutput += cellOutputValue;
                                 });
                             }
@@ -832,12 +882,12 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                         tbody.appendChild(table_row);
                     });
                     createSearchDataList(table, form);
-                    // Add data to the pagination 
+                    // Add data to the pagination
                     wrapper.setAttribute('data-total', parseInt(totalNumber));
                     wrapper.setAttribute('data-page', parseInt(currentPage));
                     makeTableFunctional(table, form, pagination, wrapper);
                     Array.from(form.querySelectorAll('[data-ajax-query]')).forEach((queryElement, index) => {
-                        let totalNumber = resolvePath(response, queryElement.getAttribute('data-ajax-query'), '');
+                        const totalNumber = resolvePath(response, queryElement.getAttribute('data-ajax-query'), '');
                         if (queryElement.hasAttribute('data-total'))
                             queryElement.setAttribute('data-total', totalNumber);
                         else
@@ -849,9 +899,9 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                     wrapper.classList.remove('table--loading');
                     window.dataLayer = window.dataLayer || [];
                     window.dataLayer.push({
-                        "event": "Ajax table loaded",
-                        "url": ajaxURL,
-                        "formData": queryString
+                        event: 'Ajax table loaded',
+                        url: ajaxURL,
+                        formData: queryString,
                     });
                 }
                 else {
@@ -870,10 +920,21 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
 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" });
+            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':
-            return new Date(cellOutput).toLocaleDateString('en-gb', { day: "numeric", month: "long", year: "2-digit" });
+            return new Date(cellOutput).toLocaleDateString('en-gb', {
+                day: 'numeric',
+                month: 'long',
+                year: '2-digit',
+            });
         case 'capitalise':
-            return cellOutput = ucfirst(cellOutput);
+            return (cellOutput = ucfirst(cellOutput));
     }
 };