Create modal view configuration
Description
relates to
QAlity Plus - Test Management
Checklists
Activity
One more thing. AngularStrap modal doesn't support nested resolves and to add them you need to follow the pattern below. With modalStateService we're getting the default stateProvider resolve behavior as the whole boilerplate code is done by that service.
This
var dialog;
$stateProvider.state('openlmis.cce.inventory.add', {
url: '/add',
onEnter: onEnter,
onExit: onExit,
accessRights: [CCE_RIGHTS.CCE_INVENTORY_EDIT],
resolve: {
catalogItems: function(catalogItemService) {
return catalogItemService.search(false, true).then(function(response) {
return response.content;
});
},
types: function(catalogItems, catalogItemTypeFactory) {
return catalogItemTypeFactory.getTypes(catalogItems);
}
},
nonTrackable: true
});
onEnter.$inject = ['openlmisModalService', 'catalogItems', 'types'];
function onEnter(openlmisModalService, catalogItems, types) {
dialog = openlmisModalService.createDialog({
backdrop: 'static',
templateUrl: 'cce-add-inventory-item/add-inventory-item.html',
controller: 'AddInventoryItemController',
controllerAs: 'vm',
resolve: {
catalogItems: function() {
return catalogItems;
},
types: function() {
return types;
}
}
});
}
function onExit() {
if (dialog) {
dialog.hide();
dialog = undefined;
}
}
becomes this
modalStateProvider.state('openlmis.cce.inventory.add', {
url: '/add',
onEnter: onEnter,
onExit: onExit,
accessRights: [CCE_RIGHTS.CCE_INVENTORY_EDIT],
resolve: {
catalogItems: function(catalogItemService) {
return catalogItemService.search(false, true).then(function(response) {
return response.content;
});
},
types: function(catalogItems, catalogItemTypeFactory) {
return catalogItemTypeFactory.getTypes(catalogItems);
}
},
nonTrackable: true
});
Here's the example of the service usage
modalStateProvider.state('openlmis.administration.facilities.facility.add', {
controller: 'FacilityAddController',
controllerAs: 'vm',
resolve: {
facilityTypes: facilityTypesResolve,
geographicZones: geographicZonesResolve,
facilityOperators: facilityOperatorsResolve
},
parentResolves: ['facility'],
templateUrl: 'admin-facility-add/facility-add.html',
url: ''
});
vs without it
var dialog;
$stateProvider.state('openlmis.administration.facilities.facility.add', {
url: '',
onEnter: onEnter,
onExit: onExit
});
onEnter.$inject = ['openlmisModalService', 'facility'];
function onEnter(openlmisModalService, facility) {
dialog = openlmisModalService.createDialog({
templateUrl: 'admin-facility-add/facility-add.html',
controller: 'FacilityAddController',
controllerAs: 'vm',
resolve: {
facilityTypes: facilityTypesResolve,
geographicZones: geographicZonesResolve,
facilityOperators: facilityOperatorsResolve,
facility: function() {
return facility;
}
},
});
}
function onExit() {
if (dialog) {
dialog.hide();
dialog = undefined;
}
}
@Nick Reid The thing with parent resolves is that they are not supported by angularstrap, so to pass them to the modal you actually need to inject it in the onEnter method, which then uses it is the modal resolve. With my implementation you simply define the parent resolves you want to have injected into your controller without writing that boilerplate code. So, in a way, my implementation fixes that gap rather than breaks it. I was trying to inject the parent resolves into the controller without this property, but I couldn't get it done, because I didn't have parent state definitions there, you can't actually pull them from $stateProvider (sadly). Well not in an easy way at least.
Also I'm not sure what's the difference between calling a proper service and adding a 'layout' property to the state definition. We're still passing information about the markup with the route declaration. Wouldn't that be basically them but in a slightly different form?
@Nikodem Graczewski No worries, let's keep this ticket – and let's leave the existing implementation for now (as I don't really want to refactor working code that is DRY) – lets just not spread the implementation until later
Yes, I think adding a 'layout' property to the state definition is a solid and decoupled way to approach this
Parent resolves: Yes
@Nick Reid Unfortunately I don't think we'll be able to pull this ticket this Sprint.
By the route configuration approach you mean adding a 'layout' property to state definition and make it accept a 'modal' value?
About the broken functionality, do you mean the parent resolves?
Details
Details
Assignee
Reporter
Labels
Components
Priority
Time Assistant
Open Time Assistant
Time Assistant

There is a need to do many types of editing in a modal – and these modals should be URL addressiable and be configurable as if there were views.
@Nikodem Graczewski: This might be useful https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state
The modalStateService has been added here - https://github.com/OpenLMIS/openlmis-ui-components/commit/da4c5d43dbbbe4fed8bb37d72acb44e05b84b081
Acceptance Criteria
This ticket will establish the modal view pattern using UI-Router
Create secondary tickets for other views that need to be updated to use a modal