From 92e5d811a6bd6706465dcf85828d253e06a44138 Mon Sep 17 00:00:00 2001
From: Jonathan Niles <jonathanwniles@gmail.com>
Date: Tue, 23 Feb 2016 16:39:04 +0100
Subject: [PATCH] feat(location-modal): add cached view

This commit improve the location modal by allowing the current view to
be stored in appcache.  It also cleans up the HTML considerably by
employing suggestions made by @sfount.
---
 .../templates/modals/location.modal.html      | 47 ++++--------
 .../templates/modals/location.modal.js        | 73 ++++++++++++++++---
 2 files changed, 76 insertions(+), 44 deletions(-)

diff --git a/client/src/partials/templates/modals/location.modal.html b/client/src/partials/templates/modals/location.modal.html
index a3ec7891b4..fc45f3128f 100644
--- a/client/src/partials/templates/modals/location.modal.html
+++ b/client/src/partials/templates/modals/location.modal.html
@@ -9,32 +9,13 @@ <h4>{{ "MODALS.ADD_LOCATION" | translate }}</h4>
     <div class="row text-center">
       <div class="btn-group">
         <button
+          ng-repeat="(key, view) in LocationModalCtrl.views track by $index"
           type="button"
           class="btn btn-default"
-          ng-click="LocationModalCtrl.state(0)"
-          ng-class="{ 'active' : LocationModalCtrl.visibility === 0 }">
-          {{ "LOCATION.COUNTRY" | translate }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-default"
-          ng-click="LocationModalCtrl.state(1)"
-          ng-class="{ 'active' : LocationModalCtrl.visibility === 1 }">
-          {{ "LOCATION.PROVINCE" | translate }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-default"
-          ng-click="LocationModalCtrl.state(2)"
-          ng-class="{ 'active' : LocationModalCtrl.visibility === 2 }">
-          {{ "LOCATION.SECTOR" | translate }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-default"
-          ng-click="LocationModalCtrl.state(3)"
-          ng-class="{ 'active' : LocationModalCtrl.visibility === 3 }">
-          {{ "LOCATION.VILLAGE" | translate }}
+          ng-class="{ 'active' : LocationModalCtrl.view.index === view.index }"
+          ng-click="LocationModalCtrl.setView(view.cacheKey)"
+          >
+          {{ view.translateKey | translate }}
         </button>
       </div>
     </div>
@@ -46,7 +27,7 @@ <h4>{{ "MODALS.ADD_LOCATION" | translate }}</h4>
         {{ "LOCATION.COUNTRY" | translate }}
       </label>
       <select
-        ng-if="LocationModalCtrl.visibility > 0"
+        ng-if="LocationModalCtrl.view.index > 1"
         class="form-control"
         name="country"
         ng-model="LocationModalCtrl.country"
@@ -56,7 +37,7 @@ <h4>{{ "MODALS.ADD_LOCATION" | translate }}</h4>
         <option value="" disabled>{{ "SELECT.COUNTRY" | translate }}</option>
       </select>
       <input
-        ng-if="LocationModalCtrl.visibility === 0"
+        ng-if="LocationModalCtrl.view.index === 1"
         class="form-control"
         name="country"
         ng-model="LocationModalCtrl.country"
@@ -66,13 +47,13 @@ <h4>{{ "MODALS.ADD_LOCATION" | translate }}</h4>
 
     <div class="form-group"
       ng-class="{ 'has-error' : LocationModalForm.$submitted && LocationModalForm.province.$error }"
-      ng-if="LocationModalCtrl.visibility > 0"
+      ng-if="LocationModalCtrl.view.index > 1"
       >
       <label class="control-label">
         {{ "LOCATION.PROVINCE" | translate }}
       </label>
       <select
-        ng-if="LocationModalCtrl.visibility > 1"
+        ng-if="LocationModalCtrl.view.index > 2"
         class="form-control"
         name="province"
         ng-model="LocationModalCtrl.province"
@@ -83,7 +64,7 @@ <h4>{{ "MODALS.ADD_LOCATION" | translate }}</h4>
       </select>
 
       <input
-        ng-if="LocationModalCtrl.visibility === 1"
+        ng-if="LocationModalCtrl.view.index === 2"
         class="form-control"
         name="province"
         ng-model="LocationModalCtrl.province"
@@ -92,14 +73,14 @@ <h4>{{ "MODALS.ADD_LOCATION" | translate }}</h4>
     </div>
 
     <div class="form-group"
-      ng-if="LocationModalCtrl.visibility > 1"
+      ng-if="LocationModalCtrl.view.index > 2"
       ng-class="{ 'has-error' : LocationModalForm.$submitted && LocationModalForm.sector.$error }"
       >
       <label class="control-label">
         {{ "LOCATION.SECTOR" | translate }}
       </label>
       <select
-        ng-if="LocationModalCtrl.visibility > 2"
+        ng-if="LocationModalCtrl.view.index > 3"
         class="form-control"
         name="sector"
         ng-model="LocationModalCtrl.sector"
@@ -108,7 +89,7 @@ <h4>{{ "MODALS.ADD_LOCATION" | translate }}</h4>
         <option value="" disabled>{{ "SELECT.SECTOR" | translate }}</option>
       </select>
       <input
-        ng-if="LocationModalCtrl.visibility === 2"
+        ng-if="LocationModalCtrl.view.index === 3"
         name="sector"
         class="form-control"
         ng-model="LocationModalCtrl.sector"
@@ -117,7 +98,7 @@ <h4>{{ "MODALS.ADD_LOCATION" | translate }}</h4>
     </div>
 
     <div class="form-group"
-      ng-if="LocationModalCtrl.visibility > 2"
+      ng-if="LocationModalCtrl.view.index > 3"
       ng-class="{ 'has-error' : LocationModalForm.$submitted && LocationModalForm.village.$error }"
       >
       <label class="control-label">
diff --git a/client/src/partials/templates/modals/location.modal.js b/client/src/partials/templates/modals/location.modal.js
index c9dc9241ee..94bedbf6ce 100644
--- a/client/src/partials/templates/modals/location.modal.js
+++ b/client/src/partials/templates/modals/location.modal.js
@@ -2,7 +2,7 @@ angular.module('bhima.controllers')
 .controller('LocationModalController', LocationModalController);
 
 LocationModalController.$inject = [
-  'LocationService', '$uibModalInstance'
+  'LocationService', '$uibModalInstance', 'appcache'
 ];
 
 /**
@@ -12,31 +12,76 @@ LocationModalController.$inject = [
  * locations on the fly.  The user is asked to choose from countires,
  * provinces, and sectors as needed to create a new location.
  */
-function LocationModalController(Locations, Instance) {
+function LocationModalController(Locations, Instance, AppCache) {
   var vm = this;
 
+  /** caches the current view */
+  var cache = new AppCache('bh-location-select-modal');
+
+  /**
+   * This is not the best way to do states, but for such a complex component,
+   * this seems to be the clearest way forward.  The view is cached in AppCache
+   * under the cacheKey.
+   *
+   * The onEnter() functions are run to clear dependent models, so the input
+   * doesn't have an [object Object] written in it.
+   *
+   * @const
+   */
+  vm.views = {
+    country : {
+      cacheKey : 'country',
+      translateKey : 'LOCATION.COUNTRY',
+      index : 1,
+      onEnter : function onEnter() { delete vm.country; }
+    },
+    province : {
+      cacheKey : 'province',
+      translateKey : 'LOCATION.PROVINCE',
+      index : 2,
+      onEnter : function onEnter() { delete vm.province; }
+    },
+    sector : {
+      cacheKey : 'sector',
+      translateKey : 'LOCATION.SECTOR',
+      index : 3,
+      onEnter : function onEnter() { delete vm.sector; }
+    },
+    village : {
+      cacheKey : 'village',
+      translateKey : 'LOCATION.VILLAGE',
+      index : 4,
+      onEnter : function onEnter() { delete vm.village; }
+    }
+  };
+
   /** bind indicators */
   vm.loading = false;
 
   /** cancels the create location modal */
   vm.dismiss = Instance.dismiss;
 
-  /** sets the modal location state */
-  vm.state = state;
-
-  /** default visibility */
-  vm.visibility = 0;
+  /** sets the modal location view/state */
+  vm.setView = setView;
 
   /** bind listener */
   vm.loadProvinces = loadProvinces;
   vm.loadSectors = loadSectors;
 
+  /** load previous/default view */
+  cache.fetch('view')
+  .then(function (key) {
+    key = key ||  vm.views.country.cacheKey;
+    setView(key);
+  });
+
   /** load countries on startup */
   Locations.countries()
   .then(function (countries) {
     vm.countries = countries;
   });
 
+
   /** loads provinces based on the selected country */
   function loadProvinces() {
     Locations.provinces(vm.countries.uuid)
@@ -54,8 +99,16 @@ function LocationModalController(Locations, Instance) {
   }
 
   /** show/hide different values */
-  function state(key) {
-    vm.visibility = key;
+  function setView(key) {
+
+    // cache the value for later
+    cache.put('view', key);
+
+    // set the current view to the selected one.
+    vm.view = vm.views[key];
+
+    // run the onEnter() function.
+    vm.view.onEnter();
   }
 
   /** creates a new location based on the selections made. */
@@ -64,7 +117,5 @@ function LocationModalController(Locations, Instance) {
     // reject an invalid form
     if (invalid)  { return; }
 
-
-
   }
 }