@websy/websy-designs 1.3.2 → 1.3.4

package/dist/websy-designs.debug.js

@@ -3310,6 +3310,7 @@ class WebsyResultList {
     this.rows = []
     this.apiService = new WebsyDesigns.APIService('/api')
     this.templateService = new WebsyDesigns.APIService('')
+    this.activeTemplate = ''
     if (!elementId) {
       console.log('No element Id provided for Websy Search List')		
       return
@@ -3331,16 +3332,17 @@ class WebsyResultList {
   appendData (d) {
     let startIndex = this.rows.length
     this.rows = this.rows.concat(d)
+    this.activeTemplate = this.options.template
     const html = this.buildHTML(d, startIndex)
     const el = document.getElementById(this.elementId)
     el.innerHTML += html.replace(/\n/g, '')
   }
-  buildHTML (d, startIndex = 0) {
+  buildHTML (d, startIndex = 0, inputTemplate, locator = []) {
     let html = ``
     if (this.options.template) {      
       if (d.length > 0) {
         d.forEach((row, ix) => {
-          let template = `${ix > 0 ? '-->' : ''}${this.options.template}${ix < d.length - 1 ? '<!--' : ''}`
+          let template = `${ix > 0 ? '-->' : ''}${inputTemplate || this.options.template}${ix < d.length - 1 ? '<!--' : ''}`
           // find conditional elements
           let ifMatches = [...template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g)]
           ifMatches.forEach(m => {
@@ -3419,16 +3421,39 @@ class WebsyResultList {
               }
             }
           })
+          let forMatches = [...template.matchAll(/<\s*for[^>]*>([\s\S]*?)<\s*\/\s*for>/g)]
+          forMatches.forEach(m => {
+            let itemsMatch = m[0].match(/(items=["|']\w.+)["|']/g)
+            let forMarkup = m[0].match(/<\s*for[^>]*>/)
+            let withoutFor = m[0].replace(forMarkup, '').replace('</for>', '').replace(/<\s*for[^>]*>/g, '')
+            if (itemsMatch && itemsMatch[0]) {
+              let c = itemsMatch[0].trim().replace('items=', '')
+              if (c.split('')[0] === '"') {
+                c = c.replace(/"/g, '')
+              }
+              else if (c.split('')[0] === '\'') {
+                c = c.replace(/'/g, '')
+              }              
+              let items = row
+              let parts = c.split('.')
+              parts.forEach(p => {
+                items = items[p]
+              })
+              template = template.replace(m[0], this.buildHTML(items, 0, withoutFor, [...locator, `${startIndex + ix}:${c}`]))              
+            }
+          })
           let tagMatches = [...template.matchAll(/(\sdata-event=["|']\w.+)["|']/g)]
           tagMatches.forEach(m => {
             if (m[0] && m.index > -1) {
-              template = template.replace(m[0], `${m[0]} data-id=${startIndex + ix}`)
+              template = template.replace(m[0], `${m[0]} data-id=${startIndex + ix} data-locator='${locator.join(';')}'`)
             }
-          })
-          for (let key in row) {
+          })         
+          let flatRow = this.flattenObject(row) 
+          for (let key in flatRow) {
             let rg = new RegExp(`{${key}}`, 'gm')                            
-            template = template.replace(rg, row[key])
+            template = template.replace(rg, flatRow[key] || '')
           }
+          template = template.replace(/\{(.*?)\}/g, '')
           html += template        
         })
       }
@@ -3453,6 +3478,27 @@ class WebsyResultList {
     }
     return null
   }
+  flattenObject (obj) {
+    const toReturn = {}
+    for (const i in obj) {
+      if (!obj.hasOwnProperty(i)) {
+        continue
+      }
+      if (typeof obj[i] === 'object') {
+        const flatObject = this.flattenObject(obj[i])
+        for (const x in flatObject) {
+          if (!flatObject.hasOwnProperty(x)) {
+            continue
+          }
+          toReturn[i + '.' + x] = flatObject[x]
+        }
+      }
+      else {
+        toReturn[i] = obj[i]
+      }
+    }
+    return JSON.parse(JSON.stringify(toReturn))
+  }
   handleClick (event) {    
     if (event.target.classList.contains('clickable')) {
       let l = event.target.getAttribute('data-event')
@@ -3460,15 +3506,30 @@ class WebsyResultList {
         l = l.split('(')
         let params = []
         const id = event.target.getAttribute('data-id')
+        const locator = event.target.getAttribute('data-locator')
         if (l[1]) {
           l[1] = l[1].replace(')', '')
           params = l[1].split(',')      
         }
         l = l[0]
+        let data = this.rows
+        if (locator !== '') {
+          let locatorItems = locator.split(';')
+          locatorItems.forEach(loc => {
+            let locatorParts = loc.split(':')
+            if (data[locatorParts[0]]) {
+              data = data[locatorParts[0]]
+              let parts = locatorParts[1].split('.')
+              parts.forEach(p => {
+                data = data[p]
+              })              
+            }
+          })
+        }
         params = params.map(p => {
           if (typeof p !== 'string' && typeof p !== 'number') {
-            if (this.rows[+id]) {
-              p = this.rows[+id][p]
+            if (data[+id]) {
+              p = data[+id][p]
             }
           }
           else if (typeof p === 'string') {
@@ -3478,7 +3539,7 @@ class WebsyResultList {
         })
         if (event.target.classList.contains('clickable') && this.options.listeners.click[l]) {      
           event.stopPropagation()
-          this.options.listeners.click[l].call(this, event, this.rows[+id], ...params)
+          this.options.listeners.click[l].call(this, event, data[+id], ...params)
         }  
       }
     }
@@ -3538,7 +3599,7 @@ class WebsyRouter {
     if (this.options.onHide) {
       this.on('hide', this.options.onHide)
     }  
-    this.init()
+    // this.init()
   }
   addGroup (group) {
     if (!this.groups[group]) {
@@ -4087,7 +4148,7 @@ class WebsySearch {
         }, this.options.searchTimeout) 
       }      
       else {
-        if (this.options.onSearch) {
+        if (this.options.onSearch && (event.key === 'Delete' || event.key === 'Backspace')) {
           this.options.onSearch('')
         }
       }