thainv-dev:

components/dynamic-page/page-component/AssignComponent.vue

@@ -4,15 +4,15 @@ import DynamicComponent from "~/components/dynamic-page/page-component/templates
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage } = storeToRefs(useDynamicPageStore());
 const props = defineProps<{
-  type: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
+  type?: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
 }>();
 
 const defineTypeRecusive = {
-  TOP_NAVIGATION: enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]]['NAVIGATION_TOP_DEFAULT'],
+  TOP_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT'],
-  BOTTOM_NAVIGATION: enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]]['NAVIGATION_BOTTOM_DEFAULT'],
+  BOTTOM_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT'],
 };
 
-const findDataPosition = computed(() => {
+const findDataPosition = computed<any>(() => {
   let result = {};
   switch (props.type) {
     case defineTypeRecusive.TOP_NAVIGATION:

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

@@ -0,0 +1,15 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="pt-5">
+    <div class="content p-3">
+    <span class="text-12px text-[#AFADB5] text-end block">Quảng full</span>
+    <img class="block w-full h-full" src="/assets/images/tienphong/main-ads-2.jpg" alt="">
+  </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.content {
+  font-size: 18px;
+  background-color: #eeeeee;
+}
+</style>

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Default_Ads } from "./index";
+import { Default_Ads, Main_Ads } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -9,6 +9,7 @@ const _props = defineProps<{
 }>();
 const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['DEFAULT']]: Default_Ads,
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['MAIN']]: Main_Ads,
 };
 
 const getCurrentComponent = computed(() => _props.settings.layout);

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

@@ -78,14 +78,15 @@ const parseData = computed(() => {
       </nuxt-link>
     </div>
   </article>
-  <div v-html="LAYOUT_PARSE.styleClasses"></div>
+  <div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
 </template>
 
 <style lang="scss">
 .card-audio {
   position: relative;
   width: 100%;
-  padding-bottom: 56.25%; //tỷ lệ 9 /16;;
+  padding-bottom: calc((16 / 9) * 100%);
+  overflow: hidden;
 
   img {
     position: absolute;
@@ -98,7 +99,7 @@ const parseData = computed(() => {
   .card-audio__content {
     position: absolute;
     width: 100%;
-
+    max-height: 100%;
     bottom: 0;
     padding: 20px 30px;
     z-index: 3;

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

@@ -25,32 +25,6 @@ const parseData = computed(() => {
 </script>
 
 <template>
-  <!-- <article class="article-card-default">
-    <div class="article-card-default__content">
-      <template v-if="currentArticle.tags && currentArticle?.tags.length > 0">
-        <nuxt-link class="article-card-default__tag" :to="`/${currentArticle?.tags[0].code}`">
-          <h5>{{ currentArticle?.tags[0].title }}</h5>
-        </nuxt-link>
-      </template>
-
-      <nuxt-link class="article-card-default__title" :to="`/bai-viet/${currentArticle.code}`">
-        <h2 v-html="currentArticle.title"></h2>
-        <p v-html="currentArticle.intro"></p>
-      </nuxt-link>
-
-      <div class="article-card-default__bottom">
-        <span>{{ formatDate(String(currentArticle.createdOn), "DD/MM/YYYY | HH:mm") }}</span> /
-        <nuxt-link :to="`/${currentArticle.category?.code}`"> {{ currentArticle.category?.title }}</nuxt-link>
-      </div>
-    </div>
-    <div class="article-card-default__thumbnail">
-      <figure>
-        <nuxt-link :to="`bai-viet${currentArticle.code}`">
-          <img :src="currentArticle?.thumbnail ? currentArticle?.thumbnail : 'http://picsum.photos/1024/600?random=1'" :alt="currentArticle?.title" />
-        </nuxt-link>
-      </figure>
-    </div>
-  </article> -->
   <article
   v-if="parseData"
     class="basic-article border-custom"
@@ -95,7 +69,7 @@ const parseData = computed(() => {
       </div>
     </div>
   </article>
-  <div v-html="LAYOUT_PARSE.styleClasses"></div>
+  <div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
 </template>
 
 <style lang="scss" scoped>

components/dynamic-page/page-component/templates/categories/categories/Vertical.vue

@@ -46,14 +46,6 @@ const mapActivesToItems = (index: number) => {
           </svg>
 
           <h3
-            :class="[
-              index !== 0
-                ? store.page.classifyScreenByWidth({
-                    tablet: '',
-                    smartphone: 'd-none',
-                  })
-                : '',
-            ]"
             :style="mapActivesToItems(index)['h3.categories']"
           >
             {{ component.title }}

components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue

@@ -5,10 +5,10 @@ import { enumPageComponentStaticChild } from "@/definitions/enum";
 
 const props = defineProps<{
     records?: any[]
-    component: any;
+    component?: any;
 }>();
 
-const globalState = ref({})
+const globalState = ref<any>({})
 const setGlobalState = (id: any) => {
     globalState.value[id] = !globalState.value[id];
 }
@@ -19,7 +19,7 @@ const setGlobalState = (id: any) => {
         <div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
             <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
                 <div class="navigation-submenu">
-                    <div class="navigation_title " @click="selectNavigationComponent">{{ record?.title }}</div>
+                    <div class="navigation_title ">{{ record?.title }}</div>
                     <div class="navigation-item submenu-container dropdown-container">
                         <RecusiveNavItem :records="record.childs" />
                     </div>
@@ -28,7 +28,7 @@ const setGlobalState = (id: any) => {
             <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
                 <div class="navigation-submenu">
                     <div class="position-relative ps-3">
-                        <div class="navigation_title " @click="selectNavigationComponent">{{ record?.title }}</div>
+                        <div class="navigation_title ">{{ record?.title }}</div>
                     </div>
                     <div class="full-layout dropdown-container">
                         <template v-if="record.data">
@@ -40,7 +40,7 @@ const setGlobalState = (id: any) => {
                 </div>
             </template>
             <template v-else>
-                <div class="navigation_title navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
+                <div class="navigation_title navigation-item" >{{ record?.title }}</div>
             </template>
         </div>
     </div>

components/dynamic-page/page-component/templates/others/weathers/WeatherDay.vue

@@ -21,7 +21,7 @@
         <div class="big-temp">28°</div>
         <div class="name">Mưa nhẹ</div>
       </div>
-      <div class="color-gray-2">
+      <!-- <div class="color-gray-2">
         <p>Cao: 28° Thấp: 24°</p>
         <div>
           <span>Không khí:</span>
@@ -52,9 +52,9 @@
             </div>
           </div>
         </div>
+      </div> -->
     </div>
-    </div>
+    <!-- <div class="box-info-weather__right text-right color-gray-2">
-    <div class="box-info-weather__right text-right color-gray-2">
       <div class="weather-tooltip mb40">
         <span class="weather-tooltip-group">
           <span>Cảm giác như 33° </span>
@@ -134,7 +134,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <style scoped lang="scss">
@@ -145,7 +145,7 @@
   margin-bottom: 24px;
   font-size: 16px;
   line-height: 1.5;
-  min-height: 240px;
+  // min-height: 240px;
   &.flexbox {
     align-items: flex-end;
     display: flex;

components/dynamic-page/page-component/templates/others/weathers/index.vue

@@ -9,7 +9,7 @@ const _props = defineProps<{
 }>();
 
 const definedDynamicComponent: Record<string, any> = {
-  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']]['NAVIGATION_TOP_DEFAULT']]: WeatherDay,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]["WEATHER"]]["WEATHER_DEFAULT"]]: WeatherDay,
 };
 
 const getCurrentComponent = computed(() => _props.settings.layout);

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PageSection } from "@/models/cms";
+import type { PageSection } from "@/server/models/dynamic-page/index";
 import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "@/definitions/enum";
 import { NONE_DEFAULT_LAYOUT } from "./index";
 
@@ -13,6 +13,8 @@ const _props = defineProps<{
 const definedDynamicSection: Record<string, any> = {
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']]: NONE_DEFAULT_LAYOUT,
@@ -34,7 +36,6 @@ const definedDynamicSection: Record<string, any> = {
 const getCurrentSection = computed(() => {
   return _props.settings.layout
 });
-
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};

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

@@ -2,7 +2,7 @@
 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 "@/models/cms";
+import type { PageSection } from "@/server/models/dynamic-page/index";
 
 const props = defineProps<{
   layout?: string;
@@ -19,11 +19,22 @@ const defineTypeRecusive = {
 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_LEFT_TWO']:
       _setting_options = {
         MAX_ELEMENT: 2,
@@ -130,6 +141,19 @@ const CLASS_FOR_SECTION = computed(() => {
         section_layout: "section_layout two_col_layout",
       };
       break;
+      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
+      _classForSection = {
+        section_layout: "section_layout six_col_layout",
+        1: "col-span-5",
+      };
+      break;
+      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
+      _classForSection = {
+        section_layout: "section_layout six_col_layout",
+        1: "col-span-2",
+        2: "col-span-3",
+      };
+      break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
       _classForSection = {
         section_layout: "section_layout three_col_layout",

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
-import type { PageSection } from "@/models/cms";
+import type { PageSection } from "@/server/models/dynamic-page/index";
 
 const props = defineProps<{
     label?: any

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Article_Section_Default } from "./index";
-import type { PageSection } from "@/models/cms";
+import type { PageSection } from "@/server/models/dynamic-page/index";
 import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
 
 const _props = defineProps<{

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PageSection } from "@/models/cms";
+import type { PageSection } from "@/server/models/dynamic-page/index";
 import { enumPageSectionKey } from "@/definitions/enum";
 import { None_Section } from "./index";
 

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DynamicLayout from "@/components/dynamic-page/page-section/layouts/index.vue";
-import type { PageSection } from "@/models/cms";
+import type { PageSection } from "@/server/models/dynamic-page/index";
 
 const props = defineProps<{
   label?: any;

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PageSection } from "@/models/cms";
+import type { PageSection } from "@/server/models/dynamic-page/index";
 import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
 import { None_Section_Default } from "./index";
 

components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue

@@ -10,7 +10,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
         <div>
           <div class="footer-navigation-container">
             <div>
-              <AssignComponent :type="enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]]['NAVIGATION_BOTTOM_DEFAULT']" />
+              <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT']" />
             </div>
           </div>
 

components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue

@@ -46,7 +46,7 @@ onMounted(() => {
             <img src="~/assets/images/tienphong/tamviet-logo.png" alt="">
           </div>
           <div class="main-header-navbar">
-            <AssignComponent :type="enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]]['NAVIGATION_TOP_DEFAULT']" />
+            <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT']" />
           </div>
         </div>
       </div>

definitions/cms/page.type.ts

@@ -155,7 +155,9 @@ export const pageSectionTempaltes = {
 export const pageSectionLayouts = {
   [`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]: [
     { title: "2 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_TWO'] },
+    { 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: "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'] },
     { title: "4 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FOUR'] },
@@ -268,6 +270,7 @@ export const pageComponentLayouts = {
   /* ADVERTISING */
   [`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]: [
     { title: "Cơ bản (300x260)", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['DEFAULT'] },
+    { title: "full width", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['MAIN'] },
   ],
 
   /* OTHER */

definitions/enum/page.enum.ts

@@ -231,6 +231,8 @@ export const enumPageSectionTemplate = {
 export const enumPageSectionLayouts = {
   [`${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_FIVE': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:5',
     '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',
@@ -349,6 +351,7 @@ export const enumPageComponentLayouts = {
   /* ADVERTISING */
   [`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]: {
     'DEFAULT': "TYPE:Default",
+    'MAIN': "TYPE:Main"
   },
 
   /** OTHER */