fix(prices): update client to 2.x standards

This commit fixes the price list client, giving it Notify for error handling and loading buttons. It also implements the client-side validation logic for price lists.
IMA-WorldHealth · Dec 3, 2016 · 1be0702 · 1be0702
1 parent bc8e7de
commit 1be0702
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 125 deletions.
diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
@@ -1029,7 +1029,10 @@
     "PRICE_LIST_ITEMS" : "Price list items",
     "TITLE"            : "Price List Management",
     "UNABLE_TO_DELETE" : "Price list cannot be deleted - it may currently be assigned to patient/ debtor groups",
-    "UPDATE"           : "Update a Price List"
+    "UPDATE"           : "Update a Price List",
+    "ERRORS" : {
+      "HAS_NEGATIVE_PRICE" : "You cannot assign a negative price to an item.  Please either assign a positive percentage, a negative percentage, or a positive value."
+    }
   },
   "PROJECT": {
     "ADDING_PROJECT"  : "Adding a new project",

diff --git a/client/src/i18n/fr.json b/client/src/i18n/fr.json
@@ -1056,7 +1056,10 @@
     "PRICE_LIST_ITEMS" : "Eléments de la liste des prix",
     "TITLE"            : "Liste des Prix",
     "UNABLE_TO_DELETE" : "La liste de prix ne peut être supprimer - car elle peut être courament assignée à un groupe de patient / groupes débiteurs",
-    "UPDATE"           : "Mettre à jour une liste de prix"
+    "UPDATE"           : "Mettre à jour une liste de prix",
+    "ERRORS" : {
+      "HAS_NEGATIVE_PRICE" : "Vous ne pouvez pas assigner une valeur negatif."
+    }
   },
   "PROJECT": {
     "ADDING_PROJECT"  : "Ajout nouveau projet",

diff --git a/client/src/partials/price_list/modal.html b/client/src/partials/price_list/modal.html
@@ -1,4 +1,4 @@
-<form  name="ModalForm" ng-submit="ModalCtrl.submit(ModalForm.$invalid)" bh-form-defaults novalidate>
+<form  name="ModalForm" bh-submit="ModalCtrl.submit(ModalForm.$invalid)" bh-form-defaults novalidate>
   <div class="modal-header">
     <h4>{{ 'PRICE_LIST.PRICE_LIST_ITEMS' | translate }}</h4>
   </div>
@@ -13,36 +13,52 @@ <h4>{{ 'PRICE_LIST.PRICE_LIST_ITEMS' | translate }}</h4>
       </div>
     </div>
 
-    <div class="form-group" ng-class="{ 'has-error' : ModalForm.$submitted && ModalForm.value.$invalid }">
+    <div class="form-group" ng-class="{ 'has-error' : ModalForm.$submitted && (ModalForm.value.$invalid || ModalCtrl.error) }">
       <label class="control-label">{{ 'FORM.LABELS.VALUE' | translate }}</label>
       <input type="number" class="form-control" name="value" ng-model="ModalCtrl.data.value" required>
       <div class="help-block" ng-messages="ModalForm.value.$error" ng-show="ModalForm.$submitted">
         <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
       </div>
     </div>
 
-    <div class="form-group" ng-class="{ 'has-error' : ModalForm.$submitted && ModalForm.is_percentage.$invalid }">
-      <label class="control-label">
-        <input type="checkbox"  name="is_percentage" id="is_percentage" ng-true-value="1" ng-false-value="0" ng-model="ModalCtrl.data.is_percentage">  {{ 'FORM.LABELS.IS_PERCENT' | translate }}
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" name="is_percentage" id="is_percentage" ng-true-value="1" ng-false-value="0" ng-model="ModalCtrl.data.is_percentage">  {{ 'FORM.LABELS.IS_PERCENT' | translate }}
       </label>
     </div>
 
     <div class="form-group" ng-class="{ 'has-error' : ModalForm.$submitted && ModalForm.inventory_uuid.$invalid }">
       <label class="control-label">{{ "FORM.LABELS.INVENTORY" | translate }}</label>
-      <select class="form-control" name="inventory_uuid" ng-model="ModalCtrl.data.inventory_uuid" id="inventory_uuid" ng-options="i.uuid as i.label for i in ModalCtrl.inventories | orderBy:'label'" required>
-        <option value="" disabled> -- {{ 'FORM.SELECT.INVENTORY' | translate }} -- </option>
-      </select>
+      <ui-select
+        name="inventory_uuid"
+        ng-model="ModalCtrl.data.inventory_uuid"
+        required>
+        <ui-select-match placeholder="{{ 'FORM.SELECT.INVENTORY' | translate }}">
+          <strong>{{$select.selected.code }}</strong> <span>{{$select.selected.label}}</span>
+        </ui-select-match>
+        <ui-select-choices
+          ui-select-focus-patch
+          repeat="inventory.uuid as inventory in ModalCtrl.inventories | filter:$select.search">
+          <strong ng-bind-html="inventory.code | highlight:$select.search"></strong>
+          <span ng-bind-html="inventory.label | highlight:$select.search"></span>
+        </ui-select-choices>
+      </ui-select>
       <div class="help-block" ng-messages="ModalForm.inventory_uuid.$error" ng-show="ModalForm.$submitted">
         <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
       </div>
     </div>
 
+    <span ng-if="ModalCtrl.error" class="text-danger">
+      <i class="fa fa-alert"></i> {{ ModalCtrl.error | translate }}
+    </span>
   </div>
 
   <div class="modal-footer">
-    <button class="btn btn-default" id="submit-price-list" type="submit" data-method="submit">
+    <bh-loading-button loading-state="ModalForm.$loading" id="submit-price-list">
       {{ "FORM.BUTTONS.ADD" | translate }}
+    </bh-loading-button>
+    <button type="button" class="btn btn-default" ng-click="ModalCtrl.cancel()">
+      {{ "FORM.BUTTONS.CANCEL" | translate }}
     </button>
-    <button type="button" class="btn btn-default" ng-click="ModalCtrl.cancel()">{{ "FORM.BUTTONS.CANCEL" | translate }}</button>
   </div>
 </form>
diff --git a/client/src/partials/price_list/modal.js b/client/src/partials/price_list/modal.js
@@ -2,23 +2,24 @@ angular.module('bhima.controllers')
 .controller('PriceListModalController', PriceListModalController);
 
 PriceListModalController.$inject = [
-  '$uibModalInstance', 'InventoryService', 'util'
+  '$uibModalInstance', 'InventoryService', 'util', 'NotifyService'
 ];
 
-function PriceListModalController( $uibModalInstance, Inventory, util) {
+function PriceListModalController( $uibModalInstance, Inventory, util, Notify) {
   var vm = this;
 
   // bind variables
-
   vm.submit = submit;
   vm.cancel = cancel;
   vm.action = null;
+  vm.isValidItem = isValidItem;
 
-  // load Inventory 
-  Inventory.getInventoryItems()
-  .then(function (data) {
-    vm.inventories = data;
-  }).catch(handler);
+  // load Inventory
+  Inventory.read()
+    .then(function (inventory) {
+      vm.inventories = inventory;
+    })
+    .catch(Notify.handleError);
 
   // bind methods
   vm.submit = submit;
@@ -27,17 +28,29 @@ function PriceListModalController( $uibModalInstance, Inventory, util) {
 
   vm.data = { is_percentage : 0 };
 
-  function handler(error) {
-    throw error;
+  function isValidItem() {
+    var hasNegativePrice = (!vm.data.is_percentage && vm.data.value < 0);
+
+    if (hasNegativePrice) {
+      vm.error = 'PRICE_LIST.ERRORS.HAS_NEGATIVE_PRICE';
+      Notify.danger(vm.error);
+    }
+
+    return !hasNegativePrice;
   }
 
   function submit(invalid) {
     if (invalid) { return; }
+
+    // make sure that there are no negative prices
+    if (!isValidItem()) {
+      return;
+    }
+
     return $uibModalInstance.close(vm.data);
   }
 
   function cancel() {
     $uibModalInstance.dismiss();
   }
-
 }
diff --git a/client/src/partials/price_list/pricelist.css b/client/src/partials/price_list/pricelist.css
diff --git a/client/src/partials/price_list/pricelist.html b/client/src/partials/price_list/pricelist.html
@@ -2,14 +2,14 @@
   <div class="bhima-title">
     <ol class="headercrumb">
       <li class="static">{{ "TREE.ADMIN" | translate }}</li>
-      <li class="active">{{ "PRICE_LIST.TITLE" | translate }}</li>
+      <li class="title">{{ "PRICE_LIST.TITLE" | translate }}</li>
     </ol>
   </div>
 </div>
 
 <div class="flex-util">
   <button class="btn btn-sm btn-default" id="create" ng-click="PriceListCtrl.create()" data-method="create">
-    <span class="glyphicon glyphicon-plus-sign"></span> {{ "PRICE_LIST.NEW_PRICE_LIST" | translate }}
+    <span class="fa fa-plus"></span> {{ "PRICE_LIST.NEW_PRICE_LIST" | translate }}
   </button>
 </div>
 
@@ -19,7 +19,7 @@
     <div class="row">
 
       <div class="col-xs-6">
-        <div class="panel panel-default" style="overflow: auto; max-height: 500px;">
+        <div class="panel panel-default" style="overflow: auto; max-height: 80vh;">
           <div class="panel-heading">
             {{ "TABLE.COLUMNS.LISTS" | translate }}
           </div>
@@ -60,34 +60,10 @@ <h4>{{ "PRICE_LIST.TITLE" | translate }}</h4>
           </div>
         </div>
 
-        <div ng-switch-when="create_success">
-          <div class="alert alert-success" id="create_success">
-            <h4>{{ 'FORM.INFO.SAVE_SUCCESS' | translate }} </h4>
-          </div>
-        </div>
-
-        <div ng-switch-when="update_success">
-          <div class="alert alert-success" id="update_success">
-            <h4>{{ 'FORM.INFO.UPDATE_SUCCESS' | translate }} </h4>
-          </div>
-        </div>
-
-        <div ng-switch-when="delete_success">
-          <div class="alert alert-success" id="delete_success">
-            <h4>{{ 'FORM.INFO.DELETE_SUCCESS' | translate }} </h4>
-          </div>
-        </div>
-
-        <div ng-switch-when="delete_error">
-          <div class="alert alert-danger" id="delete_error">
-            <h4>{{ PriceListCtrl.HTTPError.data.code | translate }} </h4>
-          </div>
-        </div>
-
         <div class="panel panel-primary" ng-switch-when="create">
           <div class="panel-heading">{{ "PRICE_LIST.ADD_PRICE_LIST" | translate }}</div>
           <div class="panel-body">
-            <form name="CreateForm" ng-submit="PriceListCtrl.submit(CreateForm.$invalid)" bh-form-defaults novalidate>
+            <form name="CreateForm" bh-submit="PriceListCtrl.submit(CreateForm.$invalid)" bh-form-defaults novalidate>
 
               <div class="form-group" ng-class="{ 'has-error' : CreateForm.$submitted && CreateForm.label.$invalid }">
                 <label class="control-label">{{ 'FORM.LABELS.DESIGNATION' | translate }}</label>
@@ -135,9 +111,9 @@ <h4>{{ PriceListCtrl.HTTPError.data.code | translate }} </h4>
               <hr>
 
               <div class="form-group">
-                <button class="btn btn-default" id="submit-priceList" type="submit" data-method="submit">
+                <bh-loading-button loading-state="CreateForm.$loading" id="submit-priceList">
                   {{ "FORM.BUTTONS.SAVE" | translate }}
-                </button>
+                </bh-loading-button>
                 <button class="btn btn-default" type="button" ng-click="PriceListCtrl.cancel()" data-method="cancel">
                   {{ "FORM.BUTTONS.RESET" | translate }}
                 </button>
@@ -149,7 +125,7 @@ <h4>{{ PriceListCtrl.HTTPError.data.code | translate }} </h4>
         <div class="panel panel-primary" ng-switch-when="update">
           <div class="panel-heading">{{ 'PRICE_LIST.UPDATE' | translate }}</div>
           <div class="panel-body">
-            <form name="UpdateForm" ng-submit="PriceListCtrl.submit(UpdateForm.$invalid)" bh-form-defaults novalidate>
+            <form name="UpdateForm" bh-submit="PriceListCtrl.submit(UpdateForm.$invalid)" bh-form-defaults novalidate>
 
               <div class="form-group" ng-class="{ 'has-error' : UpdateForm.$submitted && UpdateForm.label.$invalid }">
                 <label class="control-label">{{ 'FORM.LABELS.DESIGNATION' | translate }}</label>
@@ -197,9 +173,9 @@ <h4>{{ PriceListCtrl.HTTPError.data.code | translate }} </h4>
               <hr>
 
               <div class="form-group">
-                <button class="btn btn-default" id="change_priceList" type="submit" data-method="submit">
+                <bh-loading-button loading-state="UpdateForm.$loading" id="change_priceList" >
                   {{ "FORM.BUTTONS.SAVE" | translate }}
-                </button>
+                </bh-loading-button>
                 <button class="btn btn-default" type="button" ng-click="PriceListCtrl.cancel()" data-method="cancel">
                   {{ "FORM.BUTTONS.RESET" | translate }}
                 </button>