GridColumnPicker multi-column sorting; needs more testing

Signed-off-by: Bill Erickson <berick@esilibrary.com>

diff --git a/Open-ILS/web/js/dojo/openils/widget/GridColumnPicker.js b/Open-ILS/web/js/dojo/openils/widget/GridColumnPicker.js
index 7e0dcea..b877703 100644 (file)
--- a/Open-ILS/web/js/dojo/openils/widget/GridColumnPicker.js
+++ b/Open-ILS/web/js/dojo/openils/widget/GridColumnPicker.js
@@ -20,6 +20,7 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
 
     dojo.require('dijit.Dialog');
     dojo.require('dijit.form.Button');
+    dojo.require('dijit.form.NumberSpinner');
     dojo.require('openils.User');
     dojo.require('openils.Event');
     dojo.require('openils.Util');
@@ -40,6 +41,9 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
             this.dialog = this.buildDialog();
             this.dialogTable = this.dialog.containerNode.getElementsByTagName('tbody')[0];
 
+            // replace me
+            this.onSortChange = function(list) {console.log('onSortChange : ' + list)}
+
             var _this = this;
             this.grid.onHeaderContextMenu = function(e) { 
                 _this.build();
@@ -90,17 +94,27 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
 
             var dialog = new dijit.Dialog({title : 'Column Picker'});
             var table = dojo.create('table', {'class':'oils-generic-table', innerHTML : 
-                "<thead><tr><th width='33%'>Column</th><th width='33%'>Display</th><th width='33%'>Auto Width</th></tr></thead>" +
-                "<tbody><tr><td><div name='cancel_button'></div></td><td><div name='save_button'></div></td></tr></tbody></table>" });
+                "<table><thead><tr><th width='30%'>Column</th><th width='23%'>Display</th>" +
+                "<th width='23%'>Auto Width</th><th width='23%'>Sort Priority</th></tr></thead>" +
+                "<tbody />"});
+
+            var tDiv = dojo.create('div', {style : 'height:300px; overflow-y:auto'});
+            tDiv.appendChild(table);
 
-            dialog.containerNode.appendChild(table);
+            var bDiv = dojo.create('div', {style : 'text-align:right; width:100%;',
+                innerHTML : "<span name='cancel_button'></span><span name='save_button'></span>"});
+            
+            var wrapper = dojo.create('div');
+            wrapper.appendChild(tDiv);
+            wrapper.appendChild(bDiv);
+            dialog.containerNode.appendChild(wrapper);
 
             var button = new dijit.form.Button({label:'Save'}, 
-                dojo.query('[name=save_button]', table)[0]);
+                dojo.query('[name=save_button]', bDiv)[0]);
             button.onClick = function() { dialog.hide(); self.update(true); };
 
             button = new dijit.form.Button({label:'Cancel'}, 
-                dojo.query('[name=cancel_button]', table)[0]);
+                dojo.query('[name=cancel_button]', bDiv)[0]);
             button.onClick = function() { dialog.hide(); };
 
             return dialog;
@@ -126,21 +140,21 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
                 var cell = this.cells[i];
                 tr = document.createElement('tr');
                 tr.setAttribute('picker', 'picker');
+                td0 = document.createElement('td');
                 td1 = document.createElement('td');
                 td2 = document.createElement('td');
                 td3 = document.createElement('td');
 
                 ipt = document.createElement('input');
                 ipt.setAttribute('type', 'checkbox');
-                ipt.setAttribute('checked', 'checked');
-                ipt.setAttribute('ident', cell.field+''+cell.name);
                 ipt.setAttribute('name', 'selector');
 
                 ipt2 = document.createElement('input');
                 ipt2.setAttribute('type', 'checkbox');
-                ipt2.setAttribute('ident', cell.field+''+cell.name);
                 ipt2.setAttribute('name', 'width');
 
+                ipt3 = document.createElement('input');
+
                 if (cell.nonSelectable) {
                     ipt.setAttribute('checked', 'checked');
                     ipt.setAttribute('disabled', true);
@@ -156,16 +170,28 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
                     }
                 }
 
-                td1.appendChild(document.createTextNode(cell.name));
-                td2.appendChild(ipt);
-                td3.appendChild(ipt2);
+                td0.appendChild(document.createTextNode(cell.name));
+                td1.appendChild(ipt);
+                td2.appendChild(ipt2);
+                td3.appendChild(ipt3);
+                tr.appendChild(td0);
                 tr.appendChild(td1);
                 tr.appendChild(td2);
                 tr.appendChild(td3);
+
                 if(lastChild)
                     this.dialogTable.insertBefore(tr, lastChild);
                 else
                     this.dialogTable.appendChild(tr);
+
+                // this must be added after its parent node is inserted into the DOM.
+                var ns = new dijit.form.NumberSpinner(
+                    {   constraints : {min : 0, places : 0}, 
+                        value : 0,
+                        style : 'width:4em',
+                        name : 'sort'
+                    }, ipt3
+                );
             }
         },
 
@@ -173,13 +199,20 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
         update : function(persist) {
             var rows = dojo.query('[picker=picker]', this.dialogTable);
             var _this = this;
-            displayCells = [];
+            var displayCells = [];
+            var sortUpdated = false;
 
             for (var i = 0; i < rows.length; i++) {
                 var row = rows[i];
                 var selector = dojo.query('[name=selector]', row)[0];
                 var width = dojo.query('[name=width]', row)[0];
-                var cell = this.cells[i]; // should match
+                var sort = dojo.query('[name=sort]', row)[0];
+                var cell = this.cells[i]; // index should match dialog
+
+                if (cell._sort != sort.value) {
+                    sortUpdated = true;
+                    cell._sort = sort.value;
+                }
 
                 if (selector.checked) {
                     cell._visible = true;
@@ -199,14 +232,35 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
             this.grid.setStructure(this.structure);
             this.grid.update();
 
+            if (sortUpdated && this.onSortChange) {
+                var sortList = this.cells.filter(
+                    function(cella) { return cella._sort > 0 }).sort(
+                        function(a, b) { if (a._sort < b._sort) return -1; return 1; });
+                this.onSortChange(this.buildSortList());
+            }
+
             if(persist) 
                 this.persist(true);
         },
 
+        // extract cells that have sorting applied, order lowest to highest
+        buildSortList : function() {
+            var sortList = this.cells.filter(
+                function(cella) { return cella._sort > 0 }
+            ).sort( 
+                function(a, b) { 
+                    if (a._sort < b._sort) return -1; 
+                    return 1; 
+                }
+            );
+            return sortList.map(function(f){return f.field});
+        },
+
         // save me as a user setting
         persist : function(noRefresh) {
             var list = [];
             var autos = [];
+            var sort = [];
             if (!noRefresh) this.refreshCells();
 
             for(var i = 0; i < this.cells.length; i++) {
@@ -216,10 +270,16 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
                     if(cell.width == 'auto')
                         autos.push(cell.field);
                 } 
+                if (cell._sort > 0)
+                    sort.push(cell.field);
             }
 
             var setting = {};
-            setting[this.persistKey] = {'columns':list, 'auto':autos};
+            setting[this.persistKey] = {
+                'columns' : list, 
+                'auto' : autos,
+                'sort' : sort
+            };
 
             var _this = this;
             fieldmapper.standardRequest(
@@ -241,6 +301,9 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
             var _this = this;
             this.setting = setting;
             var displayCells = [];
+            
+            // new component, existing settings will not have this
+            if (!setting.sort) setting.sort = [];
 
             dojo.forEach(setting.columns,
                 function(col) {
@@ -254,6 +317,7 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
                             if(cell.width == 'auto')
                                 delete cell.width;
                         }
+                        cell._sort = setting.sort.indexOf(cell.field) + 1;
                     } else {
                         console.log('Unknown setting column '+col+'.  Ignoring...');
                     }
@@ -262,13 +326,18 @@ if(!dojo._hasResource["openils.widget.GridColumnPicker"]) {
             
             // any cells not in the setting must be marked as non-visible
             dojo.forEach(this.cells, function(cell) { 
-                if (setting.columns.indexOf(cell.field) == -1)
+                if (setting.columns.indexOf(cell.field) == -1) {
                     cell._visible = false;
+                    cell._sort = 0;
+                }
             });
 
             this.structure[0].cells[0] = displayCells;
             this.grid.setStructure(this.structure);
             this.grid.update();
+
+            if (this.setting.sort && this.setting.sort.length > 0 && this.onSortChange)
+                this.onSortChange(this.buildSortList());
         },
 
         load : function() {