From 4e5535e53a971ca206d80b783443681b02fe9581 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Wed, 7 Mar 2018 09:40:00 -0500
Subject: [PATCH] Update list pages. Update invoices create page.

Invoice creation. Changing the select for members or accounts into
autocomplete. If they put something in that is not in the source for the
autocomplete it will empty the input field.
Add link to the account list that goes to the members billing dashboard.
Set width on the list pages for the ID field.
---
 views/admin/billing/accounts.html    |  4 +-
 views/admin/billing/editInvoice.html | 77 +++++++++++++++++++++-------
 views/admin/billing/index.html       |  4 +-
 views/admin/billing/invoices.html    |  2 +-
 views/admin/billing/payments.html    |  2 +-
 5 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/views/admin/billing/accounts.html b/views/admin/billing/accounts.html
index a39dc8a..64167b7 100644
--- a/views/admin/billing/accounts.html
+++ b/views/admin/billing/accounts.html
@@ -40,7 +40,7 @@
 <table class="wp-list-table widefat fixed posts glm-admin-table">
     <thead>
         <tr>
-            <th>ID</th>
+            <th style="width:50px;">ID</th>
             <th>Member Name</th>
             <th>Billing Email</th>
             <th>Anniversary Date</th>
@@ -57,7 +57,7 @@
                     <tr class="alternate">
                 {/if}
                     <td> {$t.id} </td>
-                    <td> {$t.ref_name} </td>
+                    <td> <a href="{$adminUrl}?page=glm-members-admin-menu-member&glm_action=billing&member={$t.ref_dest.value}">{$t.ref_name}</a> </td>
                     <td> {$t.email} </td>
                     <td> {$t.anniversary_date.date} </td>
                     <td> {$t.renewal_date.date} </td>
diff --git a/views/admin/billing/editInvoice.html b/views/admin/billing/editInvoice.html
index 940b475..ef8c37e 100644
--- a/views/admin/billing/editInvoice.html
+++ b/views/admin/billing/editInvoice.html
@@ -23,15 +23,8 @@
                         Billing Account
                     </div>
                     <div class="glm-columns glm-small-12 glm-large-9">
-                        <input type="hidden" name="account" />
-                        <select id="member-account" name="account" required>
-                            <option value="">Select an Account</option>
-                            {foreach $accounts as $account}
-                                {if $account.id}
-                                <option value="{$account.id}">{$account.ref_name}</option>
-                                {/if}
-                            {/foreach}
-                        </select>
+                        <input id="glm_member_accounts_hidden" type="hidden" name="account" />
+                        <input id="glm_member_accounts" name="account_input" required />
                         <a id="newAccountButton" href="#">New Account</a>
                     </div>
                 </div>
@@ -177,6 +170,7 @@
 
 <script>
 jQuery(document).ready(function($){
+
     // List of Billing Accounts.
     var availableAccounts = [
     {foreach $accounts as $m}
@@ -190,15 +184,29 @@ jQuery(document).ready(function($){
         { label: "{$m.name|unescape:'html'|replace:'"':''}", value: "{$m.name|unescape:'html'|replace:'"':''}", id: '{$m.id}' },
     {/foreach}
     ];
-    $('#member_account_name').autocomplete({
-        source: availableAccounts
+    // Setup autocomplete for the member account input.
+    $('#glm_member_accounts').autocomplete({
+        source: availableAccounts,
+        select: function( event, ui ){
+            $('#glm_member_accounts_hidden').val( ui.item.id );
+        },
+        change: function( event, ui ) {
+            // If not in select option then empty the field
+            $(this).val((ui.item ? ui.item.label : ""));
+        },
     });
+    // Setup autocomplete for the non member input.
+    // This is on the add new account form.
     $('#glm_member_name').autocomplete({
         source: availableNonAccountMembers,
         appendTo: '#newAccountDialog',
         select: function( event, ui ){
             $('#non-member-account').val( ui.item.id );
         },
+        change: function( event, ui ) {
+            // If not in select option then empty the field
+            $(this).val((ui.item ? ui.item.label : ""));
+        },
     });
     // Initialize variables for this page.
     var dialog,                                                // Dialog for the add line_item form
@@ -334,7 +342,7 @@ jQuery(document).ready(function($){
             }).done(function( msg ){
                 if ( msg.status === true ) {
                     // Reload the account select
-                    updateBillingAccountSelect( msg.account.fieldData.id );
+                    updateBillingAccountList( msg.account.fieldData.id );
                     updateNonAccountMemberList();
                     // Close the dialog
                     newAccountDialog.dialog( 'close' );
@@ -395,7 +403,34 @@ jQuery(document).ready(function($){
      * Ajax call to get the list of billing accounts and update the select
      * for the Billing account drop down.
      */
-    function updateBillingAccountSelect(selected_id = null) {
+    // function updateBillingAccountSelect(selected_id = null) {
+    //     $.ajax({
+    //         url: '{$ajaxUrl}',
+    //         cache: false,
+    //         type: 'GET',
+    //         data: 'action=glm_members_admin_ajax&glm_action=account&option=list',
+    //         encode: true,
+    //         dataType: 'json'
+    //     }).done(function(msg){
+    //         // console.log( msg.length );
+    //         var memberAccount = document.getElementById('member-account');
+    //         memberAccount.options.length = 0;
+    //         memberAccount.options[memberAccount.options.length] = new Option( 'Select an Account', '' );
+    //         for ( index in msg ) {
+    //             var obj = msg[index];
+    //             memberAccount.options[memberAccount.options.length] = new Option( obj.ref_name, obj.id );
+    //         }
+    //         memberAccount.value = selected_id;
+    //     });
+    // }
+
+    /**
+     * Ajax call to get the list of members with accounts.
+     * Updating the account list used for the autocomplete.
+     */
+    function updateBillingAccountList( selected_id = null )
+    {
+
         $.ajax({
             url: '{$ajaxUrl}',
             cache: false,
@@ -404,15 +439,16 @@ jQuery(document).ready(function($){
             encode: true,
             dataType: 'json'
         }).done(function(msg){
-            // console.log( msg.length );
-            var memberAccount = document.getElementById('member-account');
-            memberAccount.options.length = 0;
-            memberAccount.options[memberAccount.options.length] = new Option( 'Select an Account', '' );
+            availableAccountMembers = [];
             for ( index in msg ) {
                 var obj = msg[index];
-                memberAccount.options[memberAccount.options.length] = new Option( obj.ref_name, obj.id );
+                availableAccountMembers.push( { label: obj.name, value: obj.name, id: obj.id } );
             }
-            memberAccount.value = selected_id;
+            // also need to update the source for the autocomplete
+            $('#glm_member_accounts').autocomplete(
+                'option',
+                { source: availableAccountMembers }
+            );
         });
     }
 
@@ -546,6 +582,9 @@ jQuery(document).ready(function($){
 
     /**
      * Change event listener for member account select.
+     * When the member account is selected it should set the
+     * invoice due_date to the current year based on the anniversary date.
+     * Todo: Update this for the changes for adding in the autocomplete.
      */
     $('#member-account').change(function(){
         $('#invoice_due_date').val( $(this).find('option:selected').data('anniversary') );
diff --git a/views/admin/billing/index.html b/views/admin/billing/index.html
index 3a7dc6d..7a93c2b 100644
--- a/views/admin/billing/index.html
+++ b/views/admin/billing/index.html
@@ -19,7 +19,7 @@
     <table class="wp-list-table widefat fixed posts glm-admin-table">
         <thead>
             <tr>
-                <th>ID</th>
+                <th style="width: 50px;">ID</th>
                 <th>Member Name</th>
                 <th>Time</th>
                 <th>Due Date</th>
@@ -52,7 +52,7 @@
     <table class="wp-list-table widefat fixed posts glm-admin-table">
         <thead>
             <tr>
-                <th>ID</th>
+                <th style="width: 50px;">ID</th>
                 <th>Member Name</th>
                 <th>Time</th>
                 <th>Due Date</th>
diff --git a/views/admin/billing/invoices.html b/views/admin/billing/invoices.html
index 06029d4..25aed15 100644
--- a/views/admin/billing/invoices.html
+++ b/views/admin/billing/invoices.html
@@ -41,7 +41,7 @@
 <table class="wp-list-table widefat fixed posts glm-admin-table">
     <thead>
         <tr>
-            <th>ID</th>
+            <th style="width: 50px;">ID</th>
             <th>Member Name</th>
             <th>Time</th>
             <th>Due Date</th>
diff --git a/views/admin/billing/payments.html b/views/admin/billing/payments.html
index 3779a6f..d34a929 100644
--- a/views/admin/billing/payments.html
+++ b/views/admin/billing/payments.html
@@ -8,7 +8,7 @@
 <table class="wp-list-table widefat fixed posts glm-admin-table">
     <thead>
         <tr>
-            <th>ID</th>
+            <th style="width: 50px;">ID</th>
             <th>Member Name</th>
             <th>Time</th>
             <th>Amount</th>
-- 
2.17.1