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

@@ -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",

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');
       }
     }
   });

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)"
     >

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>