Add Invoice

assets/js/custom.js

@@ -1,62 +1,27 @@
-$(document).ready(function(){
 
-	/*client*/
 
-
-	$('input#id_first_name').keyup(function(){
-		var f = $(this).val();
-		var l = $('input#id_last_name').val()
-		$('input#id_display_name').val(f+' '+l);
-	});
-
-	$('input#id_last_name').keyup(function(){
-		var l = $(this).val();
-		var f = $('input#id_first_name').val()
-		$('input#id_display_name').val(f+' '+l);
-	});
-
-
-	if ($( "select#id_item_type").val() == 'fixed'){
-		$('input#id_amount').removeAttr("disabled")
-	}else if($( "select#id_item_type").val() == 'quantity'){
-		$('input#id_quantity').removeAttr("disabled")
-		$('input#id_rate').removeAttr("disabled")
-
-	}
-
-
-
-
-	$( "select#id_item_type").click(function(){
-		var selected = $(this).val();
-
-		if (selected == 'quantity'){
-
-			$('input#id_quantity').removeAttr("disabled")
-			$('input#id_rate').removeAttr("disabled")
-			$('input#id_amount').attr("disabled", "true")
-
-		}
-		if(selected == 'fixed'){
-
-			$('input#id_quantity').attr("disabled", "true")
-			$('input#id_rate').attr("disabled", "true")
-			$('input#id_amount').removeAttr("disabled")
-		}
-	}); 
-
-
-
-$( "select#items").click(function(){
-		var selected = $(this).val();
-
-		$('div#item-pick').append('<span>'+selected+'</span>')
-
-});
-
-
-
-
-
-
-});
+  $(document).ready(function() {
+    $('input#id_first_name').keyup(function(){
+      var f = $(this).val();
+      var l = $('input#id_last_name').val()
+      $('input#id_display_name').val(f+' '+l);
+    });
+
+    $('input#id_last_name').keyup(function(){
+      var l = $(this).val();
+      var f = $('input#id_first_name').val()
+      $('input#id_display_name').val(f+' '+l);
+    });
+
+    if ($( "select#id_item_type").val() == 'fixed'){
+      $('input#id_amount').removeAttr("disabled")
+    }else if($( "select#id_item_type").val() == 'quantity'){
+      $('input#id_quantity').removeAttr("disabled")
+      $('input#id_rate').removeAttr("disabled")
+    }
+
+    $( "select#items").click(function(){
+      var selected = $(this).val();
+      $('div#item-pick').append('<span>'+selected+'</span>')
+    });
+  });

assets/js/formset.js

@@ -0,0 +1,150 @@
+'use strict';
+
+let formset = function() {
+
+  let totalForm = Number( $('#id_form-TOTAL_FORMS').val() );
+  let totalFormCounter;
+  let arr = []
+
+
+  let amountComputation = function(){
+    // Total amount calculation
+    $('.field-quantity').on('keydown keyup keypress focusout focus', function() {
+        let rate = $(this).parent().children('.field-rate').children().val();
+        let quantity = $(this).children().val();
+        let total = parseInt(rate) * parseInt(quantity);
+
+        if (!isNaN(total)){
+          $(this).parent().children('.field-amount').text(total);
+        }
+    });
+    $('.field-rate').on('keydown keyup keypress focusout focus', function() {
+        let rate = $(this).children().val();
+        let quantity = $(this).parent().children('.field-quantity').children().val();
+        let total = parseInt(rate) * parseInt(quantity);
+
+        if (!isNaN(total)){
+          $(this).parent().children('.field-amount').text(total);
+        }
+    });
+  }
+
+  // Display created elements
+  for(let counter=0; counter < totalForm; counter++){
+    let rowForm = $('.row-item').find('input[name="form-'+counter+'-description"]').parent().parent().attr('id',counter);
+    let del =  $('.form-row#'+counter).find('.field-delete').children().attr('id','id_form-'+counter+'-delete');
+
+    // Add remove text
+    if ( del.attr('id') != 'id_form-0-delete'){
+      del.text('remove');
+    }
+
+    let rate =  $('.form-row#'+counter).find('.field-rate').children().val();
+    let quantity =  $('.form-row#'+counter).find('.field-quantity').children().val();
+    let total = parseInt(rate) * parseInt(quantity);
+
+    if (!isNaN(total)){
+      $('.form-row#'+counter).find('.field-amount').text(total);
+    }
+
+   // Delete order form
+    $('a#id_form-'+counter+'-delete').on('click', function(){
+      let totalForm = Number( $('#id_form-TOTAL_FORMS').val() );
+      let newTotalForm = $('#id_form-TOTAL_FORMS').val(totalForm-1) ;
+      if ( $(this).attr('id') != 'id_form-0-delete' ) {
+        let removeForm = $(this).parent().parent();
+        removeForm.remove();
+      }
+     });
+
+    amountComputation();
+
+    // Sub-t0tal computation
+     $('.field-amount').each(function(counter){
+       arr[counter] = Number( $(this).text() )
+      });
+     let subTotal = 0
+     for(let counter=0; counter<totalForm; counter++){
+       subTotal += arr[counter];
+     }
+     $('.sub-total').text(subTotal)
+  }
+
+  // Add order form
+  $('a.add-order').on('click', function(){
+    let totalForm = Number( $('#id_form-TOTAL_FORMS').val() );
+    let newTotalForm = $('#id_form-TOTAL_FORMS').val(totalForm+1) ;
+    totalFormCounter = newTotalForm
+
+    for(let counter=totalForm; counter < newTotalForm.val(); counter++){
+      let lastForm = $('.row-item').find('.form-row:last');
+      let newForm = lastForm.clone().attr('id', totalForm);
+      let prevNo = totalForm-1
+
+      newForm.find('input[name="form-'+prevNo+'-description"]')
+             .attr({name: 'form-'+totalForm+'-description', 
+                    id:'id_form-'+totalForm+'-description',
+              });
+
+      newForm.find('input[name="form-'+prevNo+'-quantity"]')
+             .attr({name: 'form-'+totalForm+'-quantity', 
+                    id:'id_form-'+totalForm+'-quantity',
+              });
+
+      newForm.find('input[name="form-'+prevNo+'-rate"]')
+             .attr({name: 'form-'+totalForm+'-rate', 
+                    id:'id_form-'+totalForm+'-rate',
+              });
+
+      newForm.find('[name="form-'+prevNo+'-amount"]')
+             .attr({name: 'form-'+totalForm+'-amount', 
+                    id:'id_form-'+totalForm+'-amount',
+              });
+
+      newForm.find('a[id="id_form-'+prevNo+'-delete"]')
+             .attr({id:'id_form-'+totalForm+'-delete',})
+             .text('remove');
+
+      newForm.find('input').val('');
+      newForm.find('div.field-amount').text('');
+      newForm.insertAfter($('.form-row:last'));
+
+      // Delete order form
+      $('a#id_form-'+totalForm+'-delete').on('click', function(){
+        let totalForm = Number( $('#id_form-TOTAL_FORMS').val() );
+        let newTotalForm = $('#id_form-TOTAL_FORMS').val(totalForm-1) ;
+        if ( $(this).attr('id') != 'id_form-0-delete' ) {
+          let removeForm = $(this).parent().parent();
+          removeForm.remove();
+          let maxHitTotalForm = Number(totalFormCounter.val() )+1;
+          $('.form-row').each(function (counter) {
+            $(this).attr('id', counter) ;
+          });
+        }
+       // Sub-t0tal computation
+       $('.field-amount').each(function(counter){
+         arr[counter] = Number( $(this).text() )
+        });
+       let subTotal = 0
+       for(let counter=0; counter<totalForm; counter++){
+         subTotal += arr[counter];
+       }
+       $('.sub-total').text(subTotal)
+       });
+
+      amountComputation();
+
+      // Sub-t0tal computation
+       $('.field-amount').each(function(counter){
+         arr[counter] = Number( $(this).text() )
+        });
+       let subTotal = 0
+       for(let counter=0; counter<totalForm; counter++){
+         subTotal += arr[counter];
+       }
+       $('.sub-total').text(subTotal)
+
+    }
+  });
+};
+

assets/js/invoice.js

@@ -0,0 +1,93 @@
+'use strict';
+$(function() {
+
+    // Display invoice form
+    $("a.create-invoice").on('click', function(e) {
+      e.preventDefault();
+      $("div.invoice-box").empty();
+      $("div.invoice-box-form").show();
+    });
+
+    // Ajax view invoice
+    $("div.invoice-data").on('click', function(e) {
+      e.preventDefault();
+      let id = $(this).attr('id').toString();
+
+      $.ajax({
+       method: 'GET',
+       url: "/invoice/ajax/view/"+id+"",
+       context: $(this),
+      })
+      .done(function(response){
+        let obj = JSON.parse(response.invoice);
+
+        // Create invoice details template
+        for (let data in obj) {
+          $("div.invoice-box-form").hide()
+          $("div.invoice-box").empty()
+          $("div.invoice-box").append(
+            '<div class="col-md-12">'
+            +'<br>'
+            +'<div class="col-md-8"><label>Invoice Info</label></div>'
+            +'<div class="col-md-4">          '
+            +'<a href="#" class="btn">Edit</a>'
+            +'<a href="#">Delete</a>'
+            +'<a href="#" target="_blank">|Generate PDF|</a>'
+            +' <a href="#">Send</a>'
+            +'</div>'
+            +'<br>'
+            +'<hr>'
+            +'</div>'
+            +'<div class="col-md-12">'
+            +'<div class="col-md-3">'
+            +' <label >Invoice #:</label>'
+            +' </div>'
+            +' <div class="col-md-9">'
+            +obj[data].fields.invoice_number
+            +' </div>'
+            +' </div>'
+            +'<div class="col-md-12">'
+            +'<div class="col-md-3">'
+            +' <label >Client:</label>'
+            +' </div>'
+            +' <div class="col-md-9">'
+            +obj[data].fields.client
+            +' </div>'
+            +' </div>'
+            +'<div class="col-md-12">'
+            +'<div class="col-md-3">'
+            +' <label >Item/s :</label>'
+            +' </div>'
+            +' <div class="col-md-9">'
+            +obj[data].fields.item
+            +' </div>'
+            +' </div>'
+            +'<div class="col-md-12">'
+            +'<div class="col-md-3">'
+            +' <label >Invoice date:</label>'
+            +' </div>'
+            +' <div class="col-md-9">'
+            +obj[data].fields.invoice_date
+            +' </div>'
+            +' </div>'
+            +'<div class="col-md-12">'
+            +'<div class="col-md-3">'
+            +' <label >Due date:</label>'
+            +' </div>'
+            +' <div class="col-md-9">'
+            +obj[data].fields.due_date
+            +' </div>'
+            +' </div>'
+            +'<div class="col-md-12">'
+            +'<div class="col-md-3">'
+            +' <label >Remarks :</label>'
+            +' </div>'
+            +' <div class="col-md-9">'
+            +obj[data].fields.remarks
+            +' </div>'
+            +' </div>'
+            )
+        }
+      });
+    });
+  });

invoices/admin.py

@@ -1,5 +1,13 @@
 from django.contrib import admin
-from invoices.models import Invoice
+from invoices.models import Invoice, Item
 
-# Register your models here.
-admin.site.register(Invoice)
+
+class ItemInline(admin.TabularInline):
+    model = Item
+
+class InvoiceAdmin(admin.ModelAdmin):
+    inlines = [ItemInline]
+
+
+admin.site.register(Invoice, InvoiceAdmin)
+admin.site.register(Item)