thainv-dev: Layout Page Section

assets/styles/style.scss

@@ -171,4 +171,12 @@ div[layout="ARTICLE_PAGE"] {
 
 .container {
     max-width: 1385px;
+}
+
+.layout_container {
+
+    & > .section_layout {
+        @apply mt-12 first:mt-0;
+
+    }
 }

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

@@ -44,11 +44,11 @@ const drop = (e: any) => {
 </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']">
+  <article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :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">
+        <div class="article_miss_content" :style="LAYOUT_PARSE['content']">
           <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
             {{ parseData.title?.replace(/<[^>]+>/g, "") }}
           </h3>
@@ -57,7 +57,7 @@ const drop = (e: any) => {
       <div v-else class="empty-box"></div>
     </div>
 
-    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+    <div v-html="LAYOUT_PARSE.styleClasses" v-if="LAYOUT_PARSE.styles"  style="display: none"></div>
   </article>
 </template>
 

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

@@ -15,6 +15,7 @@ const definedDynamicSection: Record<string, any> = {
   [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_FIVE_TWO_TWO_THREE"]]: 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,

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

@@ -46,6 +46,11 @@ const SETTING_OPTIONS = computed(() => {
         MAX_ELEMENT: 4,
       };
       break;
+      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
       _setting_options = {
         MAX_ELEMENT: 4,
@@ -186,6 +191,15 @@ const CLASS_FOR_SECTION = computed(() => {
         3: "col-span-2",
       };
       break;
+      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
+      _classForSection = {
+        section_layout: "section_layout twelve_col_layout",
+        0: "col-span-5",
+        1: "col-span-2",
+        2: "col-span-2",
+        3: "col-span-3",
+      };
+      break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
       _classForSection = {
         section_layout: "section_layout twelve_col_layout",

definitions/cms/page.type.ts

@@ -160,6 +160,7 @@ export const pageSectionLayouts = {
     { 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: "5-2-2-3", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FIVE_TWO_TWO_THREE'] },
     { 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'] },
@@ -231,7 +232,7 @@ export const pageComponentTemplates = {
   ],
   [`${enumPageComponentKey.OTHER}`]: [
     { title: "Thời tiết", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER'] },
-    { title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES'] },
+    { title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK'] },
   ],
 };
 
@@ -292,7 +293,7 @@ export const pageComponentLayouts = {
   [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]: [
     { title: "Thời tiết", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]['WEATHER_DEFAULT'] }
   ],
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]: [
+  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]: [
-    { title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]['SECURITIES_DEFAULT'] }
+    { title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_DEFAULT'] }
   ],
 };

definitions/enum/page.enum.ts

@@ -237,6 +237,7 @@ export const enumPageSectionLayouts = {
     'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
     '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_FIVE_TWO_TWO_THREE': 'LAYOUT:vertical-TYPE:5;2;2;3-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-MAX:2',