thainv-dev

components/dynamic-page/page-component/templates/articles/cards/Audio.vue

@@ -67,15 +67,14 @@ const parseData = computed(() => {
 
       <div class="card-audio__type-category">
         <div class="card-audio__type" v-if="type">{{ type }}</div>
-        <nuxt-link v-if="parseData" to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
+        <nuxt-link to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
           parseData?.category?.title
         }}</nuxt-link>
-        <span v-else class="empty-block" style="height: 8px; width: 30px"></span>
       </div>
-        <h2  v-if="parseData" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+      
-          <nuxt-link :to="`/bai-viet/${parseData.code}`" v-html="parseData.title"></nuxt-link>
+        <h2 :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+          <nuxt-link :to="`/bai-viet/${parseData?.code}`"><span v-html="parseData?.title"></span> </nuxt-link>
         </h2>
-        <span v-else class="empty-block" style="height: 8px"></span>
     </div>
   </article>
   <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>

components/dynamic-page/page-component/templates/articles/cards/MissBackground.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
+import { getInputValue } from "@/utils/parseSQL";
+import { formatDate } from "@/utils/filters";
+
+const props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+
+const LAYOUT_PARSE = computed(() => {
+  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
+  return Object.assign({}, designObject);
+});
+
+const emit = defineEmits(["selectComponent", "dropData"]);
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+
+const parseData = computed(() => {
+  if (!props.dataResult) return;
+  const result = getInputValue(props.dataResult, "OBJECT");
+  return result;
+});
+
+const drop = (e: any) => {
+  if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
+    const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
+    const { dataType, dataResult } = JSON.parse(data);
+    const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
+    emit("dropData", {
+      dataType,
+      dataResult,
+      dataQuery: dataQuery,
+    });
+  }
+};
+</script>
+
+<template>
+  <article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
+    <div class="article_miss">
+      <template v-if="parseData">
+        <div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
+        <div class="article_miss_content">
+          <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+          </h3>
+        </div>
+      </template>
+      <div v-else class="empty-box"></div>
+    </div>
+
+    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+  </article>
+</template>
+
+<style lang="scss" scoped>
+.article_miss {
+  height: 100%;
+  position: relative;
+  .article_miss_thumb {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    border-radius: 12px;
+    cursor: pointer;
+    height: 100%;
+  }
+
+  .article_miss_content {
+    position: absolute;
+    z-index: 2;
+    bottom: -30px;
+    background-color: rgba(255, 93, 2, 0.7);
+    backdrop-filter: blur(2px);
+    width: 80%;
+    left: 10%;
+    padding: 16px 10px;
+    border-radius: 8px;
+    h3 {
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 130%;
+      text-align: center;
+      // margin-bottom: 12px;
+      margin-bottom: 0;
+    }
+  }
+  .empty-box {
+    background-color: #409eff;
+    min-height: 60px;
+    height: 100%;
+    i {
+      font-size: 60px;
+    }
+  }
+}
+</style>

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

@@ -2,3 +2,4 @@ export { default as Article_Card_Default } from './Card.vue'
 export { default as Article_Card_Audio } from './Audio.vue'
 export { default as Article_Card_Video } from './Video.vue'
 export { default as Article_Card_Video_Hightlight } from './VideoBackground.vue'
+export { default as Article_Card_Miss_Hightlight } from './MissBackground.vue'

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Article_Card_Default, Article_Card_Audio, Article_Card_Video, Article_Card_Video_Hightlight } from "./index";
+import { Article_Card_Default, Article_Card_Audio, Article_Card_Video, Article_Card_Video_Hightlight,Article_Card_Miss_Hightlight } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -13,6 +13,7 @@ const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_AUDIO"]]: Article_Card_Audio,
   [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_VIDEO"]]: Article_Card_Video,
   [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_VIDEO_HIGHLIGHT"]]: Article_Card_Video_Hightlight,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_MISS_HIGHLIGHT"]]: Article_Card_Miss_Hightlight,
 };
 
 const getCurrentComponent = computed(() => {

components/dynamic-page/page-section/layouts/category/misses/Default.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
+import { getInputValue } from "@/utils/parseSQL";
+import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+const props = defineProps<{
+  layout?: string;
+  content?: any;
+  settings: any;
+  section: PageSection;
+}>();
+
+const defineTypeRecusive = {
+  COMPONENT: "component",
+  SECTION: "section",
+};
+
+const SETTING_OPTIONS = computed(() => {
+  let _setting_options = {
+    MAX_ELEMENT: 1,
+  };
+  return _setting_options;
+});
+
+const designObject = computed(() => {
+  // không truyền lable là chữ lên sẽ lỗi
+  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
+const CLASS_FOR_SECTION = computed(() => {
+  let _classForSection = {
+    section_layout: "section_layout basic_column",
+  };
+  return _classForSection;
+});
+
+
+const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
+  const designObject = props?.section?.settings?.label ? getInputValue(props.section.settings.label, "OBJECT") : {};
+  const updatedDesignObject = { ...designObject };
+
+  if (Array.isArray(designObject[keyActive])) {
+    const isActive = designObject[keyActive].includes(Number(index) + 1);
+    return {
+      ...updatedDesignObject,
+      [key]: isActive ? designObject[key] : defaultValue,
+    };
+  }
+
+  delete updatedDesignObject[key];
+  return updatedDesignObject;
+};
+
+const LAYOUT_PARSE = computed(() => {
+  return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <div 
+    class="section_layout border-custom" 
+    :class="[CLASS_FOR_SECTION.section_layout]" 
+    :style="LAYOUT_PARSE['div.section_layout']"
+  >
+    <div
+      class="section_child"
+      v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
+      :key="index"
+      :class="['border-custom', CLASS_FOR_SECTION[index]]"
+      :style="mapActivesToItems(index)['div.section_child']"
+    >
+      <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.border-pri {
+  &.section_layout {
+    gap: 5px;
+  }
+}
+.section_layout {
+  display: grid;
+
+  &.smartphone_layout {
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  }
+  &.basic_column {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  &.two_col_layout {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &.three_col_layout {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  &.four_col_layout {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  &.five_col_layout {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  &.six_col_layout {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .border-custom {
+    border-color: #e5e5e5 !important;
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 export { default as NONE_DEFAULT_LAYOUT } from './none/Default.vue'
 
-export { default as MISS_DEFAULT_LAYOUT } from './sections/misses/Default.vue'
+export { default as MISS_DEFAULT_LAYOUT } from './category/misses/Default.vue'
 
 export { default as ARTICLE_DETAIL_DEFAULT } from './articles/details/Default.vue'

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

@@ -14,6 +14,8 @@ const definedDynamicSection: Record<string, any> = {
   /* NONE */
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]]: NONE_DEFAULT_LAYOUT,
@@ -35,7 +37,7 @@ const definedDynamicSection: Record<string, any> = {
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]]: NONE_DEFAULT_LAYOUT,
 
   /* SECTION */
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.SECTION]["MISSES"]]["DEFAULT"]]: MISS_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.CATEGORY]["MISSES"]]["DEFAULT"]]: MISS_DEFAULT_LAYOUT,
 
   /** ARTICLE */
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]]["DEFAULT"]]: ARTICLE_DETAIL_DEFAULT,
@@ -61,6 +63,7 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
+
   <component
     :is="definedDynamicSection[getCurrentSection]"
     v-bind="{

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

@@ -18,123 +18,6 @@ const defineTypeRecusive = {
   SECTION: "section",
 };
 
-const SETTING_OPTIONS = computed(() => {
-  let _setting_options = {};
-  switch (props.layout) {
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]:
-      _setting_options = {
-        MAX_ELEMENT: 2,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
-      _setting_options = {
-        MAX_ELEMENT: 3,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
-      _setting_options = {
-        MAX_ELEMENT: 2,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
-      _setting_options = {
-        MAX_ELEMENT: 2,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
-      _setting_options = {
-        MAX_ELEMENT: 2,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
-      _setting_options = {
-        MAX_ELEMENT: 2,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
-      _setting_options = {
-        MAX_ELEMENT: 3,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
-      _setting_options = {
-        MAX_ELEMENT: 4,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]:
-      _setting_options = {
-        MAX_ELEMENT: 3,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]:
-      _setting_options = {
-        MAX_ELEMENT: 3,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
-      _setting_options = {
-        MAX_ELEMENT: 3,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_ONE"]:
-      _setting_options = {
-        MAX_ELEMENT: 1,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TWO"]:
-      _setting_options = {
-        MAX_ELEMENT: 2,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_THREE"]:
-      _setting_options = {
-        MAX_ELEMENT: 3,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FOUR"]:
-      _setting_options = {
-        MAX_ELEMENT: 4,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FIVE"]:
-      _setting_options = {
-        MAX_ELEMENT: 5,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SIX"]:
-      _setting_options = {
-        MAX_ELEMENT: 6,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SEVEN"]:
-      _setting_options = {
-        MAX_ELEMENT: 7,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_EIGHT"]:
-      _setting_options = {
-        MAX_ELEMENT: 8,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_NINE"]:
-      _setting_options = {
-        MAX_ELEMENT: 9,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]:
-      _setting_options = {
-        MAX_ELEMENT: 10,
-      };
-      break;
-    default:
-      _setting_options = {
-        MAX_ELEMENT: 1,
-      };
-      break;
-  }
-  return _setting_options;
-});
-
 const designObject = computed(() => {
   // không truyền lable là chữ lên sẽ lỗi
   return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
@@ -167,6 +50,24 @@ const CLASS_FOR_SECTION = computed(() => {
         1: "col-span-5",
       };
       break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
+      _classForSection = {
+        section_layout: "section_layout twelve_col_layout",
+        0: "col-span-5",
+        1: "col-span-3",
+        2: "col-span-2",
+        3: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
+      _classForSection = {
+        section_layout: "section_layout twelve_col_layout",
+        0: "col-span-2",
+        1: "col-span-5",
+        2: "col-span-3",
+        3: "col-span-2",
+      };
+      break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
       _classForSection = {
         section_layout: "section_layout five_col_layout",

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

@@ -10,7 +10,7 @@ const _props = defineProps<{
 }>();
 
 const definedDynamicSection: Record<string, any> = {
-  [enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DEFAULT']]: Article_Section_Default,
+  [`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DEFAULT"]}`]: Article_Section_Default,
   [`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]}`]: Article_Detail,
 };
 

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

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

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

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+import { Misses_Section } from "./index";
+
+const _props = defineProps<{
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  [enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']]: Misses_Section,
+};
+
+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/category/misses/Default.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+const props = defineProps<{
+  label?: any;
+  layout?: string;
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+</script>
+
+<template>
+  <section>
+    <div>
+      <div>
+        <div>
+            <img class="w-full " src="~/assets/images/tienphong/MissCategory.png" alt="">
+        </div>
+
+        <div class="mt-3">
+          <template v-if="props.layout">
+            <DynamicLayout
+                :layout="props.layout"
+                :content="props.content"
+                :settings="props.settings"
+                :section="props.section"
+            />
+            </template>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+  .border-custom {
+    border-color: #e5e5e5 !important;
+  }
+</style>

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

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

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

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+import { Default } from "./index";
+
+const _props = defineProps<{
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  [enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']]: 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/index.ts

@@ -1,3 +1,3 @@
 export { default as None_Section } from './none/index.vue'
-export { default as Section__ } from './sections/index.vue'
+export { default as Category_Section } from './category/index.vue'
 export { default as Article_Section } from './articles/index.vue'

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PageSection } from "@/server/models/dynamic-page/index";
 import { enumPageSectionKey } from "@/definitions/enum";
-import { None_Section,Section__, Article_Section } from "./index";
+import { None_Section,Category_Section, Article_Section } from "./index";
 
 const _props = defineProps<{
   settings?: any;
@@ -11,7 +11,7 @@ const _props = defineProps<{
 
 const definedDynamicSection: Record<string, any> = {
   [enumPageSectionKey.NONE]: None_Section,
-  [enumPageSectionKey.SECTION]: Section__,
+  [enumPageSectionKey.CATEGORY]: Category_Section,
   [enumPageSectionKey.ARTICLE]: Article_Section,
 };
 

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

@@ -11,7 +11,7 @@ const _props = defineProps<{
 }>();
 
 const definedDynamicSection: Record<string, any> = {
-  [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']]: Misses_Section,
+  // [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']]: Misses_Section,
 };
 
 const getCurrentSection = computed(() => _props.settings.template);

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

@@ -11,7 +11,7 @@ const _props = defineProps<{
 }>();
 
 const definedDynamicSection: Record<string, any> = {
-  [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISS']['DEFAULT']]: Default,
+  // [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISS']['DEFAULT']]: Default,
 };
 
 const getCurrentSection = computed(() => _props.settings.template);

definitions/cms/page.type.ts

@@ -148,8 +148,8 @@ export const pageSectionTempaltes = {
     { title: "Phân vùng bài viết cơ bản", value: enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DEFAULT'] },
     { title: "Thẻ bài viết chi tiết", value: enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DETAIL'] },
   ],
-  [enumPageSectionKey.SECTION]: [
+  [enumPageSectionKey.CATEGORY]: [
-    { title: "Phân vùng Hoa hậu", value: enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES'] },
+    { title: "Phân vùng Hoa hậu", value: enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES'] },
   ],
 };
 
@@ -159,6 +159,8 @@ export const pageSectionLayouts = {
     { title: "Trái 1 Cột, giữa 2 Cột, phải 3 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_TWO_THREE'] },
     { title: "2 Cột, bên trái rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_LEFT_TWO'] },
     { title: "6 Cột, phải 5 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FIVE'] },
+    { title: "5-3-2-2", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FIVE_THREE_TWO_TWO'] },
+    { title: "2-5-3-2", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_TWO_FIVE_THREE_TWO'] },
     { title: "5 Cột, phải 4 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FOUR'] },
     { title: "2 Cột, bên phải rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_RIGHT_TWO'] },
     { title: "3 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_THREE'] },
@@ -177,8 +179,8 @@ export const pageSectionLayouts = {
     { title: "9 Hàng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['HORIZONTAL_NINE'] },
     { title: "10 Hàng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['HORIZONTAL_TEN'] }
   ],
-  [`${enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']}`]: [
+  [`${enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']}`]: [
-    { title: "Cơ bản", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']}`]['DEFAULT'] },
+    { title: "Cơ bản", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']}`]['DEFAULT'] },
   ],
 
   [`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DETAIL']}`]: [
@@ -216,6 +218,7 @@ export const pageComponentTemplates = {
   ],
   [`${enumPageComponentKey.COLLECTION}`]: [
     { title: "Bộ sưu tập bài viết", value: enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE'] },
+    { title: "Bộ sưu tập danh mục", value: enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY'] },
   ],
   [`${enumPageComponentKey.SECTION}`]: [
     { title: "Bộ phân trang bài viết", value: enumPageComponentTemplate[enumPageComponentKey.SECTION]['ARTICLE'] },
@@ -238,6 +241,7 @@ export const pageComponentLayouts = {
     { title: "Thẻ bài viết Audio", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_AUDIO'] },
     { title: "Thẻ bài viết Video", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_VIDEO'] },
     { title: "Thẻ bài viết Video Hightlight", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_VIDEO_HIGHLIGHT'] },
+    { title: "Thẻ bài viết Hoa hậu Hightlight", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_MISS_HIGHLIGHT'] },
   ],
   [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]: [
     { title: "Chi tiết bài viết", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_GENERAL'] },
@@ -246,7 +250,6 @@ export const pageComponentLayouts = {
     { title: "Chi tiết bài Image", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_IMAGE'] },
     { title: "Chi tiết bài eMagazine", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_EMAGAZINE'] },
     { title: "Chi tiết bài Inforgraphic", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_INFOGRAPHIC'] },
-    { title: "Controls", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_CONTROL'] },
   ],
   /* NAVIGATION */
   [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]: [
@@ -264,6 +267,9 @@ export const pageComponentLayouts = {
     { title: "Thẻ bài viết cơ bản", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]['ARTICLE_COLLECTION_DEFAULT'] },
     { title: "Thẻ bài viết Audio", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]['ARTICLE_COLLECTION_AUDIO'] },
   ],
+  [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]: [
+    { title: "Hoa hậu - Cơ bản", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]['MISSES_COLLECTION_DEFAULT'] },
+  ],
 
   /* SECTION */
   [`${enumPageComponentTemplate[enumPageComponentKey.SECTION]['ARTICLE']}`]: [

definitions/enum/page.enum.ts

@@ -225,6 +225,8 @@ export const enumPageSectionTemplate = {
   },
   [enumPageSectionKey.SECTION]: {
     'DEFAULT': "TYPE:Default",
+  },
+  [enumPageSectionKey.CATEGORY]: {
     'MISSES': "TYPE:Misses",
   },
 };
@@ -233,9 +235,11 @@ export const enumPageSectionLayouts = {
   /* None */
   [`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]: {
     'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
-    'VERTICAL_ONE_TWO_THREE': 'LAYOUT:vertical-TYPE:Left:1;CENTER:2;RIGHT:3',
+    'VERTICAL_ONE_TWO_THREE': 'LAYOUT:vertical-TYPE:Left:1;CENTER:2;RIGHT:3-MAX:3',
+    'VERTICAL_FIVE_THREE_TWO_TWO': 'LAYOUT:vertical-TYPE:5;3;2;2-MAX:4',
+    'VERTICAL_TWO_FIVE_THREE_TWO': 'LAYOUT:vertical-TYPE:2;5;3;2-MAX:4',
     'VERTICAL_ONE_FOUR': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:4-Max:2',
-    'VERTICAL_ONE_FIVE': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:5',
+    'VERTICAL_ONE_FIVE': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:5-MAX:2',
     'VERTICAL_LEFT_TWO': 'LAYOUT:vertical-TYPE:LEFT-MAX:2',
     'VERTICAL_RIGHT_TWO': 'LAYOUT:vertical-TYPE:RIGHT-MAX:2',
     'VERTICAL_THREE': 'LAYOUT:vertical-TYPE:Default-MAX:3',
@@ -256,7 +260,7 @@ export const enumPageSectionLayouts = {
   },
 
   /* Section */
-  [`${enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']}`]: {
+  [`${enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']}`]: {
     'DEFAULT': 'LAYOUT:Default-TYPE:Default-MAX:1',
   },
 
@@ -300,6 +304,7 @@ export const enumPageComponentTemplate = {
   },
   [enumPageComponentKey.COLLECTION]: {
     'ARTICLE': "TYPE:Collection_Article",
+    'CATEGORY': "TYPE:Collection_Category",
   },
   [enumPageComponentKey.SECTION]: {
     'ARTICLE': "TYPE:Section_Article",
@@ -323,6 +328,7 @@ export const enumPageComponentLayouts = {
     'CARD_AUDIO': "TYPE:Card_Audio",
     'CARD_VIDEO': "TYPE:Card_Video",
     'CARD_VIDEO_HIGHLIGHT': "TYPE:Card_VideoHightLight",
+    'CARD_MISS_HIGHLIGHT': "TYPE:Card_MissHightLight",
   },
   [`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]: {
     'DETAIL_GENERAL': "TYPE:Detail_General",
@@ -331,7 +337,6 @@ export const enumPageComponentLayouts = {
     'DETAIL_IMAGE': "TYPE:Detail_Image",
     'DETAIL_EMAGAZINE': "TYPE:Detail_Emagazine",
     'DETAIL_INFOGRAPHIC': "TYPE:Detail_Infographic",
-    'DETAIL_CONTROL': "TYPE:Control"
   },
   /* NAVIGATION */
   [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]: {
@@ -349,6 +354,9 @@ export const enumPageComponentLayouts = {
     'ARTICLE_COLLECTION_DEFAULT': "TYPE:Article_Collection_Default",
     'ARTICLE_COLLECTION_AUDIO': "TYPE:Article_Collection_Audio",
   },
+  [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]: {
+    'MISSES_COLLECTION_DEFAULT': "TYPE:Category_Collection_MISS_Default",
+  },
 
   /* SECTION */
   [`${enumPageComponentTemplate[enumPageComponentKey.SECTION]['ARTICLE']}`]: {
@@ -388,17 +396,29 @@ const defaultArticle = {
   paddingBottom: 20,
   paddingLeft: 20
 };
-
+const defaultArticleAudio = {
-export const enumPageComponentDefaultSetting = {
-  [enumPageComponentKey.ARTICLE]: {
-    WidthImg: 40,
-    layout: "column",
   fontSizeTitle: 16,
   fontWeightTitle: 600,
+};
+const defaultArticleVideo = {
+  fontSizeTitle: 16,
+  fontWeightTitle: 500,
+};
+const defaultArticleVideoHightLight = {
+  fontSizeTitle: 44,
+  fontWeightTitle: 700,
   fontSizeIntro: 14,
   fontWeightIntro: 400,
+};
+export const enumPageComponentDefaultSetting = {
+  [enumPageComponentKey.ARTICLE]: {
+    "TYPE:Card_Default": defaultArticle,
+    "TYPE:Card_Audio": defaultArticleAudio,
+    "TYPE:Card_Video": defaultArticleVideo,
+    "TYPE:Card_VideoHightLight": defaultArticleVideoHightLight,
   },
   [enumPageComponentKey.COLLECTION]: {
+    "TYPE:Article_Collection_Default": {
       layoutWrap: "column",
       MAX: 5,
       column: 1,
@@ -407,12 +427,34 @@ export const enumPageComponentDefaultSetting = {
       ...defaultArticle,
       customStyle: [],
     },
-  [enumPageComponentKey.SECTION]: {
+    "TYPE:Article_Collection_Audio": {
       layoutWrap: "column",
       MAX: 5,
+      column: 1,
+      defaultFontSizeTitle: 16,
+      defaultFontWeightTitle: 600,
+      ...defaultArticleAudio
+    }
+  },
+  [enumPageComponentKey.SECTION]: {
+    "TYPE:Article_Section_Default": {
+      layoutWrap: "column",
+      MAX: 5,
+      defaultFontSizeTitle: 16,
+      defaultFontWeightTitle: 600,
       ...defaultArticle,
+    }
   },
   [enumPageComponentKey.CATEGORY]: {
+    "TYPE:Category_Vertical": {
+      MAX: 5,
+      layoutWrap: "column",
+      fontSizeTitle: 14,
+      fontWeightTitle: 400,
+      defaultFontSizeTitle: 14,
+      defaultFontWeightTitle: 400,
+    },
+    "TYPE:Default": {
       layoutWrap: "row",
       MAX: 5,
       fontSizeTitle: 17,
@@ -421,3 +463,4 @@ export const enumPageComponentDefaultSetting = {
       defaultFontWeightTitle: 500,
     },
   }
+}