Save sort order to localstorage

mistio · Apr 28, 2018 · 0dd3631 · 0dd3631
1 parent 5652955
commit 0dd3631
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "mist-list",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "authors": [
     "Dimitris Moraitis <[email protected]>",
     "Christina Papakonstantinou <[email protected]>"

diff --git a/mist-list.html b/mist-list.html
@@ -401,7 +401,7 @@ <h2>Download list data in CSV</h2>
             <template is="dom-repeat" items="[[frozen]]" as="column">
                 <vaadin-grid-column frozen resizable width$="[[columnWidth(column,frozenWidth)]]">
                     <template class="header" style="z-index: 1">
-                        <vaadin-grid-sorter path="[[column]]" style="z-index: 1 !important" hidden$=[[timeseries]] id$="sorter-column-[[column]]">[[_getTitle(column)]]</vaadin-grid-sorter>
+                        <vaadin-grid-sorter path="[[column]]" direction$=[[_getDirection(column)]] cmp="[[_getComparisonFunction(column)]]"  hidden$=[[timeseries]] id$="sorter-column-[[column]]" style="z-index: 1 !important">[[_getTitle(column)]]</vaadin-grid-sorter>
                         <span class="header" hidden$=[[!timeseries]]>[[_getTitle(column)]]</span>
                     </template>
                     <template>
@@ -413,7 +413,7 @@ <h2>Download list data in CSV</h2>
             <template is="dom-repeat" items="{{visible}}" as="column" restamp>
                 <vaadin-grid-column resizable width$="[[columnWidth(column)]]">
                     <template class="header">
-                        <vaadin-grid-sorter path="[[column]]" cmp="[[_getComparisonFunction(column)]]" hidden$=[[timeseries]] id$="sorter-column-[[column]]">[[_getTitle(column)]]</vaadin-grid-sorter>
+                        <vaadin-grid-sorter path="[[column]]" direction$=[[_getDirection(column)]]  cmp="[[_getComparisonFunction(column)]]" hidden$=[[timeseries]] id$="sorter-column-[[column]]">[[_getTitle(column)]]</vaadin-grid-sorter>
                         <span class="header" hidden$=[[!timeseries]]>[[_getTitle(column)]]</span>
                     </template>
                     <template>
@@ -426,7 +426,7 @@ <h2>Download list data in CSV</h2>
                 <template is="dom-repeat" items="[[columns]]" as="column">
                     <vaadin-grid-column resizable width$="[[columnWidth(column)]]">
                         <template class="header">
-                            <vaadin-grid-sorter path="[[column]]" hidden$=[[timeseries]] id$="sorter-column-[[column]]">[[_getTitle(column)]]</vaadin-grid-sorter>
+                            <vaadin-grid-sorter path="[[column]]" direction$=[[_getDirection(column)]] cmp="[[_getComparisonFunction(column)]]" hidden$=[[timeseries]] id$="sorter-column-[[column]]">[[_getTitle(column)]]</vaadin-grid-sorter>
                             <span class="header" hidden$=[[!timeseries]]>[[_getTitle(column)]]</span>
                         </template>
                         <template>
@@ -698,6 +698,9 @@ <h2>Download list data in CSV</h2>
 
             if (JSON.parse(localStorage.getItem('mist-list#' + this.id))) {
                 this.set('visible', JSON.parse(localStorage.getItem('mist-list#' + this.id)));
+                var sorters = JSON.parse(localStorage.getItem('mist-list#' + this.id + '/sorters'));
+                if (sorters && sorters.length)
+                    this.set('sorters', sorters);
             }
         },
 
@@ -1135,7 +1138,18 @@ <h2>Download list data in CSV</h2>
         },
 
         _sorterChanged: function (event) {
-            console.log('sorter changed', this.$.grid._sorters, event);
+            this.debounce('_updateSorters', function() {
+                console.debug('_updateSorters');
+                this.set('sortOrder', this.$.grid._sorters.map(x => [x.path, x.direction]));
+                localStorage.setItem('mist-list#' + this.id + '/sorters', JSON.stringify(this.sortOrder));
+            }, 500);
+        },
+
+        _getDirection: function (column) {
+            for (var i=0; i < this.sorters.length; i++) {
+                if (this.sorters[i][0] == column)
+                    return this.sorters[i][1];
+            }
         }
     });
 </script>