Add page loader on Local user management page

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ibb681f72bed33a6ca70d8e526668a2ab154111b4
diff --git a/src/store/modules/AccessControl/LocalUserMangementStore.js b/src/store/modules/AccessControl/LocalUserMangementStore.js
index 161ba1f..b9b67ea 100644
--- a/src/store/modules/AccessControl/LocalUserMangementStore.js
+++ b/src/store/modules/AccessControl/LocalUserMangementStore.js
@@ -67,8 +67,8 @@
     }
   },
   actions: {
-    getUsers({ commit }) {
-      api
+    async getUsers({ commit }) {
+      return await api
         .get('/redfish/v1/AccountService/Accounts')
         .then(response => response.data.Members.map(user => user['@odata.id']))
         .then(userIds => api.all(userIds.map(user => api.get(user))))
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 46a02c1..4ae9bb4 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -98,10 +98,11 @@
 import PageTitle from '../../../components/Global/PageTitle';
 import TableRoles from './TableRoles';
 import TableToolbar from '../../../components/Global/TableToolbar';
+import TableRowAction from '../../../components/Global/TableRowAction';
 
 import BVTableSelectableMixin from '../../../components/Mixins/BVTableSelectableMixin';
 import BVToastMixin from '../../../components/Mixins/BVToastMixin';
-import TableRowAction from '../../../components/Global/TableRowAction';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
   name: 'LocalUsers',
@@ -118,7 +119,7 @@
     TableRowAction,
     TableToolbar
   },
-  mixins: [BVTableSelectableMixin, BVToastMixin],
+  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
   data() {
     return {
       activeUser: null,
@@ -199,10 +200,15 @@
     }
   },
   created() {
-    this.$store.dispatch('localUsers/getUsers');
+    this.startLoader();
+    this.$store.dispatch('localUsers/getUsers').finally(() => this.endLoader());
     this.$store.dispatch('localUsers/getAccountSettings');
     this.$store.dispatch('localUsers/getAccountRoles');
   },
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   methods: {
     initModalUser(user) {
       this.activeUser = user;
@@ -229,25 +235,31 @@
       this.$bvModal.show('modal-settings');
     },
     saveUser({ isNewUser, userData }) {
+      this.startLoader();
       if (isNewUser) {
         this.$store
           .dispatch('localUsers/createUser', userData)
           .then(success => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message));
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
       } else {
         this.$store
           .dispatch('localUsers/updateUser', userData)
           .then(success => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message));
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
       }
     },
     deleteUser({ username }) {
+      this.startLoader();
       this.$store
         .dispatch('localUsers/deleteUser', username)
         .then(success => this.successToast(success))
-        .catch(({ message }) => this.errorToast(message));
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
     },
     onBatchAction(action) {
+      this.startLoader();
       switch (action) {
         case 'delete':
           this.$store
@@ -257,7 +269,8 @@
                 if (type === 'success') this.successToast(message);
                 if (type === 'error') this.errorToast(message);
               });
-            });
+            })
+            .finally(() => this.endLoader());
           break;
         case 'enable':
           this.$store
@@ -267,7 +280,8 @@
                 if (type === 'success') this.successToast(message);
                 if (type === 'error') this.errorToast(message);
               });
-            });
+            })
+            .finally(() => this.endLoader());
           break;
         case 'disable':
           this.$store
@@ -277,10 +291,11 @@
                 if (type === 'success') this.successToast(message);
                 if (type === 'error') this.errorToast(message);
               });
-            });
+            })
+            .finally(() => this.endLoader());
           break;
         default:
-          break;
+          this.endLoader();
       }
     },
     onTableRowAction(action, row) {
@@ -296,10 +311,12 @@
       }
     },
     saveAccountSettings(settings) {
+      this.startLoader();
       this.$store
         .dispatch('localUsers/saveAccountSettings', settings)
         .then(message => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
     }
   }
 };