@iamproperty/components 3.7.3 → 3.7.5

package/assets/ts/modules/notification.ts

@@ -0,0 +1,76 @@
+// @ts-nocheck
+function setupNotification(element) {
+
+  // Add toast to notification holder
+  if(element.hasAttribute('data-type') && element.getAttribute('data-type') == "toast"){
+    let holder = document.querySelector('.notification__holder');
+
+    if(!holder){
+
+      holder = document.createElement('div');
+      holder.classList.add('notification__holder');
+      holder.classList.add('container');
+      document.querySelector('body').appendChild(holder);
+    }
+
+    if(!element.closest('.notification__holder'))
+      holder.appendChild(element);
+  }
+
+  element.setAttribute('role','alert');
+  
+  // Create a dissmissable button
+  element.addEventListener('click', function(e){
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-dismiss-button]')){
+
+      e.preventDefault();
+      closeNotification(element);
+    }
+  }, false);
+
+  // Self disappearing alert
+  if(element.hasAttribute('data-timeout')){
+
+    let timeOut = element.getAttribute('data-timeout');
+
+
+    var timer = new Timer(function() {
+      closeNotification(element);
+    }, timeOut);
+
+    element.addEventListener("mouseenter", (event) => {
+
+      timer.pause();
+    });
+
+    element.addEventListener("mouseleave", (event) => {
+
+      timer.resume();
+    });
+  }
+}
+
+function Timer(callback, delay) {
+  var timerId, start, remaining = delay;
+
+  this.pause = function() {
+    window.clearTimeout(timerId);
+    remaining -= new Date() - start;
+  };
+
+  this.resume = function() {
+    start = new Date();
+    window.clearTimeout(timerId);
+    timerId = window.setTimeout(callback, remaining);
+  };
+
+  this.resume();
+}
+
+export const closeNotification = function(element) {
+
+  element.classList.add('d-none');
+}
+
+export default setupNotification

package/assets/ts/modules/table.ts

@@ -11,7 +11,7 @@ export const addDataAttributes = (table) => {
   colRows.forEach((row, index) => {
 
     const cells = Array.from(row.querySelectorAll('th, td'));
-    const statuses = ['0','low','medium','high','unknown','n/a','pending','verified','incomplete','completed','requires approval'];
+    const statuses = ['0','low','medium','high','unknown','n/a','pending','verified','overdue','incomplete','complete','completed','approval required','requires approval','to do','not started','warning','error'];
     
     cells.forEach((cell, cellIndex) => {
 
@@ -696,6 +696,11 @@ export const addPaginationEventListeners = function(table, form, pagination, wra
         url.searchParams.set("page", newPage);
         history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
       }
+
+      // scroll back to the top of the table
+      const yOffset = -250;
+      const y = table.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({top: y, behavior: 'smooth'});
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){
@@ -776,8 +781,12 @@ 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`);
+    if(!wrapper.hasAttribute('data-cta-width')){
+        
+      const largestWidth = getLargestLastColWidth(table);
+      wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
+      wrapper.setAttribute("data-cta-width", `${largestWidth}rem`);
+    }
 
     function outputsize() {
 
@@ -910,7 +919,7 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
         wrapper.setAttribute('data-page', parseInt(currentPage));
         wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
 
-        makeTableFunctional(table, form, pagination, wrapper);
+        makeTableFunctional(table, form, pagination, wrapper);        
         createPaginationButttons(wrapper, pagination);
 
         if(parseInt(totalNumber) == 0){