Some code cleanup + Fixed minor issue if empty data set

Author: marksmits

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "exmg-datatable",
-  "version": "2.0.4",
+  "version": "2.0.8",
   "description": "Material design data table (Polymer 2.0)",
   "authors": [
     "Mark Smits"

demo/collapse.html

@@ -161,7 +161,7 @@ <h3>[[item.shortText]]</h3>
           return []
         }
         _computedClass(isSelected) {
-          var classes = 'tr item';
+          let classes = 'tr item';
           if (isSelected) {
             classes += ' selected';
           }

demo/simple.html

@@ -116,7 +116,7 @@ <h2>Simple Table</h2>
           };
         }
         _computedClass(isSelected) {
-          var classes = 'tr ';
+          let classes = 'tr ';
           if (isSelected) {
             classes += ' selected';
           }

exmg-data-filter.html

@@ -35,10 +35,7 @@
  -->
 
 <dom-module id="exmg-data-filter">
-  <template></template>
-
   <script>
-
     class ExmgDataFilter extends Polymer.Element {
       static get is() { return 'exmg-data-filter'; }
       static get properties() {
@@ -81,31 +78,24 @@
 
       _updateItems() {
 
-        console.log('_updateItems, ');
-
         /* Skip if raw items or filterfields are not set */
-        if(this.rawItems === undefined || this.filterFields === undefined) {
+        if(!this.rawItems || !this.filterFields) {
           return;
         }
 
         /* return all items when filter is empty */
-        if(this.filterValue === undefined && this.filterValue === '') {
+        if(!this.filterValue || this.filterValue === '') {
             this.set('items', []);
             this.set('items', this.rawItems);
             return;
         }
 
         /* Look for occurances of the filter value in the item fields */
-        var items = [];
-        var filterFields = this.filterFields.split(',');
-        for(var i = 0; i < this.rawItems.length; i++) {
-            for(var j = 0; j < filterFields.length; j++) {
-                if(this.rawItems[i][filterFields[j].trim()].indexOf(this.filterValue) !== -1){
-                    items.push(this.rawItems[i]);
-                    break;
-                }
-            }
-        }
+        let items = [];
+        const filterFields = this.filterFields.split(',');
+        this.rawItems.forEach(o => { filterFields.some(p => o[p].indexOf(this.filterValue) !== -1) && items.push(o)});
+
+        /* Reset result array before adding new results */
         this.set('items', []);
         this.set('items', items);
 

exmg-data-helper.html

@@ -2,15 +2,6 @@
 <link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html">
 
 <dom-module id="exmg-data-helper">
-  <template>
-    <style>
-      :host {
-        display: block;
-      }
-    </style>
-    <slot></slot>
-  </template>
-
   <script>
     /**
      * `exmg-data-helper`
@@ -20,6 +11,12 @@
      * @polymer
      * @demo demo/index.html
      */
+
+(function() {
+    const isArray = o => Array.isArray(o) || Object.prototype.toString.call(o) === '[object Array]';
+    const properArray = o => isArray(o) ? o : [];
+    const lookupValueByPath = (o, path) => path.split('.').reduce((r, p) => r[p], o);
+
     class ExmgDataHelper extends Polymer.GestureEventListeners(Polymer.Element) {
       static get is() { return 'exmg-data-helper'; }
       static get properties() {
@@ -91,9 +88,8 @@
         this._updatePage();
       }
 
-      _computeLength(rawItems) {
-        const rawItems = this.rawItems || [];
-        return rawItems.length;
+      _computeLength() {
+        return properArray(this.rawItems).length;
       }
 
       _ramItemsChanged() {
@@ -106,32 +102,19 @@
       }
 
       _updatePage() {
-        if(this.rawItems === undefined) {
-          return;
-        }
         /* Make sure to always start with same array to ensure consistency in sorting results */
-        const workArray = this.rawItems.slice();
-        const start = (this.pageIndex * this.pageSize);
-
-        console.log('start, this._doSort', start, this._doSort);
+        var workArray = [...properArray(this.rawItems)];
+        var start = (this.pageIndex * this.pageSize);
 
         if(this._doSort && this.sorted) {
-          const lookupItemByPath = (item, path) => {
-            const parts = path.split(".");
-            if (parts.length === 1){
-              return item[parts[0]];
-            }
-            return lookupItemByPath(item[parts[0]], parts.slice(1).join("."));
-          };
-
           workArray.sort((a, b) => {
-            const fieldA = lookupItemByPath(a, this.sorted);
-            const fieldB = lookupItemByPath(b, this.sorted);
+            let fieldA = lookupValueByPath(a, this.sorted);
+            let fieldB = lookupValueByPath(b, this.sorted);
             if(typeof fieldA === 'number' || typeof fieldA === 'boolean') {
               return this.sortDirection === 'ASC' ? fieldA - fieldB : fieldB - fieldA;
             } else {
-              fieldA = fieldA.toLowerCase();
-              fieldB = fieldB.toLowerCase();
+              fieldA = fieldA ? fieldA.toLowerCase() : '';
+              fieldB = fieldB ? fieldB.toLowerCase() : '';
               if (fieldA < fieldB) {
                 return this.sortDirection === 'ASC' ? -1 : 1;
               }
@@ -152,5 +135,7 @@
     }
 
     window.customElements.define(ExmgDataHelper.is, ExmgDataHelper);
+
+  })();
   </script>
 </dom-module>

exmg-paging.html

@@ -119,12 +119,10 @@
       }
 
       _observePageSizeList(ps) {
-        console.log('_observePageSizeList', ps);
         this.pageSize = Number(ps);
       }
 
       _observePageSize(ps) {
-        console.log('_oservePageSize', ps);
         this._pageSize = Number(ps);
       }
 
@@ -133,7 +131,7 @@
       }
 
       _pageInfoEnd(pageIndex, pageSize, totalItems) {
-        var end = (pageIndex + 1) * pageSize;
+        const end = (pageIndex + 1) * pageSize;
         return end < totalItems ? end : totalItems;
       }
 

exmg-tbody.html

@@ -7,7 +7,7 @@
     <style>
       :host {
         display: table-row-group;
-        border-bottom: 1px solid #dbdbdb;
+
       }
       .tr {
         display:table-row;
@@ -198,17 +198,17 @@
       * Select an item from an event object.
       */
       _selectionHandler(e) {
-        var m = e.path.find(entry => {
+        let m = e.path.find(entry => {
           return entry.classList && entry.classList.contains('tr');
         });
-        var model = this.modelForElement(m);
+        let model = this.modelForElement(m);
         if (!model) {
          return;
         }
-        var modelTabIndex, activeElTabIndex;
-        var target = Polymer.dom(e).path[0];
-        var activeEl = Polymer.dom(this.domHost ? this.domHost.root : document).activeElement;
-        var physicalItem = this._physicalItems[model[this.indexAs]];
+        let modelTabIndex, activeElTabIndex;
+        let target = Polymer.dom(e).path[0];
+        let activeEl = Polymer.dom(this.domHost ? this.domHost.root : document).activeElement;
+        let physicalItem = this._physicalItems[model[this.indexAs]];
         // Safari does not focus certain form controls via mouse
         // https://bugs.webkit.org/show_bug.cgi?id=118043
         if (target.localName === 'input' ||
@@ -296,15 +296,15 @@
 
       _forwardItemPath(path, value) {
         path = path.slice(6); // 'items.'.length == 6
-        var dot = path.indexOf('.') + 1;
+        let dot = path.indexOf('.') + 1;
         if (dot === 0) {
           dot = path.length;
         }
-        var idx = parseInt(path.substring(0, dot), 10);
-        var offscreenItem = this._offscreenFocusedItem;
+        let idx = parseInt(path.substring(0, dot), 10);
+        let offscreenItem = this._offscreenFocusedItem;
+
+        let inst = this.modelForElement(this._physicalItems[idx]);
 
-        var inst = this.modelForElement(this._physicalItems[idx]);
-      
         if (!inst || inst[this.indexAs] !== idx) {
           return;
         }
@@ -320,10 +320,10 @@
       * @param {number} size Size of the pool
       */
       _createPool(size) {
-        var physicalItems = new Array(size);
+        let physicalItems = new Array(size);
         this._ensureTemplatized();
-        for (var i = 0; i < size; i++) {
-          var inst = this.stamp(null);
+        for (let i = 0; i < size; i++) {
+          let inst = this.stamp(null);
           // First element child is item; Safari doesn't support children[0]
           // on a doc fragment.
           physicalItems[i] = inst.root.querySelector('*');
@@ -336,12 +336,10 @@
       * Increases the pool size.
       */
       _increasePool(poolSize) {
-        var ts = window.performance.now();
         // Concat arrays in place.
         [].push.apply(this._physicalItems, this._createPool(poolSize));
         this._physicalCount = this._physicalItems.length;
         this._update();
-        this._templateCost = (window.performance.now() - ts);
       }
 
       /**
@@ -351,7 +349,7 @@
         // Check if already templatized
         if (!this.ctor) {
           // Template instance props that should be excluded from forwarding
-          var props = {};
+          let props = {};
           props.__key__ = true;
           props[this.as] = true;
           props[this.indexAs] = true;
@@ -383,10 +381,10 @@
       * @param {!Array<number>=} itemSet
       */
       _assignModels(itemSet) {
-        var count = 0;
+        let count = 0;
         this._physicalItems.forEach((el) => {
-          var inst = this.modelForElement(el);
-          var item = this.items[count];
+          let inst = this.modelForElement(el);
+          let item = this.items[count];
           if (item != null && item !== undefined) {
             //inst.__key__ = this._collection ? this._collection.getKey(item) : null;
             this._forwardProperty(inst, this.as, item);
@@ -419,7 +417,7 @@
 
       _notifyInstancePropV2(inst, prop, value) {
        if (Polymer.Path.matches(this.as, prop)) {
-          var idx = inst[this.indexAs];
+          let idx = inst[this.indexAs];
           if (prop == this.as) {
             this.items[idx] = value;
           }
@@ -451,7 +449,7 @@
         this.clearSelection();
        }
 
-       var model = this.modelForElement(this._physicalItems[index]);
+       let model = this.modelForElement(this._physicalItems[index]);
        if (model) {
          model[this.selectedAs] = true;
        }
@@ -494,7 +492,7 @@
           return;
         }
 
-        var model = this.modelForElement(this._physicalItems[index]);
+        let model = this.modelForElement(this._physicalItems[index]);
         model[this.selectedAs] = false;
 
         this.$.selector.deselectIndex(index);
@@ -519,7 +517,7 @@
        * @param {Object} index The index of the item in the items array.
        */
       toggleSelectionForIndex(index) {
-        var isSelected = this.$.selector.isIndexSelected
+        let isSelected = this.$.selector.isIndexSelected
             ? this.$.selector.isIndexSelected(index) : this.$.selector.isSelected(this.items[index]);
         isSelected ? this.deselectIndex(index) : this.selectIndex(index);
       }

exmg-thead.html

@@ -141,22 +141,20 @@
       */
       _sortedByChanged(sorted) {
         let headerColumns = this.shadowRoot.querySelectorAll('.th');
-
         this._resetOldSorting();
-
         headerColumns.forEach((el) => {
           if(el.getAttribute('sortable') === sorted) {
             el.setAttribute('sorted','');
             this.set('sortDirection', 'ASC');
           }
         });
       }
+
       /*
       * Handle column header tap
       */
       _handleTap(e) {
         let sortField = e.path[0].getAttribute("sortable");
-
         if(e.path[0].classList.contains('th') && sortField){
           if(this.sorted === sortField){
             this.set('sortDirection', this.sortDirection === 'ASC' ? 'DESC' : 'ASC');
@@ -166,12 +164,12 @@
           }
         }
       }
+
       /*
       * Reset old column sorting attributes
       */
       _resetOldSorting(tr) {
         let rowChildren = this.shadowRoot.querySelectorAll('.th[sorted]');
-      //  let rowChildren = this.querySelectorAll('.th[sorted]');
         rowChildren.forEach(el => el.removeAttribute('sorted'));
       }
     }

exmg-toolbar.html

@@ -92,7 +92,6 @@
         ]
       }
       _selectedItemsChanged(changes) {
-        console.log('_selectedItemsChanged', changes);
         if(changes.path === 'selectedItems') {
           this.set('_selectedRows', changes.value === null ? 0 : Array.isArray(changes.value) ? changes.value.length : 1);
         }