@websy/websy-designs 1.0.2 → 1.0.3

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)
     }
@@ -2768,7 +2769,8 @@ const WebsyUtils = {
 class WebsyTable {
   constructor (elementId, options) {
     const DEFAULTS = {
-      pageSize: 20
+      pageSize: 20,
+      paging: 'scroll'
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
@@ -2778,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>-->
@@ -2790,7 +2792,7 @@ 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>
@@ -2799,7 +2801,30 @@ class WebsyTable {
           </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))
@@ -2943,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) {
@@ -2962,9 +2993,9 @@ 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`)
@@ -3053,15 +3084,39 @@ 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) 
@@ -4789,3 +4844,5 @@ function usePayPal () {
   pps.src = '//www.paypal.com/sdk/js'
   document.getElementsByTagName('body')[0].appendChild(pps)
 }
+
+export default WebsyDesigns