@websy/websy-designs 1.10.7 → 1.11.1

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

@@ -0,0 +1,21 @@
+const bCrypt = require('bcrypt-nodejs')
+const md5 = require('md5')
+
+class AuthHelper {
+  constructor (dbHelper, options) {
+    this.dbHelper = dbHelper    
+    const DEFAULTS = {
+      loginType: 'email'
+    }
+    this.options = Object.assign({}, DEFAULTS, options)
+    // console.log(this.options)
+  }  
+  isLoggedIn (req, res, next) {
+    next()      
+  }
+  checkPermissions (req, res, next) {    
+    next()  
+  }
+}
+
+module.exports = AuthHelper

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

@@ -221,6 +221,9 @@ class PGHelper {
     let updates = []
     for (let key in data) {
       if (this.updateIgnores.indexOf(key) === -1) {
+        if (typeof data[key] === 'string') {
+          data[key] = data[key].replace(/''/gm, `'`).replace(/'/gm, `''`).replace(/\\\\/gm, '\\')
+        }
         updates.push(`${key} = ${(data[key] === null ? data[key] : `'${data[key]}'`)}`)
       }      
     }
@@ -269,9 +272,21 @@ class PGHelper {
       }
       else {    
         delete row[(this.options.entityConfig[entity] && this.options.entityConfig[entity].idColumn) || 'id']    
+        let sqlValues = Object.values(row).map(d => {
+          if (d === null) {
+            return d
+          }
+          else {
+            if (typeof d === 'string') { 
+              d = d.replace(/'/g, `''`)
+            }
+            return `'${d}'`
+            // (d === null ? `${d}` : `'${d.replace(/'/)}'`)
+          }
+        }).join(',')
         sql += `
           INSERT INTO ${entity} (${Object.keys(row).join(',')})
-          VALUES (${Object.values(row).map(d => (d === null ? `${d}` : `'${d}'`)).join(',')})
+          VALUES (${sqlValues})
           RETURNING ${(this.options.entityConfig[entity] && this.options.entityConfig[entity].idColumn) || 'id'};
         `
       }

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

@@ -24,10 +24,12 @@ module.exports = function (options) {
     process.env.wdRoot = __dirname
     let version = options.version || 'v1'
     process.env.WD_VERSION = version
-    app.use(bodyParser.json({limit: '5mb'}))
-    app.use(bodyParser.urlencoded({limit: '5mb', extended: true}))
-    app.use(bodyParser.raw({limit: '5mb'}))
+    console.log('max body size is', options.maxBodySize)
+    app.use(bodyParser.json({limit: options.maxBodySize || '5mb'}))
+    app.use(bodyParser.urlencoded({limit: options.maxBodySize || '5mb', extended: true}))
+    app.use(bodyParser.raw({limit: options.maxBodySize || '5mb'}))
     const AuthHelper = require(`./helpers/${version}/authHelper`)
+    const NoAuthHelper = require(`./helpers/${version}/noAuthHelper`)
     const allowCrossDomain = (req, res, next) => {
       // console.log(req.url);
       // const allowedOrigins = ['https://www.google.com', 'http://localhost:4000', 'https://localhost:4000', 'http://ec2-3-92-185-52.compute-1.amazonaws.com', 'https://ec2-3-92-185-52.compute-1.amazonaws.com']
@@ -128,6 +130,9 @@ module.exports = function (options) {
           }    
           app.use('/auth', require(`./routes/${version}/auth`)(dbHelper, options.dbEngine, app, options.strategy))
         }
+        else {
+          app.authHelper = new NoAuthHelper()
+        }
         const protectedRoutes = function (req, res, next) {
           let secureRoutes = true
           if (process.env.SECURE_ROUTES) {

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

@@ -1909,6 +1909,7 @@ class WebsyDropdown {
     const headerPos = WebsyUtils.getElementPos(headerEl)    
     const contentPos = WebsyUtils.getElementPos(contentEl)    
     if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
+      contentEl.style.left = 'unset'
       contentEl.style.right = `calc(100vw - ${headerPos.right}px)`
       contentEl.style.width = `${Math.max(this.options.minWidth, headerEl.clientWidth)}px`
       if (headerPos.bottom + contentPos.height > window.innerHeight) {
@@ -1921,6 +1922,7 @@ class WebsyDropdown {
     }
     else if (this.options.style === 'plain' && headerPos.width === 0 && headerPos.height === 0) {
       const targetPos = WebsyUtils.getElementPos(event.target)
+      contentEl.style.left = 'unset'
       contentEl.style.right = `calc(100vw - ${targetPos.right}px)`  
       contentEl.style.width = `${Math.max(this.options.minWidth, targetPos.width)}px`
     }
@@ -2006,7 +2008,8 @@ class WebsyDropdown {
   }
   get value () {
     if (this.selectedItems && this.selectedItems.length > 0) {
-      return this.selectedItems.map((d, i) => this.options.items[+d])
+      // return this.selectedItems.map((d, i) => this.options.items[+d])
+      return this.selectedItems.map((d, i) => this._originalData[+d])
     }
     return []
   }
@@ -2486,7 +2489,7 @@ class WebsyForm {
         if (f.component) {
           componentsToProcess.push(f)
           html += `
-            ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' style='${f.style || ''}' class='websy-input-container ${f.classes ? f.classes.join(' ') : ''}'>
+            ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' style='${f.style || ''}' class='websy-input-container ${f.classes ? f.classes.join(' ') : ''} ${f.component === 'MediaUpload' ? 'media-upload' : ''}'>
               ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}${f.required === true ? '<span class="websy-form-required-value">*</span>' : ''}
               <div id='${this.elementId}_input_${f.field}_component' class='form-component'></div>
               <span id='${this.elementId}_${f.field}_error' class='websy-form-validation-error'></span>
@@ -2506,7 +2509,7 @@ class WebsyForm {
                 name="${f.field}" 
                 ${(f.attributes || []).join(' ')}
                 class="websy-input websy-textarea"
-              ></textarea>
+              >${f.value || ''}</textarea>
               <span id='${this.elementId}_${f.field}_error' class='websy-form-validation-error'></span>
             </div><!--
           ` 
@@ -2525,7 +2528,7 @@ class WebsyForm {
                 ${(f.attributes || []).join(' ')}
                 name="${f.field}" 
                 placeholder="${f.placeholder || ''}"
-                value="${f.value || ''}"
+                value="${f.type === 'date' ? '' : f.value || ''}"
                 valueAsDate="${f.type === 'date' ? f.value : ''}"
                 oninvalidx="this.setCustomValidity('${f.invalidMessage || 'Please fill in this field.'}')"
               />
@@ -2573,6 +2576,9 @@ class WebsyForm {
           if (this.fieldMap[field].type === 'checkbox') {
             el.checked = value
           }
+          if (this.fieldMap[field].type === 'date') {
+            el.valueAsDate = value
+          }
         }
         else {
           console.error(`Input for ${field} does not exist in form.`)    
@@ -2717,10 +2723,12 @@ class MultiForm {
   constructor (elementId, options) {
     this.elementId = elementId    
     const DEFAULTS = {
-      addButton: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="256" y1="112" x2="256" y2="400" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="400" y1="256" x2="112" y2="256" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,      
-      deleteButton: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
+      addIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="256" y1="112" x2="256" y2="400" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="400" y1="256" x2="112" y2="256" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,      
+      deleteIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
       allowAdd: true,
-      allowDelete: true
+      allowDelete: true,
+      addLabel: '',
+      deleteLabel: ''
     }
     this.options = Object.assign({}, DEFAULTS, options)
     this.formData = []
@@ -2729,7 +2737,12 @@ class MultiForm {
     const el = document.getElementById(elementId)
     if (el) {
       el.addEventListener('click', this.handleClick.bind(this))
-      el.innerHTML = `<div id='${elementId}_container' class='websy-multi-form-container'></div>`
+      el.innerHTML = `
+        <div id='${elementId}_container' class='websy-multi-form-container'></div>
+        <button id='${this.elementId}_addButton' class='websy-multi-form-add'>
+          ${this.options.addIcon}${this.options.addLabel}
+        </button>   
+      `
     }    
     this.render()
   }
@@ -2738,24 +2751,28 @@ class MultiForm {
     this.render()
   }
   addEntry () {
-    const el = document.getElementById(`${this.elementId}_container`)
-    let newId = WebsyDesigns.Utils.createIdentity()
-    const newFormEl = document.createElement('div')
-    newFormEl.id = `${this.elementId}_${newId}_formContainer`
-    newFormEl.classList.add('websy-multi-form-form-container')
-    newFormEl.innerHTML = `
-      <div id='${this.elementId}_${newId}_form' class='websy-multi-form-form'>
-      </div>
-      <button id='${this.elementId}_${newId}_deleteButton' data-formid='${newId}' class='hidden websy-multi-form-delete'>
-        ${this.options.deleteButton}
-      </button>          
-      <button id='${this.elementId}_${newId}_addButton' data-formid='${newId}' class='websy-multi-form-add'>
-        ${this.options.addButton}
-      </button>   
-    `
-    el.appendChild(newFormEl)
-    let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
-    this.forms.push(new WebsyDesigns.Form(`${this.elementId}_${newId}_form`, formOptions))
+    const addEl = document.getElementById(`${this.elementId}_addButton`)
+    if (typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows) {      
+      const el = document.getElementById(`${this.elementId}_container`)
+      let newId = WebsyDesigns.Utils.createIdentity()
+      const newFormEl = document.createElement('div')
+      newFormEl.id = `${this.elementId}_${newId}_formContainer`
+      newFormEl.classList.add('websy-multi-form-form-container')
+      let html = `
+        <div id='${this.elementId}_${newId}_form' class='websy-multi-form-form'>
+        </div>
+        <button id='${this.elementId}_${newId}_deleteButton' data-formid='${newId}' class='websy-multi-form-delete'>
+          ${this.options.deleteIcon}${this.options.deleteLabel}
+        </button>
+      `                   
+      newFormEl.innerHTML = html
+      el.appendChild(newFormEl)
+      let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
+      this.forms.push(new WebsyDesigns.Form(`${this.elementId}_${newId}_form`, formOptions))  
+      if (addEl) {
+        addEl.style.display = this.forms.length < this.options.maxRows ? 'flex' : 'none'
+      }           
+    }
   }
   clear () {
     this.formData = []
@@ -2767,12 +2784,7 @@ class MultiForm {
     }
   }
   get data () {
-    const d = this.forms.map(f => (f.data))
-    console.log('forms data', d)
-    if (this.options.allowAdd !== false) {      
-      // we don't return the last form
-      d.pop()
-    }
+    const d = this.forms.map(f => (f.data))    
     return d
   }
   set data (d) {
@@ -2784,16 +2796,6 @@ class MultiForm {
   }
   handleClick (event) {
     if (event.target.classList.contains('websy-multi-form-add')) {
-      let id = event.target.getAttribute('data-formid')
-      // hide add button and show delete button
-      const addButtonEl = document.getElementById(`${this.elementId}_${id}_addButton`)
-      if (addButtonEl) {
-        addButtonEl.classList.add('hidden')
-      }
-      const deleteButtonEl = document.getElementById(`${this.elementId}_${id}_deleteButton`)
-      if (deleteButtonEl) {
-        deleteButtonEl.classList.remove('hidden')
-      }
       // add new form
       if (this.options.allowAdd === true) {
         this.addEntry()
@@ -2818,6 +2820,10 @@ class MultiForm {
       if (el) {
         el.remove()
       }
+      const addEl = document.getElementById(`${this.elementId}_addButton`)
+      if (addEl) {
+        addEl.style.display = (typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows) ? 'flex' : 'none'
+      }
       // delete form element based on id
     }
   }
@@ -2837,7 +2843,7 @@ class MultiForm {
         if (this.options.allowDelete === true) {          
           html += `
             <button id='${this.elementId}_${d.formId}_deleteButton' data-formid='${d.formId}' data-rowid='${d.id}' class='websy-multi-form-delete'>
-              ${this.options.deleteButton}
+              ${this.options.deleteIcon}${this.options.deleteLabel}
             </button>
           `
         }
@@ -2846,20 +2852,6 @@ class MultiForm {
         `
       })
       let id = WebsyDesigns.Utils.createIdentity()
-      if (this.options.allowAdd === true) {
-        html += `
-          <div id='${this.elementId}_${id}_formContainer' class='websy-multi-form-form-container'>
-            <div id='${this.elementId}_${id}_form' class='websy-multi-form-form'>
-            </div>
-            <button id='${this.elementId}_${id}_deleteButton' data-formid='${id}' class='hidden websy-multi-form-delete'>
-              ${this.options.deleteButton}
-            </button>          
-            <button id='${this.elementId}_${id}_addButton' data-formid='${id}' class='websy-multi-form-add'>
-              ${this.options.addButton}
-            </button>                    
-          </div>
-        `
-      }
       el.innerHTML = html
       this.forms = new Array(this.formData.length)
       this.formData.forEach((d, i) => {
@@ -2868,11 +2860,15 @@ class MultiForm {
         formObject.data = d
         this.forms[i] = formObject
       })
-      if (this.options.allowAdd === true) {
-        let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
-        let formObject = new WebsyDesigns.Form(`${this.elementId}_${id}_form`, formOptions)
-        this.forms.push(formObject)
-      }
+      const addEl = document.getElementById(`${this.elementId}_addButton`)
+      if (addEl) {
+        if (this.options.allowAdd === true) {      
+          addEl.style.display = (typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows) ? 'flex' : 'none'
+        }
+        else {
+          addEl.style.display = 'none'
+        }  
+      }      
     }
   }
   validateForm () {
@@ -3664,7 +3660,7 @@ class WebsyPDFButton {
                     else {
                       fileName = this.options.fileName || 'Export'
                     }                
-                    msg += `download='${fileName}.pdf'`
+                    msg += `download="${fileName.replace(/'/g, '')}.pdf"`
                   }
                   msg += `
                       >
@@ -4375,7 +4371,11 @@ class WebsyResultList {
   }
 }
 
-/* global history */
+/* 
+  global
+  history
+  WebsyDesigns
+*/
 class WebsyRouter {
   constructor (options) {
     const defaults = {
@@ -4392,6 +4392,7 @@ class WebsyRouter {
       persistentParameters: false,
       fieldValueSeparator: ':'
     }  
+    this.apiService = new WebsyDesigns.APIService('')
     this.triggerIdList = []
     this.viewIdList = []    
     this.previousPath = ''
@@ -4424,7 +4425,7 @@ class WebsyRouter {
   }
   addGroup (group) {
     if (!this.groups[group]) {
-      const els = document.querySelectorAll(`.websy-view[data-group="${group}"]`)
+      const els = document.querySelectorAll(`.${this.options.viewClass}[data-group="${group}"]`)
       if (els) {        
         this.getClosestParent(els[0], parent => {
           this.groups[group] = {
@@ -4543,9 +4544,9 @@ class WebsyRouter {
     if (!this.groups) {
       this.groups = {}
     }
-    const parentEl = document.querySelector(`.websy-view[data-view="${parent}"]`)
+    const parentEl = document.querySelector(`.${this.options.viewClass}[data-view="${parent}"]`)
     if (parentEl) {
-      const els = parentEl.querySelectorAll(`.websy-view[data-group]`)
+      const els = parentEl.querySelectorAll(`.${this.options.viewClass}[data-group]`)
       for (let i = 0; i < els.length; i++) {
         const g = els[i].getAttribute('data-group')
         const v = els[i].getAttribute('data-view')
@@ -4803,27 +4804,85 @@ class WebsyRouter {
       })      
     }
   }
+  preloadView (view, callbackFn) {
+    if (this.options.views[view].load) {
+      this.options.views[view].load(callbackFn)
+    }
+  }
+  initView (view) {
+    return new Promise((resolve, reject) => {
+      if (!this.options.views[view]) {
+        this.options.views[view] = {
+          components: []
+        }
+      }
+      if (this.options.views[view].ready === true) {
+        resolve()
+      }
+      else if (this.options.views[view].template) {
+        this.preloadView(view, (data = {}) => {
+          const viewEl = document.querySelector(`[data-view='${view}'].${this.options.viewClass}`)
+          if (viewEl) {
+            this.options.views[view].templateInstance = new WebsyDesigns.Template(viewEl, {
+              template: this.options.views[view].template,
+              data,
+              readyCallbackFn: () => {
+                this.options.views[view].ready = true
+                resolve()
+              }
+            })
+          }
+          else {
+            console.log(`No view element found for '${view}' to render template`)
+            this.options.views[view].ready = true
+            resolve()
+          }
+        })        
+      }
+      else if (this.options.views[view].ready !== true && this.options.views[view].load) {
+        this.preloadView(view, (data = {}) => {
+          this.options.views[view].ready = true
+          resolve()
+        })
+      }
+      else {
+        this.options.views[view].ready = true
+        resolve()
+      }
+    })
+  }
   showView (view, params, group) {
     if (view === '/' || view === '') {
       view = this.options.defaultView || ''
     }
-    this.activateItem(view, this.options.triggerClass)
-    this.activateItem(view, this.options.viewClass)
-    let children = this.getActiveViewsFromParent(view)
-    for (let c = 0; c < children.length; c++) {
-      this.activateItem(children[c].view, this.options.triggerClass)
-      this.activateItem(children[c].view, this.options.viewClass)
-      this.showComponents(children[c].view)
-      this.publish('show', [children[c].view, null, group])
-    }
-    if (this.previousView !== this.currentView || group !== 'main') {
-      this.showComponents(view)
-      this.publish('show', [view, params, group]) 
-    }       
-    else if (this.previousView === this.currentView && this.previousParams.path !== this.currentParams.path) { 
-      this.showComponents(view)
-      this.publish('show', [view, params, group]) 
-    }    
+    this.initView(view).then(() => {
+      this.activateItem(view, this.options.triggerClass)
+      this.activateItem(view, this.options.viewClass)
+      let children = this.getActiveViewsFromParent(view)
+      for (let c = 0; c < children.length; c++) {
+        this.activateItem(children[c].view, this.options.triggerClass)
+        this.activateItem(children[c].view, this.options.viewClass)
+        this.showComponents(children[c].view)
+        if (children[c].show) {
+          children[c].show.call(children[c])
+        }
+        this.publish('show', [children[c].view, null, group])
+      }
+      if (this.previousView !== this.currentView || group !== 'main') {
+        this.showComponents(view)
+        if (this.options.views[view].show) {
+          this.options.views[view].show.call(this.options.views[view])
+        }
+        this.publish('show', [view, params, group]) 
+      }       
+      else if (this.previousView === this.currentView && this.previousParams.path !== this.currentParams.path) { 
+        this.showComponents(view)
+        if (this.options.views[view].show) {
+          this.options.views[view].show.call(this.options.views[view])
+        }
+        this.publish('show', [view, params, group]) 
+      }    
+    })
   }
   reloadCurrentView () {
     this.showView(this.currentView, this.currentParams, 'main')
@@ -5114,7 +5173,18 @@ class WebsyTemplate {
       }
     }
     this.options = Object.assign({}, DEFAULTS, options)
-    this.elementId = elementId
+    if (typeof elementId === 'object') {
+      if (elementId.id) {
+        this.elementId = elementId.id
+      }
+      else {
+        elementId.id = WebsyDesigns.Utils.createIdentity()
+        this.elementId = elementId.id
+      }
+    }
+    else {
+      this.elementId = elementId
+    }
     this.templateService = new WebsyDesigns.APIService('')
     if (!elementId) {
       console.log('No element Id provided for Websy Template')		
@@ -5232,6 +5302,10 @@ class WebsyTemplate {
     }
     return html
   }
+  set data (d) {
+    this.options.data = d
+    this.render()
+  }
   handleClick (event) {
     if (event.target.classList.contains('clickable')) {
       this.handleEvent(event, 'clickable', 'click')
@@ -9971,8 +10045,10 @@ class WebsyKPI {
       }      
       html += `   
           <div class="websy-kpi-info">
-            <div class="websy-kpi-label ${this.options.label.classes.join(' ') || ''}">
-              ${(this.options.label || {}).value || ''}
+            <div class="websy-kpi-label-container">
+              <div class="websy-kpi-label ${this.options.label.classes.join(' ') || ''}">
+                ${(this.options.label || {}).value || ''}
+              </div>
       `
       if (this.options.tooltip && this.options.tooltip.value) {
         html += `