@iamproperty/components 3.7.8 → 3.7.9-beta

package/assets/ts/components/accordion/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/accordion/accordion.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-accordion`))
+    window.customElements.define(`iam-accordion`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-accordion class="container">
   <details id="question1" class="accordion-item">

package/assets/ts/components/applied-filters/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/applied-filters/applied-filters.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-applied-filters`))
+    window.customElements.define(`iam-applied-filters`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-applied-filters></iam-applied-filters>
 ```

package/assets/ts/components/card/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/card/card.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-card`))
+    window.customElements.define(`iam-card`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <a href="/link-url">
   <iam-card>Link content</iam-card>

package/assets/ts/components/fileupload/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/fileupload/fileupload.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-fileupload`))
+    window.customElements.define(`iam-fileupload`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-fileupload data-maxsize="500"><input type="file" name="files[]" multiple="multiple" accept=".pdf, .csv, .jpg, .png" /></iam-fileupload>
 ```

package/assets/ts/components/filterlist/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-filterlist`))
+    window.customElements.define(`iam-filterlist`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-filterlist>
 <ul>

package/assets/ts/components/header/README.md

@@ -1,4 +1,17 @@
-### Usage
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-filterlist`))
+    window.customElements.define(`iam-filterlist`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
 
 ```
 <iam-header class="bg-secondary" image="/shutterstock_1229155495.webp">
@@ -11,14 +24,14 @@
 </iam-header>
 ```
 
-### Properties
+**Properties** 
 
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
 | image | String | - | Optional image url to display in the background |
 
 
-### Slots
+**Slots**
 
 | Option | Default Value | Description |
 | ------ | ------------- | ----------- |

package/assets/ts/components/notification/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/notification/notification.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-notification`))
+    window.customElements.define(`iam-notification`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <!-- Inline -->
 <iam-notification data-status="danger" data-dismiss="">

package/assets/ts/components/pagination/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/pagination/pagination.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-pagination`))
+    window.customElements.define(`iam-pagination`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-pagination data-total="12"></iam-pagination>
 ```

package/assets/ts/components/table/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/table/table.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-table`))
+    window.customElements.define(`iam-table`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-table class="container">
   <table>

package/assets/ts/components/tabs/README.md

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/tabs/tabs.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-tabs`))
+    window.customElements.define(`iam-tabs`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-tabs class="container">
   <details>

package/assets/ts/modules/table.ts

@@ -160,6 +160,16 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       createPaginationButttons(wrapper,pagination);
       populateDataQueries(table,form);
     }
+
+    // Pass post data back to the page
+    if(form.hasAttribute('data-ajax-post')){
+          
+      let formData = new FormData(form);
+      let queryString = new URLSearchParams(formData).toString();
+      const http = new XMLHttpRequest()
+      http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
+      http.send();
+    }
   }
 
   form.addEventListener('keyup', (event) => {
@@ -417,7 +427,7 @@ export const filterTable = (table, form, wrapper) => {
 
   table.classList.remove('table--filtered');
 
-  let filters = [];
+  let filters = filterFilters(form);
   let searches = [];
   let matched = 0;
   let page = form.querySelector('[data-pagination]') ? parseInt(form.querySelector('[data-pagination]').value) : 1;
@@ -432,40 +442,6 @@ export const filterTable = (table, form, wrapper) => {
     row.removeAttribute('data-filtered-by');
   });
 
-  // Filter
-  let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
-
-  filterInputs.forEach((filterInput, index) => {
-
-    // Ignore uncked radio inputs
-    if(filterInput.type == 'radio' && !filterInput.checked){
-      return;
-    }
-
-    if(filterInput.type == 'checkbox' && !filterInput.checked){
-      return;
-    }
-
-
-    if(filterInput.getAttribute('data-filter') == "multi"){
-
-      for (const [key, value] of Object.entries(JSON.parse(filterInput.value))) {
-        filters[filterInput.getAttribute('data-filter')].push(value);
-      }
-    }
-    else if (filterInput && filterInput.value) {
-
-      let dataFilter = filterInput.getAttribute('data-filter');
-
-      if(!filters[dataFilter])
-        filters[dataFilter] = new Array();
-
-      filters[dataFilter].push(filterInput.value);
-    }
-
-  });
-
-
   // Add search columns too
   if(form.querySelector('[data-search]')){
     let searchInput = form.querySelector('[data-search]');
@@ -482,10 +458,10 @@ export const filterTable = (table, form, wrapper) => {
     element.innerHTML = '';
   });
 
-  if(filters.length) {
+  if(Object.keys(filters).length) {
       
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
-      element.innerHTML += `(${filters.length})`;
+      element.innerHTML += `(${Object.keys(filters).length})`;
     });
   }
   
@@ -804,7 +780,37 @@ export const makeTableFunctional = function(table, form, pagination, wrapper){
   }
 }
 
+const filterFilters = function(form){
+
+  let filters = new Object();
 
+  // Filter
+  let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
+
+  filterInputs.forEach((filterInput, index) => {
+
+    // Ignore uncked radio inputs
+    if(filterInput.type == 'radio' && !filterInput.checked){
+      return;
+    }
+    
+    if(filterInput.type == 'checkbox' && !filterInput.checked){
+      return;
+    }
+
+    if (filterInput && filterInput.value) {
+
+      let dataFilter = filterInput.getAttribute('data-filter');
+
+      if(!filters[dataFilter])
+        filters[dataFilter] = new Array();
+    
+      filters[dataFilter].push(filterInput.value);
+    }
+  });
+
+  return filters;
+}
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
@@ -818,6 +824,20 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
   wrapper.classList.add('table--loading');
   
+  // Display the filter count
+  let filters = filterFilters(form);
+
+  Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
+    element.innerHTML = '';
+  });
+
+  if(Object.keys(filters).length) {
+      
+    Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
+      element.innerHTML += `(${Object.keys(filters).length})`;
+    });
+  }
+
   // Setup controller vars if not already set
   if(!window.controller)
     window.controller = [];
@@ -927,6 +947,16 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
         makeTableFunctional(table, form, pagination, wrapper);        
         createPaginationButttons(wrapper, pagination);
 
+        Array.from(form.querySelectorAll('[data-ajax-query]')).forEach((queryElement, index) => {
+
+          let totalNumber = resolvePath(response, queryElement.getAttribute('data-ajax-query'), '');
+
+          if(queryElement.hasAttribute('data-total'))
+            queryElement.setAttribute('data-total', totalNumber);
+          else
+            queryElement.innerHTML = totalNumber;
+        });
+
         if(parseInt(totalNumber) == 0){
           tbody.innerHTML = `<tr><td colspan="100%"><span>${emptyMsg}</span></td></tr>`;
         }
@@ -943,13 +973,6 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
       else {
         tbody.innerHTML = '<tr><td colspan="100%"><span>Error loading table</span></td></tr>';
       }
-
-      // Pass post data back to the page
-      if(form.hasAttribute('data-ajax-post')){
-        const http = new XMLHttpRequest()
-        http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
-        http.send();
-      }
     });
   } catch (error) {
     console.log(error);