Updating the invoice admin table.

Shorten the columns and add a tr on hover.

diff --git a/views/admin/billing/invoices.html b/views/admin/billing/invoices.html
index b34448d..07d8196 100644 (file)
--- a/views/admin/billing/invoices.html
+++ b/views/admin/billing/invoices.html
@@ -49,54 +49,61 @@
 
 <pre>
 </pre>
-<table class="wp-list-table widefat fixed posts glm-admin-table">
-    <thead>
-        <tr>
-            <th style="width: 50px;">ID</th>
-            <th style="width: 150px;">Member Name</th>
-            <th>Invoice For</th>
-            <th style="width: 150px;">Time</th>
-            <th style="width: 70px;">Due Date</th>
-            <th style="width: 100px;">Amount Total</th>
-            <th style="width: 70px;">Balance</th>
-            <th style="width: 100px;">Pay Invoice</th>
-            <th style="width: 50px;">View</th>
-            <th style="width: 50px;">Delete</th>
-        </tr>
-    </thead>
-    <tbody>
-        {if $haveInvoices}
-            {assign var="i" value="0"}
-            {foreach $invoices as $t}
-                {if $i++ is odd by 1}
-                    <tr>
-                {else}
-                    <tr class="alternate">
-                {/if}
-                    <td> <a href="{$adminUrl}?page=glm-members-admin-menu-billing&glm_action=invoices&option=edit&id={$t.id}">{$t.id}</a> </td>
-                    <td> <a href="{$adminUrl}?page=glm-members-admin-menu-member&glm_action=billing&member={$t.member_id}">{$t.member_name}</a> </td>
-                    <td>
-                    {foreach $t.line_items as $item}
-                        {$item.name} {if $item.recurring && $item.recurrence_string}( {$item.recurrence_string} ){/if}
-                    {/foreach}
-                    </td>
-                    <td> {$t.transaction_time.datetime} </td>
-                    <td> {$t.due_date.date} </td>
-                    <td> {$t.amount_total} </td>
-                    <td> {$t.balance} </td>
-                    <td> {if $t.paid.value}&nbsp;{else}<a href="{$thisUrl}?page=glm-members-admin-menu-member&glm_action=billing&option=makepayment&member={$t.member_id}">Pay Invoice</a>{/if} </td>
-                    <td>
-                        <a href="{$thisUrl}?page={$thisPage}&glm_action=invoices&option=view&id={$t.id}">View</a>
-                        <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=createPDFInvoice&id={$t.id}">Print</a>
-                    </td>
-                    <td> <a onClick="return confirm('This will delete the invoice. This cannot be undone. Are you Sure?');" href="{$thisUrl}?page={$thisPage}&glm_action=invoices&option=delete&invoice_id={$t.id}">Delete</a> </td>
-                </tr>
-            {/foreach}
-        {else}
-            <tr class="alternate"><td colspan="2">(no Invoice Types listed)</td></tr>
-        {/if}
-    </tbody>
-</table>
+<div class="glm-admin-table-inner">
+    <table class="wp-list-table widefat fixed posts glm-admin-table">
+        <thead>
+            <tr>
+                <th style="width: 150px;">Member Name</th>
+                <th>Invoice For</th>
+                <th style="width: 150px;">Time</th>
+                <th style="width: 70px;">Due Date</th>
+                <th style="width: 100px;">Amount Total</th>
+                <th style="width: 70px;">Balance</th>
+            </tr>
+        </thead>
+        {*
+
+        *}
+        <tbody>
+            {if $haveInvoices}
+                {foreach $invoices as $t}
+                    <tr class="glm-invoice-row{if $t@iteration is div by 2} alternate{/if}" data-id="{$t.id}">
+                        <td> <a href="{$adminUrl}?page=glm-members-admin-menu-member&glm_action=billing&member={$t.member_id}">{$t.member_name}</a> </td>
+                        <td>
+                        {foreach $t.line_items as $item}
+                            {$item.name} {if $item.recurring && $item.recurrence_string}( {$item.recurrence_string} ){/if}
+                        {/foreach}
+                        </td>
+                        <td> {$t.transaction_time.datetime} </td>
+                        <td> {$t.due_date.date} </td>
+                        <td> {$t.amount_total} </td>
+                        <td> {$t.balance} </td>
+                    </tr>
+                    <tr id="invoice-container-{$t.id}"
+                        class="glm-invoice-links glm-hidden{if $t@iteration is div by 2} alternate{/if}">
+                        <td colspan="6">
+                            <span class="account-dashboard-link">
+                                <a href="{$adminUrl}?page=glm-members-admin-menu-billing&glm_action=invoices&option=edit&id={$t.id}">Edit</a> |
+                            </span>
+                            <span class="account-dashboard-link">
+                                <a href="{$thisUrl}?page={$thisPage}&glm_action=invoices&option=view&id={$t.id}">View</a> |
+                                <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=createPDFInvoice&id={$t.id}">Print</a> |
+                            </span>
+                            <span class="account-dashboard-link"> {if $t.paid.value}&nbsp;{else}
+                                <a href="{$thisUrl}?page=glm-members-admin-menu-member&glm_action=billing&option=makepayment&member={$t.member_id}">Pay Invoice</a>{/if} |
+                            </span>
+                            <span class="account-dashboard-link">
+                                <a onClick="return confirm('This will delete the invoice. This cannot be undone. Are you Sure?');" href="{$thisUrl}?page={$thisPage}&glm_action=invoices&option=delete&invoice_id={$t.id}">Delete</a>
+                            </span>
+                        </td>
+                    </tr>
+                {/foreach}
+            {else}
+                <tr class="alternate"><td colspan="2">(no Invoice Types listed)</td></tr>
+            {/if}
+        </tbody>
+    </table>
+</div>
 
     {if $paging}
         <input type="Submit" name="pageSelect" value="Previous {$limit} Invoices" class="button button-secondary glm-button"{if !$prevStart} disabled{/if}>
@@ -108,6 +115,19 @@
 <script type="text/javascript">
     jQuery(document).ready(function($) {
 
+        var invoiceHoverId  = false;
+
+        $('.glm-invoice-row').mouseenter( function(){
+            // Hide all
+            $( '.glm-invoice-links' ).addClass( 'glm-hidden' );
+
+            invoiceHoverId = $(this).data('id');
+            $( '#invoice-container-' + invoiceHoverId ).removeClass( 'glm-hidden' );
+        });
+        $('.glm-admin-table-inner').mouseleave( function() {
+            $( '#invoice-container-' + invoiceHoverId ).addClass( 'glm-hidden' );
+        });
+
         // Date Input
         $('.glm-date-input').datepicker({
             dateFormat: 'mm/dd/yy'