@iamproperty/components 5.5.1-beta-1 → 5.5.1-beta-4

package/assets/ts/modules/fileupload.ts

@@ -27,10 +27,12 @@ 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');
 
+
       for (let i = 0; i < files.length; i++) {
         const file = files[i]
         
@@ -40,6 +42,12 @@ 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);
     }
@@ -75,6 +83,9 @@ function fileupload(fileupload: Element, wrapper: Element) {
     
     const changeEvent = new Event('change');
     input.dispatchEvent(changeEvent);
+
+    const elementChangeEvent = new Event('elementChange');
+    fileupload.dispatchEvent(elementChangeEvent);
   });
 
 
@@ -101,6 +112,14 @@ function fileupload(fileupload: Element, wrapper: Element) {
     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/ts/modules/helpers.ts

@@ -79,6 +79,12 @@ export const addGlobalEvents = (body) => {
         form.classList.add('was-validated');
         event.preventDefault();
       }
+
+      if(form.querySelector('iam-multiselect[data-is-required][data-error]')){
+        
+        form.classList.add('was-validated');
+        event.preventDefault();
+      }
     }
 
   });
@@ -118,8 +124,30 @@ export const safeID = function(str){
   return str;
 }
 
+export const numberOfDays = function(startDateString:string,endDateString:string){
+
+  let convertStart = startDateString.split('/');
+  let convertEnd = endDateString.split('/');
+  let dateStart:any = new Date(convertStart[1]+'/'+convertStart[0]+'/'+convertStart[2]);
+  let dateEnd:any = 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);
+export const isTraversable = o => Array.isArray(o) || o !== null && ['function', 'object'].includes(typeof o);

package/assets/ts/modules/inputs.ts

@@ -11,8 +11,14 @@ const extendInputs = (body) => {
     });
 
     Array.from(document.querySelectorAll('label input')).forEach((input,index) => {
-      if(!input.closest('label').querySelector('.optional-text') && !input.hasAttribute('required'))
-        input.insertAdjacentHTML("beforebegin", `<span class="optional-text"></span>`);
+      if(!input.closest('label').querySelector('.optional-text') && !input.hasAttribute('required')){
+
+        if(input.parentNode.tagName.toLowerCase() == 'span')
+          input.parentElement.insertAdjacentHTML("beforebegin", `<span class="optional-text"></span>`);
+        else
+          input.insertAdjacentHTML("beforebegin", `<span class="optional-text"></span>`);
+      }
+        
     });
     
     // Date restrictions 

package/assets/ts/modules/table.ts

@@ -112,7 +112,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;
@@ -149,9 +149,16 @@ 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(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"){
@@ -206,11 +213,27 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     }
   }
 
+  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);
@@ -230,7 +253,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       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);
     }
@@ -440,8 +463,15 @@ export const sortTable = (table, form, savedTableBody) => {
   }
 
   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');
@@ -522,9 +552,9 @@ export const filterTable = (table, form, wrapper) => {
   });
 
   // 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) => {
 
@@ -566,6 +596,43 @@ export const filterTable = (table, form, wrapper) => {
 
         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());
@@ -629,13 +696,13 @@ export const filterTable = (table, form, wrapper) => {
           isMatched = (checkDate >= firstDayLastMonth && checkDate <= lastDayLastMonth);
         }
         
-        if(filterTd && filterTd.textContent.toLowerCase().includes(filter.toLowerCase())){
+        if(filterTd && filterTd.textContent.toLowerCase().includes(filter.replace('-',' ').toLowerCase())){
           isMatched = true;
         }
 
       });
 
-      if(!isMatched){
+      if(!isMatched) {
 
         row.classList.add('filtered');
         row.setAttribute('data-filtered-by',key)
@@ -890,11 +957,18 @@ 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);
     }
   });
 
@@ -1088,7 +1162,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);
   }