feat: new layout

components/dynamic-page/page-section/templates/articles/Default.vue

@@ -1,29 +1,59 @@
 <script setup lang="ts">
-import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';
+import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
+import type { PageSection } from "@/models/cms";
 
 const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
+
 const props = defineProps<{
     label?: any
     layout?: string
     settings?: any
     content?: any
 
-    section: any
+    section: PageSection
 }>()
+
+const store = reactive({
+    section: usePageSectionStore(),
+});
 </script>
 
 <template>
     <section class="section-container">
-        <h2 class="text-4xl mb-3 font-600" v-if="props.label">{{ props.label || '' }}</h2>
-        <div class="layout_define grid grid-cols-1 gap-x-10 gap-y-2.5">
+        <!-- tạm thời đóng vì đang đẩy vào label -->
+        <!-- <h2 class="section__title mb-3" v-if="props.label">{{ props.label || '' }}</h2> -->
+        <div class="section_layout">
             <template v-if="props.layout">
                 <DynamicLayout
                     :layout="props.layout"
                     :content="props.content"
                     :settings="props.settings"
-                    :section= "props.section"
+                    :section="props.section"
                 />
             </template>
+            <template v-else>
+                <div>
+                    Bấm để chọn layout
+                </div>
+            </template>
         </div>
     </section>
 </template>
+
+<style lang="scss" scoped>
+.border-pri {
+    .section_layout{
+        gap: 5px;
+    }
+}
+.section_layout {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr)); 
+
+    .empty {
+        min-height: 100px;
+        border-radius: 6px;
+        background: #409eff;
+    }
+}
+</style>

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

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

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

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { Article_Section_Default } from "./index";
+import type { PageSection } from "@/models/cms";
+import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+
+const _props = defineProps<{
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  [enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DEFAULT']]: Article_Section_Default,
+};
+
+const getCurrentSection = computed(() => _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 :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+    <slot />
+  </component>
+</template>

components/dynamic-page/page-section/templates/homes/Basic.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-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<{
-    layout?: any
-}>()
-
-const classForLayout = computed(() => {
-    let _empty = {
-        page_container: 'page_container',
-        layout_container: 'layout_container',
-    };
-    switch (props.layout) {
-        case 'Full_Page':
-            _empty = {
-                page_container: 'page_container full-size-page',
-                layout_container: 'layout_container full-size-layout',
-            };
-            break;
-        case 'Center_Page':
-            _empty = {
-                page_container: 'page_container full-size-page',
-                layout_container: 'layout_container center-layout',
-            };
-            break;
-        case 'Background_Page':
-            _empty = {
-                page_container: 'page_container full-size-page background-container',
-                layout_container: 'layout_container center-layout',
-            };
-            break;
-        default: 
-            break;
-    }
-    return _empty;
-})
-</script>
-
-<template>
-    <div class="h-100 overflow-y-auto">
-        <HeaderHomeTemplate /> 
-
-        <div :class="[classForLayout.page_container]">
-            <div :class="[classForLayout.layout_container]">
-                <slot />
-            </div>
-        </div>
-
-        <FooterHomeTemplate />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-    .body-center {
-        padding: 40px 0px;
-    }
-
-    .page_container {
-        &.full-size-page {
-            width: 100%;
-        }
-        .full-size-layout {
-            padding: 0 20px;
-        }
-    }
-
-    .layout_container {
-        padding-top: 40px;
-        padding-bottom: 40px;
-
-        &.center-layout {
-            max-width: 1300px;
-            margin: auto;
-        }
-    }
-</style>

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

@@ -1,2 +1 @@
-export { default as Article_Section_Default } from './articles/Default.vue'
-export { default as None_Section_Default } from './none/Default.vue'
+export { default as None_Section } from './none/index.vue'

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

@@ -1,69 +1,40 @@
 <script lang="ts" setup>
-import { Article_Section_Default, None_Section_Default } from './index';
-import { enumPageSectionLayouts } from "@/definitions/enum";
+import type { PageSection } from "@/models/cms";
+import { enumPageSectionKey } from "@/definitions/enum";
+import { None_Section } from "./index";
 
 const _props = defineProps<{
-    settings?: any,
-    content?: any
-    section: any
-}>()
+  settings?: any;
+  content?: any;
+  section?: any;
+}>();
 
 const definedDynamicSection: Record<string, any> = {
-    'Article_Default': Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_TWO}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_LEFT_TWO}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_RIGHT_TWO}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_THREE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_FOUR}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_ONE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_TWO}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_THREE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_FOUR}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_FIVE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_SIX}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_SEVEN}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: Article_Section_Default,
-    
-    'None_Default': None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_TWO}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_LEFT_TWO}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_RIGHT_TWO}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_THREE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_FOUR}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_ONE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_TWO}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_THREE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_FOUR}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_FIVE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_SIX}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_SEVEN}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: None_Section_Default,
+  [enumPageSectionKey.NONE]: None_Section,
+};
 
-}
+const getCurrentSection = computed(() => {
+  return _props.section?.taxonomy;
+});
 
-const getCurrentSection = computed(() => `${_props.settings.template}_${_props.settings.layout}`);
 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 :is="definedDynamicSection[getCurrentSection] || null" v-bind="{ ...(GET_PROPS()), section: _props.section, content: _props.content, settings: _props.settings }">
-        <slot />
-    </component>
+  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+    <slot />
+  </component>
 </template>

components/dynamic-page/page-section/templates/none/Default.vue

@@ -1,28 +1,24 @@
 <script setup lang="ts">
-import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';
-import type { PageSection } from "~/server/models/dynamic-page/index";
+import DynamicLayout from "@/components/dynamic-page/page-section/layouts/index.vue";
+import type { PageSection } from "@/models/cms";
 
-const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
 
 const props = defineProps<{
-    label?: any
-    layout?: string
-    settings?: any
-    content?: any
-    section: PageSection
-}>()
-
+  label?: any;
+  layout?: string;
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
 </script>
 
 <template>
-    <DynamicLayout
-        :layout="props.layout"
-        :content="props.content"
-        :settings="props.settings"
-        :section= "props.section"
-    />
+  <DynamicLayout :layout="props.layout" :content="props.content" :settings="props.settings" :section="props.section" />
 </template>
 
 <style lang="scss" scoped>
-
-</style>
+.border-custom {
+  border-color: #e5e5e5 !important;
+}
+</style>

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

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

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

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { PageSection } from "@/models/cms";
+import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+import { None_Section_Default } from "./index";
+
+const _props = defineProps<{
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  [enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]: None_Section_Default,
+};
+
+const getCurrentSection = computed(() => _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 :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+    <slot />
+  </component>
+</template>