[open-ils-commits] SPAM: r10637 - in trunk/Open-ILS/web:
js/dojo/openils vandelay
svn at svn.open-ils.org
svn at svn.open-ils.org
Thu Sep 18 14:09:46 EDT 2008
Author: erickson
Date: 2008-09-18 14:09:43 -0400 (Thu, 18 Sep 2008)
New Revision: 10637
Added:
trunk/Open-ILS/web/js/dojo/openils/GridColumnPicker.js
Modified:
trunk/Open-ILS/web/vandelay/vandelay.html
trunk/Open-ILS/web/vandelay/vandelay.js
Log:
adding initial grid column picker logic and plugged into queued records grid. also moved some filter options on the queue grid around for ease of use
Added: trunk/Open-ILS/web/js/dojo/openils/GridColumnPicker.js
===================================================================
--- trunk/Open-ILS/web/js/dojo/openils/GridColumnPicker.js (rev 0)
+++ trunk/Open-ILS/web/js/dojo/openils/GridColumnPicker.js 2008-09-18 18:09:43 UTC (rev 10637)
@@ -0,0 +1,125 @@
+/* ---------------------------------------------------------------------------
+ * Copyright (C) 2008 Georgia Public Library Service
+ * Bill Erickson <erickson at esilibrary.com>
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ * ---------------------------------------------------------------------------
+ */
+
+if(!dojo._hasResource["openils.GridColumnPicker"]) {
+ dojo._hasResource["openils.GridColumnPicker"] = true;
+ dojo.provide('openils.GridColumnPicker');
+ dojo.declare('openils.GridColumnPicker', null, {
+
+ constructor : function (dialog, grid) {
+ this.dialog = dialog;
+ this.grid = grid;
+ this.structure = grid.structure;
+ this.dialogTable = dialog.domNode.getElementsByTagName('tbody')[0];
+ this.baseCellList = this.structure[0].cells[0].slice();
+ this.build();
+ this.grid.model.fields.get(0).sort = false;
+ },
+
+ // builds the column-picker dialog table
+ build : function() {
+ var cells = this._selectableCellList();
+ var str = '';
+ var rows = dojo.query('tr', this.dialogTable);
+
+ for(var i = 0; i < rows.length; i++) {
+ if(rows[i].getAttribute('picker'))
+ this.dialogTable.removeChild(rows[i]);
+ }
+
+ rows = dojo.query('tr', this.dialogTable);
+ var lastChild = null;
+ if(rows.length > 0)
+ lastChild = rows[rows.length-1];
+
+ for(var i = 0; i < cells.length; i++) {
+ // setting table.innerHTML breaks stuff, so do it the hard way
+ tr = document.createElement('tr');
+ tr.setAttribute('picker', 'picker');
+ 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', cells[i].field+''+cells[i].name);
+ ipt.setAttribute('name', 'selector');
+
+ ipt2 = document.createElement('input');
+ ipt2.setAttribute('type', 'checkbox');
+ ipt2.setAttribute('ident', cells[i].field+''+cells[i].name);
+ ipt2.setAttribute('name', 'width');
+
+ td1.appendChild(document.createTextNode(cells[i].name));
+ td2.appendChild(ipt);
+ td3.appendChild(ipt2);
+ tr.appendChild(td1);
+ tr.appendChild(td2);
+ tr.appendChild(td3);
+ if(lastChild)
+ this.dialogTable.insertBefore(tr, lastChild);
+ else
+ this.dialogTable.appendChild(tr);
+ }
+ },
+
+ // update the grid based on the items selected in the picker dialog
+ update : function() {
+ var newCellList = [];
+ var rows = dojo.query('[picker=picker]', this.dialogTable);
+
+ for(var j = 0; j < this.baseCellList.length; j++) {
+ var cell = this.baseCellList[j];
+ if(cell.selectableColumn) {
+ 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];
+ if(selector.checked && selector.getAttribute('ident') == cell.field+''+cell.name) {
+ if(width.checked)
+ cell.width = 'auto';
+ else delete cell.width;
+ newCellList.push(cell);
+ }
+ }
+ } else { // if it's not selectable, always show it
+ newCellList.push(cell);
+ }
+ }
+
+ this.structure[0].cells[0] = newCellList;
+ this.grid.setStructure(this.structure);
+ this.grid.update();
+ },
+
+ _selectableCellList : function() {
+ var cellList = this.structure[0].cells[0];
+ var cells = [];
+ for(var i = 0; i < cellList.length; i++) {
+ var cell = cellList[i];
+ if(cell.selectableColumn)
+ cells.push({name:cell.name, field:cell.field});
+ }
+ return cells;
+ },
+
+ // save me as a user setting
+ persist : function() {
+ }
+ });
+}
+
Modified: trunk/Open-ILS/web/vandelay/vandelay.html
===================================================================
--- trunk/Open-ILS/web/vandelay/vandelay.html 2008-09-18 17:35:06 UTC (rev 10636)
+++ trunk/Open-ILS/web/vandelay/vandelay.html 2008-09-18 18:09:43 UTC (rev 10637)
@@ -19,7 +19,9 @@
@import "/js/dojo/dijit/themes/tundra/tundra.css";
@import "/js/dojo/dijit/tests/css/dijitTests.css";
@import "/js/dojo/dojox/grid/_grid/Grid.css";
- td { padding: 6px; }
+ .container:after {content: ""; display: block; height: 0; clear: both; }
+ .form_table td { padding: 6px; }
+ table { border-collapse: collapse; }
.match_div {
height: 95%;
width: 95%;
@@ -33,6 +35,7 @@
font-weight:bold;
}
.tall { height:100%; }
+ .wide { width:100%; }
.hidden { display: none; }
#toolbar { margin-top: 0px; }
body { width:100%; height:100%; border:0; margin:0; padding:0; }
@@ -47,7 +50,7 @@
border: 1px solid red;
}
</style>
- <script type="text/javascript" djConfig="parseOnLoad: true,isDebug:false" src="/js/dojo/dojo/dojo.js"></script>
+ <script type="text/javascript" djConfig="parseOnLoad: true,isDebug:true" src="/js/dojo/dojo/dojo.js"></script>
<script type="text/javascript" src='/js/dojo/openils/MarcXPathParser.js'></script>
<script type="text/javascript" src='vandelay.js'></script>
</head>
@@ -78,7 +81,7 @@
<form id="vl-marc-upload-form" enctype="multipart/form-data">
<input type='hidden' name='ses' id='vl-ses-input'/>
<br/>
- <table>
+ <table class='form_table'>
<tr>
<td>Record Type</td>
<td colspan='4'>
@@ -136,20 +139,64 @@
vlQueueGridLayout = [{
defaultCell: {styles: 'text-align: center;'},
cells : [[
- {name: 'Selected', get: vlQueueGridDrawSelectBox },
- {name: 'Import Time', field:'import_time', get:vlGetDateTimeField}
+ {name: '<input id="vl-queue-grid-row-selector" type="checkbox" onclick="vlToggleQueueGridSelect();"/>',
+ get: vlQueueGridDrawSelectBox },
+ {name: 'Import Time', field:'import_time', get:vlGetDateTimeField, selectableColumn:true}
]]
}];
}
</script>
<div id='vl-queue-div-grid' class='tall'>
- <table width='100%'>
- <tr><td align='left'>
- <button dojoType='dijit.form.Button' onclick='vlSelectAllGridRecords();'>Select All</button>
- <button dojoType='dijit.form.Button' onclick='vlSelectNoGridRecords();'>Select None</button>
+ <!-- column picker dialog -->
+ <div dojoType="dijit.Dialog" jsId='vlQueueGridColumePickerDialog' title="Column Picker" execute="alert(2);">
+ <table class='form_table'>
+ <thead>
+ <tr><th width='33%'>Column</th><th width='33%'>Dislapy</th><th width='33%'>Auto Width</th></tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td colspan='3' align='center'>
+ <button jsId='vlQueueGridColumnPickerButton'
+ onclick='vlQueueGridColumePickerDialog.hide();vlQueueGridColumePicker.update();'
+ dojoType='dijit.form.Button'>Done</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <!-- queue grid navigation row -->
+ <table width='100%' style='margin-bottom:0px;'>
+ <tr>
+ <td align='left'>
<button dojoType='dijit.form.Button' onclick='vlImportSelectedRecords();'>Import Selected</button>
</td>
- <td align='right'>
+ <td align='middle'>
+ <style>.filter_td { padding-right: 5px; border-right: 2px solid #e8e1cf; } </style>
+ <table><tr>
+ <td class='filter_td'>
+ Only show records with possible matches
+ <input dojoType='dijit.form.CheckBox' jsId='vlQueueGridShowMatches' checked='checked'/>
+ </td>
+ <td class='filter_td' style='padding-left:5px;'>
+ Results Per Page
+ <select style='width:50px;' jsId='vlQueueDisplayLimit' dojoType='dijit.form.FilteringSelect' value='10'>
+ <option value='10'>10</option>
+ <option value='20'>20</option>
+ <option value='50'>50</option>
+ <option value='100'>100</option>
+ </select>
+ </td>
+ <td class='filter_td' style='padding-left:5px;'>
+ Page <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayPage' value='1'/>
+ </td style='padding-left:5px;'>
+ <td style='padding-left:5px;'>
+ <button dojoType='dijit.form.Button'
+ onclick='retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords)'>Refresh</button>
+ </td>
+ </tr></table>
+ </td>
+ <td align='right' valign='bottom'>
<span style='padding-right:4px;'>
<a href='javascript:void(0);' onclick='
var page = parseInt(vlQueueDisplayPage.getValue());
@@ -157,19 +204,19 @@
vlQueueDisplayPage.setValue(page - 1);
retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>« Previous Page</a>
</span>
- <span style='padding-right:4px;'>
+ <span style='padding-right:10px;'>
<a href='javascript:void(0);' onclick='
vlQueueDisplayPage.setValue(parseInt(vlQueueDisplayPage.getValue())+1);
retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>Next Page »</a>
</span>
- Only show possible matches
- <input dojoType='dijit.form.CheckBox' jsId='vlQueueGridShowMatches' checked='checked'/>
- Page Size <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayLimit' value='10'/>
- Page <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayPage' value='1'/>
- <button dojoType='dijit.form.Button'
- onclick='retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords)'>Refresh</button>
- </td></tr>
+ <span style='background:#e8e1cf;padding:3px 0px 0px 6px;-moz-border-radius:6px 0px 0px 0px;'>
+ <a href='javascript:void(0);' onclick='vlQueueGridColumePickerDialog.show();'>Select Columns</a>
+ </span>
+ </td>
+ </tr>
</table>
+
+ <!-- Queue Grid -->
<div class='tall'>
<div dojoType='dojox.Grid' jsId='vlQueueGrid' class='tall'> </div>
</div>
@@ -235,7 +282,7 @@
<!-- Form for choosing which queue to view -->
<div id='vl-queue-select-div' class='tall hidden'>
<h1>Select a Queue to Inspect</h1><br/>
- <table>
+ <table class='form_table'>
<tr>
<td>Queue Type</td>
<td>
Modified: trunk/Open-ILS/web/vandelay/vandelay.js
===================================================================
--- trunk/Open-ILS/web/vandelay/vandelay.js 2008-09-18 17:35:06 UTC (rev 10636)
+++ trunk/Open-ILS/web/vandelay/vandelay.js 2008-09-18 18:09:43 UTC (rev 10637)
@@ -19,6 +19,7 @@
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
+dojo.require("dijit.Dialog");
dojo.require("dojo.cookie");
dojo.require("dojox.grid.Grid");
dojo.require("dojo.data.ItemFileReadStore");
@@ -30,6 +31,7 @@
dojo.require('openils.User');
dojo.require('openils.Event');
dojo.require('openils.MarcXPathParser');
+dojo.require('openils.GridColumnPicker');
var globalDivs = [
'vl-generic-progress',
@@ -61,6 +63,7 @@
var userAuthQueues;
var selectableGridRecords;
var cgi = new openils.CGI();
+var vlQueueGridColumePicker;
/**
* Grab initial data
@@ -481,7 +484,8 @@
var col = {
name:def.description(),
field:'attr.' + def.code(),
- get: getAttrValue
+ get: getAttrValue,
+ selectableColumn:true
};
//if(def.code().match(/title/i)) col.width = 'auto'; // this is hack.
vlQueueGridLayout[0].cells[0].push(col);
@@ -498,24 +502,19 @@
null, store, {rowsPerPage: 100, clientSort: true, query:{id:'*'}});
vlQueueGrid.setModel(model);
- vlQueueGrid.setStructure(vlQueueGridLayout);
+ if(vlQueueGridColumePicker)
+ vlQueueGrid.setStructure(vlQueueGridColumePicker.structure);
+ else
+ vlQueueGrid.setStructure(vlQueueGridLayout);
vlQueueGrid.update();
-}
-/*
-function test() {
- alert(vlQueueGridLayout.picker);
- vlQueueGridLayout.oils = {};
- vlQueueGridLayout[0].cells[0].pop();
- vlQueueGridLayout[0].cells[0].pop();
- vlQueueGridLayout[0].cells[0].pop();
- vlQueueGridLayout[0].cells[0].pop();
- vlQueueGridLayout[0].cells[0].pop();
- vlQueueGrid.setStructure(vlQueueGridLayout);
- vlQueueGrid.update();
+ if(!vlQueueGridColumePicker) {
+ vlQueueGridColumePicker =
+ new openils.GridColumnPicker(vlQueueGridColumePickerDialog, vlQueueGrid);
+ }
}
-*/
+
function vlQueueGridDrawSelectBox(rowIdx) {
var data = this.grid.model.getRow(rowIdx);
if(!data) return '';
@@ -524,14 +523,20 @@
return "<div><input type='checkbox' id='"+domId+"'/></div>";
}
-function vlSelectAllGridRecords() {
+function vlSelectAllQueueGridRecords() {
for(var id in selectableGridRecords)
dojo.byId(id).checked = true;
}
-function vlSelectNoGridRecords() {
+function vlSelectNoQueueGridRecords() {
for(var id in selectableGridRecords)
dojo.byId(id).checked = false;
}
+function vlToggleQueueGridSelect() {
+ if(dojo.byId('vl-queue-grid-row-selector').checked)
+ vlSelectAllQueueGridRecords();
+ else
+ vlSelectNoQueueGridRecords();
+}
var handleRetrieveRecords = function() {
buildRecordGrid(currentType);
More information about the open-ils-commits
mailing list