From b5f0acd7ded83e4198aa04a27ac24ae18e311d1a Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Tue, 27 Mar 2012 17:43:10 -0400 Subject: [PATCH] GridColumnPicker multi-column sorting; needs more testing Signed-off-by: Bill Erickson --- .../web/js/dojo/openils/widget/GridColumnPicker.js | 99 ++++++++++++++++++---- 1 file changed, 84 insertions(+), 15 deletions(-) diff --git a/Open-ILS/web/js/dojo/openils/widget/GridColumnPicker.js b/Open-ILS/web/js/dojo/openils/widget/GridColumnPicker.js index 7e0dceaa41..b8777034c9 100644 --- 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 : - "ColumnDisplayAuto Width" + - "
" }); + "" + + "" + + ""}); + + 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 : ""}); + + 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() { -- 2.11.0
ColumnDisplayAuto WidthSort Priority