Manage power usage loader
-Show the loading bar while making the call to the APIs during both GET and PATCH call.
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I96db90a676ded1684218dcddc227ca151f712dc2
diff --git a/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue b/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
index 8a16b88..bb690d6 100644
--- a/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
+++ b/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
@@ -79,6 +79,7 @@
<script>
import PageTitle from '@/components/Global/PageTitle';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import { requiredIf, between } from 'vuelidate/lib/validators';
@@ -87,7 +88,7 @@
export default {
name: 'ManagePowerUsage',
components: { PageTitle },
- mixins: [VuelidateMixin, BVToastMixin],
+ mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
computed: {
...mapGetters({
powerConsumptionValue: 'powerControl/powerConsumptionValue'
@@ -117,6 +118,16 @@
}
}
},
+ created() {
+ this.startLoader();
+ this.$store
+ .dispatch('powerControl/getPowerControl')
+ .finally(() => this.endLoader());
+ },
+ beforeRouteLeave(to, from, next) {
+ this.hideLoader();
+ next();
+ },
validations: {
powerCapValue: {
between: between(1, 10000),
@@ -129,10 +140,12 @@
submitForm() {
this.$v.$touch();
if (this.$v.$invalid) return;
+ this.startLoader();
this.$store
.dispatch('powerControl/setPowerControl', this.powerCapValue)
.then(message => this.successToast(message))
- .catch(({ message }) => this.errorToast(message));
+ .catch(({ message }) => this.errorToast(message))
+ .finally(() => this.endLoader());
}
}
};