Journal migrated to AngularJS with ID in Autocomplete (ledger), saving not yet implemented

brewman/brewman/__init__.py

@@ -118,6 +118,7 @@ def main(global_config, **settings):
 
     config.add_route('services_employee_list', '/Services/Employees')
 
+    config.add_route('services_ledger_id_list', '/Services/LedgersWithID')
     config.add_route('services_ledger_list', '/Services/Ledgers')
     config.add_route('services_ledger_list_by_type', '/Services/LedgersByType')
     config.add_route('services_ledger_add_journal', '/Services/AddJournal')

brewman/brewman/static/scripts/autocomplete.js

@@ -1,4 +1,74 @@
-function AutoComplete(matchFieldName, lookupURL) {
+var myApp = angular.module('myApp', ['journalFilters']);
+myApp.directive('autocomplete', function () {
+    var directiveDefinitionObject = {
+        restrict:'E',
+        replace:true,
+        transclude:true,
+        template:'<input type="text" />',
+        link:function (scope, element, attrs) {
+            element.autocomplete({
+                source:function (request, response) {
+                    $.ajax({
+                        type:"POST",
+                        url:attrs.url,
+                        contentType:"application/json; charset=utf-8",
+                        dataType:"json",
+                        data:JSON.stringify({prefixText:request.term, count:20}),
+                        success:function (data) {
+                            response(data);
+                        },
+                        error:function (XMLHttpRequest, textStatus, errorThrown) {
+                            alert("Due to unexpected errors we were unable to load data\n\r" + textStatus);
+                        }
+                    });
+                },
+                minLength:1,
+                autoFocus:true,
+                select:function (event, ui) {
+                    scope[attrs.selname] = ui.item.label;
+                    scope[attrs.selid] = ui.item.id;
+                    scope.$apply();
+                }
+            });
+        }
+    };
+    return directiveDefinitionObject;
+});
+
+
+myApp.directive('datepicker', function () {
+    var directiveDefinitionObject = {
+        restrict:'E',
+        replace:true,
+        transclude:true,
+        template:'<input type="text" />',
+        link:function (scope, element, attrs) {
+            element.datepicker({
+                dateFormat:'dd-M-yy',
+                onSelect:function (dateText, inst) {
+                    scope[attrs.model][attrs.prop] = dateText;
+                    scope.$apply();
+                }
+            });
+        }
+    };
+    return directiveDefinitionObject;
+});
+
+
+angular.module('journalFilters', []).filter('debit', function() {
+    return function(input) {
+        if (input == -1) {
+            return 'Cr';
+        } else if (input == 1) {
+            return 'Dr';
+        } else {
+            return '';
+        };
+    };
+});
+
+function AutoComplete(matchFieldName, lookupURL) {
     $(matchFieldName).autocomplete({
         source:function (request, response) {
             $.ajax({

brewman/brewman/static/scripts/journal.js

@@ -1,147 +1,15 @@
-var Journal = Backbone.Model.extend({
-    url:add_journal_url
-});
-
-var Journals = Backbone.Collection.extend({
-    model:Journal
-});
-
-var GetFromInput = Backbone.View.extend({
-    events:{
-        'click #btnAdd':'addJournal',
-        'keypress #txtAmount':'addOnEnter'
-    },
-
-    initialize:function () {
-        this.collection.on('add', this.clearInput, this);
-        this.collection.on('change', this.clearInput, this);
-    },
-
-    addJournal:function (e) {
-        e.preventDefault();
-        var journal = new Journal();
-        journal.save({
-                debit:this.$('#ddlDebitCredit').val(),
-                ledgerString:this.$('#txtLedger').val(),
-                amount:this.$('#txtAmount').val() },
-            {
-                wait:true,
-                success:$.proxy(function (model, response) {
-                    var newModel = model.toJSON();
-                    var found = null;
-                    this.collection.each(function (item) {
-                        var itemJson = item.toJSON();
-                        if (itemJson.Ledger.LedgerID == newModel.Ledger.LedgerID) {
-                            found = item;
+function JournalCtrl($scope) {
+//    $scope.voucher = {
+//        code:'(Auto)',
+//        Journals:[],
+//        date:''
+//    };
+    $scope.debit = 1;
+    $scope.addJournal = function () {
+        this.voucher.Journals.push({Debit:$scope.debit, Amount:$scope.amount, Ledger:{LedgerID:$scope.id, Name:$scope.name}});
+    };
+    $scope.removeJournal = function (journal) {
+        var index = this.voucher.Journals.indexOf(journal);
+        this.voucher.Journals.splice(index, 1);
+    };
 }
-                    });
-                    if (found == null) {
-                        this.collection.add(model);
-                    } else {
-                        var foundJson = found.toJSON();
-                        var amount = (foundJson.Debit * foundJson.Amount) + (newModel.Debit * newModel.Amount);
-                        if (amount < 0) {
-                            found.set({Debit:-1, Amount:amount * -1});
-                        } else {
-                            found.set({Debit:1, Amount:amount});
-                        }
-                    }
-                }, this)});
-    },
-    addOnEnter:function (e) {
-        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
-            e.preventDefault();
-            this.addJournal(e);
-        }
-    },
-
-    clearInput:function () {
-        this.$('#txtLedger').val("");
-        this.$('#txtLedger').focus();
-    }
-});
-
-var ShowTable = Backbone.View.extend({
-    events:{
-        'click .Journal button':'removeJournal'
-    },
-    initialize:function () {
-        this.collection.on('add', this.addRow, this);
-        this.collection.on('remove', this.removeRow, this);
-        this.collection.on('change', this.changeRow, this);
-        this.collection.on('reset', this.resetRows, this);
-    },
-
-    removeJournal:function (ev) {
-        ev.preventDefault();
-        var cid = $(ev.target).closest("tr").attr("id");
-        this.collection.remove(this.collection.getByCid(cid))
-    },
-
-    removeRow:function (options) {
-        $('.Journal#' + options.cid).remove();
-    },
-    addRow:function (status) {
-        var row = status.toJSON();
-        row.cid = status.cid;
-        row.isDebit = row.Debit == 1;
-        var rowString = rowTemplate.render(row);
-        $(this.el).append(rowString);
-    },
-    changeRow:function (status) {
-        var row = status.toJSON();
-        row.cid = status.cid;
-        row.isDebit = row.Debit == 1;
-        var rowString = rowTemplate.render(row);
-        $('.Journal#' + status.cid).replaceWith(rowString);
-    },
-    resetRows:function (status) {
-        $(this.el).empty();
-        var rows;
-        this.collection.each(function (item) {
-            var row = item.toJSON();
-            row.cid = status.cid;
-            row.isDebit = row.Debit == 1;
-            var rowString = rowTemplate.render(row);
-            rows += rowString;
-        });
-        $(this.el).append(rows);
-    }
-});
-
-var SyncJournals = Backbone.View.extend({
-    initialize:function () {
-        this.collection.on('add', this.updateVoucher, this);
-        this.collection.on('remove', this.updateVoucher, this);
-        this.collection.on('change', this.updateVoucher, this);
-        this.model.on('destroy', this.updateJournals, this);
-    },
-    updateVoucher:function (status) {
-        this.model.set('Journals', this.collection.toJSON());
-    },
-    updateJournals:function (status) {
-        this.collection.reset();
-    }
-});
-
-var ShowFooter = Backbone.View.extend({
-    initialize:function () {
-        this.collection.on('add', this.footerShow, this);
-        this.collection.on('remove', this.footerShow, this);
-        this.collection.on('change', this.footerShow, this);
-    },
-    footerShow:function (status) {
-        var totalAmount = 0;
-        this.collection.each(function (item) {
-            $this = item.toJSON();
-            totalAmount += $this.Debit * $this.Amount;
-        });
-        var rowString = '<tr ><td class="JournalID hide"></td><td class="LedgerID hide"></td><td class="Debit">' + 0 +
-            '</td><td class="Name">' + 'Total' +
-            '</td><td class="Amount">' + 0 +
-            '</td><td class="Delete"></td></tr>';
-        this.$('#txtAmount').val(Math.abs(totalAmount));
-        var $table = this.$('#tfootMain')
-        $table.html(rowString);
-    }
-});

brewman/brewman/templates/base.mako

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" ng-app="myApp">
   <head>
     <meta charset="utf-8">
     <title>${title}</title>
@@ -22,9 +22,10 @@
     ${h.JsLink(request, 'jquery-1.7.1.min.js')}
     ${h.JsLink(request, 'jquery-ui-1.8.17.custom.min.js')}
     ${h.JsLink(request, 'bootstrap.js')}
-    ${h.JsLink(request, 'hogan-2.0.0.js')}
-    ${h.JsLink(request, 'underscore 1.3.3.js')}
-    ${h.JsLink(request, 'backbone 0.9.2.js')}
+##    ${h.JsLink(request, 'hogan-2.0.0.js')}
+##    ${h.JsLink(request, 'underscore 1.3.3.js')}
+##    ${h.JsLink(request, 'backbone 0.9.2.js')}
+    ${h.JsLink(request, 'angular-1.0.1.js')}
 
       <script type="text/javascript">
         roles_url  = '${request.route_url('is_user_in_roles')}';

brewman/brewman/templates/transaction/journal.mako

@@ -5,80 +5,61 @@
         const add_journal_url = '${request.route_url('services_ledger_add_journal')}';
         const post_url = '${request.route_url('post_voucher', id = id)}'
         const delete_url = '${request.route_url('delete_voucher', id = id)}'
-        var rowTemplate = Hogan.compile('<tr class="Journal" id="{{cid}}"><td class="JournalID hide">{{JournalID}}</td>' +
-                '<td class="LedgerID hide">{{Ledger.LedgerID}}</td>' +
-                '<td class="Debit">{{#isDebit}}Dr{{/isDebit}}{{^isDebit}}Cr{{/isDebit}}</td>' +
-                '<td class="Name">{{Ledger.Name}}</td><td data-column="Amount" class="Amount Editable">{{Amount}}</td>' +
-                '<td class="Delete"><button class="subtract">Delete</button></td></tr>');
     </script>
     ${h.ScriptLink(request, 'journal.js')}
-    ${h.ScriptLink(request, 'voucher.js')}
+    <script type="text/javascript">
+        myApp.run(['$rootScope', function ($rootScope) {
+            $rootScope.voucher = ${json_voucher};
+        }]);
+    </script>
     <script type="text/javascript">
         $(document).ready(function () {
-            AutoComplete('#txtLedger', '${request.route_url('services_ledger_list')}');
-            $('#txtDate').datepicker({ dateFormat:'dd-M-yy' });
-
-            var voucher = new Voucher();
-            var journals = new Journals();
-            window.voucher = voucher;
-            window.journals = journals;
-            new GetFromInput({ el:$('#add'), collection:journals });
-            new ShowTable({ el:$('#tbodyMain'), collection:journals });
-            new ShowFooter({ el:'body', collection:journals });
-            new ShowAmountBox({ el:$('#tbodyMain'), collection:journals });
-
-            new VoucherView({ el:'body', model:voucher });
-            new VoucherOps({ el:'body', model:voucher });
-            new SyncJournals({el:'', model:voucher, collection:journals});
-
-            window.perms = new Perms();
-            new RolesView({el:$(".form-actions"), perms:perms, voucher:voucher});
-            voucher.set(${json_voucher});
-            journals.add(voucher.get('Journals'));
-
-            backboneRoles(['EditPosted', 'PostTransactions', 'Journal Delete', 'Journal Create', 'Journal Update']);
-
+//            backboneRoles(['EditPosted', 'PostTransactions', 'Journal Delete', 'Journal Create', 'Journal Update']);
             $('#txtLedger').focus();
         });
     </script>
 </%block>
 <%block name="content">
-    <form method="post" autocomplete="off" class="form-horizontal">
+    <form method="post" autocomplete="off" class="form-horizontal" ng-controller="JournalCtrl">
     ${h.CsrfToken(request.session)}
-    ${h.HiddenInput('VoucherID')}
-    ${h.HiddenInput('Posted')}
         <div class="control-group">
-        ${h.Label('Code', 'txtCode', 'control-label')}
+            <label for="txtCode" class="control-label">Code</label>
+
             <div class="controls">
-            ${h.TextInput('txtCode',  css_class = 'non-search-box', placeholder='(Auto)', disabled='disabled')}
+                <input type="text" id="txtCode" class="non-search-box" disabled="disabled" ng-model="voucher.Code"/>
             </div>
         </div>
         <div class="control-group">
-        ${h.Label('Date', 'txtDate', 'control-label')}
+            <label for="txtDate" class="control-label">Date</label>
+
             <div class="controls">
-            ${h.TextInput('txtDate', css_class = 'non-search-box', autocomplete='off')}
+                <datepicker id="txtDate" model="voucher" prop="Date" ng-model="voucher.Date"></datepicker>
             </div>
         </div>
         <div class=" control-group" id="add">
-        ${h.Label('Add', 'ddlDebitCredit', 'control-label')}
+            <label for="ddlDebitCredit" class="control-label">Add</label>
+
             <div class="controls">
-            ${h.SelectInput('ddlDebitCredit', list = [dict(name = 'Dr', id = 1), dict(name = 'Cr', id = -1)], displayField = 'name', valueField = 'id')}
-            ${h.TextInput('txtLedger', css_class = 'search-box', autocomplete='off', placeholder='Ledger')}
+                <select id="ddlDebitCredit" ng-model="debit">
+                    <option value="1">Dr</option>
+                    <option value="-1">Cr</option>
+                </select>
+                <autocomplete id="txtLedger" url="${request.route_url('services_ledger_id_list')}" selname="name" selid="id"></autocomplete>
                 <div class=" input-prepend">
                     <span class="add-on">₹</span>
-                ${h.TextInput('txtAmount', css_class = 'span2', autocomplete='off', placeholder='Ledger')}
+                    <input type="text" id="txtAmount" class="span2" autocomplete="off"
+                           placeholder="Amount" ng-model="amount"/>
                 </div>
-            ${h.SubmitButton('btnAdd', 'Add', 'btn btn-success icon-plus-sign')}
+                <button ng:click="addJournal()">Add</button>
             </div>
         </div>
         <div class=" control-group">
-        ${h.Label('', 'gvGrid', 'control-label')}
+            <label for="gvGrid" class="control-label"></label>
+
             <div class="controls">
                 <table id="gvGrid" class="clean-table">
                     <thead>
                     <tr>
-                        <th class="JournalID hide">JournalID</th>
-                        <th class="LedgerID hide">LedgerID</th>
                         <th class="Debit">Debit</th>
                         <th class="Name">Name</th>
                         <th class="Amount">Amount</th>
@@ -86,6 +67,14 @@
                     </tr>
                     </thead>
                     <tbody id="tbodyMain">
+                    <tr class="Journal" ng-repeat="journal in voucher.Journals">
+                        <td class="Debit">{{journal.Debit | debit}}</td>
+                        <td class="Name">{{journal.Ledger.Name}}</td>
+                        <td data-column="Amount" class="Amount Editable">{{journal.Amount}}</td>
+                        <td class="Delete">
+                            <button ng-click="removeJournal(journal)">Delete</button>
+                        </td>
+                    </tr>
                     </tbody>
                     <tfoot id="tfootMain">
                     </tfoot>
@@ -93,9 +82,11 @@
             </div>
         </div>
         <div class="control-group">
-        ${h.Label('Narration', 'txtNarration', 'control-label')}
+            <label for="txtNarration" class="control-label">Narration</label>
+
             <div class="controls">
-                <textarea rows="2" cols="20" id="txtNarration" class="non-search-box"></textarea>
+                <textarea rows="2" cols="20" id="txtNarration"
+                          class="non-search-box">{{voucher.Narration}}</textarea>
             </div>
         </div>
         <div class="form-actions">

brewman/brewman/views/services/ledger.py

@@ -9,6 +9,16 @@ def ledger_list(request):
         list.append(item.name)
     return list
 
+
+@view_config(request_method='POST', route_name='services_ledger_id_list', renderer='json', xhr=True)
+def ledger_id_list(request):
+    filter = request.json_body['prefixText']
+    list = []
+    for item in LedgerBase.list(filter):
+        list.append({'id': str(item.id), 'label': item.name})
+    return list
+
+
 @view_config(request_method='POST', route_name='services_ledger_list_by_type', renderer='json', xhr=True)
 def ledger_list_by_type_request(request):
     type = request.json_body['type']
@@ -22,6 +32,7 @@ def ledger_list_by_type_request(request):
             list.append({'id': str(item.id), 'name': item.name})
     return list
 
+
 def ledger_list_by_type(type):
     list = []
     if type is None:
@@ -32,6 +43,7 @@ def ledger_list_by_type(type):
             list.append({'id': str(item.id), 'name': item.name})
     return list
 
+
 def ledger_list_by_type_with_default(type, default):
     list = []
     if type is None:
@@ -48,10 +60,12 @@ def ledger_list_by_type_with_default(type, default):
                 list.append({'id': str(item.id), 'name': item.name})
     return list
 
+
 @view_config(request_method='POST', route_name='services_ledger_cash_in_hand', renderer='json', xhr=True)
 def ledger_cash_in_hand(request):
     return {"ed2341bb-80b8-9649-90db-f9aaca183bb3"}
 
+
 @view_config(request_method='POST', route_name='services_employee_list', renderer='json', xhr=True)
 def employee_list(request):
     filter = request.json_body['prefixText']
@@ -69,4 +83,5 @@ def services_ledger_add_journal(request):
         return None
     #    row_builder = getattr()
     #    brewman.views.transactions.journal
-    return {'JournalID': '00000000-0000-0000-0000-000000000000', 'Debit': request.json_body['debit'], 'Amount': request.json_body['amount'], 'Ledger': {'LedgerID': str(ledger.id), 'Name': ledger.name}}
+    return {'JournalID': '00000000-0000-0000-0000-000000000000', 'Debit': request.json_body['debit'],
+            'Amount': request.json_body['amount'], 'Ledger': {'LedgerID': str(ledger.id), 'Name': ledger.name}}

brewman/brewman/views/transactions/journal.py

@@ -26,7 +26,8 @@ def journal_get(request):
     id = request.matchdict.get('id', None)
     if id is None:
         json_voucher = Literal(
-            json.dumps({'Date': session_current_date(request), 'Posted': True, 'Narration': "", 'Journals': []}))
+            json.dumps({'Code': '(Auto)', 'Date': session_current_date(request), 'Posted': True, 'Narration': "",
+                        'Journals': []}))
     else:
         voucher = Voucher.by_id(uuid.UUID(id))
         json_voucher = Literal(json.dumps(voucher_info(voucher)))