forked from IMA-WorldHealth/bhima
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: initial confirm modal implementation
This commit adds in a modal replacement for $window.confirm() for better security. See #150 for reference. The modal is available in the ModalService, which also contains some TODOs for later development. The service exposes a single method, `confirm()` that will resolve with a boolean value, depending on what the user click - "true" for accept and "false" for cancel.
- Loading branch information
Showing
6 changed files
with
132 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
angular.module('bhima.services') | ||
.service('ModalService', ModalService); | ||
|
||
ModalService.$inject = [ '$uibModal' ]; | ||
|
||
/** | ||
* Modal Service | ||
* | ||
* A service to house generic modals useful through out the application. These | ||
* will replace a lot of the native JavaScript alerts/confirms to allow easier | ||
* translation, testing, and functionality. | ||
* | ||
* @todo - build following methods/modals: | ||
* - alert() to show a generic alert with "dismiss" or "acknowledge" button. | ||
* It might be useful to have an associated icon and state (error, info, | ||
* warning, etc). | ||
* | ||
* - sudo() to bring up a modal requiring correct user password entry and set | ||
* the application state into super user mode (if appropriate) | ||
* | ||
* - confirmText() to bring up a "type this text to confirm" input that will | ||
* only allow a user to enter text and only enable the "confirm" button once | ||
* the text matches exactly what is anticipated. | ||
* | ||
*/ | ||
function ModalService(Modal) { | ||
var service = this; | ||
|
||
service.confirm = confirm; | ||
|
||
/** | ||
* Opens a "confirm delete" modal with a button for "Confirm" or "Cancel". | ||
* The modal is a safe replacement for $window.confirm(), since you cannot | ||
* disable javascript alerts from within it. | ||
* | ||
* @param {String} prompt - a translateable message to pass the template | ||
* @param {Object} options - optional object with properties to configure the | ||
* ui-bootstrap modal. | ||
* @returns {Promise} result - a promise resolved by the modal instance | ||
*/ | ||
function confirm(prompt, options) { | ||
|
||
// default options for modal rendering | ||
var opts = options || {}; | ||
|
||
var instance = Modal.open({ | ||
animation : opts.animation || false, | ||
keyboard : opts.keyboard || true, | ||
size : opts.size || 'md', | ||
controller : 'ConfirmModalController as ConfirmModalCtrl', | ||
resolve : { prompt : function provider() { return prompt;} }, | ||
templateUrl : '/partials/templates/modals/confirm.modal.html' | ||
}); | ||
|
||
return instance.result; | ||
} | ||
|
||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<div class="modal-header"> | ||
<h4>{{ "MODALS.CONFIRM.TITLE" | translate }}</h4> | ||
</div> | ||
|
||
<div class="modal-body"> | ||
<p class="text-left"> | ||
<span class="glyphicon glyphicon-info-sign text-primary"></span> | ||
{{ (ConfirmModalCtrl.prompt || 'MODALS.CONFIRM.PROMPT') | translate }} | ||
</p> | ||
</div> | ||
|
||
<div class="modal-footer"> | ||
<button type="button" class="btn btn-primary" ng-click="ConfirmModalCtrl.close(true)"> | ||
{{ "MODALS.CONFIRM.ACCEPT" | translate }} | ||
</button> | ||
<button type="button" class="btn btn-default" ng-click="ConfirmModalCtrl.close(false)"> | ||
{{ "FORM.CANCEL" | translate }} | ||
</button> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
angular.module('bhima.controllers') | ||
.controller('ConfirmModalController', ConfirmModalController); | ||
|
||
ConfirmModalController.$inject = ['$uibModalInstance', 'prompt']; | ||
|
||
/** | ||
* Confirm Modal Controller | ||
* | ||
* This controller provides bindings for the confirm modal. | ||
*/ | ||
function ConfirmModalController(Instance, prompt) { | ||
var vm = this; | ||
|
||
/** | ||
* bind the prompt to the view, if provided | ||
* @todo - should this be done automatically with controllerAs? | ||
*/ | ||
vm.prompt = prompt; | ||
|
||
// bind modal controls | ||
vm.close = Instance.close; | ||
} |