From f197763083a4c6bdf44eadf5085877715397aade Mon Sep 17 00:00:00 2001
From: Bill Erickson <berick@esilibrary.com>
Date: Wed, 11 Jul 2012 15:13:25 -0400
Subject: [PATCH] acq invoice search; tabbed view

Signed-off-by: Bill Erickson <berick@esilibrary.com>
---
 Open-ILS/src/templates/acq/invoice/view.tt2      | 434 ++++++++++++-----------
 Open-ILS/web/js/ui/default/acq/search/unified.js |   1 +
 2 files changed, 228 insertions(+), 207 deletions(-)

diff --git a/Open-ILS/src/templates/acq/invoice/view.tt2 b/Open-ILS/src/templates/acq/invoice/view.tt2
index c1e6fd1d99..d4c91b372d 100644
--- a/Open-ILS/src/templates/acq/invoice/view.tt2
+++ b/Open-ILS/src/templates/acq/invoice/view.tt2
@@ -12,219 +12,239 @@
     </div>
 
     <div dojoType="dijit.layout.ContentPane" layoutAlign="client">
-        <button dojoType='dijit.form.Button' onClick='renderUnifiedSearch()'>Search</button>
-        <table id='oils-acq-invoice-table' class='oils-acq-invoice-table'>
-            <thead/>
-            <tbody id='acq-invoice-entry-header' class='hidden'>
-                <tr>
-                    <td colspan='0'>
-                        <h3>
-                            [% l('Bibliographic Items') %]
-                        </h3>
-                    </td>
-                </tr>
-            </tbody>
-            <!-- acq.invoice_entry -->
-            <thead id='acq-invoice-entry-thead' class='hidden'>
-                <tr>
-                    <th colspan='2'>Title Details</th>
-                    <th class='acq-invoice-center-col'>#&nbsp;Invoiced&nbsp;/&nbsp;#&nbsp;Paid</th>
-                    <th class='acq-invoice-center-col'>Billed</th>
-                    <th class='acq-invoice-paid-col'>Paid</th>
-                    <th class='acq-invoice-center-col hide-complete'>Detach</th>
-                </tr>
-            </thead>
-            <tbody id='acq-invoice-entry-tbody' class='hidden'>
-                <tr id='acq-invoice-entry-template' class='acq-invoice-row'>
-                    <td colspan='2'>
-                        <div name='title_details'></div>
-                        <div name='note'></div>
-                    </td>
-                    <td class='acq-invoice-center-col'>
-                        <span name='inv_item_count'></span>&nbsp;/&nbsp;<span name='phys_item_count'></span>
-                    </td>
-                    <td class='acq-invoice-billed-col'><div name='cost_billed'></div></td>
-                    <td class='acq-invoice-paid-col'><div name='amount_paid'></div></td>
-                    <td class='acq-invoice-center-col hide-complete'><a href='javascript:void(0);' name='detach'>Detach</a></td>
-                </tr>
-            </tbody>
-            <tbody>
-                <tr>
-                    <td  style='margin-top:15px;' colspan='0'>
-                        <h3>Direct Charges, Taxes, Fees, etc.</h3>
-                    </td>
-                </tr>
-            </tbody>
-            <!-- acq.invoice_item -->
-            <thead>
-                <tr>
-                    <th>Charge Type</th>
-                    <th class='acq-invoice-center-col'>Fund</th>
-                    <th>Title/Description</th>
-                    <th class='acq-invoice-center-col'>Billed</th>
-                    <th class='acq-invoice-paid-col'>Paid</th>
-                    <th class='acq-invoice-center-col hide-complete'>Delete</th>
-                </tr>
-            </thead>
-            <tbody id='acq-invoice-item-tbody'>
-                <tr id='acq-invoice-item-template' class='acq-invoice-row acq-invoice-item-row'>
-                    <td><div name='inv_item_type'></div></td>
-                    <td class='acq-invoice-center-col'><div name='fund'></div></td>
-                    <td><div name='title'></div></td>
-                    <td class='acq-invoice-center-col acq-invoice-billed-col'><div name='cost_billed'></div></td>
-                    <td class='acq-invoice-paid-col'><div name='amount_paid'></div></td>
-                    <td class='acq-invoice-center-col hide-complete'><a href='javascript:void(0);' name='delete'>Delete</a></td>
-                </tr>
-            </tbody>
-            <tbody class='hide-complete'>
-                <tr>
-                    <td colspan='0'>
-                        <a href='javascript:void(0);' id='acq-invoice-new-item'>Add Charge...</a>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody>
-                <tr>
-                    <td style='margin-top:15px;' colspan='0'> 
-                        <h3> </h3>
-                    </td>
-                </tr>
-            </tbody>
-            <thead>
-                <tr>
-                    <th colspan='3'/>
-                    <th class='acq-invoice-center-col acq-invoice-billed-col'>Total</th>
-                    <th class='acq-invoice-paid-col'>Total</th>
-                    <th class='acq-invoice-center-col acq-invoice-balance-col'>Balance</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td colspan='3' style='text-align:right;'>
-                        <button jsId='invoiceSaveButton' class='hide-complete'
-                            dojoType='dijit.form.Button' onclick='saveChanges();'>Save</button>
-                        <button jsId='invoiceProrateButton' class='hide-complete'
-                            dojoType='dijit.form.Button' onclick='saveChanges(true);'>Save &amp; Prorate</button>
-                        <button jsId='invoiceCloseButton' class='hide-complete'
-                            dojoType='dijit.form.Button' onclick='saveChanges(false, true);'>Save &amp; Close</button>
-                        <span class='hidden' id='acq-invoice-reopen-button-wrapper'>
-                            <button jsId='invoiceReopenButton' 
-                                dojoType='dijit.form.Button' onclick='saveChanges(false, false, true);'>Reopen Invoice</button>
-                        </span>
-                    </td>
-                    <td class='acq-invoice-center-col'><div jsId='totalInvoicedBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'></div></td>
-                    <td class='acq-invoice-paid-col'><div jsId='totalPaidBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'></div></td>
-                    <td class='acq-invoice-center-col'><div jsId='balanceOwedBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'></div></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
 
-    <!-- slim, inline unified search UI -->
-    <div id='oils-acq-invoice-search' class='hidden'>
 
-        <div id="acq-unified-form">
-            <div>
-                <label for="acq-unified-result-type">Search for</label>
-                <select id="acq-unified-result-type" disabled='disabled'>
-                    <option value="lineitem">line items</option>
-                    <!--
-                    <option value="lineitem_and_bib">
-                        line items &amp; catalog records
-                    </option>
-                    <option value="picklist">selection lists</option>
-                    <option value="purchase_order">purchase orders</option>
-                    <option value="invoice">invoices</option>
-                    -->
-                </select>
-                <label for="acq-unified-conjunction">matching</label>
-                <select id="acq-unified-conjunction">
-                    <option value="and">all</option>
-                    <option value="or">any</option>
-                </select>
-                <label for="acq-unified-conjunction">
-                    of the following terms:
-                </label>
-            </div>
-            <div id="acq-unified-terms">
-                <table id="acq-unified-terms-table">
-                    <tbody id="acq-unified-terms-tbody">
-                        <tr id="acq-unified-terms-row-tmpl"
-                            class="acq-unified-terms-row">
-                            <td name="selector"
-                                class="acq-unified-terms-selector"></td>
-                            <td name="match"
-                                class="acq-unified-terms-match">
-                                <select>
-                                    <option value="">is</option>
-                                    <option value="__not">is NOT</option>
-                                    <option value="__fuzzy" disabled="disabled">
-                                        contains
-                                    </option>
-                                    <option value="__not,__fuzzy"
-                                        disabled="disabled">
-                                        does NOT contain
-                                    </option>
-                                    <option value="__lte" disabled="disabled">
-                                        is on or BEFORE
-                                    </option>
-                                    <option value="__gte" disabled="disabled">
-                                        is on or AFTER
-                                    </option>
-                                    <option value="__in" disabled="disabled">
-                                        matches a term from a file
-                                    </option>
-                                </select>
+        <div dojoType="dijit.layout.TabContainer" style="width: 96%; height: 100%;">
+            <div dojoType="dijit.layout.ContentPane" 
+                class='oils-acq-detail-content-pane' title="Invoice" selected='true' style='height:600px'>
+
+                <script type='dojo/connect' event='onShow'>
+                    // the table is left at display=none on subsequent tab views
+                    dojo.byId('oils-acq-invoice-table').style.display = 'table'
+                </script>
+
+                <table id='oils-acq-invoice-table' class='oils-acq-invoice-table'>
+                    <thead/>
+                    <tbody id='acq-invoice-entry-header' class='hidden'>
+                        <tr>
+                            <td colspan='0'>
+                                <h3>
+                                    [% l('Bibliographic Items') %]
+                                </h3>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <!-- acq.invoice_entry -->
+                    <thead id='acq-invoice-entry-thead' class='hidden'>
+                        <tr>
+                            <th colspan='2'>Title Details</th>
+                            <th class='acq-invoice-center-col'>#&nbsp;Invoiced&nbsp;/&nbsp;#&nbsp;Paid</th>
+                            <th class='acq-invoice-center-col'>Billed</th>
+                            <th class='acq-invoice-paid-col'>Paid</th>
+                            <th class='acq-invoice-center-col hide-complete'>Detach</th>
+                        </tr>
+                    </thead>
+                    <tbody id='acq-invoice-entry-tbody' class='hidden'>
+                        <tr id='acq-invoice-entry-template' class='acq-invoice-row'>
+                            <td colspan='2'>
+                                <div name='title_details'></div>
+                                <div name='note'></div>
+                            </td>
+                            <td class='acq-invoice-center-col'>
+                                <span name='inv_item_count'></span>&nbsp;/&nbsp;<span name='phys_item_count'></span>
+                            </td>
+                            <td class='acq-invoice-billed-col'><div name='cost_billed'></div></td>
+                            <td class='acq-invoice-paid-col'><div name='amount_paid'></div></td>
+                            <td class='acq-invoice-center-col hide-complete'><a href='javascript:void(0);' name='detach'>Detach</a></td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td  style='margin-top:15px;' colspan='0'>
+                                <h3>Direct Charges, Taxes, Fees, etc.</h3>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <!-- acq.invoice_item -->
+                    <thead>
+                        <tr>
+                            <th>Charge Type</th>
+                            <th class='acq-invoice-center-col'>Fund</th>
+                            <th>Title/Description</th>
+                            <th class='acq-invoice-center-col'>Billed</th>
+                            <th class='acq-invoice-paid-col'>Paid</th>
+                            <th class='acq-invoice-center-col hide-complete'>Delete</th>
+                        </tr>
+                    </thead>
+                    <tbody id='acq-invoice-item-tbody'>
+                        <tr id='acq-invoice-item-template' class='acq-invoice-row acq-invoice-item-row'>
+                            <td><div name='inv_item_type'></div></td>
+                            <td class='acq-invoice-center-col'><div name='fund'></div></td>
+                            <td><div name='title'></div></td>
+                            <td class='acq-invoice-center-col acq-invoice-billed-col'><div name='cost_billed'></div></td>
+                            <td class='acq-invoice-paid-col'><div name='amount_paid'></div></td>
+                            <td class='acq-invoice-center-col hide-complete'><a href='javascript:void(0);' name='delete'>Delete</a></td>
+                        </tr>
+                    </tbody>
+                    <tbody class='hide-complete'>
+                        <tr>
+                            <td colspan='0'>
+                                <a href='javascript:void(0);' id='acq-invoice-new-item'>Add Charge...</a>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td style='margin-top:15px;' colspan='0'> 
+                                <h3> </h3>
                             </td>
-                            <td name="widget"
-                                class="acq-unified-terms-widget"></td>
-                            <td name="remove"
-                                class="acq-unified-terms-remove"></td>
+                        </tr>
+                    </tbody>
+                    <thead>
+                        <tr>
+                            <th colspan='3'/>
+                            <th class='acq-invoice-center-col acq-invoice-billed-col'>Total</th>
+                            <th class='acq-invoice-paid-col'>Total</th>
+                            <th class='acq-invoice-center-col acq-invoice-balance-col'>Balance</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td colspan='3' style='text-align:right;'>
+                                <button jsId='invoiceSaveButton' class='hide-complete'
+                                    dojoType='dijit.form.Button' onclick='saveChanges();'>Save</button>
+                                <button jsId='invoiceProrateButton' class='hide-complete'
+                                    dojoType='dijit.form.Button' onclick='saveChanges(true);'>Save &amp; Prorate</button>
+                                <button jsId='invoiceCloseButton' class='hide-complete'
+                                    dojoType='dijit.form.Button' onclick='saveChanges(false, true);'>Save &amp; Close</button>
+                                <span class='hidden' id='acq-invoice-reopen-button-wrapper'>
+                                    <button jsId='invoiceReopenButton' 
+                                        dojoType='dijit.form.Button' onclick='saveChanges(false, false, true);'>Reopen Invoice</button>
+                                </span>
+                            </td>
+                            <td class='acq-invoice-center-col'><div jsId='totalInvoicedBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'></div></td>
+                            <td class='acq-invoice-paid-col'><div jsId='totalPaidBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'></div></td>
+                            <td class='acq-invoice-center-col'><div jsId='balanceOwedBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'></div></td>
                         </tr>
                     </tbody>
                 </table>
-            </div>
-            <div id="acq-unified-add-term">
-                <button onclick="termManager.addRow()">Add Search Term</button>
-            </div>
-            <div>
-                <button
-                    onclick="resultManager.go(termManager.buildSearchObject())">
-                    Search
-                </button>
-            </div>
-        </div> <!-- end search form -->
-        <div id='acq-unified-results-lineitem'>
-            <button dojoType='dijit.form.Button'>Add Selected Items</button><br/>
-            <style>
-                #acq-invoice-search-results-tbody  { width: 100%; }
-                #acq-invoice-search-results-tbody td { 
-                    padding: 5px; 
-                    border-bottom: 1px solid #888;
-                }
-                .search-resutls-select-td {
-                    padding-right: 8px; border-right: 2px solid #888;
-                }
-                .search-results-content-td {
-                    padding-left: 8px; border-left: 2px solid #888; 
-                }
-            </style>
-            <table>
-                <tbody id='acq-invoice-search-results-tbody'>
-                    <tr id='acq-invoice-search-results-tr'>
-                        <td class='search-resutls-select-td'>
-                            <input type='checkbox' name='search-results-checkbox'/>
-                        </td>
-                        <td class='search-results-content-td'>
-                            <div name='search-results-content-div'>
-                                <img src='[% ctx.media_prefix %]/opac/images/progressbar_green.gif'/>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
+            </div> <!-- tab 1 -->
+
+            <div dojoType="dijit.layout.ContentPane" 
+                class='oils-acq-detail-content-pane' title="Search">
+    
+                <script type='dojo/connect' event='onShow'>renderUnifiedSearch();</script>
+
+
+                <!-- slim, inline unified search UI -->
+                <div id='oils-acq-invoice-search' _class='hidden'>
+
+                    <div id="acq-unified-form">
+                        <div>
+                            <label for="acq-unified-result-type">Search for</label>
+                            <select id="acq-unified-result-type" disabled='disabled'>
+                                <option value="lineitem">line items</option>
+                                <!--
+                                <option value="lineitem_and_bib">
+                                    line items &amp; catalog records
+                                </option>
+                                <option value="picklist">selection lists</option>
+                                <option value="purchase_order">purchase orders</option>
+                                <option value="invoice">invoices</option>
+                                -->
+                            </select>
+                            <label for="acq-unified-conjunction">matching</label>
+                            <select id="acq-unified-conjunction">
+                                <option value="and">all</option>
+                                <option value="or">any</option>
+                            </select>
+                            <label for="acq-unified-conjunction">
+                                of the following terms:
+                            </label>
+                        </div>
+                        <div id="acq-unified-terms">
+                            <table id="acq-unified-terms-table">
+                                <tbody id="acq-unified-terms-tbody">
+                                    <tr id="acq-unified-terms-row-tmpl"
+                                        class="acq-unified-terms-row">
+                                        <td name="selector"
+                                            class="acq-unified-terms-selector"></td>
+                                        <td name="match"
+                                            class="acq-unified-terms-match">
+                                            <select>
+                                                <option value="">is</option>
+                                                <option value="__not">is NOT</option>
+                                                <option value="__fuzzy" disabled="disabled">
+                                                    contains
+                                                </option>
+                                                <option value="__not,__fuzzy"
+                                                    disabled="disabled">
+                                                    does NOT contain
+                                                </option>
+                                                <option value="__lte" disabled="disabled">
+                                                    is on or BEFORE
+                                                </option>
+                                                <option value="__gte" disabled="disabled">
+                                                    is on or AFTER
+                                                </option>
+                                                <option value="__in" disabled="disabled">
+                                                    matches a term from a file
+                                                </option>
+                                            </select>
+                                        </td>
+                                        <td name="widget"
+                                            class="acq-unified-terms-widget"></td>
+                                        <td name="remove"
+                                            class="acq-unified-terms-remove"></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div id="acq-unified-add-term">
+                            <button onclick="termManager.addRow()">Add Search Term</button>
+                        </div>
+                        <div>
+                            <button
+                                onclick="resultManager.go(termManager.buildSearchObject())">
+                                Search
+                            </button>
+                        </div>
+                    </div> <!-- end search form -->
+                    <div id='acq-unified-results-lineitem'>
+                        <button dojoType='dijit.form.Button'>Add Selected Items</button><br/>
+                        <style>
+                            #acq-invoice-search-results-tbody  { width: 100%; }
+                            #acq-invoice-search-results-tbody td { 
+                                padding: 5px; 
+                                border-bottom: 1px solid #888;
+                            }
+                            .search-resutls-select-td {
+                                padding-right: 8px; border-right: 2px solid #888;
+                            }
+                            .search-results-content-td {
+                                padding-left: 8px; border-left: 2px solid #888; 
+                            }
+                        </style>
+                        <table>
+                            <tbody id='acq-invoice-search-results-tbody'>
+                                <tr id='acq-invoice-search-results-tr'>
+                                    <td class='search-resutls-select-td'>
+                                        <input type='checkbox' name='search-results-checkbox'/>
+                                    </td>
+                                    <td class='search-results-content-td'>
+                                        <div name='search-results-content-div'>
+                                            <img src='[% ctx.media_prefix %]/opac/images/progressbar_green.gif'/>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div> <!-- tab 2 -->
+        </div> <!-- end tabcontainer -->
+    </div> <!-- end contentpane -->
+
 </div>
 <div dojoType='openils.widget.ProgressDialog' jsId='progressDialog'></div>
 <div jsId='extraItemsDialog' dojoType="dijit.Dialog" title="Extra Items">
diff --git a/Open-ILS/web/js/ui/default/acq/search/unified.js b/Open-ILS/web/js/ui/default/acq/search/unified.js
index 76065f743e..8a84730380 100644
--- a/Open-ILS/web/js/ui/default/acq/search/unified.js
+++ b/Open-ILS/web/js/ui/default/acq/search/unified.js
@@ -4,6 +4,7 @@ dojo.require("openils.widget.AutoGrid");
 dojo.require("openils.widget.AutoWidget");
 dojo.require("openils.widget.XULTermLoader");
 dojo.require("openils.PermaCrud");
+dojo.require('dijit.layout.TabContainer');
 
 if (!localeStrings) {   /* we can do this because javascript doesn't have block 
                            scope */
-- 
2.11.0