@iamproperty/components 5.6.1-beta2 → 5.6.1-beta21

package/assets/js/modules/fileupload.js

@@ -4,13 +4,26 @@ function fileupload(fileupload, wrapper) {
     const dropArea = wrapper.querySelector('.drop-area');
     const input = fileupload.querySelector('input');
     const maxSize = fileupload.hasAttribute('data-maxsize') ? fileupload.getAttribute('data-maxsize') : 0;
+    const errorMsgSize = wrapper.querySelector('.invalid-feedback.size');
+    const errorMsgExt = wrapper.querySelector('.invalid-feedback.ext');
     // We clone the input field to work as a buffer input field, this allows us to add new files without losing the old ones
     const cloneInput = input.cloneNode();
     dropArea.append(cloneInput);
+    let checkFileExt = function (filename) {
+        if (!input.hasAttribute('accept'))
+            return true;
+        const nameExtension = filename.split('.').pop();
+        const acceptedTypes = input.getAttribute('accept');
+        if (acceptedTypes.includes(nameExtension))
+            return true;
+        return false;
+    };
     wrapper.addEventListener('click', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {
             const button = event.target.closest('.btn-primary');
             // If the input allows multiples then use the buffer clone input
+            errorMsgExt.classList.remove('d-block');
+            errorMsgSize.classList.remove('d-block');
             const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;
             inputTrigger.click();
         }
@@ -26,10 +39,6 @@ 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);
         }
@@ -43,8 +52,14 @@ function fileupload(fileupload, wrapper) {
             for (let i = 0; i < filesArray.length; i++) {
                 const file = filesArray[i];
                 const size = file.size / 1000;
-                if (!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize))
+                if (!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize) && checkFileExt(file.name))
                     dt.items.add(file); // here you exclude the file. thus removing it.
+                if (!checkFileExt(file.name)) {
+                    errorMsgExt.classList.add('d-block');
+                }
+                if (size > maxSize) {
+                    errorMsgSize.classList.add('d-block');
+                }
                 fileNames.push(file.name);
             }
             input.files = dt.files;
@@ -54,8 +69,6 @@ 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');
@@ -67,24 +80,36 @@ function fileupload(fileupload, wrapper) {
         cloneInput.classList.remove('focus');
     });
     input.addEventListener('change', (event) => {
+        if (input.files.length == 1) {
+            let file = input.files[0];
+            const size = file.size / 1000;
+            if (!checkFileExt(file.name)) {
+                errorMsgExt.classList.add('d-block');
+                const dt = new DataTransfer();
+                input.files = dt.files;
+            }
+            if (size > maxSize) {
+                errorMsgSize.classList.add('d-block');
+                const dt = new DataTransfer();
+                input.files = dt.files;
+            }
+        }
         // Reset
         filesWrapper.innerHTML = '';
-        for (const file of input.files)
-            filesWrapper.innerHTML += `<span class="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
+        for (const file of input.files) {
+            filesWrapper.innerHTML += `<span class="file" part="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
+        }
+        const elementChangeEvent = new CustomEvent('elementchange', { detail: { "files": input.files } });
+        fileupload.dispatchEvent(elementChangeEvent);
+        if (input.files.length == 0) {
+            const emptyEvent = new CustomEvent('empty');
+            fileupload.dispatchEvent(emptyEvent);
+        }
     });
     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>`;
+            filesWrapper.innerHTML = `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
     }
-    // Change the filename
-    wrapper.addEventListener('click', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {
-            const button = event.target.closest('.btn-primary');
-            // If the input allows multiples then use the buffer clone input
-            const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;
-            inputTrigger.click();
-        }
-    });
 }
 export default fileupload;

package/assets/js/modules/helpers.js

@@ -72,6 +72,10 @@ export const addGlobalEvents = (body) => {
             }
         }
     });
+    Array.from(document.querySelectorAll('label progress')).forEach((progress, index) => {
+        let label = progress.closest('label');
+        label.setAttribute('data-percent', progress.getAttribute('value'));
+    });
     return null;
 };
 export const isNumeric = function (str) {

package/assets/js/modules/inputs.js

@@ -3,7 +3,7 @@ import hibpCheck from '../vendor/hibp.js';
 const extendInputs = (body) => {
     function loadInput() {
         // maxlength counter init
-        Array.from(document.querySelectorAll('input[maxlength]')).forEach((input, index) => {
+        Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input, index) => {
             let wrapper = input.parentElement;
             setMaxlengthVars(input, wrapper);
         });

package/assets/js/modules/table.js

@@ -108,7 +108,9 @@ 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 (wrapper.hasAttribute('data-no-submit')) {
+            return false;
+        }
         if (form.classList.contains('processing'))
             return false;
         Array.from(form.querySelectorAll('iam-applied-filters')).forEach((element, index) => {
@@ -609,6 +611,9 @@ export const populateDataQueries = (table, form, wrapper) => {
 };
 // Pagination
 export const addPaginationEventListeners = function (table, form, pagination, wrapper) {
+    if (wrapper.hasAttribute('data-no-submit')) {
+        return false;
+    }
     pagination.addEventListener('update-page', (event) => {
         let paginationInput = form.querySelector('[data-pagination]');
         let newPage = event.detail.page;