feat: new layout

components/dynamic-page/page-component/templates/advertisings/advertisings/Default.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="content">
+    <span>Quảng cáo ở đây</span>
+  </div>
+</template>
+<style scoped lang="scss">
+.content {
+  font-size: 18px;
+  background-color: #eeeeee;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

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

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

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

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Default_Ads } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any;
+}>();
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['DEFAULT']]: Default_Ads,
+};
+
+const getCurrentComponent = computed(() => _props.settings.layout);
+
+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="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
+</template>

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

@@ -0,0 +1 @@
+export { default as Advertisings } from './advertisings/index.vue'

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

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Advertisings } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+}>();
+
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]["ADVERTISING"]]: Advertisings,
+};
+
+const getCurrentComponent = computed(() => `${_props.settings.layout}`);
+console.log(definedDynamicComponent, "vào rrassd", getCurrentComponent.value);
+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="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+</template>