From: Steve Sutton <steve@gaslightmedia.com>
Date: Tue, 5 Dec 2017 21:55:59 +0000 (-0500)
Subject: WIP for adding invoice line items
X-Git-Tag: v1.0.0^2~207
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=4915ecebab9ec1111f4d389e24231365766b919a;p=WP-Plugins%2Fglm-member-db-billing.git

WIP for adding invoice line items

Price calculation is being done for the items.
Need to work on the quantity.
---

diff --git a/css/admin.css b/css/admin.css
new file mode 100644
index 0000000..486cae0
--- /dev/null
+++ b/css/admin.css
@@ -0,0 +1,4 @@
+#billing-invoice-form .glm-columns,
+#billing-invoice-form .glm-column {
+    padding: 0;
+}
diff --git a/models/admin/billing/invoices.php b/models/admin/billing/invoices.php
index 616324b..a800a0a 100644
--- a/models/admin/billing/invoices.php
+++ b/models/admin/billing/invoices.php
@@ -15,6 +15,7 @@
 
 // Load Contacts data class
 require_once GLM_MEMBERS_BILLING_PLUGIN_CLASS_PATH.'/data/dataInvoices.php';
+require_once GLM_MEMBERS_BILLING_PLUGIN_CLASS_PATH.'/data/dataInvoiceTypes.php';
 
 class GlmMembersAdmin_billing_invoices extends GlmDataInvoices
 {
@@ -111,6 +112,9 @@ class GlmMembersAdmin_billing_invoices extends GlmDataInvoices
         $nextStart           = false;
         $start               = 1;
         $limit               = 20;        // Set to the number of listings per page
+        $invTypes            = array();
+        $invoiceTypes        = false;
+        $invoiceTypeJSON     = '';
 
         // Get any provided option
         if (isset($_REQUEST['option'])) {
@@ -121,8 +125,22 @@ class GlmMembersAdmin_billing_invoices extends GlmDataInvoices
         switch ($option) {
 
         case 'add':
-            $invoices = $this->newEntry();
-            $view     = 'editInvoice';
+            $invoices        = $this->newEntry();
+            $view            = 'editInvoice';
+            $InvoiceTypesObj = new GlmDataInvoiceTypes( $this->wpdb, $this->config );
+            $invoiceTypes    = $InvoiceTypesObj->getList();
+            $invoiceTypes    = $InvoiceTypesObj->sortParentChild($invoiceTypes);
+            echo '<pre>$invoiceTypes: ' . print_r( $invoiceTypes, true ) . '</pre>';
+            if ( isset( $invoiceTypes ) ) {
+                foreach ( $invoiceTypes as $invoiceType ) {
+                    $invTypes[$invoiceType['id']] = array(
+                        'id'     => $invoiceType['id'],
+                        'name'   => $invoiceType['name'],
+                        'amount' => $invoiceType['amount'],
+                    );
+                }
+                $invoiceTypeJSON = json_encode( $invTypes, true );
+            }
             break;
 
         case 'insert':
@@ -277,6 +295,8 @@ class GlmMembersAdmin_billing_invoices extends GlmDataInvoices
             'nextStart'           => $nextStart,
             'start'               => $start = 1,
             'limit'               => $limit,
+            'invoiceTypeJSON'     => $invoiceTypeJSON,
+            'invoiceTypes'        => $invoiceTypes,
         );
 
         // Return status, any suggested view, and any data to controller
diff --git a/views/admin/billing/editInvoice.html b/views/admin/billing/editInvoice.html
index 97cc79a..4ebb7ee 100644
--- a/views/admin/billing/editInvoice.html
+++ b/views/admin/billing/editInvoice.html
@@ -7,34 +7,166 @@
 {if $invoiceInsertError}<span class="glm-notice glm-flash-updated">Notification Insert Error</span>{/if}
 {if $invoiceAdded}<span class="glm-notice glm-flash-updated">Notification Added</span>{/if}
 
-<form action="{$thisUrl}?page={$thisPage}&glm_action=invoices" method="post">
-    {if $invoice_id}
-        <input type="hidden" name="option" value="update">
-        <input type="hidden" name="id" value="{$invoice_id}">
-    {else}
-        <input type="hidden" name="option" value="insert">
-    {/if}
-    <div class="glm-row">
-        <div class="glm-columns glm-small-6">
-            <div class="glm-row">
-                <div class="glm-columns glm-small-12"> Line One </div>
+<div id="billing-invoice-form">
+    <form action="{$thisUrl}?page={$thisPage}&glm_action=invoices" method="post">
+        {if $invoice_id}
+            <input type="hidden" name="option" value="update">
+            <input type="hidden" name="id" value="{$invoice_id}">
+        {else}
+            <input type="hidden" name="option" value="insert">
+        {/if}
+        <div class="glm-row">
+            <div class="glm-columns glm-small-12 glm-large-8">
+                <div class="glm-row">
+                    <div class="glm-columns glm-small-12 glm-large-3">
+                        Member Account
+                    </div>
+                    <div class="glm-columns glm-small-12 glm-large-9">
+                        <select name="account" required>
+                            <option value="">Select an Account</option>
+                            <option value="3204">A Test Member</option>
+                        </select>
+                    </div>
+                </div>
             </div>
-
-
-            <div class="glm-row">
-                <div class="glm-columns glm-small-9"> Total Amount: </div>
-                <div class="glm-columns glm-small-3"> $0.00 </div>
+        </div>
+        <div class="glm-row">
+            <div class="glm-columns glm-small-12 glm-large-2">
+                <button id="newLineItemButton" class="glm-billing-add-line-item button tiny">Add Line Item</button>
+            </div>
+            <div class="glm-columns glm-small-12 glm-large-10" id="invoice-line-items">
+            </div>
+            <div class="glm-columns glm-small-12 glm-large-2">
+                &nbsp;
+            </div>
+            <div class="glm-columns glm-small-12 glm-large-10">
+                <div class="glm-row">
+                    <div class="glm-columns glm-small-8"> Total Amount: </div>
+                    <div class="glm-columns glm-small-4" id="invoice-total"> $0.00 </div>
+                </div>
             </div>
-
-            <input class="button button-primary" type="submit" value="{if $invoice_id}Update{else}Add{/if} Invoice">
         </div>
-    </div>
-
-</form>
+        <div class="glm-row">
+            <div class="glm-columns glm-small-12 glm-large-8">
+                <input class="button button-primary" type="submit" value="{if $invoice_id}Save{else}Create{/if} Invoice">
+            </div>
+        </div>
+    </form>
+</div>
+<div id="newLineItemDialog" class="glm-dialog-box" title="Enter a Line Item">
+    <form id="addLineItemForm">
+        <input type="hidden" name="glm_action" value="invoices">
+        <input type="hidden" name="option" value="addLineItem">
+        <table>
+            <tr>
+                <th class="glm-required">Invoice Type</th>
+                <td>
+                    <select name="line_item_type">
+                        <option value="">Select Invoice Type</option>
+                        {foreach $invoiceTypes as $inv}
+                            {if $inv.parent.value == 0 && $inv.amount != '0.00'}
+                                <optgroup label="{$inv.name}">
+                            {/if}
+                            {if $inv.amount}
+                                <option value="{$inv.id}">{$inv.name}</option>
+                            {/if}
+                            {if $inv.parent.value == 0 && $inv.amount != '0.00'}
+                                </optgroup>
+                            {/if}
+                        {/foreach}
+                    </select>
+                </td>
+            </tr>
+        </table>
+    </form>
+</div>
 
 <script>
 jQuery(document).ready(function($){
+    var invoiceTypeJSON = $.parseJSON( '{$invoiceTypeJSON}' );
+    var dialog, form,
+        line_item_type = $( 'select[name="line_item_type"]' ),
+        line_items     = [],
+        allFields      = $( [] ).add( line_item_type );
+
+    function totalInvoice() {
+        var totalAmount = 0.00;
+        for ( var i = 0; i < line_items.length; ++i ) {
+            totalAmount += parseFloat( line_items[i].amount );
+        }
+        $('#invoice-total').html('$' + totalAmount.toFixed( 2 ) );
+    }
+
+    function isLineItem( item ) {
+        for ( var i = 0; i < line_items.length; ++i ) {
+            if ( item.id === line_items[i].id ) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    function addLineItem() {
+        var valid = true;
+        allFields.removeClass( 'ui-state-error' );
+
+        valid = valid && checkRequired( line_item_type );
+
+        if ( valid ) {
+            var selectedLineItem = invoiceTypeJSON[line_item_type.val()];
+            // Check first to see if this line_item_type is already in line_items.
+            if ( !isLineItem( selectedLineItem ) ) {
+                line_items.push( selectedLineItem );
+                console.log( line_items );
+                $( '#invoice-line-items' ). append( '<div class="glm-row" id="line-item-type-' + selectedLineItem.id + '">' +
+                    '<div class="glm-columns glm-small-7">' + selectedLineItem.name + '</div>' +
+                    '<div class="glm-columns glm-small-1">1</div>' +
+                    '<div class="glm-columns glm-small-4">$' + selectedLineItem.amount + '</div>' +
+                '</div>');
+            }
+            dialog.dialog( 'close' );
+        }
+        totalInvoice();
+        return valid;
+    }
+
+    function checkRequired( fieldName ) {
+        if ( fieldName.val() ) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    dialog = $('#newLineItemDialog').dialog({
+        autoOpen: false,
+        minWidth: 400,
+        dialogClass: 'glm-dialog-no-close',
+        modal: true,
+        buttons: {
+            "Add Line Item": addLineItem,
+            Cancel: function(){
+                dialog.dialog( 'close' );
+            },
+        },
+        close: function() {
+            form[0 ].reset();
+            allFields.removeClass( 'ui-state-error' );
+        },
+    });
+
+    form = dialog.find( '#addLineItemForm' ).on( 'submit', function(){
+        event.preventDefault();
+        addLineItem();
+    });
+
+    $('#newLineItemButton').click( function() {
+        $("#newLineItemDialog").dialog("open");
+    });
 
+    $('.glm-billing-add-line-item').on( 'click', function(){
+        return false;
+    });
 
     // Flash certain elements for a short time after display
     $(".glm-flash-updated").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
diff --git a/views/admin/billing/subHeader.html b/views/admin/billing/subHeader.html
index 9aa65cb..53c66c6 100644
--- a/views/admin/billing/subHeader.html
+++ b/views/admin/billing/subHeader.html
@@ -1,4 +1,6 @@
 <h2 class="nav-tab-wrapper" style="margin-bottom: 1em;">
-    <a href="{$thisUrl}?page=glm-members-admin-menu-billing&glm_action=invoices" class="nav-tab{if $thisAction==invoices} nav-tab-active{/if}">Search Invoices</a>
-    <a href="{$thisUrl}?page=glm-members-admin-menu-billing&glm_action=invoices&option=add" class="nav-tab">Create Invoice</a>
+    <a href="{$thisUrl}?page=glm-members-admin-menu-billing&glm_action=invoices"
+        class="nav-tab{if $thisAction==invoices && !$option} nav-tab-active{/if}">Search Invoices</a>
+    <a href="{$thisUrl}?page=glm-members-admin-menu-billing&glm_action=invoices&option=add"
+        class="nav-tab{if $option} nav-tab-active{/if}">Create Invoice</a>
 </h2>
diff --git a/views/admin/settings/invoiceTypes.html b/views/admin/settings/invoiceTypes.html
index 98a2ba5..0866611 100644
--- a/views/admin/settings/invoiceTypes.html
+++ b/views/admin/settings/invoiceTypes.html
@@ -179,71 +179,70 @@
 </table>
 
 <script type="text/javascript">
-    jQuery(document).ready(function($) {
+jQuery(document).ready(function($) {
 
-        $("#newInvoiceTypeDialog").dialog({
-            autoOpen: false,
-            minWidth: 400,
-            dialogClass: "glm-dialog-no-close"
-        });
-        $("#editInvoiceTypeDialog").dialog({
-            autoOpen: false,
-            minWidth: 400,
-            dialogClass: "glm-dialog-no-close"
-        });
-        $("#deleteInvoiceTypeDialog").dialog({
-            autoOpen: false,
-            minWidth: 400,
-            dialogClass: "glm-dialog-no-close"
-        });
-
-        $('#newInvoiceTypeButton').click( function() {
-            $("#newInvoiceTypeDialog").dialog("open");
-        });
-        $('.editInvoiceType').click( function() {
-            $('#editRecurring').prop( 'checked', false );
+    $("#newInvoiceTypeDialog").dialog({
+        autoOpen: false,
+        minWidth: 400,
+        dialogClass: "glm-dialog-no-close"
+    });
+    $("#editInvoiceTypeDialog").dialog({
+        autoOpen: false,
+        minWidth: 400,
+        dialogClass: "glm-dialog-no-close"
+    });
+    $("#deleteInvoiceTypeDialog").dialog({
+        autoOpen: false,
+        minWidth: 400,
+        dialogClass: "glm-dialog-no-close"
+    });
 
-            var invoiceID         = $(this).data('invoice-id');
-            var invoiceName       = $(this).data('invoice-name');
-            var invoiceParent     = $(this).data('invoice-parent');
-            console.log(invoiceParent);
-            var invoiceAmount     = $(this).data('invoice-amount');
-            var invoiceRecurring  = $(this).data('invoice-recurring');
-            var invoiceRecurrence = $(this).data('invoice-recurrence');
+    $('#newInvoiceTypeButton').click( function() {
+        $("#newInvoiceTypeDialog").dialog("open");
+    });
+    $('.editInvoiceType').click( function() {
+        $('#editRecurring').prop( 'checked', false );
 
-            // Set the values of the edit form for the selected invoiceType
-            $('#edit-id').val( invoiceID );
-            $('#edit-name').val( invoiceName );
-            $('#edit-parent').val( invoiceParent );
-            $('#edit-amount').val( invoiceAmount );
-            if ( invoiceRecurring === 1 ) {
-                $('#edit-recurring').prop( 'checked', true );
-            }
-            $('#edit-recurrence').val( invoiceRecurrence );
+        var invoiceID         = $(this).data('invoice-id');
+        var invoiceName       = $(this).data('invoice-name');
+        var invoiceParent     = $(this).data('invoice-parent');
+        var invoiceAmount     = $(this).data('invoice-amount');
+        var invoiceRecurring  = $(this).data('invoice-recurring');
+        var invoiceRecurrence = $(this).data('invoice-recurrence');
 
-            $("#editInvoiceTypeDialog").dialog("open");
-        });
-        $('#editInvoiceTypeCancel').click( function() {
-            $("#editInvoiceTypeDialog").dialog("close");
-        });
-        $('#newInvoiceTypeCancel').click( function() {
-            $("#newInvoiceTypeDialog").dialog("close");
-        });
+        // Set the values of the edit form for the selected invoiceType
+        $('#edit-id').val( invoiceID );
+        $('#edit-name').val( invoiceName );
+        $('#edit-parent').val( invoiceParent );
+        $('#edit-amount').val( invoiceAmount );
+        if ( invoiceRecurring === 1 ) {
+            $('#edit-recurring').prop( 'checked', true );
+        }
+        $('#edit-recurrence').val( invoiceRecurrence );
 
-        var id = false;
-        $('.deleteInvoiceTypeButton').click( function() {
-            id = $(this).attr('data-invoiceTypeID');
-            $("#deleteInvoiceTypeDialog").dialog("open");
-        });
-        $('#deleteInvoiceTypeConfirm').click( function() {
-            $("#deleteInvoiceTypeDialog").dialog("close");
-            window.location.href = "{$thisUrl}?page={$thisPage}&glm_action=invoiceTypes&option=delete&id=" + id;
-        });
-        $('#deleteInvoiceTypeCancel').click( function() {
-            $("#deleteInvoiceTypeDialog").dialog("close");
-        });
+        $("#editInvoiceTypeDialog").dialog("open");
+    });
+    $('#editInvoiceTypeCancel').click( function() {
+        $("#editInvoiceTypeDialog").dialog("close");
+    });
+    $('#newInvoiceTypeCancel').click( function() {
+        $("#newInvoiceTypeDialog").dialog("close");
+    });
 
+    var id = false;
+    $('.deleteInvoiceTypeButton').click( function() {
+        id = $(this).attr('data-invoiceTypeID');
+        $("#deleteInvoiceTypeDialog").dialog("open");
+    });
+    $('#deleteInvoiceTypeConfirm').click( function() {
+        $("#deleteInvoiceTypeDialog").dialog("close");
+        window.location.href = "{$thisUrl}?page={$thisPage}&glm_action=invoiceTypes&option=delete&id=" + id;
     });
+    $('#deleteInvoiceTypeCancel').click( function() {
+        $("#deleteInvoiceTypeDialog").dialog("close");
+    });
+
+});
 </script>
 
 {include file='admin/footer.html'}