Skip to content

Commit

Permalink
feat(location-modal): add cached view
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@jniles
jniles committed Feb 26, 2016
1 parent 432a97e commit 92e5d81
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 44 deletions.
47 changes: 14 additions & 33 deletions client/src/partials/templates/modals/location.modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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">
Expand Down
73 changes: 62 additions & 11 deletions client/src/partials/templates/modals/location.modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ angular.module('bhima.controllers')
.controller('LocationModalController', LocationModalController);

LocationModalController.$inject = [
'LocationService', '$uibModalInstance'
'LocationService', '$uibModalInstance', 'appcache'
];

/**
Expand All @@ -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)
Expand All @@ -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. */
Expand All @@ -64,7 +117,5 @@ function LocationModalController(Locations, Instance) {
// reject an invalid form
if (invalid) { return; }



}
}

0 comments on commit 92e5d81

Please sign in to comment.