WIP setup form for adding custom line items.

Tried to work in the custom line item into same form as the add line
item. But this won't work. Needs to be a separate form.

diff --git a/views/admin/billing/editInvoice.html b/views/admin/billing/editInvoice.html
index 3f2fc3e..0a5f6dc 100644 (file)
--- a/views/admin/billing/editInvoice.html
+++ b/views/admin/billing/editInvoice.html
@@ -51,6 +51,9 @@
             <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-2">
+                <button id="newCustomLineItemButton" class="glm-billing-add-line-item button tiny">Create New 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">
@@ -141,14 +144,15 @@
         </table>
     </form>
 </div>
+{* Enter a Line Item Form - jQueryUI dialog *}
 <div id="newLineItemDialog" class="glm-dialog-box" title="Enter a Line Item">
-    <p class="validateTips">* Required!</p>
+    <p class="validateTips glm-required">* Required!</p>
     <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>
+                <th class="glm-required">Invoice Type </th>
                 <td>
                     <select id="line_item_type" name="line_item_type">
                         <option value="">Select Invoice Type</option>
@@ -166,11 +170,27 @@
                         {/foreach}
                     </select>
                 </td>
-                <td><p id="line_item_price"></p></td>
+                <td>
+                    <p id="line_item_price"></p>
+                </td>
             </tr>
         </table>
     </form>
 </div>
+{* Add new Invoice Type (Custom Line Item) Form *}
+<div id="newCustomLineItemDialog" class="glm-dialog-box" title="Enter Custom Line Item">
+    <p class="validateTips glm-required">* Required!</p>
+    <table>
+        <tr>
+            <th class="glm-required">Line Item Name</th></th>
+            <td><input name="name" /></td>
+        </tr>
+        <tr>
+            <th class="glm-required">Amount</th>
+            <td><input name="name" /></td>
+        </tr>
+    </table>
+</div>
 
 <script>
 jQuery(document).ready(function($){
@@ -222,6 +242,7 @@ jQuery(document).ready(function($){
     // Initialize variables for this page.
     var dialog,                                                // Dialog for the add line_item form
         newAccountDialog,                                      // Dialog for the add new account
+        customLineItemDialog,                                  // Dialog for the custom line item
         form,                                                  // The add line_item form
         newAccountForm,                                        // New Account Form
         line_item_type   = $( 'select[name="line_item_type"]' ), // Line item type in the add line_item form
@@ -302,26 +323,33 @@ jQuery(document).ready(function($){
         valid = valid && checkRequired( line_item_type, lineTips, 'Invoice Type is required!' );
 
         if ( valid ) {
+            console.log( 'line_item_type', line_item_type );
             var selectedLineItem = invoiceTypeJSON[line_item_type.val()];
-            // Check first to see if this line_item_type is already in line_items.
-            if ( !isLineItem( selectedLineItem ) ) {
-                selectedLineItem.qty = parseInt(1);
-                line_items.push( selectedLineItem );
-                $( '#invoice-line-items' ). append( '<div class="glm-row" id="line-item-type-' + selectedLineItem.id + '">' +
-                    '<div class="glm-columns glm-small-1 line-item-delete dashicons dashicons-trash" data-id="' + selectedLineItem.id + '"></div>' +
-                    '<div class="glm-columns glm-small-6">' + selectedLineItem.name + '</div>' +
-                    '<div class="glm-columns glm-small-1">' +
-                    '<input type="number" min="1" data-id="' + selectedLineItem.id + '" name="line_item_qty[' + selectedLineItem.id + ']" value="1">' +
-                    '</div><div class="glm-columns glm-small-4">' +
-                    '<input type="hidden" name="line_items[]" value="' + selectedLineItem.id + '">' +
-                    '<input type="hidden" name="line_item_amount[' + selectedLineItem.id + ']" value="' + selectedLineItem.amount + '">' +
-                    '<input type="hidden" name="line_item_name[' + selectedLineItem.id + ']" value="' + selectedLineItem.name + '">' +
-                    '$' + selectedLineItem.amount + '</div>' +
-                '</div>');
+            // If selectedLineItem is undefined then we must be adding new line item
+            if ( selectedLineItem == undefined ) {
+                // Check that nameand amount are not empty
+                // valid = valid && checkRequired(
             } else {
-                // Code here to add to quantity.
-                selectedLineItem.qty++;
-                $('input[name="line_item_qty\\[' + selectedLineItem.id + '\\]').val(selectedLineItem.qty);
+                // Check first to see if this line_item_type is already in line_items.
+                if ( !isLineItem( selectedLineItem ) ) {
+                    selectedLineItem.qty = parseInt(1);
+                    line_items.push( selectedLineItem );
+                    $( '#invoice-line-items' ). append( '<div class="glm-row" id="line-item-type-' + selectedLineItem.id + '">' +
+                        '<div class="glm-columns glm-small-1 line-item-delete dashicons dashicons-trash" data-id="' + selectedLineItem.id + '"></div>' +
+                        '<div class="glm-columns glm-small-6">' + selectedLineItem.name + '</div>' +
+                        '<div class="glm-columns glm-small-1">' +
+                        '<input type="number" min="1" data-id="' + selectedLineItem.id + '" name="line_item_qty[' + selectedLineItem.id + ']" value="1">' +
+                        '</div><div class="glm-columns glm-small-4">' +
+                        '<input type="hidden" name="line_items[]" value="' + selectedLineItem.id + '">' +
+                        '<input type="hidden" name="line_item_amount[' + selectedLineItem.id + ']" value="' + selectedLineItem.amount + '">' +
+                        '<input type="hidden" name="line_item_name[' + selectedLineItem.id + ']" value="' + selectedLineItem.name + '">' +
+                        '$' + selectedLineItem.amount + '</div>' +
+                    '</div>');
+                } else {
+                    // Code here to add to quantity.
+                    selectedLineItem.qty++;
+                    $('input[name="line_item_qty\\[' + selectedLineItem.id + '\\]').val(selectedLineItem.qty);
+                }
             }
             $('#line_item_price').html( '' );
             dialog.dialog( 'close' );
@@ -332,7 +360,17 @@ jQuery(document).ready(function($){
 
     // Add the price to the right of the new selection for add line item.
     $('#line_item_type').change(function(){
-        $('#line_item_price').html( '$' + $('#line_item_type option:selected').data( 'price') );
+        if ( $(this).val() == 'new' ) {
+            $('#line_item_price').html( '' );
+            // show the new line item fields
+            $('#new-line-item').toggleClass( 'glm-hidden' );
+        } else if ( $(this).val() == '' ) {
+            $('#line_item_price').html( '' );
+            $('#new-line-item').addClass( 'glm-hidden' );
+        } else {
+            $('#line_item_price').html( '$' + $('#line_item_type option:selected').data( 'price') );
+            $('#new-line-item').addClass( 'glm-hidden' );
+        }
     });
 
     // Here we delete a line_item from the form.
@@ -508,6 +546,27 @@ jQuery(document).ready(function($){
         },
     });
 
+    /**
+     * dialog for custom line item
+     */
+    customLineItemDialog = $('#newCustomLineItemDialog').dialog({
+        autoOpen: false,
+        minWidth: 400,
+        dialogClass: 'glm-dialog-no-close',
+        modal: true,
+        buttons: {
+            "Add Custom Line Item": addCustomLineItem,
+            Cancel: function(){
+                customLineItemDialog.dialog( 'close' );
+            },
+        },
+        close: function(){
+            // Todo: reset form
+            // Todo: remove error state
+            // Todo: updateTips
+        },
+    });
+
     /**
      * form
      *