minhnt-dev: fix page template

components/dynamic-page/page/templates/articles/DetailDefault.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div class="h-100 overflow-y-auto">
+    <div class="h-full overflow-y-auto">
         <HeaderHomeTemplate /> 
             <DynamicLayout :settings="props.settings">
                 <slot />

components/dynamic-page/page/templates/articles/index.ts

@@ -0,0 +1 @@
+export { default as DetailDefault } from './DetailDefault.vue';

components/dynamic-page/page/templates/articles/index.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { DetailDefault } from './index';
+import { enumPageKey, enumPageTemplate } from "@/definitions/enum";
+
+const _props = defineProps<{
+    settings: any
+}>()
+
+const definedDynamicPage: Record<string, any> = {
+    [enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]: DetailDefault,
+}
+
+const getCurrentTemplate = computed(() => {
+    return _props.settings?.template || '';
+});
+
+const GET_PROPS = computed(() => {
+    return () => {
+        let props : any = {};
+        if (_props.settings) {
+            for (const [key, value] of Object.entries(_props.settings)) {
+                props = {
+                    ...props,
+                    [key]: value
+                }
+            }
+        }
+        return props;
+    };
+})
+</script>
+
+<template>
+    <component v-if="definedDynamicPage[getCurrentTemplate]" :is="definedDynamicPage[getCurrentTemplate]" v-bind="{...(GET_PROPS()), settings: _props.settings}">
+        <slot />
+    </component>
+</template>

components/dynamic-page/page/templates/homes/Home.vue

@@ -2,22 +2,19 @@
 import DynamicLayout from "~/components/dynamic-page/page/layouts/index.vue";
 import HeaderHomeTemplate from "~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue";
 import FooterHomeTemplate from "~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue";
-const props = defineProps<{
-  settings?: any;
-}>();
 
+const props = defineProps<{
+    settings?: any
+}>()
 </script>
 
 <template>
-  <div>
-      <HeaderHomeTemplate>
-        <DynamicLayout :settings="props.settings">
+    <div class="h-full overflow-y-auto">
+        <HeaderHomeTemplate /> 
+            <DynamicLayout :settings="props.settings">
                 <slot />
             </DynamicLayout>
-      </HeaderHomeTemplate>
-    <DynamicLayout :settings="props.settings">
-      <slot />
-    </DynamicLayout>
-    <FooterHomeTemplate />
-  </div>
+        <FooterHomeTemplate />
+    </div>
 </template>
+

components/dynamic-page/page/templates/homes/index.ts

@@ -0,0 +1 @@
+export { default as Home } from './Home.vue';

components/dynamic-page/page/templates/homes/index.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { Home } from './index';
+import { enumPageKey, enumPageTemplate } from "@/definitions/enum";
+
+const _props = defineProps<{
+    settings: any
+}>()
+
+const definedDynamicPage: Record<string, any> = {
+    [enumPageTemplate[enumPageKey.HOME]['DEFAULT']]: Home,
+}
+
+const getCurrentTemplate = computed(() => {
+    return _props.settings?.template || '';
+});
+
+const GET_PROPS = computed(() => {
+    return () => {
+        let props : any = {};
+        if (_props.settings) {
+            for (const [key, value] of Object.entries(_props.settings)) {
+                props = {
+                    ...props,
+                    [key]: value
+                }
+            }
+        }
+        return props;
+    };
+})
+</script>
+
+<template>
+    <component v-if="definedDynamicPage[getCurrentTemplate]" :is="definedDynamicPage[getCurrentTemplate]" v-bind="{...(GET_PROPS()), settings: _props.settings}">
+        <slot />
+    </component>
+</template>

components/dynamic-page/page/templates/index.ts

@@ -1 +1,2 @@
-export { default as HomeBasic } from './homes/Basic.vue'
+export { default as Home } from './homes/index.vue'
+export { default as Article } from './articles/index.vue'

components/dynamic-page/page/templates/index.vue

@@ -1,39 +1,41 @@
 <script lang="ts" setup>
-import { HomeBasic } from './index';
+import { Home, Article } from "./index";
+import type { Page } from "@/models/cms";
+import { enumPageKey } from "@/definitions/enum";
 
 const _props = defineProps<{
-    settings: any
-}>()
+  settings: any;
+  page: Page;
+}>();
 
 const definedDynamicPage: Record<string, any> = {
-    'Home' : HomeBasic,
-    'Article': HomeBasic
-}
+  [enumPageKey.HOME]: Home,
+  [enumPageKey.ARTICLE]: Article,
+};
 
 const getCurrentTemplate = computed(() => {
-    return _props.settings && _props.settings.template || '';
+  return _props.page?.taxonomy || "";
 });
 
-
 const GET_PROPS = computed(() => {
-    return () => {
-        let props : any = {};
-        if (_props.settings) {
-            for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
-                props = {
-                    ...props,
-                    [key]: value
-                }
-            }
-        }
-        return props;
-    };
-})
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+    }
+    return props;
+  };
+});
 </script>
 
 <template>
     <component 
-    class="overflow-x-hidden"
+        class="overflow-x-hidden"
         v-if="definedDynamicPage[getCurrentTemplate]" 
         :is="definedDynamicPage[getCurrentTemplate]" 
         v-bind="{...(GET_PROPS()), settings: _props.settings}"