@iamproperty/components 5.5.0 → 5.5.1-beta-2

package/assets/js/modules/fileupload.js

@@ -26,6 +26,10 @@ function fileupload(fileupload, wrapper) {
                     dt.items.add(file); // here you exclude the file. thus removing it.
             }
             input.files = dt.files; // Assign the updates list
+            if (input.files.length == 0) {
+                const emptyEvent = new Event('empty');
+                fileupload.dispatchEvent(emptyEvent);
+            }
             const changeEvent = new Event('change');
             input.dispatchEvent(changeEvent);
         }
@@ -50,6 +54,8 @@ function fileupload(fileupload, wrapper) {
         }
         const changeEvent = new Event('change');
         input.dispatchEvent(changeEvent);
+        const elementChangeEvent = new Event('elementChange');
+        fileupload.dispatchEvent(elementChangeEvent);
     });
     cloneInput.addEventListener('dragenter', (event) => {
         cloneInput.classList.add('focus');
@@ -66,5 +72,10 @@ function fileupload(fileupload, wrapper) {
         for (const file of input.files)
             filesWrapper.innerHTML += `<span class="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
     });
+    if (fileupload.hasAttribute('data-filename')) {
+        let filename = fileupload.getAttribute('data-filename');
+        if (filename)
+            filesWrapper.innerHTML += `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
+    }
 }
 export default fileupload;

package/assets/js/modules/helpers.js

@@ -87,6 +87,22 @@ export const safeID = function (str) {
     str = str.replace(/\W/g, '');
     return str;
 };
+export const numberOfDays = function (startDateString, endDateString) {
+    let convertStart = startDateString.split('/');
+    let convertEnd = endDateString.split('/');
+    let dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);
+    let dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);
+    if (dateStart == "Invalid Date")
+        throw "Start date is not a valid date";
+    if (dateEnd == "Invalid Date")
+        throw "End date is not a valid date";
+    // To calculate the time difference of two dates
+    let diffTime = dateEnd.getTime() - dateStart.getTime();
+    let numberOfDays = (diffTime / (1000 * 3600 * 24) + 1);
+    if (numberOfDays < 0)
+        throw "The start date should be before the end date";
+    return numberOfDays;
+};
 // Used to get values from nested json objects
 export const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
 export const isTraversable = o => Array.isArray(o) || o !== null && ['function', 'object'].includes(typeof o);

package/assets/js/modules/table.js

@@ -83,7 +83,7 @@ export const addTableEventListeners = (table) => {
 };
 // Filters
 export const createSearchDataList = (table, form) => {
-    let searchInput = form.querySelector('[data-search]');
+    let searchInput = form.querySelector('input[data-search]');
     if (!searchInput)
         return false;
     const searchID = searchInput.getAttribute('id');
@@ -108,8 +108,13 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     var timer;
     // Check what conditions are set on the table to see what the form actions are
     let formSubmit = function (event, paginate = false) {
+        console.log('submit');
         if (form.classList.contains('processing'))
             return false;
+        Array.from(form.querySelectorAll('iam-applied-filters')).forEach((element, index) => {
+            var 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") {
             form.classList.add('processing');
@@ -153,9 +158,21 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             http.send();
         }
     };
+    if (form.querySelector('iam-actionbar[data-search]')) {
+        form.querySelector('iam-actionbar[data-search]').addEventListener('search-submit', (event) => {
+            if (form.querySelector('input[data-search]')) {
+                form.querySelector('input[data-search]').value = event.detail.search;
+            }
+            else {
+                form.insertAdjacentHTML('beforeend', `<input type="hidden" name="search" data-search="${form.querySelector('iam-actionbar[data-search]').getAttribute('data-search')}" value="${event.detail.search}"/>`);
+            }
+            clearTimeout(timer);
+            formSubmit(event);
+        });
+    }
     form.addEventListener('keyup', (event) => {
         clearTimeout(timer);
-        if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')) {
+        if (event && event.target instanceof HTMLElement && event.target.closest('input[data-search]')) {
             timer = setTimeout(function () {
                 formSubmit(event);
             }, 500);
@@ -169,7 +186,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
                 sortTable(table, form, savedTableBody);
             formSubmit(event);
         }
-        if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')) {
+        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
@@ -313,8 +330,11 @@ export const sortTable = (table, form, savedTableBody) => {
         return false;
     }
     let tbody = table.querySelector('tbody');
-    let select = form.querySelector('[data-sort]');
-    let selectedOption = select.querySelector(`option:nth-child(${select.selectedIndex + 1})`);
+    let selectedOption = form.querySelector(`input[type="radio"][data-sort]:checked`);
+    if (form.querySelector('select[data-sort]')) {
+        let 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');
@@ -375,9 +395,9 @@ export const filterTable = (table, form, wrapper) => {
         row.removeAttribute('data-filtered-by');
     });
     // Add search columns too
-    if (form.querySelector('[data-search]')) {
-        let searchInput = form.querySelector('[data-search]');
-        let searchColumns = form.querySelector('[data-search]').getAttribute('data-search').split(',');
+    if (form.querySelector('input[data-search]')) {
+        let searchInput = form.querySelector('input[data-search]');
+        let searchColumns = form.querySelector('input[data-search]').getAttribute('data-search').split(',');
         searchColumns.forEach((column, index) => {
             searches.push({ 'column': `${column.trim()}`, 'value': `${searchInput.value}` });
         });
@@ -407,6 +427,32 @@ export const filterTable = (table, form, wrapper) => {
             let isMatched = false;
             filterValue.forEach((filter, index) => {
                 let 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());
+                    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')) {
+                        isMatched = true;
+                    }
+                }
+                else if (filter.includes('-date-to')) {
+                    let toDate = new Date(filter.replace('-date-to', ''));
+                    let 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')) {
+                        isMatched = true;
+                    }
+                }
                 // Dynamic values
                 if (filter && filter == "$today")
                     filter = formatCell('date', new Date());
@@ -455,7 +501,7 @@ export const filterTable = (table, form, wrapper) => {
                     checkDate.setHours(0, 0, 0, 0);
                     isMatched = (checkDate >= firstDayLastMonth && checkDate <= lastDayLastMonth);
                 }
-                if (filterTd && filterTd.textContent.toLowerCase().includes(filter.toLowerCase())) {
+                if (filterTd && filterTd.textContent.toLowerCase().includes(filter.replace('-', ' ').toLowerCase())) {
                     isMatched = true;
                 }
             });
@@ -642,9 +688,14 @@ const filterFilters = function (form) {
         }
         if (filterInput && filterInput.value) {
             let 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].push(filterInput.value);
+            filters[dataFilter].push(filterValue);
         }
     });
     return filters;
@@ -792,7 +843,7 @@ export const formatCell = (format, cellOutput) => {
         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':
-            return new Date(cellOutput).toLocaleDateString('en-gb', { year: "2-digit", month: "long", day: "numeric" });
+            return new Date(cellOutput).toLocaleDateString('en-gb', { day: "numeric", month: "long", year: "2-digit" });
         case 'capitalise':
             return cellOutput = ucfirst(cellOutput);
     }