feat: implement bhHiddenField

This commit implements the `bhHiddenField` component which hides any transcluded HTML behind a toggle and lets the user decide when to show it and to hide it after. The use case is for option fields in forms that do not need to be considered by default. For example, many reports have complex options that should not be presented on the outset, but can instead by added in later. Closes IMA-WorldHealth#933.
jniles · Nov 16, 2017 · f246688 · f246688
1 parent 7346f8d
commit f246688
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 7 deletions.
diff --git a/client/src/i18n/en/report.json b/client/src/i18n/en/report.json
@@ -1,6 +1,5 @@
 {
   "REPORT": {
-    "CLIENTS" : "Rapport Clients",
     "ACCOUNT": "Account Statement",
     "AGED_CREDITORS":{
      "TITLE":"Aged Creditors",
@@ -30,8 +29,11 @@
     },
     "CASH_INCOME":"Incomes",
     "CHART_OF_ACCOUNTS": "Chart of Accounts",
+    "CLIENTS" : "Clients Report",
     "CLIENTS_REPORT": {
       "TITLE": "Clients Report",
+      "ADD_IGNORED_CLIENTS" : "Skip Certain Clients",
+      "HIDE_IGNORED_CLIENTS" : "Skip Certain Clients",
       "CURRENT_MVT": "Current Movement",
       "PREVIOUS_MVT": "From Beginning To :",
       "DESCRIPTION": "This report displays all the debtor groups, their account balances at the beginning of the fiscal year, the current balances, and their ending balances."

diff --git a/client/src/i18n/fr/report.json b/client/src/i18n/fr/report.json
@@ -100,6 +100,8 @@
     "CLIENTS_REPORT" : {
       "TITLE" : "Rapport Clients",
       "CURRENT_MVT" : "Mouvement Courant",
+      "ADD_IGNORED_CLIENTS" : "Sauter Certains Clients",
+      "HIDE_IGNORED_CLIENTS" : "Sauter Certains Clients",
       "PREVIOUS_MVT" : "Du debut Au :",
       "DESCRIPTION" : "Ce rapport affiche tous les groupes de debiteurs, leurs situations precedent l'annee en cours, leurs situations de l'annee en cours ainsi que la balance finale"
     },

diff --git a/client/src/js/components/bhHiddenField.js b/client/src/js/components/bhHiddenField.js
@@ -0,0 +1,42 @@
+/**
+ * @overview bhHiddenField
+ *
+ * @description
+ * This component allows a programmer to optionally hide a field in a form at
+ * startup that may toggled open by the user if they need it.
+ */
+
+var template =
+ '<p>' +
+   '<a ng-click="$ctrl.toggleVisibility()" bh-hidden-field-toggle href>' +
+      '<span ng-hide="$ctrl.visible"> + <span translate>{{ $ctrl.showText }}</span></span>' +
+      '<span ng-show="$ctrl.visible"> - <span translate>{{ $ctrl.hideText }}</span></span>' +
+   '</a>' +
+ '</p>' +
+ '<div ng-if="$ctrl.visible">' +
+  '<ng-transclude></ng-transclude>' +
+ '</div>';
+
+
+angular.module('bhima.components')
+  .component('bhHiddenField', {
+    template : template,
+    transclude : true,
+    controller : bhHiddenFieldController,
+    bindings : {
+      showText : '@',
+      hideText : '@',
+    },
+  });
+
+function bhHiddenFieldController() {
+  var $ctrl = this;
+
+  $ctrl.$onInit = function onInit() {
+    $ctrl.visible = false;
+  };
+
+  $ctrl.toggleVisibility = function toggleVisibility() {
+    $ctrl.visible = !$ctrl.visible;
+  };
+}
diff --git a/client/src/modules/reports/generate/clients_report/clients_report.html b/client/src/modules/reports/generate/clients_report/clients_report.html
@@ -46,11 +46,15 @@ <h3 class="text-capitalize" translate>REPORT.CLIENTS_REPORT.TITLE</h3>
             </div>
 
             <!-- Client to ignore  -->
-            <bh-multiple-debtor-group-select
-              label="FORM.LABELS.CLIENT_TO_IGNORE"
-              on-select-callback="ReportConfigCtrl.onDebtorGroupSelected(debtorGroups)"
-              on-remove-callback="ReportConfigCtrl.onDebtorGroupRemoved(debtorGroups)">
-            </bh-multiple-debtor-group-select>
+            <bh-hidden-field
+              show-text="REPORT.CLIENTS_REPORT.ADD_IGNORED_CLIENTS"
+              hide-text="REPORT.CLIENTS_REPORT.HIDE_IGNORED_CLIENTS">
+              <bh-multiple-debtor-group-select
+                label="FORM.LABELS.CLIENT_TO_IGNORE"
+                on-select-callback="ReportConfigCtrl.onDebtorGroupSelected(debtorGroups)"
+                on-remove-callback="ReportConfigCtrl.onDebtorGroupRemoved(debtorGroups)">
+              </bh-multiple-debtor-group-select>
+            </bh-hidden-field>
 
             <bh-loading-button loading-state="ConfigForm.$loading">
               <span translate>REPORT.UTIL.PREVIEW</span>

diff --git a/server/controllers/finance/reports/clientsReport/report_complex.handlebars b/server/controllers/finance/reports/clientsReport/report_complex.handlebars
@@ -51,6 +51,8 @@
               <td class='text-right'> {{currency this.currentBalance ../enterprise.currency_id}} </td>
               <td class='text-right'> {{currency this.finalBalance ../enterprise.currency_id}} </td>
             </tr>
+          {{else}}
+            {{>emptyTable columns=7}}
           {{/each}}
         </tbody>
         <tfoot>

diff --git a/test/end-to-end/reports/clients_report/clients_report.page.js b/test/end-to-end/reports/clients_report/clients_report.page.js
@@ -19,7 +19,7 @@ class ClientsReportPage {
     components.dateInterval.range(start_date, end_date);
     if (clients) {
       components.multipleDebtorGroupSelect.set(clients);
-    }    
+    }
     this.page.preview();
   }