@websy/websy-designs 1.0.0 → 1.0.3

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

@@ -172,7 +172,17 @@ function ShopRoutes (dbHelper, engine, app) {
         dbHelper.execute(sql).then(result => {
           if (result.rows.length > 0) {
             let basket = result.rows[0] 
-            basket.items = JSON.parse(basket.items)            
+            try {
+              basket.items = JSON.parse(JSONSafeRead(basket.items))            
+            }
+            catch (error) {
+              if (basket.items) {
+                basket.items = JSON.parse(basket.items) 
+              }              
+              else {
+                basket.items = []
+              }
+            }
             try {
               basket.meta = JSON.parse(JSONSafeRead(basket.meta))
             }
@@ -230,10 +240,10 @@ function ShopRoutes (dbHelper, engine, app) {
   }
 
   function JSONSafeWrite (v) {    
-    return v.replace(/'/g, '\'\'').replace(/\\(?=[bfnrtv0'"])/g, '\\\\').replace(/\t/)
+    return v.replace(/'/g, '\'\'').replace(/\\(?=[bfnrtv0'"])/g, '\\\\').replace(/\t/g, '')
   }
   function JSONSafeRead (v) {    
-    return v.replace(/''/g, '\'').replace(/\\(?=[^bfnrtv0'"])/g, '\\\\')
+    return v.replace(/''/g, '\'').replace(/\\(?=[^bfnrtv0'"])/g, '\\\\').replace(/\t/g, '')
   }
 
   function readyCallback () {

package/dist/server/websy-designs-server.js

@@ -3,7 +3,6 @@ const bodyParser = require('body-parser')
 // const cookie = require('cookie')
 const cookieParser = require('cookie-parser')
 const expressSession = require('express-session')
-const { log } = require('grunt')
 // const sessionHelper = require('./helpers/v1/sessionHelper')
 // const DBSession = require(process.env.EXPRESS_SESSION_CONNECT)(expressSession)
 

package/dist/websy-designs.debug.js

@@ -967,12 +967,13 @@ class WebsyForm {
       el.innerHTML = msg
     }
   }
-  handleClick (event) {
-    event.preventDefault()
+  handleClick (event) {    
     if (event.target.classList.contains('submit')) {
+      event.preventDefault()
       this.submitForm()
     }
     else if (event.target.classList.contains('cancel')) {
+      event.preventDefault()
       this.cancelForm()
     }
   }
@@ -2260,18 +2261,7 @@ class WebsyRouter {
         groupActiveView = this.groups[group].activeView
       }      
       this.previousPath = this.groups[group].activeView
-    }
-    if (toggle === true) {
-      if (this.previousPath !== '') {
-        this.hideView(this.previousPath, group)
-      }
-    }
-    else {      
-      this.hideView(this.previousView, group)
     }    
-    if (toggle === true && newPath === groupActiveView) {
-      return
-    }
     if (group && this.groups[group] && group !== this.options.defaultGroup) {
       this.groups[group].activeView = newPath
     }
@@ -2287,6 +2277,17 @@ class WebsyRouter {
     if (this.currentViewMain === '/') {
       this.currentViewMain = this.options.defaultView
     }
+    if (toggle === true) {
+      if (this.previousPath !== '') {
+        this.hideView(this.previousPath, group)
+      }
+    }
+    else {      
+      this.hideView(this.previousView, group)
+    }    
+    if (toggle === true && newPath === groupActiveView) {
+      return
+    }
     if (toggle === false) {
       this.showView(this.currentView, this.currentParams)
     }
@@ -2764,10 +2765,12 @@ const WebsyUtils = {
   }
 }
 
+/* global WebsyDesigns */ 
 class WebsyTable {
   constructor (elementId, options) {
     const DEFAULTS = {
-      pageSize: 20
+      pageSize: 20,
+      paging: 'scroll'
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
@@ -2777,8 +2780,8 @@ class WebsyTable {
     this.data = []
     const el = document.getElementById(this.elementId)
     if (el) {
-      el.innerHTML = `
-        <div id='${this.elementId}_tableContainer' class='websy-vis-table'>
+      let html = `
+        <div id='${this.elementId}_tableContainer' class='websy-vis-table ${this.options.paging === 'pages' ? 'with-paging' : ''}'>
           <!--<div class="download-button">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z"/></svg>
           </div>-->
@@ -2789,14 +2792,45 @@ class WebsyTable {
             </tbody>
             <tfoot id="${this.elementId}_foot">
             </tfoot>
-          </table>
+          </table>      
+          <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
+            <div>
+              <div id="${this.elementId}_errorTitle"></div>
+              <div id="${this.elementId}_errorMessage"></div>
+            </div>            
+          </div>
+          <div id="${this.elementId}_loadingContainer"></div>
         </div>
-      `
+      `      
+      if (this.options.paging === 'pages') {
+        html += `
+          <div class="websy-table-paging-container">
+            Show <div id="${this.elementId}_pageSizeSelector" class="websy-vis-page-selector"></div> rows
+            <ul id="${this.elementId}_pageList" class="websy-vis-page-list"></ul>
+          </div>
+        `
+      }
+      let pageOptions = [10, 20, 50, 100, 200]
+      el.innerHTML = html      
+      if (this.options.paging === 'pages') {
+        this.pageSizeSelector = new WebsyDesigns.Dropdown(`${this.elementId}_pageSizeSelector`, {
+          selectedItems: [pageOptions.indexOf(this.options.pageSize)],
+          items: pageOptions.map(p => ({ label: p.toString(), value: p })),
+          allowClear: false,
+          disableSearch: true,
+          onItemSelected: (selectedItem) => {
+            if (this.options.onChangePageSize) {
+              this.options.onChangePageSize(selectedItem.value)
+            }
+          }
+        })
+      }
       el.addEventListener('click', this.handleClick.bind(this))
       el.addEventListener('mouseout', this.handleMouseOut.bind(this))
       el.addEventListener('mousemove', this.handleMouseMove.bind(this))
       const scrollEl = document.getElementById(`${this.elementId}_tableContainer`)
       scrollEl.addEventListener('scroll', this.handleScroll.bind(this))
+      this.loadingDialog = new WebsyDesigns.LoadingDialog(`${this.elementId}_loadingContainer`)
       this.render()
     } 
     else {
@@ -2804,6 +2838,7 @@ class WebsyTable {
     }
   }
   appendRows (data) {
+    this.hideError()
     let bodyHTML = ''
     if (data) {
       bodyHTML += data.map((r, rowIndex) => {
@@ -2830,12 +2865,13 @@ class WebsyTable {
                   class='${this.options.columns[i].classes || ''}' 
                   style='${style}'
                   colspan='${c.colspan || 1}'
+                  rowspan='${c.rowspan || 1}'
                 >
                   <a href='${c.value}' target='${this.options.columns[i].openInNewTab === true ? '_blank' : '_self'}'>${c.displayText || this.options.columns[i].linkText || c.value}</a>
                 </td>
               `
             } 
-            else if (this.options.columns[i].showAsNavigatorLink === true && c.value.trim() !== '') {
+            else if ((this.options.columns[i].showAsNavigatorLink === true || this.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
               return `
                 <td 
                   data-view='${c.value}' 
@@ -2844,6 +2880,7 @@ class WebsyTable {
                   class='trigger-item ${this.options.columns[i].clickable === true ? 'clickable' : ''} ${this.options.columns[i].classes || ''}' 
                   style='${style}'
                   colspan='${c.colspan || 1}'
+                  rowspan='${c.rowspan || 1}'
                 >${c.displayText || this.options.columns[i].linkText || c.value}</td>
               `
             } 
@@ -2862,6 +2899,7 @@ class WebsyTable {
                   class='${this.options.columns[i].classes || ''}' 
                   style='${style}'
                   colspan='${c.colspan || 1}'
+                  rowspan='${c.rowspan || 1}'
                 >${c.value}</td>
               `
             }
@@ -2930,6 +2968,12 @@ class WebsyTable {
         this.options.onClick(event, this.data[rowIndex][colIndex], this.data[rowIndex], this.options.columns[colIndex])
       }      
     }
+    else if (event.target.classList.contains('websy-page-num')) {
+      const pageNum = +event.target.getAttribute('data-page')
+      if (this.options.onSetPage) {
+        this.options.onSetPage(pageNum)
+      }
+    }
   }
   handleMouseMove (event) {  
     if (this.tooltipTimeoutFn) {
@@ -2949,10 +2993,19 @@ class WebsyTable {
     }
   }
   handleScroll (event) {
-    if (this.options.onScroll) {
+    if (this.options.onScroll && this.options.paging === 'scroll') {
       this.options.onScroll(event)
-    }
+    }    
   } 
+  hideError () {
+    const containerEl = document.getElementById(`${this.elementId}_errorContainer`)
+    if (containerEl) {
+      containerEl.classList.remove('active')
+    }
+  }
+  hideLoading () {
+    this.loadingDialog.hide()
+  }
   internalSort (column, colIndex) {
     this.options.columns.forEach((c, i) => {
       c.activeSort = i === colIndex      
@@ -2993,11 +3046,13 @@ class WebsyTable {
     if (!this.options.columns) {
       return
     }
+    this.hideError()
     this.data = []
     this.rowCount = 0
     const bodyEl = document.getElementById(`${this.elementId}_body`)
     bodyEl.innerHTML = ''
     if (this.options.allowDownload === true) {
+      // doesn't do anything yet
       const el = document.getElementById(this.elementId)
       if (el) {
         el.classList.add('allow-download')
@@ -3029,20 +3084,65 @@ class WebsyTable {
     }).join('') + '</tr>'
     const headEl = document.getElementById(`${this.elementId}_head`)
     headEl.innerHTML = headHTML
-    let footHTML = '<tr>' + this.options.columns.map((c, i) => {
-      if (c.show !== false) {
-        return `
-          <th></th>
-        `
+    // let footHTML = '<tr>' + this.options.columns.map((c, i) => {
+    //   if (c.show !== false) {
+    //     return `
+    //       <th></th>
+    //     `
+    //   }
+    // }).join('') + '</tr>'
+    // const footEl = document.getElementById(`${this.elementId}_foot`)
+    // footEl.innerHTML = footHTML
+    if (this.options.paging === 'pages') {
+      const pagingEl = document.getElementById(`${this.elementId}_pageList`)
+      if (pagingEl) {
+        let pages = (new Array(this.options.pageCount)).fill('').map((item, index) => {
+          return `<li data-page="${index}" class="websy-page-num ${(this.options.pageNum === index) ? 'active' : ''}">${index + 1}</li>`
+        })
+        let startIndex = 0
+        if (this.options.pageCount > 8) {
+          startIndex = Math.max(0, this.options.pageNum - 4)
+          pages = pages.splice(startIndex, 10)
+          if (startIndex > 0) {
+            pages.splice(0, 0, `<li>Page&nbsp;</li><li data-page="0" class="websy-page-num">First</li><li>...</li>`)
+          }
+          else {
+            pages.splice(0, 0, '<li>Page&nbsp;</li>')
+          }
+          if (this.options.pageNum < this.options.pageCount - 1) {
+            pages.push('<li>...</li>')
+            pages.push(`<li data-page="${this.options.pageCount - 1}" class="websy-page-num">Last</li>`)
+          }
+        }
+        pagingEl.innerHTML = pages.join('')
       }
-    }).join('') + '</tr>'
-    const footEl = document.getElementById(`${this.elementId}_foot`)
-    footEl.innerHTML = footHTML
+    }
     if (data) {
       // this.data = this.data.concat(data)
       this.appendRows(data) 
     }
-  }  
+  } 
+  showError (options) {
+    const containerEl = document.getElementById(`${this.elementId}_errorContainer`)
+    if (containerEl) {
+      containerEl.classList.add('active')
+    }
+    if (options.title) {
+      const titleEl = document.getElementById(`${this.elementId}_errorTitle`)
+      if (titleEl) {
+        titleEl.innerHTML = options.title
+      } 
+    }
+    if (options.message) {
+      const messageEl = document.getElementById(`${this.elementId}_errorTitle`)
+      if (messageEl) {
+        messageEl.innerHTML = options.message
+      } 
+    }
+  } 
+  showLoading (options) {
+    this.loadingDialog.show(options)
+  }
 }
 
 /* global d3 include WebsyDesigns */ 
@@ -4744,3 +4844,5 @@ function usePayPal () {
   pps.src = '//www.paypal.com/sdk/js'
   document.getElementsByTagName('body')[0].appendChild(pps)
 }
+
+export default WebsyDesigns