From 24492b66a0009861cca4b2ccbb0315df99ce33a1 Mon Sep 17 00:00:00 2001
From: erickson <erickson@dcc99617-32d9-48b4-a31d-7c20da2025e4>
Date: Mon, 16 Mar 2009 02:43:21 +0000
Subject: [PATCH] move away from jubgrid in bib search for greater flexibility
 of display.  stream LI's from search call for faster grid population.  swap
 form and results display for better screen use

git-svn-id: svn://svn.open-ils.org/ILS/trunk@12531 dcc99617-32d9-48b4-a31d-7c20da2025e4
---
 Open-ILS/web/css/skin/default/acq.css              |   4 +-
 .../web/js/ui/default/acq/picklist/bib_search.js   |  54 ++++++----
 .../templates/default/acq/picklist/bib_search.tt2  | 112 +++++++++++++--------
 3 files changed, 103 insertions(+), 67 deletions(-)

diff --git a/Open-ILS/web/css/skin/default/acq.css b/Open-ILS/web/css/skin/default/acq.css
index 8b47cd1409..a21cf9d30f 100644
--- a/Open-ILS/web/css/skin/default/acq.css
+++ b/Open-ILS/web/css/skin/default/acq.css
@@ -91,4 +91,6 @@
 #oils-acq-lineitem-marc-block { margin-top: 10px; padding: 6px; }
 
 
-
+#oila-acq-picklist-result-table {width:100%}
+#oila-acq-picklist-result-table th {font-weight: bold; border-bottom:1px solid #888;}
+#oila-acq-picklist-result-table td {padding:6px; border-bottom:1px solid #888;}
diff --git a/Open-ILS/web/js/ui/default/acq/picklist/bib_search.js b/Open-ILS/web/js/ui/default/acq/picklist/bib_search.js
index 1f58801b80..3966f1a9f9 100644
--- a/Open-ILS/web/js/ui/default/acq/picklist/bib_search.js
+++ b/Open-ILS/web/js/ui/default/acq/picklist/bib_search.js
@@ -1,6 +1,7 @@
+dojo.require('dijit.form.FilteringSelect');
+dojo.require('dijit.Dialog');
 dojo.require('dojox.form.CheckedMultiSelect');
 dojo.require('fieldmapper.Fieldmapper');
-dojo.require('dijit.ProgressBar');
 dojo.require('dijit.form.Form');
 dojo.require('dijit.form.TextBox');
 dojo.require('dijit.form.NumberSpinner');
@@ -18,6 +19,7 @@ var recvCount = 0;
 var sourceCount = 0; // how many sources are we searching
 var user = new openils.User();
 var searchLimit = 10;
+var liCache = {};
 
 function drawForm() {
     fieldmapper.standardRequest(
@@ -77,8 +79,7 @@ function clearSearchForm() {
 }
 
 function doSearch(values) {
-    dojo.style('searchProgress', 'visibility', 'visible');
-    searchProgress.update({progress: 0});
+    dojo.style('oils-acq-pl-loading', 'visibility', 'visible');
 
     search = {
         service : [],
@@ -109,34 +110,43 @@ function doSearch(values) {
     fieldmapper.standardRequest(
         ['open-ils.acq', 'open-ils.acq.picklist.search.z3950'],
         {   async: true,
-            params: [user.authtoken, search],
+            params: [user.authtoken, search, null, {respond_li:1, flesh_attrs:1, clear_marc:1}],
             onresponse: handleResult,
         }
     );
 }
 
+function setRowAttr(row, liWrapper, field) {
+    var val = liWrapper.findAttr(field, 'lineitem_marc_attr_definition') || '';
+    dojo.query('[name='+field+']', row)[0].appendChild(document.createTextNode(val));
+}
+
+var resultRow;
 function handleResult(r) {
-    var result = r.recv().content();
-    if(openils.Event.parse(result)) {
-        alert(openils.Event.parse(result));
-        dojo.style('searchProgress', 'visibility', 'hidden');
-        return;
+    var result = openils.Util.readResponse(r);
+    dojo.style('oils-acq-pl-search-results', 'display', 'block');
+    dojo.style('oils-acq-search-block', 'display', 'none');
+
+    var tbody = dojo.byId('plist-tbody');
+    if(!resultRow) 
+        resultRow = tbody.removeChild(dojo.byId('plist-row')); 
+
+    if(result.lineitem) {
+        var li = result.lineitem;
+        liCache[li.id()] = li;
+        var liWrapper = new openils.acq.Lineitem({lineitem:li});
+        var row = resultRow.cloneNode(true);
+        var tds = dojo.query('[name]', row);
+        dojo.forEach(tds, function(td) {setRowAttr(row, liWrapper, td.getAttribute('name'));});
+        tbody.appendChild(row);
     }
-    if(result.complete)
-        return viewResults(result.picklist_id);
-    searchProgress.update({maximum: result.total, progress: result.progress});
 }
 
-function viewResults(plId) {
-    var plist = new openils.acq.Picklist(plId,
-        function(model) {
-            resultLIs = plist._items;
-            dojo.style('oils-acq-pl-search-results', 'visibility', 'visible');
-            JUBGrid.populate(plResultGrid, model, plist._items);
-        },
-        {flesh_attrs:1, clear_marc:1, limit: searchLimit}
-    );
-    resultPicklist = plist._plist;
+
+function showPlForm() {
+    dojo.style('oils-acq-pl-search-results', 'display', 'none');
+    dojo.style('oils-acq-search-block', 'display', 'block');
+    dojo.style('oils-acq-pl-loading', 'visibility', 'hidden');
 }
 
 function loadPLSelect() {
diff --git a/Open-ILS/web/templates/default/acq/picklist/bib_search.tt2 b/Open-ILS/web/templates/default/acq/picklist/bib_search.tt2
index bc25fc3973..697adcba0e 100644
--- a/Open-ILS/web/templates/default/acq/picklist/bib_search.tt2
+++ b/Open-ILS/web/templates/default/acq/picklist/bib_search.tt2
@@ -9,6 +9,7 @@
 </script>
 
 <div id='oils-acq-search-block' class='container'>
+
     <form dojoType='dijit.form.Form' action='' method=''>
         <script type="dojo/method" event="onSubmit">
             doSearch(this.getValues());
@@ -20,10 +21,6 @@
                     multiple='true' jsId="bibSourceSelect" dojoType="dojox.form.CheckedMultiSelect">
                 <option value='native-evergreen-catalog'>Evergreen Catalog</option>
             </select>
-            <div id='oils-acq-search-progress'>
-                <div dojoType="dijit.ProgressBar" style="width:300px" jsId="searchProgress" id="searchProgress"></div>
-            </div>
-            <script>dojo.style('searchProgress', 'visibility', 'hidden');</script>
         </div>
         <div id='oils-acq-search-form-block'>
             <div id='oils-acq-search-fields-label'>Search Fields</div>
@@ -52,50 +49,77 @@
             </div>
         </div>
     </form>
+
+    <div id='oils-acq-pl-loading' style='visibility:hidden'>
+        <img src='[% ctx.media_prefix %]/opac/images/progressbar_green.gif'/>
+    </div>
 </div>
-<div id='oils-acq-pl-search-results' style='height:100%'>
-    <script>
-        dojo.require('dijit.form.FilteringSelect');
-        dojo.require('dijit.Dialog');
-    </script>
-    <div dojoType="dijit.form.DropDownButton">
-        <span>Save Results</span>
-        <div dojoType="dijit.TooltipDialog" execute="saveResults(arguments[0]);">
-            <script type='dojo/connect' event='onOpen'>
-                loadPLSelect(); 
-            </script>
-            <table class='dijitTooltipTable'>
-                <tr>
-                    <td colspan='2'>
-                        <input dojoType="dijit.form.RadioButton" name="which" type='radio' checked='checked' value='selected'/>
-                        <label for="name">Save selected</label>
-                        <input dojoType="dijit.form.RadioButton" name="which" type='radio' value='all'/>
-                        <label for="name">Save all</label>
-                    </td>
-                </tr>
-                <tr><td colspan='2'><hr/></td></tr>
-                <tr>
-                    <td><label for="new_name">Save as Selection List: </label></td>
-                    <td><input dojoType="dijit.form.TextBox" name="new_name"/></td>
-                </tr>
+
+
+<div id='oils-acq-pl-search-results'>
+    <div dojoType="dijit.layout.ContentPane" layoutAlign="top" class='oils-header-panel'>
+        <div>Search Results</div>
+        <div>
+            <div dojoType='dijit.form.Button' onClick='showPlForm'>New Search</div>
+            <div dojoType="dijit.form.DropDownButton">
+                <span>Save Results</span>
+                <div dojoType="dijit.TooltipDialog" execute="saveResults(arguments[0]);">
+                    <script type='dojo/connect' event='onOpen'>
+                        loadPLSelect(); 
+                    </script>
+                    <table class='dijitTooltipTable'>
+                        <tr>
+                            <td colspan='2'>
+                                <input dojoType="dijit.form.RadioButton" name="which" type='radio' checked='checked' value='selected'/>
+                                <label for="name">Save selected</label>
+                                <input dojoType="dijit.form.RadioButton" name="which" type='radio' value='all'/>
+                                <label for="name">Save all</label>
+                            </td>
+                        </tr>
+                        <tr><td colspan='2'><hr/></td></tr>
+                        <tr>
+                            <td><label for="new_name">Save as Selection List: </label></td>
+                            <td><input dojoType="dijit.form.TextBox" name="new_name"/></td>
+                        </tr>
+                        <tr>
+                            <td><label for="existing_pl">Add to Selection List: </label></td>
+                            <td>
+                                <input jsId='plAddExistingSelect' dojoType="dijit.form.FilteringSelect" 
+                                    name="existing_pl" searchAttr='name' displayAttr='name'/>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan='2' align='center'>
+                                <button dojoType='dijit.form.Button' type="submit">Save</button>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div> 
+        </div>
+    </div>
+    <div dojoType='dijit.layout.ContentPane' layoutAlign='client'>
+        <table id='oila-acq-picklist-result-table'>
+            <thead>
                 <tr>
-                    <td><label for="existing_pl">Add to Selection List: </label></td>
-                    <td>
-                        <input jsId='plAddExistingSelect' dojoType="dijit.form.FilteringSelect" 
-                            name="existing_pl" searchAttr='name' displayAttr='name'/>
-                    </td>
+                    <th>Select</th><th>Title</th><th>Author</th><th>ISBN</th><th>ISSN</th><th>Edition</th><th>Pubdate</th><th>Publisher</th>
                 </tr>
-                <tr>
-                    <td colspan='2' align='center'>
-                        <button dojoType='dijit.form.Button' type="submit">Save</button>
-                    </td>
+            </thead>
+            <tbody id='plist-tbody'>
+                <tr id='plist-row'>
+                    <td name='selector'><input type='checkbox' name='selectbox'/></td>
+                    <td name='title'/>
+                    <td name='author'/>
+                    <td name='isbn'/>
+                    <td name='issn'/>
+                    <td name='edition'/>
+                    <td name='pubdate'/>
+                    <td name='publisher'/>
                 </tr>
-            </table>
-        </div>
-    </div> 
-    [% grid_jsid = 'plResultGrid'; domprefix = 'oils-acq-lineitem'; hide_details = 1 %]
-    [% INCLUDE 'default/acq/common/jubgrid.tt2' %]
+            </tbody>
+        </table>    
+    </div>
 </div>
-<script>dojo.style('oils-acq-pl-search-results', 'visibility', 'hidden');</script>
+<script>dojo.style('oils-acq-pl-search-results', 'display', 'none');</script>
 [% END %]
 
-- 
2.11.0