Feature: ui grid filtering

client/src/i18n/en.json

@@ -234,6 +234,7 @@
       "SUBMIT_CHANGES"        : "Submit Changes",
       "THIS_MONTH"            : "This month",
       "THIS_WEEK"             : "This Week",
+      "THIS_MONTH"            : "This Month",
       "THIS_YEAR"             : "This Year",
       "TODAY"                 : "Today",
       "UPDATE_PASSWORD"       : "Update Password",
@@ -261,6 +262,7 @@
       "CREATED"              : "Created",
       "CREATE_SUCCESS"       : "Create Successfully",
       "CURRENT"              : "Current",
+      "CLEAR_FILTERS"        : "Clear Filters",
       "DANGER_ZONE"          : "Danger Zone",
       "DELETE_SUCCESS"       : "Delete success",
       "FINANCIAL_DETAIL"     : "Financial details",
@@ -340,7 +342,7 @@
       "CREATED"                : "Created",
       "DATE"                   : "Date",
       "DATE_CREATED"           : "Date Created",
-      "DATE_REGISTRATION"      : "Date Registration",
+      "DATE_REGISTRATION"      : "Registration Date",
       "DEBITOR_GROUP"          : "Debtor Group",
       "DEBTOR_GROUP"           : "Form debtor group record",
       "DESCRIPTION"            : "Description",

client/src/js/components/bhFiltersApplied.js

@@ -1,7 +1,58 @@
 angular.module('bhima.components')
 .component('bhFiltersApplied', {
   templateUrl : 'partials/templates/bhFiltersApplied.tmpl.html',
+  controller : bhFiltersAppliedController,
   bindings: {
-    filters: '='
+    filters: '<',
+    onRemoveFilter: '&'  // fires to remove the filter
   }
 });
+
+bhFiltersAppliedController.$inject = [ '$scope', '$filter' ];
+
+/**
+ * @class bhFiltersApplied
+ *
+ * @description
+ * The bhFiltersApplied directive watches the component boundary for changes in
+ * the filters passed in. Filters appear as a list of JSON objects, with a
+ * similar API to ui grid.  At minimum, they must contain:
+ *  1. displayName (this will be passed through $translate as the column name)
+ *  2. value
+ * They can optionally contain:
+ *  1. comparitor (usually ">", "<", etc)
+ *  2. filter (an angular or custom filter to apply to the value)
+ *
+ * When the filters change, the values are re-digested.  Each filter also has an
+ * "X" button, which simply calls `onRemoveFilter()`.  It is up to the parent
+ * controller to determine what should happen in this case.
+ *
+ * @example
+ * var filters = [
+ *  { displayName : 'SOME.COLUMN', value: 5 },
+ *  { displayName : 'SOME.DATE.COLUMN', value : '06/12/1993', filter: 'moment' }
+ * ];
+ *
+ * // in the HTML, it will look something like:
+ * // <bh-filters-applied
+ * //  filters="SomeCtrl.filters"
+ * //  on-remove-filter="SomeCtrl.removeFilter">
+ * // </bh-filters-applied>
+ */
+function bhFiltersAppliedController($scope, $filter) {
+
+  $scope.$watch('$ctrl.filters', formatViewValues);
+
+  // formats the viewValue according to any filters passed in
+  function formatViewValues(filters) {
+    if (!filters) { return; }
+
+    filters.forEach(function (filter) {
+      if (filter.ngFilter) {
+        filter.viewValue = $filter(filter.ngFilter)(filter.value);
+      } else {
+        filter.viewValue = filter.value;
+      }
+    });
+  }
+}

client/src/js/services/PatientService.js

@@ -6,20 +6,17 @@ PatientService.$inject = [ '$http', 'util', 'SessionService', '$uibModal', 'Docu
 /**
  * @module PatientService
  *
- * This service is reponsible for providing an interface between angular
+ * This service is responsible for providing an interface between angular
  * module controllers and the server /patients API.
  *
  * @example
- * Controller.$inject = ['PatientService'];
- *
- * var Patients = PatientService;
- *
- * // returns patient details
- * Patients.read(uuid)...
- *
- * // creates a patient
- * Patients.create(medicalDetails, financeDetails)...
+ * function Controller(Patients) {
+ *   // returns patient details
+ *   Patients.read(uuid).then(callback);
  *
+ *   // creates a patient
+ *   Patients.create(medicalDetails, financeDetails).then(callback);
+*   }
  */
 function PatientService($http, util, Session, $uibModal, Documents, Visits) {
   var service = this;
@@ -37,7 +34,7 @@ function PatientService($http, util, Session, $uibModal, Documents, Visits) {
 
   // uses the "search" endpoint to pass query strings to the database
   service.search = search;
-  service.patientFilters = patientFilters;
+  service.formatFilterParameters = formatFilterParameters;
 
   // document exposition definition
   service.Documents = Documents;
@@ -133,28 +130,12 @@ function PatientService($http, util, Session, $uibModal, Documents, Visits) {
    * paramSerializer
    */
   function search(options) {
-    var target = baseUrl.concat('search');
-
-    /*
-     * Convertion of dateRegistrationFrom and dateRegistrationTo because
-     * In the database the column registration_date and dob (date of birth) is type DATETIME
-     */
-
-    if (options.dateRegistrationFrom) {
-      options.dateRegistrationFrom = util.convertToMysqlDate(options.dateRegistrationFrom);
-    }
-
-    if (options.dateRegistrationTo) {
-      options.dateRegistrationTo = util.convertToMysqlDate(options.dateRegistrationTo);
-    }
+    options = angular.copy(options || {});
 
-    if (options.dateBirthFrom) {
-      options.dateBirthFrom = util.convertToMysqlDate(options.dateBirthFrom);
-    }
+    var target = baseUrl.concat('search');
 
-    if (options.dateBirthTo) {
-      options.dateBirthTo = util.convertToMysqlDate(options.dateBirthTo);
-    }
+    // ensure that the search returns detailed results
+    options.detailed = 1;
 
     return $http.get(target, { params : options })
       .then(util.unwrapHttpResponse);
@@ -216,84 +197,53 @@ function PatientService($http, util, Session, $uibModal, Documents, Visits) {
   }
 
 
-  /*
+  /**
    * This function prepares the headers patient properties which were filtered,
    * Special treatment occurs when processing data related to the date
    * @todo - this might be better in it's own service
    */
-  function patientFilters(patient) {
-    var propertyPatientFilter = [];
-    var dataConfiguration;
-
-    if (patient.dateRegistrationFrom && patient.dateRegistrationTo) {
-      dataConfiguration = {
-        title : 'FORM.LABELS.DATE_REGISTRATION',
-        reference1 : patient.dateRegistrationFrom,
-        reference2 : patient.dateRegistrationTo
-      };
-      propertyPatientFilter.push(dataConfiguration);
-    }
-
-    if (patient.name) {
-      dataConfiguration = {
-        title : 'FORM.LABELS.NAME',
-        reference1 : patient.name,
-      };
-      propertyPatientFilter.push(dataConfiguration);
-    }
-
-    if (patient.reference) {
-      dataConfiguration = {
-        title : 'FORM.LABELS.REFERENCE',
-        reference1 : patient.reference,
-      };
-      propertyPatientFilter.push(dataConfiguration);
-    }
-
-    if (patient.fields) {
-      if (patient.fields.hospital_no) {
-        dataConfiguration = {
-          title : 'FORM.LABELS.HOSPITAL_FILE_NR',
-          reference1 : patient.fields.hospital_no,
-        };
-        propertyPatientFilter.push(dataConfiguration);
-      }
-    }
-
-    if (patient.sex && patient.sex !== 'all') {
-      var sexPatient;
-      if (patient.sex === 'M') {
-        sexPatient = 'FORM.LABELS.MALE';
+  function formatFilterParameters(params) {
+    var columns = [
+      { field: 'name', displayName: 'FORM.LABELS.NAME' },
+      { field: 'sex', displayName: 'FORM.LABELS.GENDER' },
+      { field: 'hospital_no', displayName: 'FORM.LABELS.HOSPITAL_NO' },
+      { field: 'reference', displayName: 'FORM.LABELS.REFERENCE' },
+      { field: 'dateBirthFrom', displayName: 'FORM.LABELS.DOB', comparitor: '>', ngFilter:'date' },
+      { field: 'dateBirthTo', displayName: 'FORM.LABELS.DOB', comparitor: '<', ngFilter:'date' },
+      { field: 'dateRegistrationFrom', displayName: 'FORM.LABELS.DATE_REGISTRATION', comparitor: '>', ngFilter:'date' },
+      { field: 'dateRegistrationTo', displayName: 'FORM.LABELS.DATE_REGISTRATION', comparitor: '<', ngFilter:'date' },
+    ];
+
+    // returns columns from filters
+    return columns.filter(function (column) {
+      let value = params[column.field];
+
+      if (angular.isDefined(value)) {
+        column.value = value;
+        return true;
       } else {
-        sexPatient = 'FORM.LABELS.FEMALE';
+        return false;
       }
-
-      dataConfiguration = {
-        title : 'FORM.LABELS.GENDER',
-        reference1 : patient.sex,
-      };
-      propertyPatientFilter.push(dataConfiguration);
-    }
-
-    if (patient.dateBirthFrom && patient.dateBirthTo) {
-      dataConfiguration = {
-        title : 'TABLE.COLUMNS.DOB',
-        reference1 : patient.dateBirthFrom,
-        reference2 : patient.dateBirthTo
-      };
-      propertyPatientFilter.push(dataConfiguration);
-    }
-
-    return propertyPatientFilter;
+    });
   }
 
-  function openSearchModal() {
+  /**
+   * @method openSearchModal
+   *
+   * @param {Object} params - an object of filter parameters to be passed to
+   *   the modal.
+   * @returns {Promise} modalInstance
+   */
+  function openSearchModal(params) {
     return $uibModal.open({
-      templateUrl : 'partials/patients/registry/search.modal.html',
-      size : 'md',
-      animation : true,
-      keyboard  : false,
-      controller : 'PatientRegistryModalController as ModalCtrl'
+      templateUrl: 'partials/patients/registry/search.modal.html',
+      size: 'md',
+      keyboard: false,
+      animation: true,
+      controller: 'PatientRegistryModalController as ModalCtrl',
+      resolve : {
+        params : function paramsProvider() { return params; }
+      }
     }).result;
   }
 

client/src/js/services/receipts/ReceiptService.js

@@ -29,7 +29,7 @@ function ReceiptService($http, util) {
    *
    * @param {String} uuid      Target invoice UUID to report on
    * @param {Object} options   Configuration options for the server generated
-   *                           report, this includes things like render target.
+   *                           report, this includes things like renderer target.
    * @return {Promise}         Eventually returns report object from server
    */
   function invoice(uuid, options) {
@@ -63,8 +63,6 @@ function ReceiptService($http, util) {
       responseType = 'arraybuffer';
     }
 
-    delete options.render;
-
     return $http.get(route, {params : options, responseType : responseType})
       .then(util.unwrapHttpResponse);
   }