@websy/websy-designs 1.2.33 → 1.3.0

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

@@ -213,12 +213,20 @@ class PGHelper {
       let list = input.split(';').map(d => {
         let parts = d.split(':')
         if (parts.length === 2) {
-          if (parts[1].indexOf('%') !== -1) {
-            return `${entity ? entity + '.' : ''}${parts[0]} LIKE '${parts[1]}'`
-          }
+          let partValues = parts[1]
+          partValues = partValues.split('|')
+          if (partValues.length === 1) {
+            if (parts[1].indexOf('%') !== -1) {
+              return `${entity ? entity + '.' : ''}${parts[0]} LIKE '${parts[1]}'`
+            }
+            else {
+              return `${entity ? entity + '.' : ''}${parts[0]} = '${parts[1]}'`
+            } 
+          }  
           else {
-            return `${entity ? entity + '.' : ''}${parts[0]} = '${parts[1]}'`
-          } 
+            console.log(`${entity ? entity + '.' : ''}${parts[0]} IN ('${partValues.join('\',\'')}')`)
+            return `${entity ? entity + '.' : ''}${parts[0]} IN ('${partValues.join('\',\'')}')`
+          }         
         }  
         else {
           parts = d.split('!')

package/dist/server/routes/v1/api.js

@@ -31,7 +31,17 @@ function APIRoutes (dbHelper) {
     // console.log(`lang is ${lang}`)
     const sql = dbHelper.buildSelect(req.params.entity, req.query, req.query.columns, lang)
     dbHelper.execute(sql).then(response => {
-      res.json(translate(response))
+      if (process.env.RETURN_COUNTS === true || process.env.RETURN_COUNTS === 'true') {  
+        let countWhere = ''      
+        const countSql = `SELECT COUNT(*) as total FROM ${req.params.entity} WHERE ${dbHelper.buildWhere(req.query.where, req.params.entity)}`
+        dbHelper.execute(countSql).then(countResponse => {
+          response.totalCount = countResponse.rows[0].total
+          res.json(translate(response))  
+        })
+      }
+      else {
+        res.json(translate(response))
+      }      
     }, err => res.json(err))
   })
   router.post('/:entity', (req, res) => {

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

@@ -425,6 +425,7 @@ class WebsyDatePicker {
     if (typeof d === 'number') {
       d = new Date(d)
     }
+    // d.setTime(d.getTime() + d.getTimezoneOffset() * 60000)
     return new Date(d.setHours(0, 0, 0, 0))
   }
   handleClick (event) {
@@ -443,11 +444,7 @@ class WebsyDatePicker {
       this.updateRange(index)
     }
     else if (event.target.classList.contains('websy-dp-date')) {
-      // if (event.target.classList.contains('websy-disabled-date')) {
-      //   return
-      // }
-      // const timestamp = event.target.id.split('_')[0]
-      // this.selectDate(+timestamp)
+      // 
     }
     else if (event.target.classList.contains('websy-dp-confirm')) {
       this.close(true)
@@ -476,7 +473,8 @@ class WebsyDatePicker {
   handleMouseDown (event) {    
     if (this.shiftPressed === true && this.currentselection.length > 0) {
       this.mouseDownId = this.currentselection[this.currentselection.length - 1]
-      this.selectDate(+event.target.id.split('_')[1])
+      let dateId = event.target.getAttribute('data-id')
+      this.selectDate(+dateId)
     }
     else {
       this.mouseDown = true
@@ -489,7 +487,7 @@ class WebsyDatePicker {
           this.currentselection = []
           this.customRangeSelected = false 
         }       
-        this.mouseDownId = +event.target.id.split('_')[1]       
+        this.mouseDownId = +event.target.getAttribute('data-id')
         this.selectDate(this.mouseDownId)
       }
     }    
@@ -500,9 +498,10 @@ class WebsyDatePicker {
         if (event.target.classList.contains('websy-disabled-date')) {
           return
         }
-        if (event.target.id.split('_')[1] !== this.mouseDownId) {
+        let dateId = +event.target.getAttribute('data-id')
+        if (dateId !== this.mouseDownId) {
           this.dragging = true
-          this.selectDate(+event.target.id.split('_')[1])
+          this.selectDate(dateId)
         }
       }
     }
@@ -550,6 +549,7 @@ class WebsyDatePicker {
         let rangeEnd
         if (this.options.mode === 'date') {          
           d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
+          d.setHours(0, 0, 0, 0)
           d = d.getTime()
           rangeStart = this.selectedRangeDates[0].getTime()
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
@@ -819,7 +819,7 @@ class WebsyDatePicker {
           }
           html += paddedDays.join('')
         }
-        html += months[key].map(d => `<li id='${this.elementId}_${d.id}_date' class='websy-dp-date ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.dayOfMonth}</li>`).join('')
+        html += months[key].map(d => `<li id='${this.elementId}_${d.id}_date' data-id='${d.id}' class='websy-dp-date ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.dayOfMonth}</li>`).join('')
         html += `
             </ul>
           </div>
@@ -940,7 +940,7 @@ class WebsyDatePicker {
   selectRange (index, confirm = true) {
     if (this.options.ranges[this.options.mode][index]) {
       this.selectedRangeDates = [...this.options.ranges[this.options.mode][index].range]
-      this.currentselection = [...this.options.ranges[this.options.mode][index].range]
+      this.currentselection = this.options.ranges[this.options.mode][index].range.map(d => d.getTime())
       this.selectedRange = +index
       const el = document.getElementById(`${this.elementId}_header`)
       if (el) {
@@ -1143,9 +1143,7 @@ class WebsyDragDrop {
     else {
       console.error(`No element found with ID ${this.elementId}`)
     }
-    GlobalPubSub.subscribe(this.elementId, 'requestForDDItem', this.handleRequestForItem.bind(this))
-    console.log('constructor dd')
-    console.trace()
+    GlobalPubSub.subscribe(this.elementId, 'requestForDDItem', this.handleRequestForItem.bind(this))        
     GlobalPubSub.subscribe(this.elementId, 'add', this.addItem.bind(this))
     this.render()
   }
@@ -1209,12 +1207,12 @@ class WebsyDragDrop {
     this.draggedId = event.target.getAttribute('data-id')      
     event.dataTransfer.effectAllowed = 'move'
     event.dataTransfer.setData('application/wd-item', JSON.stringify({el: event.target.id, id: this.elementId, itemId: this.draggedId}))
-    console.log('drag start', event)
+    // console.log('drag start', event)
     event.target.style.opacity = 0.5
     this.dragging = true
   }
   handleDragOver (event) {
-    console.log('drag over', event.target.classList)
+    // console.log('drag over', event.target.classList)
     if (event.preventDefault) {
       event.preventDefault()
     }
@@ -1224,7 +1222,7 @@ class WebsyDragDrop {
     event.target.classList.add('drag-over')
   }
   handleDragLeave (event) {
-    console.log('drag leave', event.target.classList)
+    // console.log('drag leave', event.target.classList)
     if (!event.target.classList.contains('droppable')) {
       return
     }
@@ -1235,8 +1233,8 @@ class WebsyDragDrop {
     // this.removeExpandedDrop(side, id, droppedItem)  
   }
   handleDrop (event) {
-    console.log('drag drop')
-    console.log(event.dataTransfer.getData('application/wd-item'))
+    // console.log('drag drop')
+    // console.log(event.dataTransfer.getData('application/wd-item'))
     const data = JSON.parse(event.dataTransfer.getData('application/wd-item'))
     if (event.preventDefault) {
       event.preventDefault()
@@ -1253,7 +1251,7 @@ class WebsyDragDrop {
       index += 1
     }   
     if (draggedIndex === -1) {
-      console.log('requestForDDItem')
+      // console.log('requestForDDItem')
       GlobalPubSub.publish(data.id, 'requestForDDItem', {
         group: this.options.group,
         source: data.id,
@@ -1291,7 +1289,7 @@ class WebsyDragDrop {
     }
   }
   handleDragEnd (event) {    
-    console.log('drag end')
+    // console.log('drag end')
     event.target.style.opacity = 1
     this.draggedId = null
     this.dragging = false
@@ -1497,6 +1495,7 @@ class WebsyDropdown {
       if (typeof d.index === 'undefined') {
         d.index = i        
       }
+      d.currentIndex = i
       return d
     })    
     const headerEl = document.getElementById(`${this.elementId}_header`)   
@@ -1504,15 +1503,17 @@ class WebsyDropdown {
       headerEl.classList[`${this.options.allowClear === true ? 'add' : 'remove'}`]('allow-clear')
     }
     const el = document.getElementById(`${this.elementId}_items`)
-    if (el.childElementCount === 0) {
-      this.render()
-    }
-    else {
-      if (this.options.items.length === 0) {
-        this.options.items = [{label: this.options.noItemsText || 'No Items'}]
+    if (el) {
+      if (el.childElementCount === 0) {
+        this.render()
       }
-      this.renderItems()
-    }    
+      else {
+        if (this.options.items.length === 0) {
+          this.options.items = [{label: this.options.noItemsText || 'No Items'}]
+        }
+        this.renderItems()
+      } 
+    }        
   }
   get data () {
     return this.options.items
@@ -1753,6 +1754,10 @@ class WebsyDropdown {
     const labelEl = document.getElementById(`${this.elementId}_selectedItems`)
     const inputEl = document.getElementById(`${this.elementId}_input`)
     const itemEls = el.querySelectorAll(`.websy-dropdown-item`)
+    let dataToUse = this._originalData
+    if (this.options.onSearch) {
+      dataToUse = this.options.items
+    }
     for (let i = 0; i < itemEls.length; i++) {
       itemEls[i].classList.remove('active')
       let index = itemEls[i].getAttribute('data-index')
@@ -1788,14 +1793,14 @@ class WebsyDropdown {
       }
       else if (this.selectedItems.length > 1) {
         if (this.options.showCompleteSelectedList === true) {
-          let selectedLabels = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
-          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
+          let selectedLabels = this.selectedItems.map(s => dataToUse[s].label || dataToUse[s].value).join(this.options.multiValueDelimiter)
+          let selectedValues = this.selectedItems.map(s => dataToUse[s].value || dataToUse[s].label).join(this.options.multiValueDelimiter)
           labelEl.innerHTML = selectedLabels
           labelEl.setAttribute('data-info', selectedLabels)
           inputEl.value = selectedValues
         }
         else {
-          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
+          let selectedValues = this.selectedItems.map(s => dataToUse[s].value || dataToUse[s].label).join(this.options.multiValueDelimiter)
           labelEl.innerHTML = `${this.selectedItems.length} selected`
           labelEl.setAttribute('data-info', '')
           inputEl.value = selectedValues
@@ -1809,6 +1814,10 @@ class WebsyDropdown {
     }
   }
   updateSelected (index) {
+    let dataToUse = this._originalData && this._originalData.length > 0 ? this._originalData : this.options.items
+    if (this.options.onSearch) {
+      dataToUse = this.options.items
+    }
     if (typeof index !== 'undefined' && index !== null) {
       let pos = this.selectedItems.indexOf(index)      
       if (this.options.multiSelect === false) {
@@ -1824,10 +1833,10 @@ class WebsyDropdown {
       } 
     }    
     // const item = this.options.items[index]
-    const item = this._originalData[index] || this.options.items[index]
+    const item = dataToUse[index]
     this.updateHeader(item)
     if (item && this.options.onItemSelected) {
-      this.options.onItemSelected(item, this.selectedItems, this._originalData || this.options.items, this.options)
+      this.options.onItemSelected(item, this.selectedItems, dataToUse, this.options)
     }
     if (this.options.closeAfterSelection === true) {
       this.close() 
@@ -2755,9 +2764,9 @@ class WebsyPubSub {
       }
     }
     else {
-      if (this.subscriptions[method]) {
-        this.subscriptions[method].forEach(fn => {
-          fn(data)
+      if (this.subscriptions[id]) {
+        this.subscriptions[id].forEach(fn => {
+          fn(method)
         })
       }
     }
@@ -2772,10 +2781,10 @@ class WebsyPubSub {
       }
     }
     else {
-      if (!this.subscriptions[method]) {
-        this.subscriptions[method] = []
+      if (!this.subscriptions[id]) {
+        this.subscriptions[id] = []
       }
-      this.subscriptions[method].push(fn)
+      this.subscriptions[id].push(method)
     }
   }
 }
@@ -3997,6 +4006,7 @@ const WebsyUtils = {
     let red = 0
     let green = 0
     let blue = 0
+    let alpha = 1
     if (backgroundColor.indexOf('#') !== -1) {
       // hex color
       backgroundColor = backgroundColor.replace('#', '')
@@ -4008,13 +4018,15 @@ const WebsyUtils = {
     }
     else if (backgroundColor.toLowerCase().indexOf('rgb') !== -1) {
       // rgb color
-      colorParts = backgroundColor.replace(/rgb\(/gi, '').replace(/\)/gi, '')
+      colorParts = backgroundColor.replace(/rgba\(/gi, '').replace(/\)/gi, '')
+      colorParts = colorParts.replace(/rgb\(/gi, '')
       colorParts = colorParts.split(',')
       red = colorParts[0]
       green = colorParts[1]
       blue = colorParts[2]
+      alpha = colorParts[3] || 1
     }
-    return (red * 0.299 + green * 0.587 + blue * 0.114) > 186 ? darkColor : lightColor
+    return ((red * 0.299 + green * 0.587 + blue * 0.114) / alpha) > 186 ? darkColor : lightColor
   },
   measureText (text, rotation = 0, fontSize = '12px') {
     if (!isNaN(fontSize)) {
@@ -4464,8 +4476,15 @@ class WebsyTable {
     }
     let headHTML = '<tr>' + this.options.columns.map((c, i) => {
       if (c.show !== false) {
+        let style = ''             
+        if (c.style) {
+          style += c.style
+        }        
+        if (c.width) {
+          style += `width: ${(c.width || 'auto')};`
+        }   
         return `
-        <th ${c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : ''}>
+        <th style="${style}">
           <div class ="tableHeader">
             <div class="leftSection">
               <div
@@ -5140,7 +5159,8 @@ class WebsyTable3 {
       showTotalsAbove: true,
       minHandleSize: 20,
       maxColWidth: '50%',
-      allowPivoting: false
+      allowPivoting: false,
+      searchIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-f</title><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`
     }
     this.options = Object.assign({}, DEFAULTS, options)
     this.sizes = {}
@@ -5251,9 +5271,22 @@ class WebsyTable3 {
     data.forEach(row => {
       bodyHtml += `<tr class="websy-table-row">`
       row.forEach((cell, cellIndex) => {
+        let style = ''
+        if (cell.style) {
+          style += cell.style
+        }
+        if (cell.backgroundColor) {
+          style += `background-color: ${cell.backgroundColor}; `
+          if (!cell.color) {
+            style += `color: ${WebsyDesigns.Utils.getLightDark(cell.backgroundColor)}; `  
+          }
+        }
+        if (cell.color) {
+          style += `color: ${cell.color}; `
+        }
         bodyHtml += `<td 
           class='websy-table-cell'
-          style='${cell.style}'
+          style='${style}'
           data-info='${cell.value}'
           colspan='${cell.colspan || 1}'
           rowspan='${cell.rowspan || 1}'
@@ -5292,7 +5325,7 @@ class WebsyTable3 {
         return
       }
       headerHtml += `<tr class="websy-table-row  websy-table-header-row">`
-      row.forEach(col => {
+      row.forEach((col, colIndex) => {
         headerHtml += `<td 
           class='websy-table-cell'  
           style='${col.style}'       
@@ -5307,13 +5340,35 @@ class WebsyTable3 {
         // }
         headerHtml += `        
           >
-          ${col.name}
+          <div>
+            ${col.name}
+            ${col.searchable === true ? this.buildSearchIcon(col, colIndex) : ''}
+          </div>
         </td>`
       })
       headerHtml += `</tr>`
     })
+    const dropdownEl = document.getElementById(`${this.elementId}_dropdownContainer`)          
+    this.options.columns[this.options.columns.length - 1].forEach((c, i) => {
+      if (c.searchable && c.isExternalSearch === true) {      
+        const testEl = document.getElementById(`${this.elementId}_columnSearch_${c.dimId || i}`)
+        if (!testEl) {
+          const newE = document.createElement('div')
+          newE.id = `${this.elementId}_columnSearch_${c.dimId || i}`
+          newE.className = 'websy-modal-dropdown'
+          dropdownEl.appendChild(newE)
+        }
+      }
+    })      
     return headerHtml
   }
+  buildSearchIcon (col, index) {
+    return `
+      <div class="websy-table-search-icon" data-col-id="${col.dimId}" data-col-index="${index}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-f</title><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>
+      </div>
+    `
+  } 
   buildTotalHtml (useWidths = false) {
     if (!this.options.totals) {
       return ''
@@ -5450,7 +5505,13 @@ class WebsyTable3 {
     return output
   }
   handleClick (event) {
-
+    if (event.target.classList.contains('websy-table-search-icon')) {     
+      console.log('clicked on search icon')
+      const colIndex = +event.target.getAttribute('data-col-index')      
+      if (this.options.columns[this.options.columns.length - 1][colIndex].onSearch) {
+        this.options.columns[this.options.columns.length - 1][colIndex].onSearch(event, this.options.columns[this.options.columns.length - 1][colIndex])
+      } 
+    }
   }
   handleMouseDown (event) {
     if (event.target.classList.contains('websy-scroll-handle-y')) {
@@ -5547,20 +5608,26 @@ class WebsyTable3 {
     bodyEl.style.height = `calc(100% - ${this.sizes.header.height}px - ${this.sizes.total.height}px)`
     if (this.options.virtualScroll === true) {
       // set the scroll element positions
-      if (this.vScrollRequired === true) {
-        let vScrollEl = document.getElementById(`${this.elementId}_vScrollContainer`)
-        let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      let vScrollEl = document.getElementById(`${this.elementId}_vScrollContainer`)
+      let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      if (this.vScrollRequired === true) {        
         vScrollEl.style.top = `${this.sizes.header.height + this.sizes.total.height}px`
         vScrollEl.style.height = `${this.sizes.bodyHeight}px` 
         vHandleEl.style.height = Math.max(this.options.minHandleSize, this.sizes.bodyHeight * (this.sizes.rowsToRenderPrecise / this.totalRowCount)) + 'px'
-      }   
-      if (this.hScrollRequired === true) {
-        let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
-        let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      }
+      else {
+        vHandleEl.style.height = '0px'
+      } 
+      let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
+      let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      if (this.hScrollRequired === true) {        
         hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
         hScrollEl.style.width = `${this.sizes.scrollableWidth - 20}px` 
         hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalWidth)) + 'px'
-      }   
+      }  
+      else {
+        hHandleEl.style.height = '0px'
+      } 
     }    
   }
   renderColumnHeaders () {
@@ -5629,7 +5696,7 @@ class WebsyTable3 {
       this.endCol = 0
       for (let i = 0; i < this.options.allColumns[this.options.allColumns.length - 1].length; i++) {            
         cumulativeWidth += this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth      
-        console.log(actualLeft, this.sizes.totalWidth, cumulativeWidth, cumulativeWidth + this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth)
+        console.log('actualLeft', actualLeft, this.sizes.totalWidth, cumulativeWidth, cumulativeWidth + this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth)
         if (actualLeft < cumulativeWidth) {
           this.startCol = i  
           break