feat(invoices): implement save-state w/ columns

This commit implements ui-grid's save-state feature on the invoice
registry, and compliments it with a column configuration service.  This
service is slightly buggy, but that is outside the scope of these
changes.

Closes IMA-WorldHealth#1749.

.gitignore

@@ -4,6 +4,9 @@
 .idea/*
 *~
 
+# ignore lock file until it works with npm < version 5
+package-lock.json
+
 # ignore all compressed files
 *.gz, *.xz, *.zip
 

client/src/modules/invoices/registry/registry.html

@@ -8,13 +8,12 @@
     <div class="toolbar">
 
       <div class="toolbar-item">
-        <div uib-dropdown data-action="open-menu">
+        <div uib-dropdown dropdown-append-to-body data-action="open-menu">
           <a class="btn btn-default" uib-dropdown-toggle>
             <span class="fa fa-bars"></span> <span class="hidden-xs" translate>FORM.LABELS.MENU</span> <span class="caret"></span>
           </a>
 
           <ul uib-dropdown-menu role="menu" class="dropdown-menu-right">
-            <!--
             <li role="menuitem">
               <a href data-method="configure" ng-click="InvoiceRegistryCtrl.openColumnConfigModal()">
                 <i class="fa fa-columns"></i> <span translate>FORM.LABELS.COLUMNS</span>
@@ -33,7 +32,6 @@
                 <i class="fa fa-close"></i> <span translate>FORM.BUTTONS.CLEAR_GRID_CONFIGURATION</span>
               </a>
             </li>
-            -->
 
             <li role="separator" class="divider"></li>
             <li role="menuitem">
@@ -78,13 +76,14 @@
       ui-grid="InvoiceRegistryCtrl.uiGridOptions"
       ui-grid-auto-resize
       ui-grid-resize-columns
+      ui-grid-save-state
       ui-grid-move-columns>
       <bh-grid-loading-indicator
         loading-state="InvoiceRegistryCtrl.loading"
         empty-state="InvoiceRegistryCtrl.uiGridOptions.data.length === 0"
         error-state="InvoiceRegistryCtrl.hasError">
       </bh-grid-loading-indicator>
-  </div>
+    </div>
   </div>
 </div>
 

client/src/modules/invoices/registry/registry.js

@@ -4,7 +4,7 @@ angular.module('bhima.controllers')
 InvoiceRegistryController.$inject = [
   'PatientInvoiceService', 'bhConstants', 'NotifyService', 'SessionService',
   'ReceiptModal', 'uiGridConstants', 'ModalService', 'CashService',
-  'GridSortingService',
+  'GridSortingService', 'GridColumnService', 'GridStateService', '$state',
 ];
 
 /**
@@ -14,15 +14,18 @@ InvoiceRegistryController.$inject = [
  */
 function InvoiceRegistryController(
   Invoices, bhConstants, Notify, Session, Receipt, uiGridConstants,
-  ModalService, Cash, Sorting
+  ModalService, Cash, Sorting, Columns, GridState, $state
 ) {
   var vm = this;
 
   // Background color for make the difference between the valid and cancel invoice
   var reversedBackgroundColor = { 'background-color' : '#ffb3b3' };
   var regularBackgroundColor = { 'background-color' : 'none' };
+  var cacheKey = 'invoice-grid';
 
   var columnDefs;
+  var gridColumns;
+  var state;
 
   vm.search = search;
   vm.openReceiptModal = Receipt.invoice;
@@ -92,6 +95,9 @@ function InvoiceRegistryController(
     rowTemplate       : '/modules/invoices/templates/grid.creditNote.tmpl.html',
   };
 
+  gridColumns = new Columns(vm.uiGridOptions, cacheKey);
+  state = new GridState(vm.uiGridOptions, cacheKey);
+
   function handler(error) {
     vm.hasError = true;
     Notify.handleError(error);
@@ -158,6 +164,21 @@ function InvoiceRegistryController(
     vm.latestViewFilters = Invoices.filters.formatView();
   }
 
+  // This function opens a modal through column service to let the user toggle
+  // the visibility of the invoice registry's columns.
+  vm.openColumnConfigModal = function openColumnConfigModal() {
+    // column configuration has direct access to the grid API to alter the current
+    // state of the columns - this will be saved if the user saves the grid configuration
+    gridColumns.openConfigurationModal();
+  };
+
+  // saves the grid's current configuration
+  vm.saveGridState = state.saveGridState;
+  vm.clearGridState = function clearGridState() {
+    state.clearGridState();
+    $state.reload();
+  };
+
  // Call the opening of Modal
   function openModal(invoice) {
     Invoices.openCreditNoteModal(invoice)