@websy/websy-designs 1.4.1 → 1.4.2

package/dist/server/helpers/v1/pgHelper.js

@@ -79,16 +79,14 @@ class PGHelper {
     this.pool = pool
     this.onReadyAuthCallbackFn = null
     this.onReadyShopCallbackFn = null
-    this.options = { entityConfig: {} }    
+    this.options = { entityConfig: {}, fieldValueSeparator: ':' }    
     this.updateIgnores = [
       'id',
       'create_date'
     ]    
   }
-  init (options) {   
-    if (options.entityConfig) {
-      this.options = Object.assign({}, options)
-    } 
+  init (options) {       
+    this.options = Object.assign({}, this.options, options)
     return new Promise((resolve, reject) => {
       this.pool.connect().then(client => {	        	
         this.client = client
@@ -210,8 +208,10 @@ class PGHelper {
       catch (error) {
         // console.log(error)
       }
+      console.log('where input', input)
+      console.log('splitter is', this.options.fieldValueSeparator)
       let list = input.split(';').map(d => {
-        let parts = d.split(':')
+        let parts = d.split(this.options.fieldValueSeparator)
         if (parts.length === 2) {
           let partValues = parts[1]
           partValues = partValues.split('|')

package/dist/websy-designs-es6.debug.js

@@ -33,7 +33,9 @@ import WebsyDesignsQlikPlugins from '@websy/websy-designs-qlik-plugin/dist/websy
 class APIService {
   constructor (baseUrl = '', options = {}) {
     this.baseUrl = baseUrl
-    this.options = Object.assign({}, options)
+    this.options = Object.assign({}, {
+      fieldValueSeparator: ':'
+    }, options)
   }
   add (entity, data, options = {}) {
     const url = this.buildUrl(entity)
@@ -44,7 +46,7 @@ class APIService {
       query = []
     }
     if (id) {
-      query.push(`id:${id}`)
+      query.push(`id${this.options.fieldValueSeparator}${id}`)
     }    
     return `${this.baseUrl}/${entity}${query.length > 0 ? `${entity.indexOf('?') === -1 ? '?' : '&'}where=${query.join(';')}` : ''}`
   }
@@ -537,78 +539,107 @@ class WebsyDatePicker {
     if (this.selectedRange === 0) {
       return
     }
-    if (this.customRangeSelected === true) {         
-      let diff
-      if (this.options.mode === 'date') {
-        diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay)
-        // if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
-        //   diff += 1
-        // }
-      }  
-      else if (this.options.mode === 'year') {
-        diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0]
-        if (this.selectedRangeDates[this.selectedRangeDates.length - 1] !== this.selectedRangeDates[0]) {
-          // diff += 1
-        }
-      }  
-      else if (this.options.mode === 'monthyear') {
-        let yearDiff = (this.selectedRangeDates[this.selectedRangeDates.length - 1].getFullYear() - this.selectedRangeDates[0].getFullYear()) * 12
-        diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth() - this.selectedRangeDates[0].getMonth())) + yearDiff        
-      }
-      else if (this.options.mode === 'hour') {
-        diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0]
-      }  
-      for (let i = 0; i < diff + 1; i++) {
-        let d
-        let rangeStart
-        let rangeEnd
-        if (this.options.mode === 'date') {          
-          d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
-          // d.setUTCHours(12, 0, 0, 0)
-          d = d.getTime()
-          // console.log('highlighting', this.selectedRangeDates[0].getTime(), d)
-          rangeStart = this.selectedRangeDates[0].getTime()
-          rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
-        }      
-        else if (this.options.mode === 'year') {
-          d = this.selectedRangeDates[0] + i
-          rangeStart = this.selectedRangeDates[0]
-          rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1]
-        }
-        else if (this.options.mode === 'monthyear') {          
-          d = this.floorDate(new Date(this.selectedRangeDates[0].getTime()).setMonth(this.selectedRangeDates[0].getMonth() + i))          
-          d = d.getTime()
-          console.log('highlighting', this.selectedRangeDates[0].getTime(), d)
-          rangeStart = this.selectedRangeDates[0].getTime()
-          rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
-        }
-        else if (this.options.mode === 'hour') {
-          d = this.selectedRangeDates[0] + i
-          rangeStart = this.selectedRangeDates[0]
-          rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1]
-        }
-        let dateEl 
+    if (this.customRangeSelected === true) {
+      if (this.isContinuousRange || this.mouseDown) {
+        let diff
         if (this.options.mode === 'date') {
-          dateEl = document.getElementById(`${this.elementId}_${d}_date`)
-        }
+          diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay)
+          // if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
+          //   diff += 1
+          // }
+        }  
         else if (this.options.mode === 'year') {
-          dateEl = document.getElementById(`${this.elementId}_${d}_year`)
-        }
-        else if (this.options.mode === 'monthyear') {          
-          dateEl = document.getElementById(`${this.elementId}_${d}_monthyear`)
+          diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0]
+          if (this.selectedRangeDates[this.selectedRangeDates.length - 1] !== this.selectedRangeDates[0]) {
+            // diff += 1
+          }
+        }  
+        else if (this.options.mode === 'monthyear') {
+          let yearDiff = (this.selectedRangeDates[this.selectedRangeDates.length - 1].getFullYear() - this.selectedRangeDates[0].getFullYear()) * 12
+          diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth() - this.selectedRangeDates[0].getMonth())) + yearDiff        
         }
         else if (this.options.mode === 'hour') {
-          dateEl = document.getElementById(`${this.elementId}_${d}_hour`)
-        }      
-        if (dateEl) {
-          dateEl.classList.add('selected')
-          if (d === rangeStart) {
-            dateEl.classList.add(`${this.options.sortDirection === 'desc' ? 'last' : 'first'}`)
+          diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0]
+        }  
+        for (let i = 0; i < diff + 1; i++) {
+          let d
+          let rangeStart
+          let rangeEnd
+          if (this.options.mode === 'date') {          
+            d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
+            // d.setUTCHours(12, 0, 0, 0)
+            d = d.getTime()
+            // console.log('highlighting', this.selectedRangeDates[0].getTime(), d)
+            rangeStart = this.selectedRangeDates[0].getTime()
+            rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
+          }      
+          else if (this.options.mode === 'year') {
+            d = this.selectedRangeDates[0] + i
+            rangeStart = this.selectedRangeDates[0]
+            rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1]
+          }
+          else if (this.options.mode === 'monthyear') {          
+            d = this.floorDate(new Date(this.selectedRangeDates[0].getTime()).setMonth(this.selectedRangeDates[0].getMonth() + i))          
+            d = d.getTime()
+            console.log('highlighting', this.selectedRangeDates[0].getTime(), d)
+            rangeStart = this.selectedRangeDates[0].getTime()
+            rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
+          }
+          else if (this.options.mode === 'hour') {
+            d = this.selectedRangeDates[0] + i
+            rangeStart = this.selectedRangeDates[0]
+            rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1]
+          }
+          let dateEl 
+          if (this.options.mode === 'date') {
+            dateEl = document.getElementById(`${this.elementId}_${d}_date`)
           }
-          if (d === rangeEnd) {
-            dateEl.classList.add(`${this.options.sortDirection === 'desc' ? 'first' : 'last'}`)
+          else if (this.options.mode === 'year') {
+            dateEl = document.getElementById(`${this.elementId}_${d}_year`)
+          }
+          else if (this.options.mode === 'monthyear') {          
+            dateEl = document.getElementById(`${this.elementId}_${d}_monthyear`)
+          }
+          else if (this.options.mode === 'hour') {
+            dateEl = document.getElementById(`${this.elementId}_${d}_hour`)
+          }      
+          if (dateEl) {
+            dateEl.classList.add('selected')
+            if (d === rangeStart) {
+              dateEl.classList.add(`${this.options.sortDirection === 'desc' ? 'last' : 'first'}`)
+            }
+            if (d === rangeEnd) {
+              dateEl.classList.add(`${this.options.sortDirection === 'desc' ? 'first' : 'last'}`)
+            }
           }
         }
+      }         
+      else { 
+        this.selectedRangeDates.forEach(dIn => {
+          let d   
+          let suffix = '_date'
+          if (this.options.mode === 'date') { 
+            d = this.floorDate(new Date(dIn.getTime()))  
+            d = d.getTime()        
+          }      
+          else if (this.options.mode === 'year') {
+            d = dIn
+            suffix = '_year'
+          }
+          else if (this.options.mode === 'monthyear') {
+            d = this.floorDate(new Date(dIn.getTime()).setMonth(dIn.getMonth()))          
+            d = d.getTime()
+            suffix = '_monthyear'
+          }
+          else if (this.options.mode === 'hour') {
+            d = dIn
+            suffix = '_hour'
+          }
+          const dateEl = document.getElementById(`${this.elementId}_${d}${suffix}`)          
+          if (dateEl) {
+            dateEl.classList.add('selected', 'first', 'last')
+          }
+        })            
       }
     }
     else {      
@@ -876,7 +907,7 @@ class WebsyDatePicker {
     }
     else if (this.options.mode === 'hour') {
       html += `<div id='${this.elementId}_dateList' class='websy-dp-date-list'><ul>`
-      html += this.options.hours.map(h => `<li id='${this.elementId}_${+h.text.split(':')[0]}_hour' data-hour='${h.text}' class='websy-dp-date websy-dp-hour'>${h.text}</li>`).join('')
+      html += this.options.hours.map(h => `<li id='${this.elementId}_${+h.text.split(':')[0]}_hour' data-id='${+h.text.split(':')[0]}' data-hour='${h.text}' class='websy-dp-date websy-dp-hour'>${h.text}</li>`).join('')
       html += `</ul></div>`
     }   
     return html
@@ -969,7 +1000,7 @@ class WebsyDatePicker {
   }
   selectCustomRange (rangeInput) {
     this.selectedRange = -1
-    let isContinuousRange = true
+    this.isContinuousRange = true
     // if (rangeInput.length === 1) {
     //   this.selectedRangeDates = [...rangeInput]
     //   this.customRangeSelected = true
@@ -984,21 +1015,21 @@ class WebsyDatePicker {
       if (i > 0) {
         if (this.options.mode === 'date' || this.options.mode === 'monthyear') {          
           if ((r.getTime() / this.oneDay) - (rangeInput[i - 1] / this.oneDay) > 1) {
-            isContinuousRange = false
+            this.isContinuousRange = false
           }          
         }
         else if (this.options.mode === 'hour' || this.options.mode === 'year') {
           if (r - rangeInput[i - 1] > 1) {
-            isContinuousRange = false
+            this.isContinuousRange = false
           }
         } 
       }      
     })   
-    if (rangeInput.length > 2 && isContinuousRange === true) {
+    if (rangeInput.length > 2 && this.isContinuousRange === true) {
       this.selectedRangeDates = [rangeInput[0], rangeInput[rangeInput.length - 1]]
       this.customRangeSelected = true
     } 
-    if (isContinuousRange === false) {
+    if (this.isContinuousRange === false) {
       this.currentselection = []
     }          
     // check if the custom range matches a configured range
@@ -1083,7 +1114,7 @@ class WebsyDatePicker {
       })
       let start = list[0]
       let end = ''
-      if (this.customRangeSelected === true) {        
+      if (this.customRangeSelected === true && this.isContinuousRange === true) {        
         end = ` - ${list[list.length - 1]}`
         if (this.options.mode === 'hour') {
           start = this.options.hours[start].text
@@ -1438,8 +1469,9 @@ class WebsyDropdown {
         return d
       }) 
     }
+    this.searchText = ''
     this.tooltipTimeoutFn = null
-    this._originalData = []
+    this._originalData = [...this.options.items]
     this.selectedItems = this.options.selectedItems || []
     if (!elementId) {
       console.log('No element Id provided')
@@ -1625,6 +1657,7 @@ class WebsyDropdown {
   }
   handleKeyUp (event) {
     if (event.target.classList.contains('websy-dropdown-search')) {
+      this.searchText = event.target.value
       if (this._originalData.length === 0) {
         this._originalData = [...this.options.items]
       }
@@ -1789,6 +1822,9 @@ class WebsyDropdown {
     const inputEl = document.getElementById(`${this.elementId}_input`)
     const itemEls = el.querySelectorAll(`.websy-dropdown-item`)
     let dataToUse = this._originalData
+    if (this._originalData.length === 0 && this.searchText === '') {
+      dataToUse = this.options.items
+    }    
     if (this.options.onSearch) {
       dataToUse = this.options.items
     }
@@ -3267,6 +3303,9 @@ class WebsyResultList {
     const el = document.getElementById(elementId)
     if (el) {
       el.addEventListener('click', this.handleClick.bind(this))
+      el.addEventListener('change', this.handleChange.bind(this))
+      el.addEventListener('keyup', this.handleKeyUp.bind(this))
+      el.addEventListener('keydown', this.handleKeyDown.bind(this))
     }
     if (typeof options.template === 'object' && options.template.url) {
       this.templateService.get(options.template.url).then(templateString => {
@@ -3450,47 +3489,59 @@ class WebsyResultList {
   }
   handleClick (event) {    
     if (event.target.classList.contains('clickable')) {
-      let l = event.target.getAttribute('data-event')
-      if (l) {
-        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 (data[+id]) {
-              p = data[+id][p]
-            }
-          }
-          else if (typeof p === 'string') {
-            p = p.replace(/"/g, '').replace(/'/g, '')
+      this.handleEvent(event, 'clickable', 'click')
+    }
+  }
+  handleChange (event) {
+    this.handleEvent(event, 'keyable', 'change')
+  }
+  handleKeyUp (event) {
+    this.handleEvent(event, 'keyable', 'keyup')
+  }
+  handleKeyDown (event) {
+    this.handleEvent(event, 'keyable', 'keydown')
+  }
+  handleEvent (event, eventType, action) {
+    let l = event.target.getAttribute('data-event')
+    if (l) {
+      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]
+            })              
           }
-          return p
         })
-        if (event.target.classList.contains('clickable') && this.options.listeners.click[l]) {      
-          event.stopPropagation()
-          this.options.listeners.click[l].call(this, event, data[+id], ...params)
-        }  
       }
+      params = params.map(p => {
+        if (typeof p !== 'string' && typeof p !== 'number') {
+          if (data[+id]) {
+            p = data[+id][p]
+          }
+        }
+        else if (typeof p === 'string') {
+          p = p.replace(/"/g, '').replace(/'/g, '')
+        }
+        return p
+      })
+      if (event.target.classList.contains(eventType) && this.options.listeners[action] && this.options.listeners[action][l]) {      
+        event.stopPropagation()
+        this.options.listeners[action][l].call(this, event, data[+id], ...params)
+      }  
     }
   }
   render () {
@@ -3525,7 +3576,8 @@ class WebsyRouter {
       defaultView: '',
       defaultGroup: 'main',
       subscribers: { show: [], hide: [] },
-      persistentParameters: false
+      persistentParameters: false,
+      fieldValueSeparator: ':'
     }  
     this.triggerIdList = []
     this.viewIdList = []    
@@ -3581,7 +3633,7 @@ class WebsyRouter {
       } 
     }    
   }
-  addUrlParams (params, reloadView = false) {    
+  addUrlParams (params, reloadView = false, noHistory = true) {    
     if (typeof params === 'undefined') {
       return
     }
@@ -3604,11 +3656,34 @@ class WebsyRouter {
     if (this.options.urlPrefix) {
       inputPath = `/${this.options.urlPrefix}/${inputPath}`
     }
-    history.pushState({
-      inputPath
-    }, inputPath, `${inputPath}?${path}`) 
+    // history.pushState({
+    //   inputPath
+    // }, 'unused', `${inputPath}?${path}`) 
     if (reloadView === true) {
-      this.showView(this.currentView, this.currentParams, 'main')
+      // this.showView(this.currentView, this.currentParams, 'main')
+      this.navigate(`${inputPath}?${path}`, 'main', null, noHistory)
+    }
+  }
+  removeUrlParams (params = [], reloadView = false, noHistory = true) {        
+    this.previousParams = Object.assign({}, this.currentParams)
+    const output = {
+      path: '',
+      items: {}
+    }
+    let path = ''
+    if (this.currentParams && this.currentParams.items) {
+      params.forEach(p => {
+        delete this.currentParams.items[p]
+      })
+      path = this.buildUrlPath(this.currentParams.items)
+    }    
+    let inputPath = this.currentView
+    if (this.options.urlPrefix) {
+      inputPath = `/${this.options.urlPrefix}/${inputPath}`
+    }    
+    if (reloadView === true) {
+      // this.showView(this.currentView, this.currentParams, 'main')
+      this.navigate(`${inputPath}?${path}`, 'main', null, noHistory)
     }
   }
   buildUrlPath (params) {
@@ -3681,6 +3756,25 @@ class WebsyRouter {
     }
     return views
   }
+  getParamValues (param) {
+    let output = []
+    if (this.currentParams && this.currentParams.items && this.currentParams.items[param] && this.currentParams.items[param] !== '') {
+      return this.currentParams.items[param].split('|').map(d => decodeURI(d))
+    }
+    return output
+  }
+  getAPIQuery (ignoredParams = []) {    
+    if (this.currentParams && this.currentParams.items) {
+      let query = []
+      for (const key in this.currentParams.items) {          
+        if (ignoredParams.indexOf(key) === -1) {
+          query.push(`${key}${this.options.fieldValueSeparator}${this.currentParams.items[key]}`)
+        }        
+      }
+      return query
+    }
+    return []
+  }
   handleClick (event) {
     // const id = event.target.id        
     if (event.target.classList.contains(this.options.triggerClass)) {
@@ -3704,17 +3798,18 @@ class WebsyRouter {
     if (typeof params !== 'undefined') {
       url += `?${params.path}`
     }
-    this.currentView = view
-    this.currentViewMain = view
-    if (this.currentView === '/' || this.currentView === '') {
-      this.currentView = this.options.defaultView
-    }
-    if (this.currentViewMain === '/' || this.currentViewMain === '') {
-      this.currentViewMain = this.options.defaultView
-    }    
-    if (view !== '') {
-      this.showView(view, params, 'main')      
-    }
+    this.navigate(url)
+    // this.currentView = view
+    // this.currentViewMain = view
+    // if (this.currentView === '/' || this.currentView === '') {
+    //   this.currentView = this.options.defaultView
+    // }
+    // if (this.currentViewMain === '/' || this.currentViewMain === '') {
+    //   this.currentViewMain = this.options.defaultView
+    // }    
+    // if (view !== '') {
+    //   this.showView(view, params, 'main')      
+    // }
   }
   handleFocus (event) {
     this.controlPressed = false
@@ -3979,27 +4074,29 @@ class WebsyRouter {
     if (this.usesHTMLSuffix === true) {
       inputPath = window.location.pathname.split('/').pop() + inputPath
     }
-    if ((this.currentPath !== newPath || previousParamsPath !== this.currentParams.path) && group === this.options.defaultGroup) {            
-      if (popped === false) {
-        let historyUrl = inputPath
-        if (this.options.urlPrefix) {
-          historyUrl = historyUrl === '/' ? '' : `/${historyUrl}`
-          inputPath = inputPath === '/' ? '' : `/${inputPath}`
-          historyUrl = (`/${this.options.urlPrefix}${historyUrl}`).replace(/\/\//g, '/')
-          inputPath = (`/${this.options.urlPrefix}${inputPath}`).replace(/\/\//g, '/')
-        }
-        if (this.currentParams && this.currentParams.path) {
-          historyUrl += `?${this.currentParams.path}`
-        }
-        else if (this.queryParams && this.options.persistentParameters === true) {
-          historyUrl += `?${this.queryParams}`
-        }        
+    if ((this.currentPath !== inputPath || previousParamsPath !== this.currentParams.path) && group === this.options.defaultGroup) {            
+      let historyUrl = inputPath
+      if (this.options.urlPrefix) {
+        historyUrl = historyUrl === '/' ? '' : `/${historyUrl}`
+        inputPath = inputPath === '/' ? '' : `/${inputPath}`
+        historyUrl = (`/${this.options.urlPrefix}${historyUrl}`).replace(/\/\//g, '/')
+        inputPath = (`/${this.options.urlPrefix}${inputPath}`).replace(/\/\//g, '/')
+      }
+      if (this.currentParams && this.currentParams.path) {
+        historyUrl += `?${this.currentParams.path}`
+      }
+      else if (this.queryParams && this.options.persistentParameters === true) {
+        historyUrl += `?${this.queryParams}`
+      }
+      if (popped === false) {                
         history.pushState({
-          inputPath
-        }, inputPath, historyUrl) 
+          inputPath: historyUrl
+        }, 'unused', historyUrl) 
       }
       else {
-        // 
+        history.replaceState({
+          inputPath: historyUrl
+        }, 'unused', historyUrl) 
       }
     }
     if (toggle === false) {