Refactor: Fix logic to display app layout - refs BT#22639

Author: AngelFQC

assets/vue/App.vue

@@ -55,6 +55,7 @@ import { useI18n } from "vue-i18n"
 import { customVueTemplateEnabled } from "./config/env"
 import CustomDashboardLayout from "../../var/vue_templates/components/layout/DashboardLayout.vue"
 import EmptyLayout from "./components/layout/EmptyLayout.vue"
+import DashboardLayout from "./components/layout/DashboardLayout.vue"
 import { useMediaElementLoader } from "./composables/mediaElementLoader"
 
 import apolloClient from "./config/apolloClient"
@@ -79,14 +80,14 @@ const layout = computed(() => {
     (queryParams.has("lp_id") && "view" === queryParams.get("action")) ||
     (queryParams.has("origin") && "learnpath" === queryParams.get("origin"))
   ) {
-    return "EmptyLayout"
+    return EmptyLayout
   }
 
   if (customVueTemplateEnabled) {
     return CustomDashboardLayout
   }
 
-  return `${router.currentRoute.value.meta.layout ?? "Dashboard"}Layout`
+  return router.currentRoute.value.meta.layout ? `${router.currentRoute.value.meta.layout}Layout` : DashboardLayout
 })
 
 const legacyContainer = ref(null)
@@ -117,15 +118,6 @@ watchEffect(() => {
   }
 })
 
-watchEffect(async () => {
-  try {
-    const component = `${route.meta.layout}.vue`
-    layout.value = component?.default || "Dashboard"
-  } catch (e) {
-    layout.value = "Dashboard"
-  }
-})
-
 const securityStore = useSecurityStore()
 const notification = useNotification()
 

assets/vue/main.js

@@ -31,9 +31,6 @@ import VueFlatPickr from "vue-flatpickr-component"
 import "flatpickr/dist/flatpickr.css"
 import "@mdi/font/css/materialdesignicons.css"
 
-import DashboardLayout from "./components/layout/DashboardLayout.vue"
-import EmptyLayout from "./components/layout/EmptyLayout.vue"
-
 // Prime
 import PrimeVue from "primevue/config"
 import DataView from "primevue/dataview"
@@ -188,8 +185,6 @@ app.component("Button", Button)
 app.component("Column", Column)
 app.component("ColumnGroup", ColumnGroup)
 app.component("Toolbar", Toolbar)
-app.component("DashboardLayout", DashboardLayout)
-app.component("EmptyLayout", EmptyLayout)
 app.component("BaseAppLink", BaseAppLink)
 
 app.config.globalProperties.axios = axios