@iamproperty/components 4.1.0-beta-2 → 4.1.0

package/assets/ts/modules/dynamicEvents.ts

@@ -0,0 +1,145 @@
+// @ts-nocheck
+
+// Create the event listeners 
+const createDynamicEvents = () => {
+
+  // Change event
+  document.addEventListener('change', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))
+      readMatches(event.target,event.target.closest('[data-change-events]').getAttribute('data-change-events'));
+  });
+  document.addEventListener('change', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))
+      readMatches(event.target,event.target.closest('[data-change-events]').getAttribute('data-change-events'));
+  });
+  document.addEventListener('keyup', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))
+      readMatches(event.target,event.target.closest('[data-change-events]').getAttribute('data-change-events'));
+  });
+
+  // Click event
+  document.addEventListener('click', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-click-events]'))
+      readMatches(event.target,event.target.closest('[data-click-events]').getAttribute('data-click-events'));
+  });
+};
+
+// Parse the JSON and trigger the events, this may be singular or multiple set of events
+const readMatches = (element,events) => {
+
+  // an empty events will trigger looking up the dom chain for 
+  if(!events){
+    events = element.parentNode.getAttribute('data-change-events');
+  }
+  
+  // If still empty bail out
+  if(!events)
+    return false;
+
+  // Split out each event
+  Array.from(JSON.parse(events)).forEach((event, index) => {
+    checkMatch(element,event);
+  });
+};
+    
+const checkMatch = (element,event) => {
+
+  if("matches" in event){
+    if(event['matches'] == 'any')
+      runEvent(element,event,'if');
+    else if(element.value == event.matches)
+      runEvent(element,event,'if');
+    else
+      runEvent(element,event,'else');
+    
+    return false;
+  }
+  else if("in-list" in event){
+    if(document.querySelector(`${event['in-list']} option[value="${element.value}"]`)){
+      let match = document.querySelector(`${event['in-list']} option[value="${element.value}"]`);
+      runEvent(element,event,'if',match);
+    }
+    else
+      runEvent(element,event,'else');
+
+    return false;
+  }
+  else if("event" in event){
+    runEvent(element,event,'event');
+  }
+};
+
+const runEvent = (element,event,eventType,match) => {
+
+  if(eventType in event == false)
+    return false;
+
+  switch (event[eventType]){
+    case "hide":
+
+      let hideElement =  document.querySelector(event['target'])
+      hideElement.classList.add('js-hide');
+
+      Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+        
+          input.removeAttribute('required');
+      });
+      break;
+    case "show":
+
+      let showElement =  document.querySelector(event['target'])
+      showElement.classList.remove('js-hide');
+
+      Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+        
+        if(!input.closest('.js-hide'))
+          input.setAttribute('required','true');
+      });
+      break;
+    case "populate-form":
+      populateForm(element,event,match);
+      break;
+    case "setAttribute":
+      document.querySelector(`${event['target']}`).setAttribute(event['attribute'],event['value']);
+      break;
+    case "removeAttribute":
+      document.querySelector(`${event['target']}`).removeAttribute(event['attribute']);
+      break;
+    case "updateValue":
+      document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : "";
+      
+      let changeEvent = new Event('change');
+      document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);
+      break;
+    default:
+      break;
+  }
+}
+
+const populateForm = function (element,event,match) {
+  
+  let response = JSON.parse(match.getAttribute('data-values'));
+  let form = document.querySelector(event['target']);
+
+  Object.keys(response).forEach((field, index) => {
+
+    if(document.getElementById(field) && document.getElementById(field).tagName == "SPAN")
+      document.getElementById(field).innerHTML = response[field];
+    
+    if(form.querySelector(`input[name="${field}"][type="radio"][value="${response[field]}"]`)){
+      
+      Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function(input,index){
+        input.disabled = true;
+      });
+
+      form.querySelector(`input[name="${field}"][type="radio"][value="${response[field]}"]`).checked = true;
+      form.querySelector(`input[name="${field}"][type="radio"][value="${response[field]}"]`).disabled = false;
+    }
+    else if(form.querySelector(`input[name="${field}"]`)){
+      form.querySelector(`input[name="${field}"]`).value = response[field];
+      form.querySelector(`input[name="${field}"]`).setAttribute('readonly','true');
+    }
+  });
+}
+
+export default createDynamicEvents;

package/assets/ts/modules/helpers.ts

@@ -25,7 +25,7 @@ export const addBodyClasses = (body) => {
  * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
  */
 export const addGlobalEvents = (body) => {
-  
+
   const checkElements = function(hash){
 
     const label = document.querySelector(`label[for="${hash.replace('#','')}"]`);
@@ -60,6 +60,21 @@ export const addGlobalEvents = (body) => {
     }
   });
 
+  document.addEventListener("submit", (event) => {
+
+    if (event && event.target instanceof HTMLElement && event.target.matches('form')){
+
+      let form = event.target;
+
+      if(form.querySelector(':invalid')){
+        
+        form.classList.add('was-validated');
+        event.preventDefault();
+      }
+    }
+
+  });
+
   return null
 }
 

package/assets/ts/modules/pagination.ts

@@ -18,21 +18,18 @@ const createPaginationButttons = function(controller: any,pagination: any){
     return false;
   }
   
-  let strButtons = '';
+  let strOptions = '';
 
   for (let i = 1; i <= numberPages; i++) {
 
-    if(i == currentPage)
-      strButtons += `<li class="page-item active" aria-current="page"><span class="page-link">${i}</span></li>`;
-    else
-      strButtons += `<li class="page-item"><a href="?page=${i}" class="page-link" data-page="${i}">${i}</a></li>`;
+    strOptions += `<option value="${i}" ${i == currentPage ? 'selected' : ''}>${i}</option>`;
   }
 
-  pagination.innerHTML = `<ul class="pagination mb-0 d-none d-sm-flex">
-    ${currentPage == 1 ? `<li class="page-item disabled"><span class="page-link">Previous</span></li>` : `<li class="page-item"><a href="?page=${parseInt(currentPage)-1}" class="page-link" data-page="${parseInt(currentPage)-1}">Previous</a></li>`}
-    ${strButtons}
-    ${currentPage == numberPages ? `<li class="page-item disabled"><span class="page-link">Next</span></li>` : `<li class="page-item"><a href="?page=${parseInt(currentPage)+1}" class="page-link" data-page="${parseInt(currentPage)+1}">Next</a></li>`}
-  </ul>`;
+  pagination.innerHTML = `<div class="pagination mb-0 d-none d-sm-flex">
+    <div><select>${strOptions}</select></div>
+    <button class="prev" ${currentPage == 1 ?'disabled':''} data-page="${parseInt(currentPage)-1}">Previous</button>
+    <button class="next" ${currentPage == numberPages ?'disabled':''} data-page="${parseInt(currentPage)+1}">Next</button>
+  </div>`;
   pagination.innerHTML += `<div class="d-sm-none text-center">
   <span class="d-block pb-2">You've viewed ${showRows} of ${numberRows} results</span>
   <a href="?show=${parseInt(showRows)+parseInt(addRows)}" class="btn btn-primary w-100 m-0" data-show="${parseInt(showRows)+parseInt(addRows)}">Load more results</a>

package/assets/ts/modules/table.ts

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import { zeroPad, isNumeric, ucfirst } from "./helpers";
-import createPaginationButttons from "./pagination";
 
 // Basic functionality needed
 export const addDataAttributes = (table) => {
@@ -60,44 +59,50 @@ export const getLargestLastColWidth = (table) => {
   return largestWidth;
 }
 
-export const createMobileButton = (table) => {
+export const createMobileButton = (table, wrapper) => {
 
-  if(table.closest('.table--fullwidth'))
+
+  if(wrapper.classList.contains('.table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
     return false;
 
-  if(table.querySelectorAll('thead tr th').length < 4)
+  if(table.querySelectorAll('thead tr th').length < 4 && !wrapper.hasAttribute('data-expandable'))
     return false;
 
-  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
-    let firstCol = row.querySelector(':scope > :is(td,th):first-child');
 
-    let colContent = firstCol.textContent;
+  Array.from(table.querySelectorAll('thead tr')).forEach((row,index) => {
+        
+    row.insertAdjacentHTML(
+      'afterbegin',
+      `<th class="th--fixed expand-button-heading"></th>`
+    );
+  });
 
-    if(colContent != "")
-      firstCol.innerHTML =`<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
-    else {
-      let secondCol = row.querySelector(':scope > :is(td,th):nth-child(2)');
-      let secondColContent = secondCol.textContent;
-      secondCol.innerHTML =`<span class="td__content">${secondColContent}</span><button type="button" class="d-none">${secondColContent}</button>`;
-    }
+  Array.from(table.querySelectorAll('tbody tr')).forEach((row,index) => {
+        
+    row.insertAdjacentHTML(
+      'afterbegin',
+      `<td class="td--fixed td--expand"><button class="btn btn-compact btn-secondary" data-expand-button>Expand</button></td>`
+    );
   });
+
+
 }
 
 export const addTableEventListeners = (table) => {
 
   table.addEventListener('click', (event) => {
 
-    if (event && event.target instanceof HTMLElement && event.target.closest('tr > :is(td,th):first-child button')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-expand-button]')){
 
-      let firstCol = event.target.closest('tr > :is(td,th):first-child button');
-      let tableRow = firstCol.parentNode.closest('tr');
+      let button = event.target.closest('[data-expand-button]');
+      let tableRow = button.closest('tr');
 
       if(tableRow.getAttribute('data-view') == "full")
         tableRow.setAttribute('data-view','default');
       else
         tableRow.setAttribute('data-view','full');
 
-      firstCol.blur();
+        button.blur();
     };
   });
 }
@@ -185,7 +190,6 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       form.submit();
     else {
       filterTable(table, form, wrapper);
-      createPaginationButttons(wrapper,pagination);
       populateDataQueries(table,form);
     }
 
@@ -232,7 +236,6 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     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
 
       filterTable(table, form, wrapper);
-      createPaginationButttons(wrapper,pagination);
       populateDataQueries(table,form);
     }
     else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')){
@@ -276,7 +279,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-clear]')){
-      
+
       form.classList.add('processing');
       // Make sure any applied filters have been removed
       Array.from(form.querySelectorAll('.applied-filters')).forEach((filters,index) => {
@@ -300,7 +303,17 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
           case "checkbox":
               if (frm_elements[i].checked)
               {
-                  frm_elements[i].checked = false;
+                  let input = frm_elements[i];
+                  let id = input.getAttribute('id');
+                  let label = document.querySelector(`[for="${id}"`);
+
+                  if(label.querySelector('iam-card')){
+                    let card = label.querySelector('iam-card');
+                    let clickEvent = new Event('click');
+                    card.dispatchEvent(clickEvent);
+                  }
+
+                  input.checked = false;
               }
               break;
           case "select-one":
@@ -313,11 +326,6 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
           }
       }
 
-      Array.from(form.querySelectorAll('label iam-card')).forEach((card,index) => {
-        let clickEvent = new Event('click');
-        card.dispatchEvent(clickEvent);
-      });
-
       form.classList.remove('processing');
 
       if(!form.hasAttribute('data-submit'))
@@ -666,10 +674,9 @@ export const filterTable = (table, form, wrapper) => {
   });
 
   if(wrapper){
-    wrapper.setAttribute('data-page',page);
-    wrapper.setAttribute('data-pages',Math.ceil(matched/showRows));
     wrapper.setAttribute('data-total',matched);
     wrapper.setAttribute('data-show',showRows);
+    wrapper.setAttribute('data-page',page);
   }
 
 }
@@ -742,40 +749,40 @@ export const populateDataQueries = (table,form,wrapper) => {
 // Pagination
 export const addPaginationEventListeners = function(table, form, pagination, wrapper){
 
-  pagination.addEventListener('click', (event) => {
+  pagination.addEventListener('update-page', (event) => {
 
-    if (event && event.target instanceof HTMLElement && event.target.closest('[data-page]')){
-      
-      event.preventDefault();
+    let paginationInput = form.querySelector('[data-pagination]');
+    let newPage = event.detail.page;
 
-      let paginationInput = form.querySelector('[data-pagination]');
-      let newPage = event.target.closest('[data-page]').getAttribute('data-page');
-      paginationInput.value = newPage;
-      wrapper.setAttribute('data-page', newPage);
-      form.dispatchEvent(new Event("paginate"));
+    // Set the filter value
+    paginationInput.value = newPage;
+    form.dispatchEvent(new Event("paginate"));
 
-      if(table.hasAttribute('data-show-history')){
-          
-        const url = new URL(location);
-        url.searchParams.set("page", newPage);
-        history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
-      }
+    // Reset the data attribute
+    wrapper.setAttribute('data-page',newPage);
+
+    if(table.hasAttribute('data-show-history')){
+        
+      const url = new URL(location);
+      url.searchParams.set("page", newPage);
+      history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
+    }
 
-      // scroll back to the top of the table
+    // scroll back to the top of the table
+    if(!wrapper.hasAttribute('data-no-scroll')){
       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]')){
+  pagination.addEventListener('update-show', (event) => {
 
-      event.preventDefault();
-      let showInput = form.querySelector('[data-show]');
-      let showRows = event.target.closest('[data-show]').getAttribute('data-show');
-      showInput.value = showRows;
-      wrapper.setAttribute('data-show', showRows);
-      form.dispatchEvent(new Event("submit"));
-    }
+    let showInput = form.querySelector('[data-show]');
+    let showRows = event.detail.show;
+    showInput.value = showRows;
+    wrapper.setAttribute('data-show', showRows);
+    form.dispatchEvent(new Event("submit"));
   });
 }
 
@@ -839,7 +846,7 @@ export const exportAsCSV = function(table){
 export const makeTableFunctional = function(table, form, pagination, wrapper){
 
   addDataAttributes(table);
-  createMobileButton(table);
+  createMobileButton(table, wrapper);
   populateDataQueries(table, form, wrapper);
   
   // Work out the largest width of the CTA's in the last column
@@ -941,6 +948,10 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
   window.controller[ajaxURL] = new AbortController();
   const { signal } = controller[ajaxURL];
 
+  // Set loading on the pagination
+  pagination.setAttribute('data-loading','true');
+  form.classList.add('processing');
+
   try {
     await fetch(ajaxURL+'?'+queryString, {
       signal: signal,
@@ -958,7 +969,7 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
       let totalNumberSchema = form.hasAttribute('data-schema-total') ? form.getAttribute('data-schema-total') : 'meta.total';
       let currentPageSchema = form.hasAttribute('data-schema-page') ? form.getAttribute('data-schema-page') : 'meta.current_page';
 
-      let totalNumber = resolvePath(response, totalNumberSchema, 1);
+      let totalNumber = resolvePath(response, totalNumberSchema, 15);
       let currentPage = resolvePath(response, currentPageSchema, 1);
       let data = resolvePath(response, schema);
       let emptyMsg = wrapper.hasAttribute('data-empty-msg') ? wrapper.getAttribute('data-empty-msg') : "No results found";
@@ -1032,11 +1043,9 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
         // Add data to the pagination 
         wrapper.setAttribute('data-total', parseInt(totalNumber));
         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);
-        createPaginationButttons(wrapper, pagination);
 
         Array.from(form.querySelectorAll('[data-ajax-query]')).forEach((queryElement, index) => {
 
@@ -1064,6 +1073,10 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
       else {
         tbody.innerHTML = '<tr><td colspan="100%"><span>Error loading table</span></td></tr>';
       }
+    
+      // Remove loading on the pagination
+      pagination.removeAttribute('data-loading');
+      form.classList.remove('processing');
     });
   } catch (error) {
     console.log(error);

package/assets/ts/modules/tabs.ts

@@ -12,23 +12,29 @@ export const createTabsLinks = function(tabsElement: Element) {
     tabLinks = document.createElement('div');
     tabLinks.classList.add('tabs__links');
 
-    tabsElement.prepend(tabLinks);
+    let tabLinksWrapper = document.createElement('div');
+    tabLinksWrapper.classList.add('tabs__links__wrapper');
+    
+    tabLinksWrapper.prepend(tabLinks);
+    tabsElement.prepend(tabLinksWrapper);
   }
 
   // Create the tab buttons from the summary titles
   details.forEach((detail, index) => {
     
     let summary = detail.querySelector(':scope > summary');
+    let isDisabled = summary.classList.contains('disabled')
+
     summary.classList.add('visually-hidden');
     
     let button = document.createElement('button');
-    if(detail.hasAttribute('id')){
-        
+
+    if (detail.hasAttribute('id')) {
       button = document.createElement('a');
       button.setAttribute('href',`#${detail.getAttribute('id')}`);
     }
 
-    if(detail.hasAttribute('open')){
+    if (detail.hasAttribute('open')) {
       button.setAttribute('aria-pressed',true);
     }
     
@@ -37,6 +43,10 @@ export const createTabsLinks = function(tabsElement: Element) {
     button.setAttribute('data-index',index);
     button.setAttribute('tabindex','-1');
 
+    if (isDisabled) {
+      button.classList.add('disabled')
+    }
+
     tabLinks.appendChild(button);
   });
 
@@ -55,15 +65,17 @@ export const setTabsEventHandlers = function(tabsElement: Element){
   buttons.forEach((button) => {
 
     button.addEventListener("click", (e) => {
-
       e.preventDefault();
-      buttons.forEach((buttonLoopItem) => {
 
+      if (button.classList.contains('disabled'))
+        return false
+
+      buttons.forEach((buttonLoopItem) => {
         let buttonPressed = buttonLoopItem == button ? true : false;
         buttonLoopItem.setAttribute('aria-pressed', buttonPressed);
       });
+
       details.forEach((detail, detailsIndex) => {
-        
         let detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
 
         if(detailsOpen)
@@ -90,15 +102,15 @@ export const setTabsEventHandlers = function(tabsElement: Element){
 
     // Maintain the focus on the summary element but visually highlight the tab button
     summary.addEventListener("focus", (e) => {
-
       buttons.forEach((button) => {
           
         button.classList.remove('focus');
       });
+
       buttons[index].classList.add('focus');
     });
-    summary.addEventListener("click", (e) => {
 
+    summary.addEventListener("click", (e) => {
       e.preventDefault();
       buttons[index].click();
     });
@@ -128,7 +140,6 @@ export const openFirstTab = function(tabsElement: Element){
 }
 
 const tabs = function(tabsElement: Element){
-
   createTabsLinks(tabsElement);
   setTabsEventHandlers(tabsElement);
   openFirstTab(tabsElement);

package/assets/ts/tests/table.spec.ts

@@ -69,50 +69,6 @@ describe('addDataAttributes', () => {
 
 });
 
-/* TODO: This unit test doesn't work as puppeteer seems to have an issue with query selector all
-describe('getLargestLastColWidth', () => {
-
-  test('should return the width of the largest last column content', async() => {
-
-    const browser = await puppeteer.launch({});
-    try {
-        const page = await browser.newPage();
-        await page.exposeFunction("getLargestLastColWidth", tableModule.getLargestLastColWidth);
-        await page.setContent(`<table id="table">${basicTable}</table>`);
-        await page.waitForSelector('#table tr');
-
-        const largestWidth = await page.evaluate(`getLargestLastColWidth(document.querySelector("#table"))`);
-
-        //const links = await page.$$eval('#table', e=>getLargestLastColWidth(e))
-      console.log(await largestWidth)
-
-
-    } catch (e) {
-        console.error(e);
-    } finally {
-        await browser.close();
-    }
-
-    
-  });
-
-});
-*/
-
-describe('createMobileButton', () => {
-
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-
-  tableModule.createMobileButton(table);
-
-  test('should add a button to the first cell in a column', () => {
-
-    expect(table.querySelector('tbody td:nth-child(1) button').textContent).toEqual('Cell 1');
-    expect(table.querySelector('tbody td:nth-child(1) span').textContent).toEqual('Cell 1');
-  });
-});
-
 describe('createSearchDataList', () => {
 
   const table = document.createElement('table');
@@ -162,6 +118,7 @@ describe('sortTable', () => {
 
 });
 
+
 describe('filterTable', () => {
 
   const table = document.createElement('table');
@@ -177,25 +134,8 @@ describe('filterTable', () => {
     expect(table.querySelectorAll('tbody tr.filtered--matched').length).toEqual(1);
   });
 });
-/*
-describe('populateDataQueries', () => {
 
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-  const form = document.createElement('form');
-  form.innerHTML += `<div><input name="heading" value="Low" data-filter="Heading 2" /><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
-
-  tableModule.addDataAttributes(table);
-  tableModule.filterTable(table, form, document.createElement('div'));
-  tableModule.populateDataQueries(table, form);
 
-  test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
-
-    //expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');
-    //expect(form.querySelector('[data-query="Heading 2 == Low"]').textContent).toEqual('2');
-  });
-});
-*/
 describe('formatCell', () => {
 
   test('should format the text correctly', () => {