@iamproperty/components 5.6.1-beta2 → 5.6.1-beta20

package/assets/ts/modules/fileupload.ts

@@ -5,11 +5,27 @@ function fileupload(fileupload: Element, wrapper: Element) {
   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')){
@@ -17,6 +33,9 @@ function fileupload(fileupload: Element, wrapper: Element) {
       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();
@@ -27,7 +46,6 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
     if (event && event.target instanceof HTMLElement && event.target.closest('.files button')){
 
-
       const dt = new DataTransfer();
       const { files } = input;
       const button = event.target.closest('.files button');
@@ -42,12 +60,6 @@ function fileupload(fileupload: Element, wrapper: Element) {
       
       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);
     }
@@ -57,6 +69,7 @@ function fileupload(fileupload: Element, wrapper: Element) {
   cloneInput.addEventListener('change', (event) => {
 
     if(input.hasAttribute('multiple')){
+
       const filesArray = [...input.files, ...cloneInput.files];
       
       let fileNames = [];
@@ -68,8 +81,17 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
         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);
       }
@@ -80,12 +102,9 @@ function fileupload(fileupload: Element, wrapper: Element) {
       
       input.files = cloneInput.files;
     }
-    
+
     const changeEvent = new Event('change');
     input.dispatchEvent(changeEvent);
-
-    const elementChangeEvent = new Event('elementChange');
-    fileupload.dispatchEvent(elementChangeEvent);
   });
 
 
@@ -106,11 +125,40 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
   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')){
@@ -118,23 +166,8 @@ function fileupload(fileupload: Element, wrapper: Element) {
     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;
+export default fileupload;

package/assets/ts/modules/helpers.ts

@@ -100,6 +100,12 @@ 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
 }
 

package/assets/ts/modules/inputs.ts

@@ -5,7 +5,7 @@ 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/ts/modules/table.ts

@@ -149,7 +149,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
   // 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;
@@ -848,6 +850,10 @@ 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]');
@@ -1007,7 +1013,7 @@ const filterFilters = function(form){
 }
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
-
+  
   let formData = new FormData(form);
   let queryString = new URLSearchParams(formData).toString();
   let columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');