Add toast component interactions
Include boostrap toast component to communicate success
and error requests on the local user management page.
- Created BVToastMixin to share initialization options
- Used async/await pattern to make sure toasts are shown
after asynchronous calls are complete
- Followed current AngularJS pattern of manual dismiss for
error toast and automatic dismiss for success toast
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5d5c037b5f41781972106fb5e9a2096cc72c39ab
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 0ca3428..e71387d 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -67,6 +67,7 @@
import ModalUser from './ModalUser';
import ModalSettings from './ModalSettings';
import PageTitle from '../../../components/Global/PageTitle';
+import BVToastMixin from '../../../components/Mixins/BVToastMixin';
export default {
name: 'LocalUsers',
@@ -81,6 +82,7 @@
TableRoles,
PageTitle
},
+ mixins: [BVToastMixin],
data() {
return {
activeUser: null,
@@ -156,13 +158,22 @@
},
saveUser({ isNewUser, userData }) {
if (isNewUser) {
- this.$store.dispatch('localUsers/createUser', userData);
+ this.$store
+ .dispatch('localUsers/createUser', userData)
+ .then(success => this.successToast(success))
+ .catch(({ message }) => this.errorToast(message));
} else {
- this.$store.dispatch('localUsers/updateUser', userData);
+ this.$store
+ .dispatch('localUsers/updateUser', userData)
+ .then(success => this.successToast(success))
+ .catch(({ message }) => this.errorToast(message));
}
},
deleteUser({ username }) {
- this.$store.dispatch('localUsers/deleteUser', username);
+ this.$store
+ .dispatch('localUsers/deleteUser', username)
+ .then(success => this.successToast(success))
+ .catch(({ message }) => this.errorToast(message));
}
}
};