adding initial grid column picker logic and plugged into queued records grid. also...
authorerickson <erickson@dcc99617-32d9-48b4-a31d-7c20da2025e4>
Thu, 18 Sep 2008 18:09:43 +0000 (18:09 +0000)
committererickson <erickson@dcc99617-32d9-48b4-a31d-7c20da2025e4>
Thu, 18 Sep 2008 18:09:43 +0000 (18:09 +0000)
git-svn-id: svn://svn.open-ils.org/ILS/trunk@10637 dcc99617-32d9-48b4-a31d-7c20da2025e4

Open-ILS/web/js/dojo/openils/GridColumnPicker.js [new file with mode: 0644]
Open-ILS/web/vandelay/vandelay.html
Open-ILS/web/vandelay/vandelay.js

diff --git a/Open-ILS/web/js/dojo/openils/GridColumnPicker.js b/Open-ILS/web/js/dojo/openils/GridColumnPicker.js
new file mode 100644 (file)
index 0000000..7ba129d
--- /dev/null
@@ -0,0 +1,125 @@
+/* ---------------------------------------------------------------------------
+ * Copyright (C) 2008  Georgia Public Library Service
+ * Bill Erickson <erickson@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() {
+        }
+    });
+}
+
index a2c7dcd..47b9f79 100644 (file)
@@ -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'>
                     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());
                                     vlQueueDisplayPage.setValue(page - 1);
                                     retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>&#171; 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 &#187;</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>
         <!-- 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>
index ff52073..3f3c28c 100644 (file)
@@ -19,6 +19,7 @@ dojo.require("dijit.form.Button");
 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.CGI');
 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 userBibQueues;
 var userAuthQueues;
 var selectableGridRecords;
 var cgi = new openils.CGI();
+var vlQueueGridColumePicker;
 
 /**
   * Grab initial data
@@ -481,7 +484,8 @@ function buildRecordGrid(type) {
         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,23 +502,18 @@ function buildRecordGrid(type) {
         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);
@@ -524,14 +523,20 @@ function vlQueueGridDrawSelectBox(rowIdx) {
     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);