feat(filters): implement filterbar.hbs

This commit implements a filterbar partial to enable rendering filters on the server. It implements a giant shared filter to render the correctly translated display value based on the filter passed in. A prototype implementation is available in cash's registry. Closes #1979.
IMA-WorldHealth · Oct 22, 2017 · ff9552a · ff9552a
1 parent ef5d7a8
commit ff9552a
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 51 deletions.
diff --git a/client/src/js/services/StockService.js b/client/src/js/services/StockService.js
@@ -232,6 +232,6 @@ function StockService(Api, Filters, AppCache, Periods, $httpParamSerializer, Lan
     loadCachedFilters: loadCachedFilters,
     download: download,
     uniformSelectedEntity: uniformSelectedEntity,
-    processLotsFromStore : processLotsFromStore,    
+    processLotsFromStore : processLotsFromStore,
   };
 }
diff --git a/client/src/less/bhima-bootstrap.less b/client/src/less/bhima-bootstrap.less
@@ -247,6 +247,40 @@ input[type=number] {-moz-appearance: textfield;}
   margin-left: 0;
 }
 
+/* New Label Outline styles */
+/* src: https://codepen.io/uimax/pen/ZpENPG */
+
+.label.label-outlined {
+  border-width: 1px;
+  border-style: solid;
+  background-color: transparent;
+}
+
+.label.label-outlined.label-primary {
+  border-color: @label-primary-bg;
+  color: @brand-primary;
+}
+
+.label.label-outlined.label-danger {
+  border-color: @label-danger-bg;
+  color: @state-danger-text;
+}
+
+.label.label-outlined.label-info {
+  border-color: @label-info-bg;
+  color: @state-info-text;
+}
+
+.label.label-outlined.label-warning {
+  border-color: @label-warning-bg;
+  color: @state-warning-text;
+}
+
+.label.label-outlined.label-success {
+  border-color: @label-success-bg;
+  color: @state-success-text;
+}
+
 /*  flash for newly edited or created rows */
 @keyframes highlight-flash {
   from { background: @btn-info-bg; }

diff --git a/server/controllers/finance/reports/cash/index.js b/server/controllers/finance/reports/cash/index.js
@@ -14,6 +14,7 @@ const _ = require('lodash');
 const q = require('q');
 const Moment = require('moment');
 
+const shared = require('../shared');
 const ReportManager = require('../../../../lib/ReportManager');
 
 const pdf = require('../../../../lib/renderers/pdf');
@@ -142,6 +143,8 @@ function receipt(req, res, next) {
 function report(req, res, next) {
   let reportInstance;
   const query = _.clone(req.query);
+  const filters = shared.formatFilters(req.query);
+
   _.extend(query, {
     filename : 'TREE.CASH_PAYMENT_REGISTRY',
     csvKey : 'rows',
@@ -179,7 +182,7 @@ function report(req, res, next) {
     GROUP BY currency_id;
   `;
 
-  const data = {};
+  const data = { filters };
   let uuids;
 
   CashPayments.find(query)

diff --git a/server/controllers/finance/reports/cash/report.handlebars b/server/controllers/finance/reports/cash/report.handlebars
@@ -14,19 +14,7 @@
       </h2>
 
       <!-- filters  -->
-      {{#if hasFilter}}
-      <br />
-        <div>
-          <i class="fa fa-filter"></i>
-          {{#if display.reference}}{{translate 'TABLE.COLUMNS.REFERENCE'}}: {{look display 'reference'}} /{{/if}}
-          {{#if display.dateFrom}} {{translate 'TABLE.COLUMNS.DATE'}}: {{date (look display 'dateFrom')}} - {{date (look display 'dateTo')}} /{{/if}}
-          {{#if display.debtor_uuid}} {{translate 'TABLE.COLUMNS.PATIENT'}}: {{look display 'debtor_uuid'}} /{{/if}}
-          {{#if display.cashbox_id}} {{translate 'TABLE.COLUMNS.CASHBOX'}}: {{look display 'cashbox_id'}} /{{/if}}
-          {{#if display.user_id}}{{translate 'TABLE.COLUMNS.USER'}}: {{look display 'user_id'}}/{{/if}}
-          {{#if display.is_caution}}{{translate 'FORM.LABELS.CAUTION'}}: <i class="fa fa-check"></i> {{/if}}
-        </div>
-        <br />
-      {{/if}}
+      {{> filterbar filters=filters }}
 
       <!-- list of data  -->
       <table class="table table-condensed table-bordered table-striped">

diff --git a/server/controllers/finance/reports/purchases/index.js b/server/controllers/finance/reports/purchases/index.js
@@ -1,65 +1,35 @@
-
 /**
  * @overview
  * Invoice Reports
  *
  * @description
  * This module contains the functionality to generate invoice reports and
  * receipts.
- *
  */
 
 const _ = require('lodash');
 
 const ReportManager = require('../../../../lib/ReportManager');
 const Purchases = require('../../purchases');
+const shared = require('../shared');
 
 const REPORT_TEMPLATE = './server/controllers/finance/reports/purchases/report.handlebars';
 
 exports.report = report;
 
-// translation key mappings for dynamic filters
-// Basically, to show a pretty filter bar, this will translate URL query params
-// into human-readable text to be placed in the report, showing the properties
-// filtered on.
-function formatFilters(qs) {
-  const columns = [
-    { field : 'reference', displayName : 'FORM.LABELS.REFERENCE' },
-    { field : 'user_id', displayName : 'FORM.LABELS.USER' },
-    { field : 'supplier_uuid', displayName : 'FORM.LABELS.SUPPLIER' },
-    { field : 'is_confirmed', displayName : 'PURCHASES.ORDER' },
-    { field : 'is_received', displayName : 'PURCHASES.STATUS.RECEIVED' },
-    { field : 'is_cancelled', displayName : 'PURCHASES.STATUS.CANCELLED' },
-    { field : 'status_id', displayName : 'PURCHASES.ORDER' },
-    { field : 'period', displayName : 'TABLE.COLUMNS.PERIOD' },
-    { field : 'custom_period_start', displayName : 'PERIODS.START', isDate : true, comparitor : '>' },
-    { field : 'custom_period_end', displayName : 'PERIODS.END', isDate : true, comparitor : '<' },
-    { field : 'limit', displayName : 'FORM.LABELS.LIMIT' },
-  ];
-
-  return columns.filter(column => {
-    const value = qs[column.field];
-
-    if (!_.isUndefined(value)) {
-      column.value = value;
-      return true;
-    }
-    return false;
-  });
-}
-
 
 /**
  * @function report
- * @desc build a report for Purchace Registry report of metadata
- * @param {array} data Purchase Registry report of metadata
- * @return {object} promise
+ *
+ * @description
+ * Build a report for Purchase Registry report of metadata
+ *
  */
 function report(req, res, next) {
   let reportInstance;
 
   const query = _.clone(req.query);
-  const filters = formatFilters(req.query);
+  const filters = shared.formatFilters(req.query);
 
   _.extend(query, {
     filename : 'TREE.PURCHASE_REGISTRY',

diff --git a/server/controllers/finance/reports/shared.js b/server/controllers/finance/reports/shared.js
@@ -0,0 +1,64 @@
+const _ = require('lodash');
+
+// translation key mappings for dynamic filters
+// Basically, to show a pretty filter bar, this will translate URL query string
+// into human-readable text to be placed in the report, showing the properties
+// filtered on.
+function formatFilters(qs) {
+  const columns = [
+    { field : 'billingDateFrom', displayName : 'FORM.LABELS.DATE', comparitor : '>', isDate : true },
+    { field : 'billingDateTo', displayName : 'FORM.LABELS.DATE', comparitor : '<', isDate : true },
+    { field : 'cashbox_id', displayName : 'FORM.LABELS.CASHBOX' },
+    { field : 'cash_uuid', displayName : 'FORM.INFO.PAYMENT' },
+    { field : 'currency_id', displayName : 'FORM.LABELS.CURRENCY' },
+    { field : 'dateFrom', displayName : 'FORM.LABELS.DATE_FROM', comparitor : '>', isDate : true },
+    { field : 'dateTo', displayName : 'FORM.LABELS.DATE_TO', comparitor : '<', isDate : true },
+    { field : 'debtor_uuid', displayName : 'FORM.LABELS.CLIENT' },
+    { field : 'debtor_group_uuid', displayName : 'FORM.LABELS.DEBTOR_GROUP' },
+
+    { field : 'is_caution', displayName : 'FORM.LABELS.CAUTION' },
+    { field : 'supplier_uuid', displayName : 'FORM.LABELS.SUPPLIER' },
+    { field : 'status_id', displayName : 'PURCHASES.ORDER' },
+    { field : 'patientReference', displayName : 'FORM.LABELS.REFERENCE_PATIENT' },
+    { field : 'user_id', displayName : 'FORM.LABELS.USER' },
+
+    { field : 'invoiceReference', displayName : 'FORM.LABELS.INVOICE' },
+    { field : 'invoice_uuid', displayName : 'FORM.LABELS.INVOICE' },
+    { field : 'service_id', displayName : 'FORM.LABELS.SERVICE' },
+    { field : 'inventory_uuid', displayName : 'FORM.LABELS.INVENTORY' },
+
+    { field : 'flux_id', displayName: 'STOCK.FLUX' },
+    { field : 'status', displayName: 'STOCK.STATUS.LABEL' },
+
+    { field : 'entry_date_from', displayName: 'STOCK.ENTRY_DATE', comparitor: '>', isDate : true },
+    { field : 'entry_date_to', displayName: 'STOCK.ENTRY_DATE', comparitor: '<', isDate : true },
+    { field : 'expiration_date_from', displayName: 'STOCK.EXPIRATION_DATE', comparitor: '>', isDate : true },
+    { field : 'expiration_date_to', displayName: 'STOCK.EXPIRATION_DATE', comparitor: '<', isDate : true },
+    { field : 'is_exit', displayName : 'STOCK.OUTPUT' },
+    { field : 'label', displayName : 'STOCK.LOT' },
+    { field : 'depot_uuid', displayName : 'STOCK.DEPOT' },
+
+    { field : 'description', displayName : 'FORM.LABELS.DESCRIPTION' },
+    { field : 'entity_uuid', displayName : 'FORM.LABELS.ENTITY' },
+    { field : 'type_ids', displayName : 'FORM.LABELS.TRANSACTION_TYPE' },
+
+    { field : 'reference', displayName : 'FORM.LABELS.REFERENCE' },
+    { field : 'reversed', displayName : 'CASH.REGISTRY.REVERSED_RECORDS' },
+    { field : 'limit', displayName : 'FORM.LABELS.LIMIT' },
+    { field : 'period', displayName : 'TABLE.COLUMNS.PERIOD' },
+    { field : 'custom_period_start', displayName : 'PERIODS.START', isDate : true, comparitor : '>' },
+    { field : 'custom_period_end', displayName : 'PERIODS.END', isDate : true, comparitor : '<' },
+  ];
+
+  return columns.filter(column => {
+    const value = qs[column.field];
+
+    if (!_.isUndefined(value)) {
+      column.value = value;
+      return true;
+    }
+    return false;
+  });
+}
+
+exports.formatFilters = formatFilters;
diff --git a/server/lib/template/partials/filterbar.handlebars b/server/lib/template/partials/filterbar.handlebars
@@ -0,0 +1,15 @@
+{{#if filters}}
+  <p class="pills">
+    {{#each filters}}
+      <span class="label label-outlined text-capitalize" style="border-color: #000; color: #000;">
+        {{translate this.displayName}}
+
+        {{#if this.comparitor}} {{this.comparitor}}
+        {{else}}: {{/if}}
+
+        {{#if this.isDate}} {{date this.value}}
+        {{else}} {{translate this.value}} {{/if}}
+      </span>
+    {{/each}}
+  </p>
+{{/if}}