Merge pull request #19 from amansinghbais/18-loader

Implemented: loader wherever required and added padding bottom in the store list page(#18)

src/views/AddConfigurations.vue

@@ -60,6 +60,7 @@ import { ProductStoreService } from "@/services/ProductStoreService";
 import { computed, defineProps, ref } from "vue";
 import { hasError, showToast } from "@/utils";
 import { useStore } from "vuex";
+import emitter from "@/event-bus";
 
 const store = useStore();
 const router = useRouter();
@@ -94,6 +95,8 @@ async function fetchProductStore() {
 }
 
 async function setupProductStore() {
+  emitter.emit("presentLoader");
+
   try {
     const payload = {
       ...productStore.value,
@@ -105,6 +108,7 @@ async function setupProductStore() {
     const resp = await ProductStoreService.updateProductStore(payload);
     if(!hasError(resp)) {
       showToast(translate("Product store configurations updated successfully."))
+      emitter.emit("dismissLoader");
       router.replace(`/product-store-details/${productStore.value.productStoreId}`);
     } else {
       throw resp.data;
@@ -113,6 +117,8 @@ async function setupProductStore() {
     logger.error(error)
     showToast(translate("Failed to add configurations to the product store."))
   }
+
+  emitter.emit("dismissLoader");
 }
 </script>
 

src/views/CreateProductStore.vue

@@ -57,6 +57,7 @@ import SelectOperatingCountriesModal from "@/components/SelectOperatingCountries
 import { generateInternalId, hasError, showToast } from "@/utils";
 import logger from "@/logger";
 import { ProductStoreService } from "@/services/ProductStoreService";
+import emitter from "@/event-bus";
 
 const store = useStore();
 const router = useRouter();
@@ -96,6 +97,8 @@ async function manageConfigurations() {
 
   let resp;
 
+  emitter.emit("presentLoader");
+
   try {
     const payload = {
       storeName: formData.value.storeName,
@@ -131,6 +134,7 @@ async function manageConfigurations() {
       }
 
       showToast(translate("Product store created successfully."))
+      emitter.emit("dismissLoader");
       router.replace(`add-configurations/${productStoreId}`);
     } else {
       throw resp.data;
@@ -139,6 +143,8 @@ async function manageConfigurations() {
     showToast(translate(error.response?.data?.errors ? error.response.data.errors : "Failed to create product store."))
     logger.error(error);
   } 
+
+  emitter.emit("dismissLoader");
 }
 
 async function openSelectOperatingCountriesModal() {

src/views/ProductStore.vue

@@ -89,4 +89,8 @@ function viewFacilities(productStoreId: string) {
 main {
   margin: var(--spacer-lg);
 }
+
+ion-content {
+  --padding-bottom: 80px;
+}
 </style>

src/views/ProductStoreDetails.vue

@@ -371,8 +371,10 @@ const productIdentifiers = computed(() => store.getters["util/getProductIdentifi
 const shipmentMethodTypes = computed(() => store.getters["util/getShipmentMethodTypes"])
 
 onIonViewWillEnter(async() => {
+  emitter.emit("presentLoader");
   await Promise.allSettled([store.dispatch("util/fetchDBICCountries"), store.dispatch("productStore/fetchProductStoreDetails", props.productStoreId), store.dispatch("productStore/fetchCurrentStoreSettings", props.productStoreId), store.dispatch("util/fetchFacilityGroups"), store.dispatch("util/fetchProductIdentifiers"), store.dispatch("util/fetchShipmentMethodTypes", { pageSize: 250 })])  
   if(productStore.value.daysToCancelNonPay) autoCancellationActive.value = true;
+  emitter.emit("dismissLoader");
 })
 
 function getPreferredIdentification(id: string) {