Wait for request data to be finished to render component POC

src/helpers/cms-adapter.js

@@ -0,0 +1,31 @@
+import { storeActions } from "@/constants/store-actions.js";
+import { widgetNames } from "@/constants/widget-names.js";
+import store from "@/store";
+
+export function GetContentFromCms(fmgPage) {
+    return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => {
+
+        const pageDataFromCms = {
+            isCmsContentReady: false
+        };
+
+        response.data.Result.forEach((widget) => {
+            if (Object.values(widgetNames).includes(widget.Type)) {
+                // If we already have this widget, push it on the collection
+                if (widget.Type in pageDataFromCms) {
+                    pageDataFromCms[widget.Type].push(widget.Model);
+                    return;
+                }
+
+                pageDataFromCms[widget.Type] = [widget.Model];
+
+            }
+        });
+
+        // Our 'Page' is ready because we have data now
+        pageDataFromCms.isCmsContentReady = true;
+
+        return pageDataFromCms;
+    });
+}
+

src/layouts/component-test/component-test.vue

@@ -78,6 +78,11 @@
             <h6>h6 Heading</h6>
         </div>
     </div>
+    <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+            <buttonPrimary buttonText="Primary" @click="testMethod" />
+        </div>
+    </div>
     <div class="my-3">
         <div class="select-car">
             <div class="select-car-form">
@@ -108,5 +113,13 @@ export default {
             years: [2023, 2022, 2021, 2020],
         };
     },
+    created() {
+        console.log("App created");
+    },
+    methods: {
+        testMethod() {
+            this.$router.push("/?fmgPage=vehicle-year");
+        },
+    },
 };
 </script>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,4 +1,4 @@
-<template v-if="isCmsContentReady">
+<template>
 <div class="select-car">
     <div class="select-car-form rounded text-center">
         <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
@@ -10,6 +10,9 @@
 <script>
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/header";
+import {
+    GetContentFromCms
+} from "@/helpers/cms-adapter";
 
 export default {
     name: "vehicle-year",
@@ -20,11 +23,14 @@ export default {
         };
     },
     computed: {},
-    async created() {
-        const pageContent = await this.GetContentFromCms();
-
-        this.pageHeaderWidgets = pageContent.PageHeaderWidget[0];
-        this.radioQuestionWidgets = pageContent.RadioQuestionWidget[0];
+    beforeRouteEnter(to, from, next) {
+        GetContentFromCms(to.query.fmgPage).then((response) => {
+            console.log(response)
+            next(vm => {
+                vm.pageHeaderWidgets = response.PageHeaderWidget[0];
+                vm.radioQuestionWidgets = response.RadioQuestionWidget[0];
+            });
+        });
     },
     components: {
         yearQuestion,

src/mixins/base-mixin.js

@@ -8,13 +8,13 @@ export default {
     }
   },
   methods: {
-    // dispatchBlockingStoreAction(type, payload) {
-    //   // globalMethods.showWaitingModal(true);
+    dispatchBlockingStoreAction(type, payload) {
+      // globalMethods.showWaitingModal(true);
 
-    //   return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
-    //     // globalMethods.showWaitingModal(false);
-    //   });
-    // },
+      return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
+        // globalMethods.showWaitingModal(false);
+      });
+    },
     dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
       // Encode the payload if required
       if (encodePayload) {
@@ -23,31 +23,6 @@ export default {
 
       return this.$store.dispatch(type, payload);
     },
-
-    GetContentFromCms() {
-      return this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA,{ pageName: this.$route.query.fmgPage }).then((response) => {
-
-        const pageDataFromCms = {};
-        
-        response.data.Result.forEach((widget) => {
-          if (Object.values(this.widgetNames).includes(widget.Type)) {
-            // If we already have this widget, push it on the collection
-            if (widget.Type in pageDataFromCms) {
-              pageDataFromCms[widget.Type].push(widget.Model);
-              return;
-            }
-
-            pageDataFromCms[widget.Type] = [widget.Model];
-            
-          }
-        });
-        
-        // Our 'Page' is ready because we have data now
-        this.isCmsContentReady = true;
-
-        return pageDataFromCms;
-      });
-    },
   },
   computed: {
     storeActions() {