From: Bill Erickson <berick@esilibrary.com>
Date: Wed, 9 Feb 2011 16:20:57 +0000 (-0500)
Subject: display payments history as a separate tabbed UI.  TODO: use tab name images to match... 
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=95376584be8c7d7bbc3b6aa80b0e67cd930c6804;p=evergreen%2Fequinox.git

display payments history as a separate tabbed UI.  TODO: use tab name images to match myopac tabs
---

diff --git a/Open-ILS/web/opac/skin/kcls/js/myopac.js b/Open-ILS/web/opac/skin/kcls/js/myopac.js
index 0b884c01c7..fe61371c99 100644
--- a/Open-ILS/web/opac/skin/kcls/js/myopac.js
+++ b/Open-ILS/web/opac/skin/kcls/js/myopac.js
@@ -1373,12 +1373,21 @@ function myOPACShowTransactions(r) {
 		if(trans.xact_type() == 'circulation') myOPACShowCircTransaction(trans, record, circ);
 		else if(trans.xact_type() == 'grocery') myopacShowGenericTransaction( trans );
 	}
-
-    myopacDrawPayments(); // XXX
 }
 
+var paymentsDrawn = false;
 function myopacDrawPayments() {
 
+    unHideMe($("myopac_payments_div")); 
+    hideMe($("myopac_circ_trans_div"));
+    hideMe($("myopac_trans_div"));
+    hideMe($("pay-fines-image"));
+    removeCSSClass($("myopac_fines_tab_link").parentNode, "myopac_xact_tab_selected");
+    addCSSClass($("myopac_payments_tab_link").parentNode, "myopac_xact_tab_selected");
+
+    if(paymentsDrawn) return;
+    paymentsDrawn = true;
+
     var before = new Date()
     before.setFullYear(before.getFullYear() - 1);
     // KCLS limits payment history view to 1 year.  This will eventually be expanded 
diff --git a/Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml b/Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml
index 37ce7f67b1..f385399c18 100644
--- a/Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml
+++ b/Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml
@@ -46,7 +46,27 @@
 		</tbody>
 	</table>
 
-    <div id='myopac_payments_div' class=''>
+    <style>
+        .myopac_xact_tab { font-size: 150%; border: 1px solid #888; background: #3399cc;}
+        .myopac_xact_tab_selected { background: #FFF; }
+    </style>
+    <div id='fines_payments_wrapper' style='width:100%; background: #929292; padding: 3px; margin-top: 10px;'>
+        <span class='myopac_xact_tab myopac_xact_tab_selected'>
+            <a href='javascript:;' id='myopac_fines_tab_link' 
+                onclick='hideMe($("myopac_payments_div")); 
+                    unHideMe($("pay-fines-image"));
+                    unHideMe($("myopac_trans_div")); 
+                    unHideMe($("myopac_circ_trans_div"));
+                    addCSSClass($("myopac_fines_tab_link").parentNode, "myopac_xact_tab_selected");
+                    removeCSSClass($("myopac_payments_tab_link").parentNode, "myopac_xact_tab_selected");'>Fines</a>
+        </span>
+        <span class='myopac_xact_tab'>
+            <a href='javascript:;' id='myopac_payments_tab_link' onclick='myopacDrawPayments()'>Payments</a>
+        </span>
+    </div>
+
+    <!-- Payments History -->
+    <div id='myopac_payments_div' class='hide_me'>
         <div><b>Payments</b></div>
 		<table width='100%' class='data_grid data_grid_center' id='myopac_payments_table'>
             <thead><tr>
@@ -67,6 +87,7 @@
             </tbody>
         </table>
     </div>
+    <!-- /Payments History -->
 
 	<!--
 	<div id='accrue_explanation' class='hide_me'>
@@ -76,14 +97,12 @@
 	</div>
 	-->
 
-
 	<!-- Table for circulation transactions only -->
 	<div id='myopac_circ_trans_div' class='hide_me'>
 		<br/><hr/><br/>
 		<table width='100%' class='data_grid data_grid_center' id='myopac_circ_trans_table'>
 			<thead>
-				<!--<tr><td colspan='10' style='padding: 6px'><b>&myopac.fines.overdue;</b></td></tr>-->
-				<tr><td colspan='10' style='padding: 6px'><b>Fines</b></td></tr>
+                <!-- <tr><td colspan='10' style='padding: 6px'><b>Fines</b></td></tr> -->
 				<tr>
 					<td>&common.title;</td>
 					<td>&common.author;</td>
@@ -91,7 +110,10 @@
 					<td>&myopac.fines.due;</td>
 					<td>&myopac.fines.returned;</td>
 					<td>&myopac.fines.balance;</td>
-					<td align="center" nowrap="nowrap" style="white-space:nowrap;"><label for="pay_fines_box1">Pay Fines</label><br /><input id="pay_fines_box1" checked="checked" type="checkbox" onclick="checkAll($('myopac_circ_trans_tbody'), this, 'selector');" class="" title="Click to (un)select all fines" /></td>
+					<td align="center" nowrap="nowrap" style="white-space:nowrap;"><label for="pay_fines_box1">Pay Fines</label><br />
+                        <input id="pay_fines_box1" checked="checked" type="checkbox" 
+                            onclick="checkAll($('myopac_circ_trans_tbody'), this, 'selector');" class="" title="Click to (un)select all fines" />
+                    </td>
 				</tr>
 			</thead>
 			<tbody id='myopac_circ_trans_tbody'>
@@ -141,7 +163,7 @@
 			</tbody>
 		</table>
 	</div>
-	<a href="javascript:;" onclick="showPaymentForm();"><img alt="Pay Fines" onmouseover="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn-hover.png';" src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png" style="position:relative;top:5px;" /></a>
+	<a id='pay-fines-image' href="javascript:;" onclick="showPaymentForm();"><img alt="Pay Fines" onmouseover="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn-hover.png';" src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png" style="position:relative;top:5px;" /></a>
 	
 	<br/>
 </div>