Add loading bar to LDAP page

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I19f34986e05298a42f1739632a5786d03371e47c

3 files changed, 29 insertions, 11 deletions

diff --git a/src/store/modules/AccessControl/LdapStore.js b/src/store/modules/AccessControl/LdapStore.js
index 7b5d853d..780de38e 100644
--- a/src/store/modules/AccessControl/LdapStore.js
+++ b/src/store/modules/AccessControl/LdapStore.js
@@ -80,8 +80,8 @@ const LdapStore = {
     }
   },
   actions: {
-    getAccountSettings({ commit }) {
-      api
+    async getAccountSettings({ commit }) {
+      return await api
         .get('/redfish/v1/AccountService')
         .then(({ data: { LDAP = {}, ActiveDirectory = {} } }) => {
           const ldapEnabled = LDAP.ServiceEnabled;
diff --git a/src/views/AccessControl/Ldap/Ldap.vue b/src/views/AccessControl/Ldap/Ldap.vue
index 3ae4784f..fee697ba 100644
--- a/src/views/AccessControl/Ldap/Ldap.vue
+++ b/src/views/AccessControl/Ldap/Ldap.vue
@@ -216,8 +216,9 @@ import { mapGetters } from 'vuex';
 import { find } from 'lodash';
 import { requiredIf } from 'vuelidate/lib/validators';
 
-import BVToastMixin from '@/components/Mixins/BVToastMixin.js';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import InfoTooltip from '@/components/Global/InfoTooltip';
@@ -233,7 +234,7 @@ export default {
     PageSection,
     TableRoleGroups
   },
-  mixins: [BVToastMixin, VuelidateMixin],
+  mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
   data() {
     return {
       form: {
@@ -322,10 +323,17 @@ export default {
     }
   },
   created() {
-    this.$store.dispatch('ldap/getAccountSettings');
+    this.startLoader();
+    this.$store
+      .dispatch('ldap/getAccountSettings')
+      .finally(() => this.endLoader());
     this.$store.dispatch('sslCertificates/getCertificates');
     this.setFormValues();
   },
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   methods: {
     setFormValues(serviceType) {
       if (!serviceType) {
@@ -366,6 +374,7 @@ export default {
         userIdAttribute: this.form.userIdAttribute,
         groupIdAttribute: this.form.groupIdAttribute
       };
+      this.startLoader();
       this.$store
         .dispatch('ldap/saveAccountSettings', data)
         .then(success => {
@@ -375,6 +384,7 @@ export default {
         .catch(({ message }) => this.errorToast(message))
         .finally(() => {
           this.form.bindPassword = '';
+          this.endLoader();
         });
     },
     onChangeServiceType(isActiveDirectoryEnabled) {
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue
index a851a033..63b73a2e 100644
--- a/src/views/AccessControl/Ldap/TableRoleGroups.vue
+++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue
@@ -94,6 +94,7 @@ import TableRowAction from '@/components/Global/TableRowAction';
 import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import ModalAddRoleGroup from './ModalAddRoleGroup';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
   components: {
@@ -105,7 +106,7 @@ export default {
     TableRowAction,
     TableToolbar
   },
-  mixins: [BVTableSelectableMixin, BVToastMixin],
+  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
   data() {
     return {
       activeRoleGroup: null,
@@ -180,12 +181,14 @@ export default {
         )
         .then(deleteConfirmed => {
           if (deleteConfirmed) {
+            this.startLoader();
             this.$store
               .dispatch('ldap/deleteRoleGroup', {
                 roleGroups: this.selectedRows
               })
               .then(success => this.successToast(success))
-              .catch(({ message }) => this.errorToast(message));
+              .catch(({ message }) => this.errorToast(message))
+              .finally(() => this.endLoader());
           }
         });
     },
@@ -207,10 +210,12 @@ export default {
             )
             .then(deleteConfirmed => {
               if (deleteConfirmed) {
+                this.startLoader();
                 this.$store
                   .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] })
                   .then(success => this.successToast(success))
-                  .catch(({ message }) => this.errorToast(message));
+                  .catch(({ message }) => this.errorToast(message))
+                  .finally(() => this.endLoader());
               }
             });
           break;
@@ -223,16 +228,19 @@ export default {
     saveRoleGroup({ addNew, groupName, groupPrivilege }) {
       this.activeRoleGroup = null;
       const data = { groupName, groupPrivilege };
+      this.startLoader();
       if (addNew) {
         this.$store
           .dispatch('ldap/addNewRoleGroup', data)
           .then(success => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message));
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
       } else {
         this.$store
           .dispatch('ldap/saveRoleGroup', data)
           .then(success => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message));
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
       }
     }
   }