MIFOSX-1742 : Ui changes for collection sheet

app/global-translations/locale-en.json

@@ -3311,5 +3311,7 @@
     "label.input.teller.cashiertxn.txnDate":"Date",
     "label.input.teller.cashiertxn.txnAmount": "Amount",
     "label.input.teller.cashiertxn.txnNote": "Notes/Comments",
+    "label.button.addpaymentdetail": "Add Payment Detail",
+    "label.anchor.individualcollectionsheet": "Individual Collection Sheet",
     "----------------------": "------------"
 }

app/index.html

@@ -144,6 +144,8 @@
                 <li class="divider"></li>
                 <li><a class="black" href="#/entercollectionsheet"><i class="icon-tasks icon-large"></i>&nbsp;&nbsp;{{ 'label.anchor.collectionsheet' | translate}}</a></li>
                 <li class="divider"></li>
+                <li><a class="black" href="#/individualcollectionsheet"><i class="icon-tasks icon-large"></i>&nbsp;&nbsp;{{ 'label.anchor.individualcollectionsheet' | translate}}</a></li>
+                <li class="divider"></li>
                 <li><a class="black" href="#/freqposting"><i class="icon-repeat icon-large"></i>&nbsp;&nbsp;&nbsp;{{ 'label.anchor.frequentpostings' | translate}}</a></li>
                 <li class="divider"></li>
                 <li><a class="black" href="#/journalentry"><i class="icon-plus icon-large"></i>&nbsp;&nbsp;&nbsp;&nbsp;{{ 'label.anchor.addjournalentries' | translate}}</a></li>

app/scripts/controllers/collection/CollectionSheetController.js

@@ -116,11 +116,23 @@
                 }
             };
 
+            scope.showPaymentDetailsFn = function () {
+                var paymentDetail = {};
+                scope.showPaymentDetails = true;
+                paymentDetail.paymentTypeId = "";
+                paymentDetail.accountNumber = "";
+                paymentDetail.checkNumber = "";
+                paymentDetail.routingCode = "";
+                paymentDetail.receiptNumber = "";
+                paymentDetail.bankNumber = "";
+            };
+
             scope.previewCollectionSheet = function () {
                 scope.formData = {};
                 scope.formData.dateFormat = scope.df;
                 scope.formData.locale = scope.optlang.code;
                 scope.formData.calendarId = scope.calendarId;
+                scope.showPaymentDetails = false;
                 if (scope.date.transactionDate) {
                     scope.formData.transactionDate = dateFilter(scope.date.transactionDate, scope.df);
                 }
@@ -399,6 +411,15 @@
                 }
                 scope.formData.actualDisbursementDate = this.formData.transactionDate;
                 scope.formData.clientsAttendance = scope.clientsAttendance;
+
+                if(scope.showPaymentDetails && scope.paymentDetail.paymentTypeId != ""){
+                    scope.formData.paymentTypeId = scope.paymentDetail.paymentTypeId;
+                    scope.formData.accountNumber = scope.paymentDetail.accountNumber;
+                    scope.formData.checkNumber = scope.paymentDetail.checkNumber;
+                    scope.formData.routingCode =scope.paymentDetail.routingCode;
+                    scope.formData.receiptNumber = scope.paymentDetail.receiptNumber;
+                    scope.formData.bankNumber = scope.paymentDetail.bankNumber;
+                }
                 scope.formData.bulkDisbursementTransactions = [];
                 //construct loan repayment and savings due transactions
                 scope.constructBulkLoanAndSavingsRepaymentTransactions();

app/scripts/controllers/collection/IndividualCollectionSheetController.js

@@ -0,0 +1,179 @@
+'use strict';
+/*global _ */
+/*global mifosX */
+
+(function (module) {
+    mifosX.controllers = _.extend(module, {
+        IndividualCollectionSheetController: function (scope, resourceFactory, location, routeParams, dateFilter, localStorageService, route, $timeout) {
+            scope.offices = [];
+            scope.centers = [];
+            scope.groups = [];
+            scope.clientsAttendance = [];
+            scope.calendarId = '';
+            scope.formData = {};
+            scope.centerId = '';
+            scope.groupId = '';
+            scope.date = {};
+            scope.newGroupTotal = {};
+            scope.savingsGroupsTotal = [];
+            scope.date.transactionDate = new Date();
+            var centerOrGroupResource = '';
+            resourceFactory.officeResource.getAllOffices(function (data) {
+                scope.offices = data;
+            });
+
+
+            scope.officeSelected = function (officeId) {
+                scope.officeId = officeId;
+                if (officeId) {
+                    resourceFactory.employeeResource.getAllEmployees({officeId: officeId}, function (data) {
+                        scope.loanOfficers = data;
+                    });
+                }
+            };
+
+            scope.showLoanPaymentDetails = function (parentindex, index) {
+                var client = scope.collectionsheetdata.clients[parentindex];
+                var loandetail = client.loans[index];
+                loandetail.showPaymentDetails = true;
+                loandetail.paymentTypeId = "";
+                loandetail.accountNumber = "";
+                loandetail.checkNumber = "";
+                loandetail.routingCode = "";
+                loandetail.receiptNumber = "";
+                loandetail.bankNumber = "";
+            };
+
+            scope.showSavingsPaymentDetails = function (parentindex, index) {
+                var client = scope.collectionsheetdata.clients[parentindex];
+                var savings = client.savings[index];
+                savings.showPaymentDetails = true;
+                savings.paymentTypeId = "";
+                savings.accountNumber = "";
+                savings.checkNumber = "";
+                savings.routingCode = "";
+                savings.receiptNumber = "";
+                savings.bankNumber = "";
+            };
+
+            scope.previewCollectionSheet = function () {
+                scope.formData = {};
+                scope.formData.dateFormat = scope.df;
+                scope.formData.locale = scope.optlang.code;
+                if (scope.date.transactionDate) {
+                    scope.formData.transactionDate = dateFilter(scope.date.transactionDate, scope.df);
+                }
+                scope.formData.staffId = scope.loanOfficerId;
+                scope.formData.officeId = scope.officeId;
+
+                resourceFactory.collectionSheetResource.save({command: 'generateCollectionSheet'}, scope.formData, function (data) {
+                    if (data.clients.length > 0) {
+                        scope.collectionsheetdata = data;
+                        scope.clients = data.clients;
+                    } else {
+                        scope.noData = true;
+                        $timeout(function () {
+                            scope.noData = false;
+                        }, 3000);
+                    }
+
+                });
+
+            };
+
+            if (localStorageService.getFromLocalStorage('Success') === 'true') {
+                scope.savesuccess = true;
+                localStorageService.removeFromLocalStorage('Success');
+                scope.val = true;
+                $timeout(function () {
+                    scope.val = false;
+                }, 3000);
+            }
+
+            scope.getLoanTotalDueAmount = function (loan) {
+                var principalInterestDue = loan.totalDue;
+                var chargesDue = loan.chargesDue;
+                if (isNaN(principalInterestDue)) {
+                    principalInterestDue = parseInt(0);
+                }
+                if (isNaN(chargesDue)) {
+                    chargesDue = parseInt(0);
+                }
+                return Math.ceil((Number(principalInterestDue) + Number(chargesDue)) * 100) / 100;
+            };
+
+            scope.constructBulkLoanAndSavingsRepaymentTransactions = function () {
+                scope.bulkRepaymentTransactions = [];
+                scope.bulkSavingsDueTransactions = [];
+                _.each(scope.clients, function (client) {
+                        _.each(client.savings, function (saving) {
+                            var dueAmount = saving.dueAmount;
+                            if (isNaN(dueAmount)) {
+                                dueAmount = parseInt(0);
+                            }
+                            var savingsTransaction = {
+                                savingsId: saving.savingsId,
+                                transactionAmount: dueAmount
+                            };
+                            if(saving.showPaymentDetails && saving.paymentTypeId != ""){
+                                savingsTransaction.paymentTypeId = saving.paymentTypeId;
+                                savingsTransaction.accountNumber = saving.accountNumber;
+                                savingsTransaction.checkNumber = saving.checkNumber;
+                                savingsTransaction.routingCode =saving.routingCode;
+                                savingsTransaction.receiptNumber = saving.receiptNumber;
+                                savingsTransaction.bankNumber = saving.bankNumber;
+                            }
+                            scope.bulkSavingsDueTransactions.push(savingsTransaction);
+                        });
+
+                        _.each(client.loans, function (loan) {
+                            var totalDue = scope.getLoanTotalDueAmount(loan);
+                            var loanTransaction = {
+                                loanId: loan.loanId,
+                                transactionAmount: totalDue
+                            };
+                            if(loan.showPaymentDetails && loan.paymentTypeId != ""){
+                                loanTransaction.paymentTypeId = loan.paymentTypeId;
+                                loanTransaction.accountNumber = loan.accountNumber;
+                                loanTransaction.checkNumber = loan.checkNumber;
+                                loanTransaction.routingCode =loan.routingCode;
+                                loanTransaction.receiptNumber = loan.receiptNumber;
+                                loanTransaction.bankNumber = loan.bankNumber;
+                            }
+                            scope.bulkRepaymentTransactions.push(loanTransaction);
+                        });
+                    }
+                );
+            };
+
+            scope.submit = function () {
+                var data = {};
+                data.dateFormat = scope.df;
+                data.locale = scope.optlang.code;
+
+                if (scope.date.transactionDate) {
+                    data.transactionDate = dateFilter(scope.date.transactionDate, scope.df);
+                }
+                data.actualDisbursementDate = this.formData.transactionDate;
+                data.bulkDisbursementTransactions = [];
+                //construct loan repayment and savings due transactions
+                scope.constructBulkLoanAndSavingsRepaymentTransactions();
+                data.bulkRepaymentTransactions = scope.bulkRepaymentTransactions;
+                data.bulkSavingsDueTransactions = scope.bulkSavingsDueTransactions;
+                resourceFactory.collectionSheetResource.save({command: 'saveCollectionSheet'}, data, function (data) {
+                    localStorageService.addToLocalStorage('Success', true);
+                    route.reload();
+                });
+            };
+
+        }
+    })
+    ;
+    mifosX.ng.application.controller('IndividualCollectionSheetController', ['$scope', 'ResourceFactory', '$location', '$routeParams', 'dateFilter', 'localStorageService',
+        '$route', '$timeout', mifosX.controllers.IndividualCollectionSheetController]).run(function ($log) {
+        $log.info("IndividualCollectionSheetController initialized");
+    });
+}
+(mifosX.controllers || {})
+    )
+;

app/scripts/mifosXComponents.js

@@ -21,6 +21,7 @@ define(['Q', 'underscore', 'mifosX'], function (Q) {
             'main/NavigationController',
             'collection/ProductiveCollectionSheetController',
             'collection/CollectionSheetController',
+            'collection/IndividualCollectionSheetController',
             'loanAccount/ViewLoanDetailsController',
             'loanAccount/NewLoanAccAppController',
             'loanAccount/LoanAccountActionsController',

app/scripts/routes.js

@@ -598,6 +598,9 @@
             .when('/entercollectionsheet', {
                 templateUrl: 'views/collection/collectionsheet.html'
             })
+            .when('/individualcollectionsheet', {
+                templateUrl: 'views/collection/individualcollectionsheet.html'
+            })
             .when('/assignstaff/:id/:entityType', {
                 templateUrl: 'views/groups/assignstaff.html'
             })

app/scripts/services/ResourceFactoryProvider.js

@@ -447,6 +447,8 @@
                     }),
                     cashierTxnTemplateResource: defineResource(apiVer + "/tellers/:tellerId/cashiers/:cashierId/transactions/template", {tellerId: "@tellerId", cashierId: "@cashierId"}, {
                         get: {method: 'GET', params: {tellerId: "@tellerId", cashierId: "@cashierId"}, isArray: false}
+                    }),
+                    collectionSheetResource: defineResource(apiVer + "/collectionsheet", {}, {
                     })
                 };
             }];

app/views/collection/collectionsheet.html

@@ -266,11 +266,48 @@
 	        {{loanDueTotalCollection.currencySymbol}}
 	    </div>
 	</div>
+    <div ng-show="showPaymentDetails"
+         style="float:left; max-width:700px; min-width:600px; overflow-x:auto!important; white-space:nowrap;">
+        <table class="table table-bordered">
+            <thead>
+            <tr>
+                <td>{{ 'label.input.paymenttype' | translate}}</td>
+                <td>{{ 'label.input.accnum' | translate}}</td>
+                <td>{{ 'label.input.checknumber' | translate}}</td>
+                <td>{{ 'label.input.routingcode' | translate}}</td>
+                <td>{{ 'label.input.receiptnumber' | translate}}</td>
+                <td>{{ 'label.input.banknumber' | translate}}</td>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td><select ng-model="paymentDetail.paymentTypeId"
+                            class="form-control"
+                            ng-options="paymentType.id as paymentType.name for paymentType in collectionsheetdata.paymentTypeOptions"
+                            value="{{paymentType.id}}"></select></td>
+                <td><input type="text" class="form-control"
+                           ng-model="paymentDetail.accountNumber"></td>
+                <td><input class="form-control" type="text"
+                           ng-model="paymentDetail.checkNumber"></td>
+                <td><input class="form-control" type="text"
+                           ng-model="paymentDetail.routingCode"></td>
+                <td><input class="form-control" type="text"
+                           ng-model="paymentDetail.receiptNumber"></td>
+                <td><input class="form-control" type="text"
+                           ng-model="paymentDetail.bankNumber"></td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
 	<div class="col-sm-12 col-md-12 paddedtop10">
 	    <div class="col-md-offset-3 paddedtop">
 	        <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{'label.button.cancel' |
 	            translate}}
 	        </button>
+            <button class="btn btn-default" ng-show="collectionsheetdata && !showPaymentDetails"
+                    data-ng-click="showPaymentDetailsFn()"
+                    >{{'label.button.addpaymentdetail'| translate}}
+            </button>
 	        <button id="save" type="submit" class="btn btn-primary" ng-show="collectionsheetdata"
 	                ng-click="submit()">{{'label.button.save' | translate}}
 	        </button>

app/views/collection/individualcollectionsheet.html

@@ -0,0 +1,234 @@
+<div class="col-md-12">
+<ul class="breadcrumb">
+    <li class="active">{{'label.button.collectionsheet' | translate}}</li>
+</ul>
+<form name="collectionsheetform" novalidate class="form-horizontal well"
+      ng-controller="IndividualCollectionSheetController">
+<api-validate></api-validate>
+<h2><strong ng-show="noData" style="padding-top: 400px !important;">{{'label.norepaymentsanddisbursalareavailable'
+    |
+    translate}}</strong></h2>
+
+<h2><strong ng-show="val" class="display-save-message">{{'label.savecollectionsheetsuccessfully' |
+    translate}}</strong></h2>
+<fieldset ng-hide="val || noData">
+<div>
+    <div class="form-group">
+        <label class="control-label col-sm-2">{{ 'label.input.branchoffice' | translate }}<span
+                class="required">*</span></label>
+
+        <div class="col-sm-3">
+            <select chosen="offices" id="officeId" ng-model="officeId" name="office"
+                    class="chzn-select-deselect form-control"
+                    ng-options="office.id as office.name for office in offices" value="{{office.id}}"
+                    ng-change="officeSelected(officeId)" required>
+                <option value="">{{'label.selectoffice' | translate}}</option>
+            </select>
+        </div>
+        <div class="col-sm-3">
+            <form-validate valattributeform="collectionsheetform" valattribute="office"/>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <label class="control-label col-sm-2">{{ 'label.input.meetingcalendar' | translate }}<span
+                class="required">*</span></label>
+
+        <div class="col-sm-3">
+            <input type="text" id="transactionDate" name="transactiondate" datepicker-pop="dd MMMM yyyy"
+                   ng-model="date.transactionDate" is-open="opened" class="form-control"/>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <label class="control-label col-sm-2">{{ 'label.input.staff' | translate }}</label>
+
+        <div class="col-sm-3">
+            <select chosen="loanOfficers" id="loanOfficerId" ng-model="loanOfficerId"
+                    ng-options="loanOfficer.id as loanOfficer.displayName for loanOfficer in loanOfficers"
+                    value="{{loanOfficer.id}}" ng-change="loanOfficerSelected(loanOfficerId)"
+                    class="form-control"
+                    required>
+                <option value="">{{'label.selectloanofficer' | translate}}</option>
+            </select>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-sm-2">
+            <button class="btn btn-primary" ng-click="previewCollectionSheet()">
+                {{'label.button.collectionsheet' |
+                translate}}
+                <i class="icon-circle-arrow-right"></i></button>
+        </div>
+    </div>
+</div>
+<div class="paddedbottom"></div>
+<div class="span">
+    <div class="col-sm-9 col-md-9">
+        <div ng-show="collectionsheetdata"
+             style="float:left; max-width:800px; min-width:600px; overflow-x:auto!important; white-space:nowrap;">
+            <table class="table table-bordered">
+                <thead>
+                <tr>
+                    <th class="highlightcol" scope="colgroup"
+                        colspan="5">{{'label.heading.duecollections' |
+                        translate}}
+                    </th>
+
+                </tr>
+                <tr>
+                    <th>{{'label.heading.loanaccountnum' | translate}}</th>
+                    <th>{{'label.heading.productname' | translate}}</th>
+                    <th>{{'label.heading.clientname' | translate}}</th>
+                    <th>{{'label.heading.totaldue' | translate}}</th>
+                    <th>{{'label.heading.charges' | translate}}</th>
+                    <th>{{'label.heading.actions' | translate}}</th>
+                </tr>
+                </thead>
+                <tbody ng-repeat="client in collectionsheetdata.clients">
+                <tr ng-repeat-start="loan in client.loans">
+                    <td>{{loan.accountId}}</td>
+                    <td>{{loan.productShortName}}({{loan.productId}})</td>
+                    <td>{{client.clientName}}({{client.clientId}})</td>
+                    <td>
+                        <input id="loantotal" type="text" class="input-sm form-control"
+                               ng-model="loan.totalDue">
+                    </td>
+                    <td>
+                        <input type="text" class="input-sm form-control" ng-model="loan.chargesDue">
+                    </td>
+                    <td>
+                        <button class="btn btn-default" ng-show="!loan.showPaymentDetails"
+                                data-ng-click="showLoanPaymentDetails($parent.$index,$index)"
+                                >{{'label.button.addpaymentdetail'| translate}}
+                        </button>
+                    </td>
+                </tr>
+                <tr ng-show="loan.showPaymentDetails" ng-repeat-end>
+                    <td colspan="6">
+                        <table class="table table-bordered">
+                            <thead>
+                            <tr>
+                                <td>{{ 'label.input.paymenttype' | translate}}</td>
+                                <td>{{ 'label.input.accnum' | translate}}</td>
+                                <td>{{ 'label.input.checknumber' | translate}}</td>
+                                <td>{{ 'label.input.routingcode' | translate}}</td>
+                                <td>{{ 'label.input.receiptnumber' | translate}}</td>
+                                <td>{{ 'label.input.banknumber' | translate}}</td>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr>
+                                <td><select ng-model="loan.paymentTypeId"
+                                            class="form-control"
+                                            ng-options="paymentType.id as paymentType.name for paymentType in collectionsheetdata.paymentTypeOptions"
+                                            value="{{paymentType.id}}"></select></td>
+                                <td><input type="text" class="form-control"
+                                           ng-model="loan.accountNumber"></td>
+                                <td><input class="form-control" type="text"
+                                           ng-model="loan.checkNumber"></td>
+                                <td><input class="form-control" type="text"
+                                           ng-model="loan.routingCode"></td>
+                                <td><input class="form-control" type="text"
+                                           ng-model="loan.receiptNumber"></td>
+                                <td><input class="form-control" type="text"
+                                           ng-model="loan.bankNumber"></td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <table class="table table-bordered">
+                <thead>
+                <tr>
+                    <th class="highlightcol" scope="colgroup"
+                        colspan="5">{{'label.heading.due.savings.collections' |
+                        translate}}
+                    </th>
+
+                </tr>
+                <tr>
+                    <th>{{'label.heading.savingsaccountno' | translate}}</th>
+                    <th>{{'label.heading.productname' | translate}}</th>
+                    <th>{{'label.heading.clientname' | translate}}</th>
+                    <th>{{'label.heading.totaldue' | translate}}</th>
+                    <th>{{'label.heading.actions' | translate}}</th>
+                </tr>
+                </thead>
+                <tbody ng-repeat="client in collectionsheetdata.clients">
+                <tr ng-repeat-start="saving in client.savings">
+                    <td>{{saving.accountId}}</td>
+                    <td>{{saving.productName}}({{saving.productId}})</td>
+                    <td>{{client.clientName}}({{client.clientId}})</td>
+                    <td>
+                        <input id="total" type="text" class="input-sm form-control"
+                               ng-model="saving.dueAmount">
+                    </td>
+                    <td>
+                        <button class="btn btn-default" ng-show="!saving.showPaymentDetails"
+                                data-ng-click="showSavingsPaymentDetails($parent.$index,$index)"
+                                >{{'label.button.addpaymentdetail'| translate}}
+                        </button>
+                    </td>
+                </tr>
+                <tr ng-show="saving.showPaymentDetails" ng-repeat-end>
+                    <td colspan="6">
+                        <table class="table table-bordered">
+                            <thead>
+                            <tr>
+                                <td>{{ 'label.input.paymenttype' | translate}}</td>
+                                <td>{{ 'label.input.accnum' | translate}}</td>
+                                <td>{{ 'label.input.checknumber' | translate}}</td>
+                                <td>{{ 'label.input.routingcode' | translate}}</td>
+                                <td>{{ 'label.input.receiptnumber' | translate}}</td>
+                                <td>{{ 'label.input.banknumber' | translate}}</td>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr>
+                                <td><select ng-model="saving.paymentTypeId"
+                                            class="form-control"
+                                            ng-options="paymentType.id as paymentType.name for paymentType in collectionsheetdata.paymentTypeOptions"
+                                            value="{{paymentType.id}}"></select></td>
+                                <td><input type="text" class="form-control"
+                                           ng-model="saving.accountNumber"></td>
+                                <td><input class="form-control" type="text"
+                                           ng-model="saving.checkNumber"></td>
+                                <td><input class="form-control" type="text"
+                                           ng-model="saving.routingCode"></td>
+                                <td><input class="form-control" type="text"
+                                           ng-model="saving.receiptNumber"></td>
+                                <td><input class="form-control" type="text"
+                                           ng-model="saving.bankNumber"></td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+        </div>
+    </div>
+    <br>
+    <br>
+</div>
+
+<div class="col-sm-12 col-md-12 paddedtop10">
+    <div class="col-md-offset-3 paddedtop">
+        <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{'label.button.cancel'
+            |
+            translate}}
+        </button>
+        <button id="save" type="submit" class="btn btn-primary" ng-show="collectionsheetdata"
+                ng-click="submit()">{{'label.button.save' | translate}}
+        </button>
+    </div>
+</div>
+</fieldset>
+</form>
+</div>