Merge #2530

2530: chore(fiscal): polish user interface r=mbayopanda a=jniles This commit polishes the user interface and updates the code to the latest ESLint checks in the client. The most significant changes are: 1. Title accounts are highlighted on the opening/closing balance grids. 2. Performance increases on the UI-grids via template optimisations and fastWatch. 3. The "Close Fiscal Year" button is hidden if a Fiscal Year is closed. 4. Removes aggregation labels from footers. Partially addresses #2490. References #715.
IMA-WorldHealth · Feb 8, 2018 · 61f8285 · 61f8285
2 parents 16ca7e7 + 83216f4
commit 61f8285
Show file tree

Hide file tree

Showing 8 changed files with 249 additions and 258 deletions.
diff --git a/client/src/modules/accounts/templates/grid.labelCell.tmpl.html b/client/src/modules/accounts/templates/grid.labelCell.tmpl.html
@@ -1,5 +1,6 @@
-<div class="ui-grid-cell-contents">
-  <!-- Indent accounts -->
+<div class="ui-grid-cell-contents" ng-class="{ 'text-bold' : row.entity.isTitleAccount }">
+
+  <!-- indent accounts -->
   <span style="padding-left : {{row.entity.$$treeLevel * grid.appScope.indentTitleSpace}}px;"></span>
   <i ng-if="row.entity.locked" class="fa fa-lock"></i> {{grid.getCellValue(row, col)}}
 </div>
diff --git a/client/src/modules/fiscal/fiscal.closingBalance.js b/client/src/modules/fiscal/fiscal.closingBalance.js
@@ -2,17 +2,16 @@ angular.module('bhima.controllers')
   .controller('FiscalClosingBalanceController', FiscalClosingBalanceController);
 
 FiscalClosingBalanceController.$inject = [
-  '$state', 'AccountService', 'AccountStoreService', 'FiscalService',
-  'NotifyService', 'util', 'moment', 'uiGridConstants',
+  '$state', 'AccountService', 'FiscalService', 'NotifyService',
+  'uiGridConstants', 'bhConstants',
 ];
 
 /**
  * This controller is responsible for handling the closing balance of a fiscal year.
  */
-function FiscalClosingBalanceController($state, Accounts, AccountStore, Fiscal, Notify, util, moment, uiGridConstants) {
-  var vm = this;
-  var columns;
-  var fiscalYearId = $state.params.id;
+function FiscalClosingBalanceController($state, Accounts, Fiscal, Notify, uiGridConstants, bhConstants) {
+  const vm = this;
+  const fiscalYearId = $state.params.id;
 
   // expose to the view
   vm.showAccountFilter = false;
@@ -22,42 +21,44 @@ function FiscalClosingBalanceController($state, Accounts, AccountStore, Fiscal,
   vm.indentTitleSpace = 20;
   vm.gridApi = {};
 
-  columns = [
-    { field : 'number', displayName : '', cellClass : 'text-right', width : 100 },
-    { field : 'label',
-      displayName : 'FORM.LABELS.ACCOUNT',
-      cellTemplate : '/modules/accounts/templates/grid.labelCell.tmpl.html',
-      headerCellFilter : 'translate',
-      enableFiltering : true,
-    },
-    { field : 'debit',
-      displayName : 'FORM.LABELS.DEBIT',
-      headerCellClass : 'text-center',
-      headerCellFilter : 'translate',
-      cellTemplate : '/modules/fiscal/templates/balance.debit.tmpl.html',
-      width : 200,
-      enableFiltering : false,
-    },
-    { field : 'credit',
-      displayName : 'FORM.LABELS.CREDIT',
-      headerCellClass : 'text-center',
-      headerCellFilter : 'translate',
-      cellTemplate : '/modules/fiscal/templates/balance.credit.tmpl.html',
-      width : 200,
-      enableFiltering : false,
-    },
-  ];
+  const columns = [{
+    field : 'number',
+    displayName : '',
+    cellClass : 'text-right',
+    width : 100,
+  }, {
+    field : 'label',
+    displayName : 'FORM.LABELS.ACCOUNT',
+    cellTemplate : '/modules/accounts/templates/grid.labelCell.tmpl.html',
+    headerCellFilter : 'translate',
+    enableFiltering : true,
+  }, {
+    field : 'debit',
+    displayName : 'FORM.LABELS.DEBIT',
+    headerCellClass : 'text-center',
+    headerCellFilter : 'translate',
+    cellTemplate : '/modules/fiscal/templates/balance.debit.tmpl.html',
+    width : 200,
+    enableFiltering : false,
+  }, {
+    field : 'credit',
+    displayName : 'FORM.LABELS.CREDIT',
+    headerCellClass : 'text-center',
+    headerCellFilter : 'translate',
+    cellTemplate : '/modules/fiscal/templates/balance.credit.tmpl.html',
+    width : 200,
+    enableFiltering : false,
+  }];
 
   vm.gridOptions = {
     appScopeProvider : vm,
     fastWatch : true,
     flatEntityAccess : true,
     enableSorting : false,
-    enableFiltering : vm.showAccountFilter,
     enableColumnMenus : false,
-    rowTemplate : '/modules/accounts/templates/grid.titleRow.tmpl.html',
+    enableFiltering : vm.showAccountFilter,
     columnDefs : columns,
-    onRegisterApi : onRegisterApi,
+    onRegisterApi,
   };
 
   // API register function
@@ -67,13 +68,13 @@ function FiscalClosingBalanceController($state, Accounts, AccountStore, Fiscal,
 
   // get fiscal year
   Fiscal.read(fiscalYearId)
-  .then(function (fy) {
-    vm.fiscal = fy;
-    $state.params.label = vm.fiscal.label;
-    return fy.previous_fiscal_year_id;
-  })
-  .then(loadPeriodicBalance)
-  .catch(Notify.handleError);
+    .then((fy) => {
+      vm.fiscal = fy;
+      $state.params.label = vm.fiscal.label;
+      return fy.previous_fiscal_year_id;
+    })
+    .then(loadPeriodicBalance)
+    .catch(Notify.handleError);
 
   /**
    * loadPeriodicBalance
@@ -84,11 +85,15 @@ function FiscalClosingBalanceController($state, Accounts, AccountStore, Fiscal,
       id : fiscalYearId,
       period_number : vm.fiscal.number_of_months + 1,
     })
-    .then(function (list) {
-      vm.accounts = list;
-      vm.gridOptions.data = Accounts.order(vm.accounts);
-    })
-    .catch(Notify.handleError);
+      .then((list) => {
+        list.forEach(account => {
+          account.isTitleAccount = account.type_id === bhConstants.accounts.TITLE;
+        });
+
+        vm.accounts = list;
+        vm.gridOptions.data = Accounts.order(vm.accounts);
+      })
+      .catch(Notify.handleError);
   }
 
   /**

diff --git a/client/src/modules/fiscal/fiscal.manage.html b/client/src/modules/fiscal/fiscal.manage.html
@@ -1,7 +1,7 @@
 <form name="FiscalForm" bh-submit="FiscalManageCtrl.submit(FiscalForm)" novalidate>
 
   <div class="row">
-    <div class="col-md-12">
+    <div class=" col-lg-6 col-md-10 col-sm-12 col-xs-12">
       <div class="panel panel-primary">
         <div ng-if="FiscalManageCtrl.isCreateState" class="panel-heading" translate>FISCAL.NEW_FISCAL_YEAR</div>
         <div ng-if="FiscalManageCtrl.isUpdateState" class="panel-heading">
@@ -41,7 +41,7 @@
             <select class="form-control"
               ng-model="FiscalManageCtrl.fiscal.previous_fiscal_year_id"
               ng-options="fy.id as fy.hrLabel for fy in FiscalManageCtrl.previous_fiscal_year">
-              <option value="" disabled>--{{ 'FORM.SELECT.FISCAL_YEAR' | translate }}--</option>
+              <option value="" disabled translate>FORM.SELECT.FISCAL_YEAR</option>
             </select>
           </div>
 
@@ -66,7 +66,7 @@
       <p><strong translate>FORM.INFO.OTHER_ACTIONS</strong></p>
       <p>
         <!-- close the fiscal year  -->
-        <a class="btn btn-danger" data-action="closing-fiscal-year" href ng-click="FiscalManageCtrl.closingFiscalYear()">
+        <a class="btn btn-danger" data-action="closing-fiscal-year" href ng-click="FiscalManageCtrl.closingFiscalYear()" ng-hide="FiscalManageCtrl.fiscal.locked">
           <i class="fa fa-lock"></i>
           <span translate>FORM.INFO.CLOSE_FISCAL_YEAR</span>
         </a>

diff --git a/client/src/modules/fiscal/fiscal.manage.js b/client/src/modules/fiscal/fiscal.manage.js
@@ -6,24 +6,22 @@ FiscalManagementController.$inject = [
 ];
 
 /**
- * This controller is responsible for creating and updating a fiscal year. It provides
- * utility functions for submission and error handling.
+ * This controller is responsible for creating and updating a fiscal year. It
+ * provides utility functions for submission and error handling.
  */
 function FiscalManagementController($state, Fiscal, Notify, Modal, util, moment) {
-  var vm = this;
-  var id;
-  var isUpdate;
+  const vm = this;
 
-  // state variables
+  // state constiables
   vm.isUpdateState = $state.current.name === 'fiscal.update';
   vm.isListState = $state.current.name === 'fiscal.list';
   vm.isCreateState = $state.current.name === 'fiscal.create';
 
   // identifier
-  id = $state.params.id;
-  isUpdate = (id && vm.isUpdateState);
+  const { id } = $state.params;
+  const isUpdate = (id && vm.isUpdateState);
 
-  // global variables
+  // global constiables
   vm.fiscal = {};
   vm.state = $state;
   vm.submit = submit;
@@ -33,42 +31,42 @@ function FiscalManagementController($state, Fiscal, Notify, Modal, util, moment)
   // expose to the view
   vm.closingFiscalYear = closingFiscalYear;
 
-  /**
-   * @function init
-   * @description init data for the module
-   */
-  function init() {
+  function startup() {
     if (id && vm.isUpdateState) {
       // concerned fiscal year
       Fiscal.read(id)
-      .then(function (fiscalYear) {
-        vm.fiscal = fiscalYear;
-        $state.params.label = vm.fiscal.label;
-        vm.fiscal.start_date = new Date(vm.fiscal.start_date);
-        vm.fiscal.end_date = new Date(vm.fiscal.end_date);
-      })
-      .catch(Notify.handleError);
+        .then(fiscalYear => {
+          vm.fiscal = fiscalYear;
+          $state.params.label = vm.fiscal.label;
+          vm.fiscal.start_date = new Date(vm.fiscal.start_date);
+          vm.fiscal.end_date = new Date(vm.fiscal.end_date);
+        })
+        .catch(Notify.handleError);
     }
 
     // previous fiscal year
-    Fiscal.read(null, { detailed: 1 })
-    .then(function (previous) {
-      if (!previous.length) { return; }
-
-      // remove the current fiscal year in the previous one list
-      if (id && vm.isUpdateState) {
-        previous = previous.filter((fiscYear) => {
-          return parseInt(fiscYear.id, 10) !== parseInt(id, 10);
+    Fiscal.read(null, { detailed : 1 })
+      .then((previous) => {
+        if (!previous.length) { return; }
+
+        let years = previous;
+
+        // remove the current fiscal year in the previous one list
+        if (id && vm.isUpdateState) {
+          years = years.filter((fiscYear) => {
+            return parseInt(fiscYear.id, 10) !== parseInt(id, 10);
+          });
+        }
+
+        const fmt = (date) => moment(date).format('DD MMM YYYY');
+
+        vm.previous_fiscal_year = years.map(fy => {
+          fy.hrLabel = fy.label
+            .concat(`(${fmt(fy.start_date)} - ${fmt(fy.end_date)}`);
+          return fy;
         });
-      }
-      vm.previous_fiscal_year = previous.map(function (fy) {
-        fy.hrLabel = fy.label
-          .concat(' (', moment(fy.start_date).format('DD MMM YYYY').toString(), ' - ')
-          .concat(moment(fy.end_date).format('DD MMM YYYY').toString(), ')');
-        return fy;
-      });
-    })
-    .catch(Notify.handleError);
+      })
+      .catch(Notify.handleError);
   }
 
   /**
@@ -79,9 +77,9 @@ function FiscalManagementController($state, Fiscal, Notify, Modal, util, moment)
     if (!vm.isUpdateState) { return; }
 
     Modal.openClosingFiscalYear(vm.fiscal)
-      .then(function (res) {
+      .then(res => {
         if (!res) { return; }
-        $state.go('fiscal.list', null, { reload: true });
+        $state.go('fiscal.list', null, { reload : true });
       });
   }
 
@@ -90,40 +88,38 @@ function FiscalManagementController($state, Fiscal, Notify, Modal, util, moment)
    * @description get the number of months between two dates
    */
   function numberOfMonths() {
-    if (!vm.fiscal) { return ; }
-
-    var start_date = moment(vm.fiscal.start_date);
-    var end_date = moment(vm.fiscal.end_date);
-    vm.fiscal.number_of_months = Math.ceil(end_date.diff(start_date, 'months', true));
+    if (!vm.fiscal) { return; }
+    const startDate = moment(vm.fiscal.start_date);
+    const endDate = moment(vm.fiscal.end_date);
+    vm.fiscal.number_of_months = Math.ceil(endDate.diff(startDate, 'months', true));
   }
 
   /**
    * @method submit
+   *
    * @description submit the form
    */
   function submit(form) {
-
-    // ensure all Angular form validation checks have passed
+    // ensure all angular form validation checks have passed
     if (form.$invalid) {
       Notify.danger('FORM.ERRORS.RECORD_ERROR');
-      return;
+      return 0;
     }
 
     // get the number of months
     numberOfMonths();
 
-    var promise = isUpdate ? Fiscal.update(id, vm.fiscal) : Fiscal.create(vm.fiscal);
+    const promise = isUpdate ? Fiscal.update(id, vm.fiscal) : Fiscal.create(vm.fiscal);
 
     return promise
-      .then(function () {
+      .then(() => {
         Notify.success(isUpdate ? 'FORM.INFO.UPDATE_SUCCESS' : 'FORM.INFO.CREATE_SUCCESS');
 
         // navigate back to list view
-        $state.go('fiscal.list', null, { reload: true });
+        $state.go('fiscal.list', null, { reload : true });
       })
       .catch(Notify.handleError);
   }
 
-  // excecute
-  init();
+  startup();
 }
diff --git a/client/src/modules/fiscal/fiscal.openingBalance.html b/client/src/modules/fiscal/fiscal.openingBalance.html
@@ -1,8 +1,6 @@
 <div class="row">
   <div class="col-md-12">
-
     <form name="OpeningAccountForm" bh-submit="FiscalOBCtrl.submit(OpeningAccountForm)" novalidate>
-
       <div class="panel panel-primary">
 
         <!-- heading  -->
@@ -20,7 +18,6 @@
               <span translate>FORM.BUTTONS.EDIT</span> <i class="fa fa-edit"></i>
             </span>
           </div>
-
         </div>
 
         <!-- body  -->
@@ -47,7 +44,7 @@
           </div>
 
           <button type="submit" data-method="submit" ng-disabled="!FiscalOBCtrl.editBalanceEnabled && !FiscalOBCtrl.previousFiscalYearExist" class="btn btn-primary">
-            <span ng-show="!FiscalOBCtrl.previousFiscalYearExist" translate>FORM.BUTTONS.SUBMIT</span>
+            <span ng-hide="FiscalOBCtrl.previousFiscalYearExist" translate>FORM.BUTTONS.SUBMIT</span>
             <span ng-show="FiscalOBCtrl.previousFiscalYearExist" translate>FORM.BUTTONS.IMPORT_PREVIOUS_CLOSING_BALANCE</span>
           </button>
         </div>