5796 Improve the journal log with grid

IMA-WorldHealth · Jul 21, 2021 · bec2127 · bec2127
1 parent e44ec3c
commit bec2127
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 38 deletions.
diff --git a/client/src/js/constants/bhConstants.js b/client/src/js/constants/bhConstants.js
@@ -40,6 +40,7 @@ function constantConfig() {
       minDOB : new Date('1900-01-01'),
       format : 'dd/MM/yyyy',
       formatDB : 'YYYY-MM-DD',
+      formatLong : 'dd MMM yyyy hh:mm:ss',
     },
     yearOptions : {
       format         : 'yyyy',

diff --git a/client/src/modules/journal/journal_log.html b/client/src/modules/journal/journal_log.html
@@ -10,6 +10,7 @@
     <div class="toolbar">
       <fieldset>
         <bh-search-button on-click="JournalLogCtrl.openSearchModal()"></bh-search-button>
+        <bh-filter-toggle on-toggle="JournalLogCtrl.toggleFilter()"></bh-filter-toggle>
       </fieldset>
     </div>
   </div>
@@ -27,41 +28,20 @@
     <div class="row">
       <div class="col-md-12">
 
-        <table class="table table-condensed">
-          <thead>
-            <th translate>TABLE.COLUMNS.DATE</th>
-            <th translate>TABLE.COLUMNS.ACTION</th>
-            <th translate>TABLE.COLUMNS.TRANSACTION</th>
-            <th translate>TABLE.COLUMNS.DESCRIPTION</th>
-            <th translate>TABLE.COLUMNS.USER</th>
-          </thead>
-          <tbody>
-            <tr ng-repeat="row in JournalLogCtrl.data track by row.uuid">
-              <td><small ng-if="row.timestamp">{{ row.timestamp | date:'medium' }}</small></td>
-              <td>
-                <span ng-if="row.action === 'deleted'" class="text-danger text-uppercase text-bold" translate>
-                  POSTING_JOURNAL.DELETED_TRANSACTION
-                </span>
-                <span ng-if="row.action === 'edit'" class="text-primary text-uppercase text-bold" translate>
-                  POSTING_JOURNAL.EDITED_TRANSACTION
-                </span>
-              </td>
-              <td>
-                <span ng-if="row.transId" class="text-success text-uppercase text-bold">
-                  {{ row.transId }}
-                </span>
-              </td>
-              <td>
-                <span ng-if="row.description">{{ row.description }}</span>
-              </td>
-              <td>
-                <small translate>FORM.LABELS.BY</small>
-                <small>{{ row.display_name}}</small>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
+        <div
+          id="journal-log-grid"
+          class="grid-journal"
+          ui-grid="JournalLogCtrl.gridOptions"
+          ui-grid-resize-columns>
+
+          <bh-grid-loading-indicator
+            loading-state="JournalLogCtrl.loading"
+            empty-state="JournalLogCtrl.gridOptions.data.length === 0"
+            error-state="JournalLogCtrl.hasError">
+          </bh-grid-loading-indicator>
+
+        </div>
+
       </div>
     </div>
   </div>

diff --git a/client/src/modules/journal/journal_log.js b/client/src/modules/journal/journal_log.js
@@ -1,29 +1,104 @@
 angular.module('bhima.controllers')
   .controller('JournalLogController', JournalLogController);
 
-JournalLogController.$inject = ['JournalLogService', 'NotifyService', '$state'];
+JournalLogController.$inject = [
+  'JournalLogService', 'NotifyService', '$state', 'bhConstants',
+  'LanguageService', 'uiGridConstants',
+];
 
-function JournalLogController(Journal, Notify, $state) {
+function JournalLogController(
+  Journal, Notify, $state, bhConstants, Language, uiGridConstants,
+) {
   const vm = this;
 
+  vm.languageKey = Language.key;
+  vm.rowsDetails = { totalDeleted : 0, totalEdited : 0 };
   vm.onRemoveFilter = onRemoveFilter;
   vm.openSearchModal = openSearchModal;
+  vm.toggleFilter = toggleFilter;
+
+  function onRegisterApi(api) {
+    vm.gridApi = api;
+  }
+
+  const columnDefs = [{
+    field : 'timestamp',
+    displayName : 'TABLE.COLUMNS.DATE',
+    headerCellFilter : 'translate',
+    cellFilter : 'date:"'.concat(bhConstants.dates.formatLong, '"'),
+    footerCellTemplate : '<i></i>',
+    width : 150,
+  }, {
+    field : 'action',
+    displayName : 'TABLE.COLUMNS.ACTION',
+    headerCellFilter : 'translate',
+    cellTemplate : 'modules/journal/templates/log.action.html',
+    width : 110,
+  }, {
+    field : 'hrRecord',
+    displayName : 'TABLE.COLUMNS.RECORD',
+    headerCellFilter : 'translate',
+    cellTemplate : 'modules/journal/templates/log.record.html',
+    width : 110,
+  }, {
+    field : 'description',
+    displayName : 'TABLE.COLUMNS.DESCRIPTION',
+    headerCellFilter : 'translate',
+  }, {
+    field : 'transaction',
+    displayName : 'TABLE.COLUMNS.TRANSACTION',
+    headerCellFilter : 'translate',
+    cellTemplate : 'modules/journal/templates/log.transaction.html',
+    width : 110,
+  }, {
+    field : 'display_name',
+    displayName : 'TABLE.COLUMNS.USER',
+    headerCellFilter : 'translate',
+    width : 200,
+  }];
+
+  vm.gridOptions = {
+    enableColumnMenus : false,
+    showColumnFooter : false,
+    appScopeProvider : vm,
+    flatEntityAccess : true,
+    showGridFooter : true,
+    onRegisterApi,
+    columnDefs,
+    gridFooterTemplate : '/modules/journal/templates/log.footer.html',
+  };
 
   function load(filters) {
     Journal.read(null, filters)
       .then(rows => {
-        vm.data = rows.map(row => {
+        vm.rowsDetails.totalDeleted = 0;
+        vm.rowsDetails.totalEdited = 0;
+        vm.gridOptions.data = rows.map(row => {
           if (row.value) {
             const line = Array.isArray(row.value) && row.value.length ? row.value[0] : row.value;
+            row.hrRecord = line.hrRecord;
             row.transId = line.trans_id;
             row.description = line.description;
+
+            if (row.action === 'deleted') {
+              vm.rowsDetails.totalDeleted++;
+            }
+
+            if (row.action === 'edit') {
+              vm.rowsDetails.totalEdited++;
+            }
           }
           return row;
         });
       })
       .catch(Notify.handleError);
   }
 
+  function toggleFilter() {
+    vm.gridOptions.enableFiltering = !vm.gridOptions.enableFiltering;
+    vm.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
+  }
+
   function openSearchModal() {
     const filtersSnapshot = Journal.filters.formatHTTP();
     Journal.openSearchModal(filtersSnapshot)

diff --git a/client/src/modules/journal/templates/log.action.html b/client/src/modules/journal/templates/log.action.html
@@ -0,0 +1,8 @@
+<div class="ui-grid-cell-contents">
+  <span ng-if="row.entity.action === 'deleted'" class="text-danger text-uppercase" translate>
+    POSTING_JOURNAL.DELETED_TRANSACTION
+  </span>
+  <span ng-if="row.entity.action === 'edit'" class="text-primary text-uppercase" translate>
+    POSTING_JOURNAL.EDITED_TRANSACTION
+  </span>
+</div>
diff --git a/client/src/modules/journal/templates/log.footer.html b/client/src/modules/journal/templates/log.footer.html
@@ -0,0 +1,5 @@
+<div class="ui-grid-cell-contents">
+  <span>({{grid.rows.length}} <span translate>FORM.INFO.ROWS</span>)</span>
+  <span style="color : red" class="fa fa-circle"></span> {{grid.appScope.rowsDetails.totalDeleted}} <span translate>POSTING_JOURNAL.DELETED_TRANSACTION</span>
+  <span style="color : #085484" class="fa fa-circle"></span> {{grid.appScope.rowsDetails.totalEdited}} <span translate>POSTING_JOURNAL.EDITED_TRANSACTION</span>
+</div>
diff --git a/client/src/modules/journal/templates/log.record.html b/client/src/modules/journal/templates/log.record.html
@@ -0,0 +1,6 @@
+<div ng-if="row.entity.hrRecord" class="ui-grid-cell-contents">
+  <bh-reference-link  reference="row.entity.hrRecord" />
+</div>
+<div ng-if="!row.entity.hrRecord && row.entity.action == 'deleted'" class="ui-grid-cell-contents">
+  <em class="text-danger" translate>POSTING_JOURNAL.DELETED_TRANSACTION</em>
+</div>
diff --git a/client/src/modules/journal/templates/log.transaction.html b/client/src/modules/journal/templates/log.transaction.html
@@ -0,0 +1,11 @@
+<div class="ui-grid-cell-contents">
+  <a 
+    data-method="view-in-journal"
+    ui-sref="journal({filters : [{ key : 'trans_id', displayValue : row.entity.transId, value: row.entity.transId, cacheable: 0 },
+      { key : 'includeNonPosted', value : 1 }, { key : 'period', value : 'allTime' }]})"
+    ui-sref-opts="{ reload : false }"
+    ng-if="row.entity.transId"
+    class="text-uppercase">
+    {{ row.entity.transId }}
+  </a>
+</div>