Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a "Type Text to Confirm Delete" modal #150

Closed
jniles opened this issue Mar 1, 2016 · 2 comments · Fixed by #591
Closed

Create a "Type Text to Confirm Delete" modal #150

jniles opened this issue Mar 1, 2016 · 2 comments · Fixed by #591
Assignees

Comments

@jniles
Copy link
Collaborator

jniles commented Mar 1, 2016

One several pages, we allow uses to delete cashboxes, projects, enterprises, or others. Currently, we create a $window.confirm() instance such as the one shown below

$window.confirm()

window confirm

There are a few small problems with this:

  1. After some number of alerts, the user can click the checkbox "prevent this window from making any more dialogs", disabling some functionality in the application.
  2. A click-to-confirm is better than no click at all. However, for processes that have huge implications, we might want more security -- typing in the name of the cashbox/project/entity would ensure the use knew exactly which entity they were removing.
  3. From a developer perspective, this isn't a great solution:
    1. A developer has no control over the style of the $window.confirm() window.
    2. A developer must manually translate the text using the $translate filter in the controller before display
    3. The dialog blocks the view without the choice of making a "click somewhere else to close".
    4. The user can disabled this feature by accident.
  4. From a user perspective, this isn't a great solution:
    1. $window.confirm() windows look very different from the application, potentially leading to confusion.
    2. The text size and font is independent of the application's size and font, making this choice less accessible.
    3. The user could disabled this feature without realizing it by simply clicking a checkbox. It is unclear how to re-enable the delete process without shutting down the browser and restarting.

I propose that we create a confirm modal similar to Github's. See below:

Confirm Modal

confirmmodal

This could be imported into any module and used similar to how we use $window.confirm(), except with promises. For example:

angular.module('bhima.controllers')
.controller('ExampleController', ExampleCtrl);

ExampleCtrl.$inject = [ 'ConfirmModalService' ];

/**
 * Modal.open() looks like this:
 *  service.open = function openModal(match) { 
 *  var instance = $uibModal.open({
 *     controller : 'ConfirmModalController as ConfirmModalCtrl',
 *    templateUrl : 'path/to/the/template.tmpl.html',
 *    resolve : { match : function () { return match; } }
 *    size : 'md'
 *  });
 *  return instance.result;
 * };
 */

function ExampleCtrl(Modal) {
  vm.confirm = function confirm() {
    Modal.open(vm.textToMatch)
    .then(function () {
      // the user typed and clicked "confirm action"!
    })
    .catch(function () {
      // the user canceled the action.
    });
  }
}
jniles referenced this issue in jniles/bhima Mar 27, 2016
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.
jniles referenced this issue in jniles/bhima Mar 29, 2016
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.
jniles referenced this issue in jniles/bhima Mar 29, 2016
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.
jniles referenced this issue in jniles/bhima Mar 29, 2016
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.
jniles referenced this issue in jniles/bhima Mar 31, 2016
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.
@jniles
Copy link
Collaborator Author

jniles commented Jul 13, 2016

@mbayopanda Can you work on this while waiting for a review on #575?

Let me know if you need clarification. This modal will be useful when we begin working on the posting journal trial balances and editing records inline.

@jniles jniles assigned jniles and mbayopanda and unassigned jniles Jul 13, 2016
@mbayopanda
Copy link
Contributor

@jniles no problemo... i'm working on it...

mbayopanda referenced this issue in mbayopanda/bhima Jul 19, 2016
Add warning message when no concordency between pattern and the given value

Fix confirm deletion modal

Fix error message
jniles pushed a commit that referenced this issue Jul 20, 2016
* Fix #150 issue about type text to confirm deletion

Add warning message when no concordency between pattern and the given value

Fix confirm deletion modal

Fix error message

* Fixing and Enhancement of code
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants