From 9caa027b251819f9a0961e8c360d69af75a4f26c Mon Sep 17 00:00:00 2001
From: Jonathan Niles <jniles@users.noreply.github.com>
Date: Tue, 28 Jun 2016 12:29:59 +0100
Subject: [PATCH] fix(filters): ensure that filter clear is visible (#540)

This commit ensures that the bhFilterBar never covers the "clear all
filters" button to ensure that the end to end test never fail and the
user is always able to click the button.

Unfortunately, this also makes it so that `flex-content` overflows
vertically on the grid, which is not the best user experience.  We
should investigate this CSS issue soon to make sure that the UX is still
preserved.
---
 client/src/i18n/en.json                       |  3 +-
 client/src/js/app.js                          | 20 ++++++-------
 .../partials/patients/registry/registry.html  |  3 +-
 .../templates/bhFiltersApplied.tmpl.html      | 29 ++++++++++++-------
 4 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
index 475b5931c8..2fb7732425 100644
--- a/client/src/i18n/en.json
+++ b/client/src/i18n/en.json
@@ -379,8 +379,9 @@
       "GROUPS_PATIENT_TITLE"   : "Patients Groups",
       "HOME_PAGE"              : "Default Home Page",
       "HOSPITAL_FILE_NR"       : "Hospital File Number",
+      "HOSPITAL_NO"            : "Hospital No.",
       "ID"                     : "ID",
-      "INTL"                   : "Internationale",
+      "INTL"                   : "International",
       "INVENTORY"              : "Inventory",
       "INVOICE"                : "Invoice Payment",
       "INVOICES_DETAILS"       : "Invoices Details",
diff --git a/client/src/js/app.js b/client/src/js/app.js
index 883dd390a5..ccde765b83 100644
--- a/client/src/js/app.js
+++ b/client/src/js/app.js
@@ -263,14 +263,14 @@ function bhimaConfig($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvi
       data : { label : null }
     })
 
-  
+
   /* Fiscal Year */
   .state('fiscal', {
     url : '/fiscal/:id',
     abstract : true,
     params : {
       id : { squash : true, value : null }
-    },    
+    },
     controller: 'FiscalController as FiscalCtrl',
     templateUrl: 'partials/fiscal/fiscal.html'
   })
@@ -448,7 +448,7 @@ function bhimaConfig($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvi
     url : '/error404',
     templateUrl : 'partials/error404/error404.html'
   });
-  
+
   $urlRouterProvider.otherwise('error404');}
 
 function translateConfig($translateProvider) {
@@ -477,7 +477,7 @@ function startupConfig($rootScope, $state, SessionService, amMoment, Notify, $lo
   // navigating by URL.  This is pure an authentication issue.
   $rootScope.$on('$locationChangeStart', function (event, next) {
     var isLoggedIn = !!SessionService.user;
-    var isLoginState = next.indexOf('#/login') !== -1;   
+    var isLoginState = next.indexOf('#/login') !== -1;
 
     if (next.indexOf('/error403') !== -1) {
       $state.go('/error403');
@@ -507,12 +507,12 @@ function startupConfig($rootScope, $state, SessionService, amMoment, Notify, $lo
   // trigger a $state.go() to the login state, it will not be stopped - the
   // $locationChangeStart event will only prevent the URL from changing ... not
   // the actual state transition!  So, we need this to stop $stateChange events.
-  
+
   // var paths recovered all the path that the user is allowed to enter
-  // Tests if the path has elements and other common paths are not called 
-  // if the test is positive, the current path is verified in the path list 
+  // Tests if the path has elements and other common paths are not called
+  // if the test is positive, the current path is verified in the path list
   // if the current path does not exist in the path list in this case the user will rédirrigé to error403 page
-  
+
   $rootScope.$on('$stateChangeStart', function (event, next) {
     var isLoggedIn = !!SessionService.user;
     var isLoginState = next.name.indexOf('login') !== -1;
@@ -530,8 +530,8 @@ function startupConfig($rootScope, $state, SessionService, amMoment, Notify, $lo
         return currentPath.indexOf(data.path) === 0;
       });
 
-      if(!authorized){
-        $location.path('/error403');        
+      if (!authorized) {
+        $location.path('/error403');
       }
     }
   });
diff --git a/client/src/partials/patients/registry/registry.html b/client/src/partials/patients/registry/registry.html
index cd1014e355..87565b6af7 100644
--- a/client/src/partials/patients/registry/registry.html
+++ b/client/src/partials/patients/registry/registry.html
@@ -27,8 +27,9 @@
 </div>
 
 <!-- @todo remove hardcoded styles -->
-<div class="flex-util" style="min-height : 35px; padding-top : 7px">
+<div class="flex-util" style="min-height : 35px; padding-top : 7px; max-height: initial">
   <bh-filters-applied
+    style="max-width:90%"
     filters="PatientRegistryCtrl.filtersFmt"
     on-remove-filter="PatientRegistryCtrl.onRemoveFilter(filter)"
     >
diff --git a/client/src/partials/templates/bhFiltersApplied.tmpl.html b/client/src/partials/templates/bhFiltersApplied.tmpl.html
index 1a788a0b40..42a6437d0f 100644
--- a/client/src/partials/templates/bhFiltersApplied.tmpl.html
+++ b/client/src/partials/templates/bhFiltersApplied.tmpl.html
@@ -2,16 +2,23 @@
   <i class="fa fa-filter"></i> {{ "FORM.INFOS.NO_FILTERS_APPLIED" | translate }}
 </div>
 
-<div ng-if="$ctrl.filters" data-bh-filter-bar>
+<ul ng-if="$ctrl.filters" class="list-inline" data-bh-filter-bar>
 
-  <!-- TODO: these should be a custom CSS class.  Label is just too small! -->
-  <span class="label label-primary" ng-repeat="filter in $ctrl.filters" style="margin-right: 5px;">
-    <i class="fa fa-filter"></i>
-    {{ filter.displayName | translate }}{{ filter.comparitor ? " " + filter.comparitor : ":" }}
-    {{ filter.viewValue }}
+  <li ng-repeat="filter in $ctrl.filters">
+    <!--
+      TODO: these should be a custom CSS class.  Label is just too small!
+    -->
+    <span class="label label-primary">
+      <i class="fa fa-filter"></i>
+      {{ filter.displayName | translate }}
+      {{ filter.comparitor ? " " + filter.comparitor : ":" }}
+      {{ filter.viewValue }}
 
-    <a href ng-click="$ctrl.onRemoveFilter({ filter : filter.field })" style="color:#fff; margin-left:5px;">
-      <i class="fa fa-close"></i>
-    </a>
-  </span>
-</div>
+      <a href ng-click="$ctrl.onRemoveFilter({ filter : filter.field })"
+        style="color:#fff; margin-left:5px;">
+        <i class="fa fa-close"></i>
+      </a>
+    </span>
+  </li>
+
+</ul>