thainv-dev: Fix emagazine

Reviewed-on: http://work.gct.com.vn/minhnt/NSG_PORTAL_V2/pulls/9

app.vue

@@ -26,9 +26,7 @@ useHead({
   <div>
     <NuxtLayout>
       <NuxtLoadingIndicator />
-      <ErrorBoundary>
-        
-
+      <NuxtErrorBoundary>
         <template #error="{ error }">
           <div class="text-center my-8">
             <h2 class="mb-2">404</h2>
@@ -38,12 +36,26 @@ useHead({
               trang chủ</button>
           </div>
         </template>
-      </ErrorBoundary>
-      <ScrollToTop />
+      </NuxtErrorBoundary>
+      <KeepAlive>
+        <NuxtPage />
+      </KeepAlive>
     </NuxtLayout>
   </div>
   </a-config-provider> -->
   <NuxtLayout>
+      <NuxtLoadingIndicator />
+      <NuxtErrorBoundary>
+        <template #error="{ error }">
+          <div class="text-center my-8">
+            <h2 class="mb-2">404</h2>
+            <p class="mb-3">Trang không tồn tại.</p>
+            <p v-if="utils.isDev()">{{ error }}</p>
+            <button @click="resolveError(error)" type="button" class=" p-2 border focus:outline-none border-blue text-blue-7 hover:(bg-blue text-white) rounded-lg transition-colors">Về
+              trang chủ</button>
+          </div>
+        </template>
+      </NuxtErrorBoundary>
       <KeepAlive>
         <NuxtPage />
       </KeepAlive>

assets/styles/app.sass

@@ -1,6 +1,4 @@
 @import custom.css
-body
-    @apply font-beVietnam text-black-500
 
 // video
 //     max-width: 100% !important

assets/styles/custom.css

@@ -1,8 +1,8 @@
 
-@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap'); */
 
 .custom_scrollbar {
   white-space: nowrap;

assets/styles/style.scss

@@ -1,14 +1,127 @@
-// .style_layout {
-//     > .section-container {
-//         > .layout_define {
-//             > .section_layout {
-//                 @apply gap-x-10 #{!important};
+@import url("https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
+
+// Variables
+$font-gelasio: "Gelasio", serif;
+$font-raleway: "Raleway", sans-serif;
+
+$color-primary: #ED1C24;
+$color-brown: #9E1E0F;
+$color-text: #151411;
+$color-paragraph: #AFADB5;
+$color-placeholder: #F9F9F9;
+$color-line: #EDEDED;
+
+
+// Mixins
+
+// extends
+
+body {
+    font-size: 14px;
+    font-family: $font-raleway;
+    scroll-behavior: smooth;
+}
+
+// %headings {
+//     color: $color-text;
+//     font-family: $font-gelasio;
+//     line-height: 130%;
+//     font-weight: 700;
 // }
+
+// %label {
+//     color: $color-text;
+//     font-family: $font-raleway;
+//     line-height: 130%;
+//     font-weight: 700;
 // }
+
+// %paragraph {
+//     color: $color-paragraph;
+//     font-family: $font-raleway;
+//     line-height: 180%;
+//     font-weight: 500;
+// }
+
+// h1, h2, h3, h4, h5, h6 {
+//     font-family: $font-gelasio;
+// }
+
+// h1 a {
+//     @extend %headings;
+//     font-size: 64px;
+// }
+
+// h2 a{
+//     @extend %headings;
+//     font-size: 44px;
+// }
+
+// h3 a{
+//     @extend %headings;
+//     font-size: 24px;
+// }
+
+// h4 a{
+//     @extend %headings;
+//     font-size: 20px;
+// }
+
+// h5 a{
+//     @extend %headings;
+//     font-size: 18px;
+// }
+
+// h6 a{
+//     @extend %headings;
+//     font-size: 16px;
+// }
+
+// h6.h6-plus a {
+//     @extend %headings;
+//     font-size: 14px;
+//     font-weight: 500;
+// }
+
+
+// label {
+//     &.label-l1 {
+//         @extend %label;
+//         font-size: 18px;
+//     }
+    
+//     &.label-l2 {
+//         @extend %label;
+//         font-size: 16px;
+//     }
+    
+//     &.label-l3 {
+//         @extend %label;
+//         font-size: 14px;
 //     }
 // }
 
 
+
+// p {
+//     &.paragraph-p1 {
+//         font-size: 18px;
+//     }
+
+//     &.paragraph-p2 {
+//         font-size: 16px;
+//     }
+
+//     &.paragraph-p2 {
+//         font-size: 14px;
+//     }
+// }
+
+a {
+    @apply hover:text-primary font-gelasio font-700 leading-130%;
+}
+
 figure {
     margin: auto !important;
 }
@@ -17,30 +130,30 @@ img {
     object-fit: cover!important;
 }
 
-.content {
-    & p {
-        @apply mb-2 font-arial  leading-160%;
-    }
+// .content {
+//     & p {
+//         @apply mb-2 font-arial  leading-160%;
+//     }
 
-    & #title {
-        @apply font-merriweather font-bold leading-150%;
-    }
+//     & #title {
+//         @apply font-merriweather font-bold leading-150%;
+//     }
 
-    & #intro, & #sub {
-        @apply font-arial  font-medium leading-160%;
-    }
+//     & #intro, & #sub {
+//         @apply font-arial  font-medium leading-160%;
+//     }
 
-    & audio {
-        @apply w-full;
-    }
+//     & audio {
+//         @apply w-full;
+//     }
 
-    & document, & a, & custom-figure, & author {
-        @apply cursor-pointer text-primary-600;
-    }
-}
+//     & document, & a, & custom-figure, & author {
+//         @apply cursor-pointer text-primary;
+//     }
+// }
 
 div[layout="TYPE:Detail-LAYOUT:image"] {
-    & p,& figure.align-center-image, & #sub, & #title, & #intro, & #breakcrumb, & #navigation__bottom {
+    & p,& figure.align-center-image, & #sub, & #title, & #intro, & #breadcrumb, & #navigation__bottom {
         @apply lg:max-w-640px mx-auto;
     }
 }
@@ -56,3 +169,52 @@ div[layout="ARTICLE_PAGE"] {
         @apply md:gap-20px
     }
 }
+
+.container {
+    max-width: 1385px;
+}
+
+.layout_container {
+
+    & > .section_layout {
+        @apply mt-12 first:mt-0;
+
+    }
+}
+
+@media (max-width: 640px) {
+    .collection-container {
+        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+        & > article.basic-article {
+            flex-direction: row!important;
+
+            & > .basic-article_thumbnail {
+                width: 50%!important;
+            }
+        }
+    }
+} 
+
+.emagazine, .infographic, .image {
+    p {
+        @apply w-full max-w-660px mx-auto text-18px font-raleway leading-180%;
+    }
+
+    figure {
+        @apply w-full;
+    }
+    img {
+        @apply mx-auto;
+    }
+}
+
+.emagazine {
+    h1,h2,h3,h4,h5,h6,span,em {
+        @apply w-full max-w-660px mx-auto;
+    }
+}
+.detail-default {
+    p {
+        @apply  text-18px font-raleway leading-180% my-10px;
+    }
+}

components/article/Event.vue

@@ -6,7 +6,7 @@ const props = defineProps<{ events: any[] }>()
     <div v-if="events?.length" class="mt-6">
         <h3 class="text-xl font-semibold after:content-[':']">Sự kiện</h3>
         <ul class="flex flex-col gap-2 list-disc ml-4 my-2 pl-3 flex-wrap">
-            <li v-for="(event, index) in events" :key="index" class="font-semibold text-primary-100">
+            <li v-for="(event, index) in events" :key="index" class="font-semibold text-primary">
                 <nuxt-link :to="{ name: 'event-eventSlug', params: { eventSlug: event.code } }">{{ event.title }}</nuxt-link>
             </li>
         </ul>

components/article/immerse/Poll.vue

@@ -15,13 +15,14 @@ const store = reactive({
 });
 const { currentPoll } = storeToRefs(store.poll);
 const { currentPollOptions } = storeToRefs(store.pollOptions);
-const { currentPollResponses } = storeToRefs(store.pollResponse);
+// const { currentPollResponses } = storeToRefs(store.pollResponse);
 const poll = reactive<Poll | any>({});
 const options = ref<PollOption[] | any[]>([]);
+
 async function loadData() {
   await store.poll.fetchById(String(props.dataId));
   await store.pollOptions.fetchByPollId(String(props.dataId));
-  await store.pollResponse.fetchByPollId(String(props.dataId));
+  // await store.pollResponse.fetchByPollId(String(props.dataId));
   assignData();
 }
 
@@ -30,13 +31,14 @@ function assignData() {
   options.value = currentPollOptions.value;
 }
 
-onBeforeMount(async () => {
 await loadData();
-});
+// onBeforeMount(async () => {
+// });
 
-const selectedOption = ref<any>(-1);
-const showResult = ref(false);
+// const selectedOption = ref<any>(-1);
+// const showResult = ref(false);
 const alreadyVoted = ref(false);
+const showResult = ref(false)
 const canShowResult = computed(() => {
   switch (poll.settings?.resultPublication) {
     case 0:
@@ -49,29 +51,77 @@ const canShowResult = computed(() => {
       return alreadyVoted.value && (!poll.endTime || new Date() > new Date(poll.endTime));
   }
 });
+
+
+// const toggleResults = () => {
+//   if (canShowResult.value) showResult.value = !showResult.value;
+// };
+
+const singleSelect = ref<number>(-1)
+const multipleSelect = ref<number []>([])
+
 const totalResponses = ref(0);
 async function submitVote() {
-  if (selectedOption.value >= 0 && !alreadyVoted.value) {
-    const result = await store.pollResponse.create({ optionId: selectedOption.value });
+  // if (selectedOption.value >= 0 && !alreadyVoted.value) {
+  //   const result = await store.pollResponse.create({ optionId: selectedOption.value });
+  //   if (result?.id) {
+  //     totalResponses.value = options.value?.reduce((sum, option) => sum + Number(option.responseCount ?? 0), 1);
+  //     options?.value?.forEach((option: PollOption | any) => {
+  //       if (option.id === selectedOption.value) {
+  //         option.responseCount = (option.responseCount ?? 0) + 1;
+  //       }
+  //       option.percentage = Number(((option.responseCount / totalResponses.value) * 100).toFixed(1));
+  //     });
+  //     alreadyVoted.value = true;
+  //   }
+  // }
+  switch (poll.type) {
+    case 1:
+      if(singleSelect.value >= 0) {
+        const result = await store.pollResponse.create({ optionId: singleSelect.value })
         if(result?.id) {
           totalResponses.value = options.value?.reduce((sum, option) => sum + Number(option.responseCount ?? 0), 1);
           options?.value?.forEach((option: PollOption | any) => {
-        if (option.id === selectedOption.value) {
+          if (option.id === singleSelect.value) {
             option.responseCount = (option.responseCount ?? 0) + 1;
           }
           option.percentage = Number(((option.responseCount / totalResponses.value) * 100).toFixed(1));
+          alreadyVoted.value = true
         });
-      alreadyVoted.value = true;
         }
       }
   }
-
-const toggleResults = () => {
-  if (canShowResult.value) showResult.value = !showResult.value;
-};
+}
 </script>
 <template>
-  <span class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5]">
+
+  <div class="inline-block px-4 py-2 mb-5">
+    <h3 class="text-#000 font-raleway font-italic text-16px font-500 leading-140% mb-2">{{ poll?.title }}</h3>
+    <ul class="flex flex-col gap-3">
+        <template v-if="poll.type === 1">
+          <li v-for="(option, index) in options" :key="index">
+              <input :id="`option-${index}`" :disabled="singleSelect >= 0 && alreadyVoted ? true : false" type="radio" class="peer opacity-0" :value="option.id" v-model="singleSelect">
+              <label :for="`option-${index}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-50% before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-10px after:translate-y--50% after:border-#000 after:content-[''] after:inline-block after:w-10px after:h-10px after:rounded-full peer-checked:after:bg-primary peer-checked:before:border-primary ">{{ option?.title }}</label>
+          </li>
+        </template>
+    </ul>
+
+    <div class="flex items-center justify-center mt-3">
+      <button @click="submitVote()" v-if="!alreadyVoted" :disabled="alreadyVoted && singleSelect >= 0 ? true : false" class="px-5 py-10px rounded-6px bg-primary text-#fff font-raleway text-14px font-400">Gửi kết quả</button>
+      <button @click="showResult = true" v-if="alreadyVoted" class="px-5 py-10px rounded-6px bg-primary text-#fff font-raleway text-14px font-400">Xem kết quả</button>
+    </div>
+
+    <div class="mt-5" v-if="showResult && canShowResult">
+      <h3 class="text-#000 font-raleway font-italic text-16px font-500 leading-140% mb-2">{{ poll?.title }}</h3>
+      <ul>
+        <li v-for="(answer, index) in options" :key="index" class="flex gap-4 items-center text-#000 font-raleway text-12px leading-140%">
+          {{ answer.percentage}}%
+          <div :style="{ width: `${answer.percentage}%` }" :class="answer.id === singleSelect ? 'bg-primary' : 'bg-#AEAEAE'" class="h-1.5 rounded-full"></div>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- <span class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5]">
     <span class="block">
       <span class="underline decoration-gray-500 font-bold">
         {{ poll?.title }}
@@ -100,5 +150,5 @@ const toggleResults = () => {
       </span>
       <b>Tổng số lượt binh chọn: {{ totalResponses }}</b>
     </span>
-  </span>
+  </span> -->
 </template>

components/article/immerse/Quiz.vue

@@ -246,23 +246,33 @@ async function submitSend() {}
 </script>
 
 <template>
-  <div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black-500">
+  <div class="inline-block px-4 py-2  !text-black-500">
     <h5 class="underline decoration-gray-500 font-bold mb-2">Câu đố: {{ data?.title }}</h5>
 
-    <ul class="px-3">
+    <ul class="px-3 flex flex-col gap-3">
       <li v-for="(question, questionIndex) in data.questionGeneral" :key="questionIndex" class="mb-2">
-        <h5 class="mb-1 font-700 text-black-500">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
+        <h5 class="text-#000 font-raleway font-italic text-16px font-500 leading-140% mb-2">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
 
         <ul>
+        <template v-if="question.type === 1">
           <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
-            <input :id="`answer-${questionIndex}-${answerIndex}`" :type="question.type === 1 ? 'radio' : 'checkbox'" :value="answerIndex" v-model="selectQuizAnswer[questionIndex]" />
-            <label :for="`answer-${questionIndex}-${answerIndex}`" class="font-semibold">{{ answer.title }}</label>
+            <input :id="`answer-${questionIndex}-${answerIndex}`" type="radio" :value="answerIndex" class="peer opacity-0"  v-model="selectQuizAnswer[questionIndex]" />
+            <label :for="`answer-${questionIndex}-${answerIndex}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-50% before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-10px after:translate-y--50% after:border-#000 after:content-[''] after:inline-block after:w-10px after:h-10px after:rounded-full peer-checked:after:bg-primary peer-checked:before:border-primary ">{{ answer.title }}</label>
           </li>
+        </template>
+        <template v-else>
+          <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
+            <input :id="`answer-${questionIndex}-${answerIndex}`" type="checkbox" :value="answerIndex" class="peer opacity-0"  v-model="selectQuizAnswer[questionIndex]" />
+            <label :for="`answer-${questionIndex}-${answerIndex}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-2px before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-6px after:translate-y--50% after:border-#000 after:content-['✔'] after:text-12px after:text-transparent after:inline-block after:w-14px after:h-14px  peer-checked:after:text-white peer-checked:before:border-primary peer-checked:before:bg-primary ">{{ answer.title }}</label>
+          </li>
+        </template>
         </ul>
       </li>
     </ul>
 
-    <button @click="submitSend" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Gửi câu trả lời</button>
+    <div class="flex justify-center">
+    <button @click="submitSend" class="mx-auto px-5 py-10px rounded-6px bg-primary text-#fff font-raleway text-14px font-400">Gửi câu trả lời</button>
+    </div>
   </div>
   <!-- <div>
     <h5 class="text-black text-18px font-700">{{ data?.title }}</h5>
@@ -274,7 +284,7 @@ async function submitSend() {}
         <li
           v-for="(index, item) in data.questionGeneral.length"
           :key="index"
-          :class="step >= index - 1 ? 'bg-primary-500 text-white transition-all delay-300' : 'bg-white text-primary-500'"
+          :class="step >= index - 1 ? 'bg-primary-500 text-white transition-all delay-300' : 'bg-white text-primary'"
           class="relative z-3 w-7 h-7 rounded-full flex items-center justify-center border-2 border-solid border-primary-500"
         >
           <template template v-if="step > index - 1"><Icon name="material-symbols:check-rounded" class="text-22px" /></template>

components/article/immerse/Survey.vue

@@ -270,24 +270,41 @@ async function submitSend() {
 
 <template>
 
-<div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black-500">
+<div class="inline-block px-4 py-2 !text-black-500">
     <h5 class="underline decoration-gray-500 font-bold mb-2">Khảo sát: {{ dataSurvey?.title }}</h5>
-
     <ul class="px-3">
         <li v-for="(question, questionIndex) in dataSurvey.questionGeneral" :key="questionIndex" class="mb-2">
-            <h5 class="mb-1 font-700  text-black-500">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
+            <h5 class="text-#000 font-raleway font-italic text-16px font-500 leading-140% mb-2">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
 
-            <ul>
+            <!-- <ul>
                 <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
                     <input :id="`answer-survey-${questionIndex}-${answerIndex}`" :type="question.type === 1 ? 'radio' : 'checkbox'" :value="answerIndex" v-model="selectSurveyAnswer[questionIndex]">
                     <label :for="`answer-survey-${questionIndex}-${answerIndex}`" class="font-semibold">{{ answer.title }}</label>
                 </li>
                 
+            </ul> -->
+
+            <ul>
+        <template v-if="question.type === 1">
+          <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
+            <input :id="`answer-survey-${questionIndex}-${answerIndex}`" type="radio" :value="answerIndex" class="peer opacity-0"  v-model="selectSurveyAnswer[questionIndex]" />
+            <label :for="`answer-survey-${questionIndex}-${answerIndex}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-50% before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-10px after:translate-y--50% after:border-#000 after:content-[''] after:inline-block after:w-10px after:h-10px after:rounded-full peer-checked:after:bg-primary peer-checked:before:border-primary ">{{ answer.title }}</label>
+          </li>
+        </template>
+        <template v-else>
+          <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
+            <input :id="`answer-survey-${questionIndex}-${answerIndex}`" type="checkbox" :value="answerIndex" class="peer opacity-0"  v-model="selectSurveyAnswer[questionIndex]" />
+            <label :for="`answer-survey-${questionIndex}-${answerIndex}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-2px before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-6px after:translate-y--50% after:border-#000 after:content-['✔'] after:text-12px after:text-transparent after:inline-block after:w-14px after:h-14px  peer-checked:after:text-white peer-checked:before:border-primary peer-checked:before:bg-primary ">{{ answer.title }}</label>
+          </li>
+        </template>
         </ul>
         </li>
     </ul>
 
-    <button @click="submitSend" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Gửi câu trả lời</button>
+    <div class="flex justify-center">
+    <button @click="submitSend" class="mx-auto px-5 py-10px rounded-6px bg-primary text-#fff font-raleway text-14px font-400">Gửi câu trả lời</button>
+    </div>
+    <!-- <button @click="submitSend" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Gửi câu trả lời</button> -->
   </div>
 </template>
 

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

@@ -1,38 +1,38 @@
 <script setup lang="ts">
-import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
+import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentKey } from "@/definitions/enum";
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage } = storeToRefs(useDynamicPageStore());
 const props = defineProps<{
-  type: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
+  type?: any; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
 }>();
 
-// const store = reactive({
-//   page: useCmsPageStore(),
-//   section: usePageSectionStore(),
-//   component: usePageComponentStore(),
-// });
-
-// const { currentPage } = storeToRefs(useCmsPageStore());
-
+const contentParse = computed(() => (currentPage.value.content ? JSON.parse(currentPage.value.content) : {}));
 const defineTypeRecusive = {
-  TOP_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP'],
-  BOTTOM_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM'],
+  TOP_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_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:
-      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
-        return component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
+    if (contentParse.value.navigationTop) {
+        result =
+          currentPage.value.components &&
+          currentPage.value.components.find((component: any) => {
+            return component.id === contentParse.value.navigationTop;
           });
-      console.log(result)
+      }
       break;
     case defineTypeRecusive.BOTTOM_NAVIGATION:
-      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
-        return component.settings && component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.BOTTOM_NAVIGATION
+    if (contentParse.value.navigationBottom) {
+        result =
+          currentPage.value.components &&
+          currentPage.value.components.find((component: any) => {
+            return component.id === contentParse.value.navigationBottom;
           });
+      }
       break;
     default:
       result = {};
@@ -40,8 +40,6 @@ const findDataPosition = computed(() => {
   }
   return result;
 });
-
-console.log(findDataPosition, 'findDataPosition')
 </script>
 
 <template>

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

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

components/dynamic-page/page-component/templates/advertising/layouts/Default.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import ADSDefault from '@/assets/images/ads.jpg'
-</script>
-<template>
-    <div class="shadow sticky top-10px">
-        <img :src="ADSDefault" alt="quảng cáo" class=" object-cover">
-    </div>
-</template>
-<style scoped lang="scss">
-    .content {
-    }
-</style>

components/dynamic-page/page-component/templates/advertisings/advertisings/Default.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 cáo</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/Main.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="pt-5">
+    <div class="content p-3 border-y-1px border-solid border-#000">
+    <img class="mx-auto max-h-[300px] object-cover" src="/assets/images/tienphong/ads_full.png" alt="">
+  </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.content {
+  font-size: 18px;
+}
+</style>

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

@@ -0,0 +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

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Default_Ads, Main_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,
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]['MAIN']]: Main_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 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :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,38 @@
+<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.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;
+    }
+  };
+});
+// console.log(getCurrentComponent.value, 'quảng caosd ád')
+</script>
+
+<template>
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
+</template>

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

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+const type = ref("");
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+
+const props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: any;
+  component?: any;
+}>();
+
+const LAYOUT_PARSE = computed(() => {
+  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
+  return Object.assign({}, designObject);
+});
+
+const parseData = computed(() => {
+  if (!props.dataResult) return;
+  const result = getInputValue(props.dataResult, "OBJECT");
+  switch (result?.contentType) {
+    case 1:
+      type.value = "";
+      // type.value = "Image";
+      break;
+    case 2:
+      type.value = "Image";
+      break;
+
+    case 3:
+      type.value = "Postcard";
+      break;
+
+    case 4:
+      type.value = "Video";
+      break;
+
+    case 5:
+      if (result?.layoutType === 4) {
+        type.value = "Emagazine";
+        break;
+      }
+      if (result?.layoutType === 3) {
+        type.value = "Infographics";
+        break;
+      }
+  }
+  return result;
+});
+</script>
+
+<template>
+  <article :id="`cpn_${props.component.id}`" class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
+    <nuxt-link :to="`/bai-viet/${parseData?.slug}`" class="article-thumbnail">
+      <img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
+    </nuxt-link>
+    <div class="card-audio__content">
+      <span class="flex justify-center">
+        <template v-if="['Image', 'Infographics', 'Emagazine'].includes(type)">
+          <svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M25.25 0.5H7.25C5.98438 0.5 5 1.53125 5 2.75V14.75C5 16.0156 5.98438 17 7.25 17H25.25C26.4688 17 27.5 16.0156 27.5 14.75V2.75C27.5 1.53125 26.4688 0.5 25.25 0.5ZM10.9531 3.5C11.75 3.5 12.4531 4.20312 12.4531 5C12.4531 5.84375 11.7969 6.5 10.9531 6.5C10.1094 6.5 9.45312 5.84375 9.45312 5C9.45312 4.20312 10.1562 3.5 10.9531 3.5ZM23.6562 13.625C23.5156 13.8594 23.2344 14 23 14H9.5C9.17188 14 8.9375 13.8594 8.79688 13.625C8.70312 13.3438 8.70312 13.0625 8.89062 12.8281L12.1719 8.32812C12.3125 8.14062 12.5 8 12.7812 8C13.0156 8 13.2031 8.14062 13.3438 8.32812L14.4219 9.78125L17.375 5.375C17.4688 5.14062 17.7031 5 17.9844 5C18.2188 5 18.4531 5.14062 18.5938 5.375L23.6094 12.875C23.75 13.0625 23.75 13.3906 23.6562 13.625ZM21.875 19.25H6.125C4.25 19.25 2.75 17.75 2.75 15.875V4.625C2.75 4.01562 2.23438 3.5 1.625 3.5C0.96875 3.5 0.5 4.01562 0.5 4.625V15.875C0.5 19.0156 2.98438 21.5 6.125 21.5H21.875C22.4844 21.5 23 21.0312 23 20.375C23 19.7656 22.4844 19.25 21.875 19.25Z"
+              fill="white"
+            />
+          </svg>
+        </template>
+        <template v-if="['Postcard', 'Video'].includes(type)">
+          <svg width="28" height="18" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 2.25V15.75C18.5 17.0156 17.4688 18 16.25 18H2.75C1.48438 18 0.5 17.0156 0.5 15.75V2.25C0.5 1.03125 1.48438 0 2.75 0H16.25C17.4688 0 18.5 1.03125 18.5 2.25ZM27.5 3V15.0469C27.5 16.2188 26.0938 16.9219 25.1094 16.2656L20 12.7031V5.34375L25.1094 1.78125C26.0938 1.125 27.5 1.82812 27.5 3Z" fill="white"/>
+</svg>
+
+        </template>
+      </span>
+      <div class="card-audio__type-category" > 
+        <div class="card-audio__type" v-if="type">{{ type }}</div>
+        <nuxt-link v-if="parseData?.category" to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
+          parseData?.category?.title
+        }}</nuxt-link>
+      </div>
+      
+        <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>
+    </div>
+  </article>
+  <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
+</template>
+
+<style lang="scss">
+.card-audio {
+  position: relative;
+  width: 100%;
+  padding-bottom: calc((16 / 9) * 100%);
+  overflow: hidden;
+
+  .article-thumbnail {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+
+    z-index: 1;
+
+    & img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .card-audio__content {
+    position: absolute;
+    width: 100%;
+    max-height: 100%;
+    bottom: 0;
+    padding: 20px 30px;
+    z-index: 3;
+    text-align: center;
+    h2 {
+      color: #fff;
+      margin: 12px 0 20px 0;
+      font-size: 24px;
+      font-weight: 700;
+      line-height: 130%;
+
+      &:hover {
+        color: #9e1e0f;
+      }
+    }
+  }
+
+  .card-audio__type-category {
+    display: flex;
+    gap: 2px;
+    justify-content: center;
+    margin-top: 12px;
+
+    .card-audio__type,
+    .card-audio__category {
+      padding: 0 10px;
+      font-size: 12px;
+      line-height: 180%;
+      text-transform: uppercase;
+    }
+
+    .card-audio__type {
+      background-color: #ed1c24;
+      color: #fff;
+    }
+
+    .card-audio__category {
+      background-color: #fff;
+      color: #000;
+    }
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.25);
+    z-index: 2;
+  }
+  .empty-block {
+    background-color: #409eff;
+    height: 100px;
+    display: block;
+  }
+}
+</style>

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

@@ -0,0 +1,256 @@
+<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?: any;
+  component?: any;
+}>();
+
+const LAYOUT_PARSE = computed(() => {
+  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
+  return Object.assign({}, designObject);
+});
+
+const parseData = computed(() => {
+  if (!props.dataResult) return;
+  const result = getInputValue(props.dataResult, "OBJECT");
+  return result;
+});
+</script>
+
+<template>
+  <article
+  v-if="parseData"
+  :id="`cpn_${props.component.id}`"
+    class="basic-article border-custom"
+    :class="LAYOUT_PARSE['article_Class']"
+    :style="LAYOUT_PARSE['article']"
+  >
+    <div class="basic-article_thumbnail article-thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
+      <template v-if="parseData">
+        <nuxt-link :to="`${parseData.code}`">
+          <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+        </nuxt-link>
+      </template>
+      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
+    </div>
+    <div class="basic-article_content" :class="[!parseData && 'no-data']">
+      <template v-if="parseData?.topics && parseData?.topics.length > 0">
+        <nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
+          <h5><nuxt-link :to="`/topic/${parseData?.topics[0].code}`">
+            {{ parseData?.topics[0].title }}</nuxt-link></h5>
+        </nuxt-link>
+      </template>
+      <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+        <template v-if="parseData">
+          <nuxt-link :to="`/bai-viet/${parseData.code}`">
+            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+          </nuxt-link>
+        </template>
+        <span v-else class="empty-block" style="height: 8px"></span>
+      </h3>
+      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="[LAYOUT_PARSE['time_Class'], 'article-time']">{{
+          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
+        }}</span>
+        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
+      </div>
+      <p class="mb-0 line-clamp-5 article-intro" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+        <template v-if="parseData">
+          {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
+        </template>
+        <span v-else class="empty-block" style="height: 5px"></span>
+      </p>
+      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="[LAYOUT_PARSE['time_Class'], 'article-time']">{{
+          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
+        }}</span>
+        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
+      </div>
+    </div>
+  </article>
+  <div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
+</template>
+
+<style lang="scss" scoped>
+.article-card-default {
+  display: flex;
+  gap: 20px;
+
+  &__content {
+    flex: 1;
+
+    .article-card-default__title {
+      color: #000;
+      h2 {
+        display: inline-block;
+        /* margin: 12px 0 20px 0; */
+        font-size: 24px;
+
+        font-weight: 700;
+        line-height: 130%;
+
+        &:hover {
+          color: #9e1e0f;
+        }
+      }
+
+      p {
+        font-size: 14px;
+        line-height: 150%;
+        font-weight: 400;
+      }
+    }
+  }
+
+  &__thumbnail {
+    width: 60%;
+  }
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.article-card-default__topic {
+  position: relative;
+  /* margin: 0 0 12px 12px; */
+
+  // background-color: #151411;
+  display: inline-block;
+
+  h5 {
+    font-size: 12px;
+    text-transform: uppercase;
+    // color: #fff;
+    padding: 0 12px;
+    height: 100%;
+    margin: 0;
+    border: 1px solid #000;
+    line-height: 180%;
+    font-weight: 300;
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    display: block;
+    width: 12px;
+    height: 100%;
+    background-color: #ed1c24;
+    left: -12px;
+    top: 0;
+  }
+}
+
+.article-card-default__bottom {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.35);
+  /* margin-top: 10px; */
+  a {
+    color: #ed1c24;
+  }
+}
+
+figure {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+img {
+  width: 100%;
+  object-fit: cover;
+}
+h3,
+p {
+  margin: 0;
+}
+.basic-article {
+  display: flex;
+  gap: 16px;
+  height: 100%;
+  padding: 20px;
+  background-size: cover;
+  flex-direction: column;
+  &.no-data {
+    gap: 5px !important;
+    padding: 0;
+  }
+  .line-clamp {
+    display: -webkit-box;
+    /* -webkit-line-clamp: 3; */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .basic-article_thumbnail {
+    width: 100%;
+  }
+  &.border-custom {
+    border-color: #e5e5e5 !important;
+  }
+  /* &.horizontal {
+    flex-direction: row;
+    .basic-article_thumbnail {
+      width: 40%;
+    }
+    &.reverse {
+      flex-direction: row-reverse;
+    }
+  } */
+
+  &_thumbnail {
+    img {
+      width: 100%;
+      border-radius: 2px;
+      aspect-ratio: 16/10;
+    }
+  }
+
+  &_content {
+    /* padding: 10px 0px; */
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1;
+    &.no-data {
+      padding: 0px;
+    }
+
+    h3 {
+      font-size: 16px;
+    }
+
+    p {
+      font-size: 14px;
+      /* margin-top: 10px; */
+      opacity: 85%;
+    }
+  }
+
+  .empty-block {
+    background-color: #409eff;
+    height: 100px;
+    display: block;
+  }
+
+  @media (max-width: 640px) {
+    padding-left: 0px!important;
+    padding-right: 0px!important;
+    border: 0px solid transparent!important;
+    flex-direction: column !important;
+
+    & .basic-article_thumbnail {
+      width: 100% !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,114 @@
+<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;
+  component?: any;
+}>();
+
+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 :id="`cpn_${props.component.id}`" class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :style="LAYOUT_PARSE['article']">
+    <div class="article_miss">
+      <template v-if="parseData">
+          <nuxt-link :to="`/bai-viet/${parseData.slug}`">
+            <div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
+          </nuxt-link>
+
+
+        <div class="article_miss_content" :style="LAYOUT_PARSE['content']">
+          <nuxt-link :to="`/bai-viet/${parseData.slug}`">
+          
+          <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+          </h3>
+          </nuxt-link>
+        </div>
+      </template>
+      <div v-else class="empty-box"></div>
+    </div>
+
+    <div v-html="LAYOUT_PARSE.styleClasses" v-if="LAYOUT_PARSE.styles"  style="display: none"></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/Video.vue

@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+
+const props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: any;
+  component?: any;
+}>();
+
+const LAYOUT_PARSE = computed(() => {
+  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
+  return Object.assign({}, designObject);
+});
+
+const parseData = computed(() => {
+  if (!props.dataResult) return;
+  const result = getInputValue(props.dataResult, "OBJECT");
+  return result;
+});
+</script>
+
+<template>
+  <article
+  :id="`cpn_${props.component.id}`"
+    class="basic-article border-custom"
+    :class="LAYOUT_PARSE['article_Class']"
+    :style="LAYOUT_PARSE['article']"
+  >
+    <!-- <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
+      <template v-if="parseData">
+        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+      </template>
+      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
+    </div>
+    <div class="basic-article_content" :class="[!parseData && 'no-data']">
+      <template v-if="parseData?.topics && parseData?.topics.length > 0">
+        <nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
+          <h5>{{ parseData?.topics[0].title }}</h5>
+        </nuxt-link>
+      </template>
+      <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+        <template v-if="parseData">
+          {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+        </template>
+        <span v-else class="empty-block" style="height: 8px"></span>
+      </h3>
+      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
+          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
+        }}</span>
+        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
+      </div>
+      <p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+        <template v-if="parseData">
+          {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
+        </template>
+        <span v-else class="empty-block" style="height: 5px"></span>
+      </p>
+      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
+          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
+        }}</span>
+        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
+      </div>
+    </div>
+     -->
+
+    <div class="article_video">
+        <template v-if="parseData">
+            <div class="article_video_container">
+                <div 
+                    class="article_video_thumb" 
+                    :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
+                >
+                  <Icon name="ri:play-circle-line" />
+                </div>
+                <div class="article_video_content">
+                    <div>
+                        <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+                            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+                        </h3>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+
+    <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
+  </article>
+</template>
+
+<style lang="scss" scoped>
+    .article_video {
+        .article_video_container {
+            display: flex;
+            align-items: center;
+            
+            .article_video_thumb {
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+                position: relative;
+                z-index: 0;
+                width: 250px;
+                height: 140px;
+                border-radius: 2px;
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                &::after {
+                    content: '';
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    background-color: rgba(0, 0, 0, 0.4);
+                    z-index: 1;
+                    top: 0px;
+                    left: 0px;
+                }
+                svg {
+                    font-size: 40px;
+                    color: white;
+                    position: relative;
+                    z-index: 2;
+                }
+            }
+
+            .article_video_content {
+                position: relative;
+                z-index: 2;
+                padding: 10px;
+                > div {
+                    background: #ffffff;
+                }
+                h3 {
+                    font-size: 16px;
+                    font-weight: 500;
+                    line-height: 24px;
+                    text-align: left;
+                    margin-bottom: 12px;
+                }
+            }
+        }
+    }
+    .empty-box {
+        margin: 10px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .empty-block {
+            width: 50%;
+            > div {
+                background-color: #409eff;
+                margin-bottom: 5px;
+            }
+        }
+        i {
+            font-size: 60px;
+        }
+    }
+</style>

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

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+import  { getResource } from "@/utils/resourceHandler";
+
+const props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+  component?: any;
+}>();
+
+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 :id="`cpn_${props.component?.id}`" 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_video">
+      <template v-if="parseData">
+        <div class="article_video_thumb article-thumbnail" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }">
+          <div></div>
+          <div class="article_video_content">
+            <span>
+              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M23.5 18.5C24.375 17.875 25.625 17.875 26.5 18.5L44.5 29.5C45.375 30 46 31 46 32C46 33.125 45.375 34.125 44.5 34.625L26.5 45.625C25.625 46.125 24.375 46.25 23.5 45.625C22.5 45.125 22 44.125 22 43V21C22 20 22.5 19 23.5 18.5ZM64 32C64 49.75 49.625 64 32 64C14.25 64 0 49.75 0 32C0 14.375 14.25 0 32 0C49.625 0 64 14.375 64 32ZM32 6C17.625 6 6 17.75 6 32C6 46.375 17.625 58 32 58C46.25 58 58 46.375 58 32C58 17.75 46.25 6 32 6Z"
+                  fill="#ED1C24"
+                />
+              </svg>
+            </span>
+            <h3 class="line-clamp article-title" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+              {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+            </h3>
+            <p class="mb-0 line-clamp article-intro" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+              {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
+            </p>
+          </div>
+        </div>
+      </template>
+      <div v-else class="empty-box">
+        <div class="d-flex justify-content-center align-items-center flex-column">
+          <i class="ri-play-circle-line"></i>
+        </div>
+      </div>
+    </div>
+
+    <div v-html="LAYOUT_PARSE.styleClasses" v-if="LAYOUT_PARSE.styles"></div>
+  </article>
+</template>
+
+<style lang="scss" scoped>
+.article_video {
+  .article_video_thumb {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    z-index: 0;
+    padding: 120px 85px 60px 85px;
+    border-radius: 2px;
+    margin: 10px;
+    cursor: pointer;
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.4);
+      z-index: 1;
+      top: 0px;
+      left: 0px;
+    }
+    .article_video_content {
+      position: relative;
+      z-index: 2;
+
+      h3 {
+        font-size: 44px;
+        font-weight: 700;
+        line-height: 57.2px;
+        text-align: left;
+        margin-bottom: 12px;
+        color: white;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: white;
+      }
+
+      i {
+        font-size: 80px;
+        color: #ed1c24;
+      }
+    }
+  }
+  .empty-box {
+    background-color: #409eff;
+    margin: 10px;
+    min-height: 60px;
+    i {
+      font-size: 60px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,45 @@
+<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,Article_Card_Miss_Hightlight } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any;
+}>();
+
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_DEFAULT"]]: Article_Card_Default,
+  [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(() => {
+  return _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 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
+</template>

components/dynamic-page/page-component/templates/articles/details/Emagazine.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+const emit = defineEmits(["dropData", "selectComponent"]);
+const _props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+const { currentArticle } = storeToRefs(useArticleStore())
+console.log(currentArticle.value, 'currentArticle')
+</script>
+<template>
+  <div  class="overflow-hidden emagazine">
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
+    <div class="article-detail" v-html="currentArticle.detail"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &__list {
+    margin: 0;
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+
+      &__title {
+        margin: 0;
+        font-size: 18px;
+        color: #000;
+        font-weight: 500;
+        text-transform: uppercase;
+        line-height: 180%;
+      }
+      // &:first-child {
+      //   color: blue;
+      // }
+
+      &:not(:first-child):before {
+        content: "\\";
+        position: absolute;
+        left: -18px;
+      }
+    }
+  }
+
+  .article-card-default__topic {
+    position: relative;
+    // background-color: #151411;
+    display: inline-block;
+
+    h5 {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      // color: #fff;
+      padding: 0 12px;
+      height: 100%;
+      margin: 0;
+      border: 1px solid #000;
+      line-height: 180%;
+      font-weight: 300;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      display: block;
+      width: 12px;
+      height: 100%;
+      background-color: #ed1c24;
+      left: -12px;
+      top: 0;
+    }
+  }
+}
+.content {
+  width: auto;
+}
+</style>

components/dynamic-page/page-component/templates/articles/details/General.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+const emit = defineEmits(["dropData", "selectComponent"]);
+
+const _props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+const SETTING_OPTIONS = {
+  BREADCRUMB_MAX_ELEMENT: 3,
+};
+const LAYOUT_PARSE = computed(() => {
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  return Object.assign({}, designObject);
+});
+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>
+  <div @click="selectComponent" class="overflow-hidden" @dragover.prevent @drop.stop.prevent="drop">
+    <div class="breadcrumb" v-if="!LAYOUT_PARSE['HideBreadcrumb']">
+      <ul class="breadcrumb__list">
+        <li
+          class="breadcrumb__list__item"
+          v-for="(item, index) in _props.dataResult && _props.dataResult?.length > 0 ? _props.dataResult : Array(SETTING_OPTIONS.BREADCRUMB_MAX_ELEMENT).fill(null)"
+          :key="index"
+        >
+          <p class="breadcrumb__list__item__title">
+            {{ item?.title }}
+          </p>
+        </li>
+      </ul>
+
+      <nuxt-link class="article-card-default__topic" :to="`#`">
+        <h5>Topic</h5>
+      </nuxt-link>
+    </div>
+
+    <div class="content">Nội dung bài viết sẽ ở đây</div>
+    <!-- <div class="btn-wrap" v-if="!LAYOUT_PARSE['HideCopylink']">
+      <div class="center-y">
+        <p title="Quay trở lại" class="button--back">
+          <Icon name="fa6-solid:arrow-left" />
+        </p>
+        <button class="button--bookmark">
+          <Icon name="fa6-regular:bookmark" />
+        </button>
+      </div>
+
+      <div class="center-y">
+        <button title="Copy link" class="button--back">
+          <Icon name="mdi:link-variant" />
+        </button>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<style scoped lang="scss">
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &__list {
+    margin: 0;
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+
+      &__title {
+        margin: 0;
+        font-size: 18px;
+        color: #000;
+        font-weight: 500;
+        text-transform: uppercase;
+        line-height: 180%;
+      }
+      // &:first-child {
+      //   color: blue;
+      // }
+
+      &:not(:first-child):before {
+        content: "\\";
+        position: absolute;
+        left: -18px;
+      }
+    }
+  }
+
+  .article-card-default__topic {
+    position: relative;
+    // background-color: #151411;
+    display: inline-block;
+
+    h5 {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      // color: #fff;
+      padding: 0 12px;
+      height: 100%;
+      margin: 0;
+      border: 1px solid #000;
+      line-height: 180%;
+      font-weight: 300;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      display: block;
+      width: 12px;
+      height: 100%;
+      background-color: #ed1c24;
+      left: -12px;
+      top: 0;
+    }
+  }
+}
+.empty {
+  border-radius: 6px;
+  background: #409eff;
+  width: 40px;
+  min-height: 20px;
+}
+.content {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  padding: 20px;
+  border-radius: 8px;
+  background: #eeeeee;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.title {
+  white-space: normal;
+}
+
+.intro {
+  white-space: normal;
+  padding-bottom: 10px;
+  display: block;
+}
+
+.detail {
+  white-space: normal;
+}
+
+// .btn-wrap {
+//   display: flex;
+//   flex-wrap: wrap;
+//   justify-content: space-between;
+//   align-items: center;
+
+//   @media (min-width: 768px) {
+//     flex-direction: row;
+//   }
+//   .class-default,
+//   .button--back {
+//     border-radius: 9999px;
+//     border-width: 1px;
+//     width: 3rem;
+//     height: 3rem;
+//     margin: 0;
+//     font-size: 17px;
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//     background-color: #ffffff;
+//     border: 1px solid rgb(229, 231, 235);
+//     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+//     &:hover {
+//       background-color: #e6f4ff;
+//       color: #3c7abc;
+//     }
+//   }
+
+//   .button--bookmark {
+//     width: 32px;
+//     height: 32px;
+//     border-radius: 200px;
+//     background-color: white;
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//     border: none;
+//     &:hover {
+//       background-color: #e6f4ff;
+//       color: #3c7abc;
+//     }
+//   }
+// }
+.center-y {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+</style>

components/dynamic-page/page-component/templates/articles/details/Image.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+const emit = defineEmits(["dropData", "selectComponent"]);
+const { categoryTree } = storeToRefs(useCategoryStore());
+const { currentArticle } = storeToRefs(useArticleStore());
+if (categoryTree.value) {
+  await useCategoryStore().fetchBySiteId();
+}
+const _props = defineProps<{
+  dataResult?: any[];
+}>();
+const SETTING_OPTIONS = {
+  BREADCRUMB_MAX_ELEMENT: 3,
+};
+const currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId);
+function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
+  for (const category of categories) {
+    const currentPath = [...path, { title: category.title, code: category.code }];
+    if (category.id === targetId) {
+      return currentPath;
+    }
+    if (category.children) {
+      const result: any = findElementPathById(category.children, targetId, currentPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+console.log(currentArticle.value, "currentArticle");
+</script>
+<template>
+  <div class="overflow-hidden w-full max-w-1385px mx-auto px-30px image">
+    <div class="">
+      <div class="category flex justify-between flex-wrap items-center mb-10px">
+        <ul class="flex gap-32px">
+          <li v-for="(category, index) in currentCategoryTree" :key="index" class="first:text-#000 text-#929292 last:after:content-[''] relative after:absolute after:content-['/'] after:text-20px after:right--20px">
+            <nuxt-link class="font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
+          </li>
+        </ul>
+
+        <div v-if="currentArticle.topics" class="pl-20px relative bg-primary inline-block">
+          <nuxt-link class="h-30px block py-4px px-16px border-1 border-#000 bg-white text-12px leading-180% font-raleway font-400" :to="`/topic/${currentArticle.topics[0].code}`">{{ currentArticle.topics[0].title }}</nuxt-link>
+        </div>
+      </div>
+        <h2 class="font-gelasio text-44px font-bold leading-130%" v-if="currentArticle.title" v-html="currentArticle.title"></h2>
+      <!-- <div class="grid grid-cols-12 gap-20px">
+      <div class="col-span-3"></div>
+      </div> -->
+
+      <div class="author flex gap-12px my-20px" v-if="currentArticle.authors">
+        <ul class="flex">
+          <li :style="{ 'z-index': index + 1 }" class="relative ml--12px first:ml-0" v-for="(author, index) in currentArticle.authors" :key="index">
+            <nuxt-link :to="`/tac-gia/${author.code}`">
+              <img :src="author.thumbnail || `http://picsum.photos/1024/600?random=1`" alt="" class="w-64px p-1px border-1px border-white h-64px object-cover rounded-full" />
+            </nuxt-link>
+          </li>
+        </ul>
+        <div>
+          <div class="mt-10px">
+            <nuxt-link class="font-raleway text-#000" v-for="(author, index) in currentArticle.authors" :key="index" :to="`/tac-gia/${author.code}`">{{ author.title + (index < currentArticle.authors.length - 1 ? ", " : "") }}</nuxt-link>
+          </div>
+          <div class="text-12px">Xuất bản vào {{ formatDate(currentArticle.publishedOn, "DD/MM/YYYY | hh:mm") }}</div>
+        </div>
+      </div>
+      <div v-html="currentArticle.detail"></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$max-width: 1276px;
+
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &__list {
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+      &:first-child {
+        color: blue;
+      }
+
+      &:not(:first-child):before {
+        content: "";
+        width: 7px;
+        height: 7px;
+        border-top: 1px solid #bdbdbd;
+        border-right: 1px solid #bdbdbd;
+        transform: rotate(45deg);
+        position: absolute;
+        left: -18px;
+        top: 8px;
+      }
+    }
+  }
+
+  &__time {
+    color: #9f9f9f;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+}
+
+.empty {
+  border-radius: 6px;
+  background: #409eff;
+  width: 40px;
+  min-height: 20px;
+}
+.content {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  padding: 20px;
+  border-radius: 8px;
+  background: #eeeeee;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.title {
+  white-space: normal;
+}
+
+.intro {
+  white-space: normal;
+  padding-bottom: 10px;
+  display: block;
+}
+
+.detail {
+  white-space: normal;
+}
+
+.btn-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+  .class-default,
+  .button--back,
+  .button--bookmark {
+    border-radius: 8px;
+    border-width: 1px;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    font-size: 17px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    border: 1px solid rgb(229, 231, 235);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    &:hover {
+      background-color: #e6f4ff;
+      color: #3c7abc;
+    }
+
+    &.copy-link {
+      border-radius: 999px;
+    }
+  }
+}
+
+.breadcrumb,
+.btn-wrap {
+  max-width: $max-width;
+  margin: auto;
+}
+
+.center-y {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+</style>

components/dynamic-page/page-component/templates/articles/details/Infographic.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+const emit = defineEmits(["dropData", "selectComponent"]);
+const _props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+const { currentArticle } = storeToRefs(useArticleStore())
+console.log(currentArticle.value, 'currentArticle')
+</script>
+<template>
+  <div  class="overflow-hidden infographic">
+  <!-- bổ sung sau -->
+    <!-- <img :src="currentArticle.thumbnail" alt="" class="w-full object-cover">
+
+    <div class="px-44px pb-30px my-30px max-w-660px mx-auto border-b-1px border-#000">
+    
+    </div> -->
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
+    <div v-html="currentArticle.detail"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &__list {
+    margin: 0;
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+
+      &__title {
+        margin: 0;
+        font-size: 18px;
+        color: #000;
+        font-weight: 500;
+        text-transform: uppercase;
+        line-height: 180%;
+      }
+      // &:first-child {
+      //   color: blue;
+      // }
+
+      &:not(:first-child):before {
+        content: "\\";
+        position: absolute;
+        left: -18px;
+      }
+    }
+  }
+
+  .article-card-default__topic {
+    position: relative;
+    // background-color: #151411;
+    display: inline-block;
+
+    h5 {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      // color: #fff;
+      padding: 0 12px;
+      height: 100%;
+      margin: 0;
+      border: 1px solid #000;
+      line-height: 180%;
+      font-weight: 300;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      display: block;
+      width: 12px;
+      height: 100%;
+      background-color: #ed1c24;
+      left: -12px;
+      top: 0;
+    }
+  }
+}
+.center-y {
+  width: auto;
+}
+</style>

components/dynamic-page/page-component/templates/articles/details/Podcast.vue

@@ -41,9 +41,9 @@ onMounted(async () => {
   clickElement("author", "author", "data-code");
 
   let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
-  let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
-  if (detailEmagazine && breakcrumb) {
-    breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
+  let breadcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
+  if (detailEmagazine && breadcrumb) {
+    breadcrumb.classList.add("lg:max-w-640px", "mx-auto");
   }
 });
 
@@ -115,6 +115,7 @@ const updateVolume = (num?: number) => {
     if(num) {
       volume.value += num
     }
+    // console.log('1231321')
     audioPlayer.value.volume = volume.value;
   }
 };
@@ -220,7 +221,7 @@ const durationComputed = computed(() => {
           </div>
           <div class="md:inline-flex hidden items-center gap-2 ml--10px h9 text-primary-600 rounded-8px text-28px cursor-pointer hover:bg-primary-100">
             <Icon @click="updateVolume(-0.1)" name="material-symbols:volume-mute"></Icon>
-            <input v-if="isVolume" class="accent-primary-600 h-1 w-12 lg:w-20 cursor-pointer" type="range" v-model="volume" @input="updateVolume" min="0.1" max="1" step="0.1" />
+            <input v-if="isVolume" class="accent-primary-600 h-1 w-12 lg:w-20 cursor-pointer" type="range" v-model="volume" @input="updateVolume()" min="0.1" max="1" step="0.1" />
             <Icon @click="updateVolume(0.1)" name="material-symbols:volume-up"></Icon>
           </div>
         </div>

components/dynamic-page/page-component/templates/articles/details/Video.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const { categoryTree } = storeToRefs(useCategoryStore());
+const { currentArticle } = storeToRefs(useArticleStore());
+if (categoryTree.value) {
+  await useCategoryStore().fetchBySiteId();
+}
+
+const currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId);
+function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
+  for (const category of categories) {
+    const currentPath = [...path, { title: category.title, code: category.code }];
+    if (category.id === targetId) {
+      return currentPath;
+    }
+    if (category.children) {
+      const result: any = findElementPathById(category.children, targetId, currentPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+</script>
+<template>
+  <div class="video-container">
+    <ul class="flex gap-32px lg:ml-80px md:ml-40px sm:ml-20px">
+      <li v-for="(category, index) in currentCategoryTree" :key="index" class="first:text-#000 text-#929292 last:after:content-[''] relative after:absolute after:content-['/'] after:text-20px after:right--20px">
+        <nuxt-link class="font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
+      </li>
+    </ul>
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
+    <div class="video-content" v-html="currentArticle.detail"></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.video-container {
+  width: 100%;
+  max-width: 1080px;
+  margin: auto;
+
+  .category-list {
+    display: flex;
+    gap: 32px;
+    margin-bottom: 26px;
+    list-style: none;
+    padding: 0;
+    margin: 0 0 0 80px;
+
+    .category-item {
+      color: #929292;
+      position: relative;
+      font-size: 18px;
+
+      & > span {
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 180%;
+        text-transform: uppercase;
+      }
+
+      &::after {
+        position: absolute;
+        content: "/";
+        font-size: 20px;
+        right: -20px;
+      }
+
+      &:first-child {
+        color: #000;
+      }
+
+      &:last-child {
+        &::after {
+          content: "";
+        }
+      }
+    }
+  }
+
+  .video-content {
+    width: 100%;
+    // max-width: 1080px;
+    margin: 26px 0 26px 0px;
+    // background-color: #eee;
+    // height: 500px;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

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

@@ -0,0 +1,8 @@
+// export { default as Article_Card } from './cards/Card.vue'
+
+export { default as Article_Detail_General } from './General.vue'
+export { default as Article_Detail_Podcast } from './Podcast.vue'
+export { default as Article_Detail_Video } from './Video.vue'
+export { default as Article_Detail_Image } from './Image.vue'
+export { default as Article_Detail_Emagazine } from './Emagazine.vue'
+export { default as Article_Detail_Infographic } from './Infographic.vue'

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

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+
+// import { Article_Card, Article_Detail_Video, Article_Detail_Podcast, Article_Detail_General, Article_Detail_Image } from "./index";
+import { Article_Detail_General, Article_Detail_Podcast, Article_Detail_Video, Article_Detail_Image, Article_Detail_Emagazine, Article_Detail_Infographic } from "./index";
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any;
+}>();
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_GENERAL"]]: Article_Detail_General,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_PODCAST"]]: Article_Detail_Podcast,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_VIDEO"]]: Article_Detail_Video,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_IMAGE"]]: Article_Detail_Image,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_EMAGAZINE"]]: Article_Detail_Emagazine,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_INFOGRAPHIC"]]: Article_Detail_Infographic,
+};
+
+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 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
+</template>

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

@@ -1,5 +1,2 @@
-export { default as Article_Card } from './layouts/Card.vue'
-export { default as Article_Detail_General } from './layouts/details/General.vue'
-export { default as Article_Detail_Podcast } from './layouts/details/Podcast.vue'
-export { default as Article_Detail_Video } from './layouts/details/Video.vue'
-export { default as Article_Detail_Image } from './layouts/details/Image.vue'
+export { default as Article_Card } from './cards/index.vue'
+export { default as Article_Detail } from './details/index.vue'

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

@@ -1,26 +1,20 @@
 <script lang="ts" setup>
-import { enumPageComponentTemplates } from "@/definitions/enum";
-import {
-    Article_Card,
-    Article_Detail_General,
-    Article_Detail_Podcast,
-    Article_Detail_Video,
-    Article_Detail_Image
-} from "./index";
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Article_Card, Article_Detail } from "./index";
+
+
 const _props = defineProps<{
   settings: any;
   component?: any;
+  content?: any;
 }>();
-
 const definedDynamicComponent: Record<string, any> = {
-  'TYPE:Detail-LAYOUT:default': Article_Detail_General,
-  'TYPE:Detail-LAYOUT:image': Article_Detail_Image,
-  'TYPE:Detail-LAYOUT:video': Article_Detail_Video,
-  'TYPE:Detail-LAYOUT:podcast': Article_Detail_Podcast,
-  'TYPE:Card': Article_Card
+  [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]: Article_Card,
+  [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]: Article_Detail,
 };
 
-const getCurrentComponent = computed(() => `${_props.settings.layout}`);
+const getCurrentComponent = computed(() => _props.settings.template);
+
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};
@@ -38,5 +32,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="GET_PROPS()" class="h-full"/>
+  <component
+    v-if="definedDynamicComponent[getCurrentComponent]" 
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>

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

@@ -1,180 +0,0 @@
-<script lang="ts" setup>
-import { enumPageComponentTemplates } from "@/definitions/enum";
-import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
-
-const props = defineProps<{
-  dataResult?: any;
-  dataType?: any;
-  dataQuery?: any;
-  layout?: string;
-  label?: string;
-}>();
-
-const LAYOUT_PARSE = computed(() => {
-  const parseLayout =
-    props.layout?.split("-")?.map((_layout: any) => {
-      const parseItem = _layout.split(":");
-      return {
-        [parseItem[0]]: parseItem[0] === "HIDE" ? parseItem[1].split(",") : parseItem[1],
-      };
-    }) || [];
-  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
-  return Object.assign({}, ...parseLayout, 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"
-    @click="selectComponent"
-    @dragover.prevent
-    @drop.stop.prevent="drop"
-    :class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '', ...(LAYOUT_PARSE['border']?.length > 0 ? LAYOUT_PARSE['border'] : [])]"
-    :style="[LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
-  >
-    <div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail" :style="[LAYOUT_PARSE['LAYOUT'] === 'horizontal' && LAYOUT_PARSE['WidthImg'] && `width: ${LAYOUT_PARSE['WidthImg']}%`]">
-      <template v-if="parseData">
-      <nuxt-link :to="`bai-viet/${parseData?.slug}`">
-        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
-      </nuxt-link>
-      </template>
-    </div>
-    <div class="basic-article_content" :class="[!parseData && 'no-data']">
-      <div>
-        <nuxt-link :to="`bai-viet/${parseData?.slug}`"
-          v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')"
-          class="line-clamp hover:text-primary-600"
-          :style="[
-            LAYOUT_PARSE['fontSizeTitle'] && `font-size: ${LAYOUT_PARSE['fontSizeTitle']}px`,
-            LAYOUT_PARSE['fontWeightTitle'] && `font-weight: ${LAYOUT_PARSE['fontWeightTitle']}`,
-            LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
-            LAYOUT_PARSE['lineClampTitle'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampTitle']}`
-          ]"
-        >
-          <template v-if="parseData">
-            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
-          </template>
-          
-        </nuxt-link>
-        <p
-          v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')"
-          class="mb-0 line-clamp font-arial"
-          :style="[
-            LAYOUT_PARSE['fontSizeIntro'] && `font-size: ${LAYOUT_PARSE['fontSizeIntro']}px`,
-            LAYOUT_PARSE['fontWeightIntro'] && `font-weight: ${LAYOUT_PARSE['fontWeightIntro']}`,
-            LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
-            LAYOUT_PARSE['lineClampIntro'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampIntro']}`
-          ]"
-        >
-          <template v-if="parseData">
-            {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
-          </template>
-        </p>
-      </div>
-    </div>
-  </article>
-</template>
-
-<style lang="scss" scoped>
-.basic-article {
-  display: flex;
-  gap: 16px;
-  height: 100%;
-  padding: 20px;
-  &.no-data {
-    gap: 5px !important;
-  }
-  .line-clamp {
-    display: -webkit-box;
-    /* -webkit-line-clamp: 3; */
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &.vertical {
-    flex-direction: column;
-    .basic-article_thumbnail {
-      width: 100%;
-    }
-    &.reverse {
-      flex-direction: column-reverse;
-    }
-  }
-  &.border-custom {
-    border-color: #e5e5e5 !important;
-  }
-  &.borderLeft {
-    border-left: 1px solid;
-  }
-  &.borderRight {
-    border-right: 1px solid;
-  }
-  &.borderTop {
-    border-top: 1px solid;
-  }
-  &.borderBottom {
-    border-bottom: 1px solid;
-  }
-  &.horizontal {
-    flex-direction: row;
-    .basic-article_thumbnail {
-      width: 40%;
-    }
-    &.reverse {
-      flex-direction: row-reverse;
-    }
-  }
-
-  &_thumbnail {
-    img {
-      width: 100%;
-      border-radius: 2px;
-      aspect-ratio: 16/10;
-    }
-  }
-
-  &_content {
-    /* padding: 10px 0px; */
-    flex: 1;
-    &.no-data {
-      padding: 0px;
-    }
-
-    h3 {
-      font-size: 16px;
-    }
-
-    p {
-      font-size: 14px;
-      margin-top: 10px;
-      opacity: 85%;
-    }
-  }
-}
-</style>

components/dynamic-page/page-component/templates/articles/layouts/details/General.vue

@@ -1,214 +0,0 @@
-<script setup lang="ts">
-import { useArticleStore } from "~/stores/articles";
-import Poll from "~/components/article/immerse/Poll.vue";
-import Quiz from "~/components/article/immerse/Quiz.vue";
-import Survey from "~/components/article/immerse/Survey.vue";
-import Document from "~/components/article/immerse/Document.vue";
-import Attachment from "@/components/article/immerse/Attachment.vue";
-import Tag from "@/components/article/immerse/Tag.vue";
-const { currentArticle } = storeToRefs(useArticleStore());
-import { useDynamicPageStore } from "~/stores/dynamic-page";
-import { useCategoryStore } from "~/stores/category";
-
-const store = reactive({
-  dynamicPage: useDynamicPageStore(),
-  article: useArticleStore(),
-  category: useCategoryStore(),
-});
-
-const { categoryTree } = storeToRefs(store.category);
-
-
-
-function increase() {
-  const step = ref(Number(getComputedStyle(document.documentElement).getPropertyValue("--step").trim()));
-  step.value += 2;
-  document.documentElement.style.setProperty("--step", step.value.toString());
-}
-
-function decrease() {
-  const step = ref(Number(getComputedStyle(document.documentElement).getPropertyValue("--step").trim()));
-  step.value -= 2;
-  document.documentElement.style.setProperty("--step", step.value.toString());
-}
-await store.category.fetchBySiteId();
-const currentCategoryTree = (store.category.currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId));
-function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
-  for (const category of categories) {
-    const currentPath = [...path, { title: category.title, code: category.code }];
-    if (category.id === targetId) {
-      return currentPath;
-    }
-    if (category.children) {
-      const result: any = findElementPathById(category.children, targetId, currentPath);
-      if (result) {
-        return result;
-      }
-    }
-  }
-  return null;
-}
-onMounted(async () => {
-
-  clickElement("figure", "custom-figure", "data-code");
-  clickElement("author", "author", "data-code");
-
-  let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
-  let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
-  if (detailEmagazine && breakcrumb) {
-    breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
-  }
-
-  document.documentElement.style.setProperty("--step", '0');
-});
-
-function clickElement(type: string, selector: string, attribute: string) {
-  const elements = document.querySelectorAll(selector);
-  elements.forEach((element) => {
-    element.addEventListener("click", (event) => {
-      event.preventDefault();
-      const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
-
-      const a = document.createElement("a");
-      a.href = url;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-    });
-  });
-}
-
-const isBookmark = ref(false)
-const onClickBookmark = () => {
-  isBookmark.value = !isBookmark.value
-}
-async function copyLink() {
-  try {
-    const url = window.location.href
-    await navigator.clipboard.writeText(url)
-    alert('copy link thành công')
-
-  } catch (error) {
-    alert(error)
-  }
-
-}
-
-</script>
-<template>
-  <div id="breakcrumb" class="flex justify-between items-center my-3 font-arial">
-    <ul class="flex gap-6 items-center text-md">
-      <template v-for="(category, index) in currentCategoryTree" :key="index">
-        <li class="first:text-primary-600 hover:text-primary-600 font-medium relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
-          <nuxt-link :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
-        </li>
-      </template>
-    </ul>
-
-    <div class="flex gap-2">
-      <div @click="increase()" class="w-10 h-10 border-1px border-solid shadow rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
-        <svg class="absolute top-50% left-50% translate-y--50% translate-x--55%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-          <path fill="none" d="M0 0h24v24H0z"></path>
-          <path
-            d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"
-          ></path>
-        </svg>
-        <svg class="absolute right-1.5 top-2 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
-      </div>
-      <div @click="decrease()" class="w-10 h-10 border-1px border-solid shadow rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
-        <svg class="absolute top-50% left-50% translate-y--50% translate-x--55%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-          <path fill="none" d="M0 0h24v24H0z"></path>
-          <path
-            d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"
-          ></path>
-        </svg>
-        <svg class="absolute right-1.5 top-2 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
-      </div>
-    </div>
-  </div>
-
-  <div class="content" v-if="currentArticle">
-    <h1 id="sub" v-html="currentArticle?.sub" class="font-bold opacity-60 pb-1"></h1>
-    <h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
-    <p id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
-    <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold pb-1 mb-3"></div>
-    <component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
-  </div>
-
-  <div class="py-5 flex flex-wrap justify-between items-center">
-    <div class="flex gap-4 items-center">
-      <nuxt-link :to="{ name: 'categories', params: { categories: `${currentCategoryTree[currentCategoryTree.length - 1]?.code}` } }" title="Quay trở lại" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer">
-        <Icon name="fa6-solid:arrow-left" />
-      </nuxt-link>
-      <button @click="onClickBookmark()" class="w-8 h-8 rounded-full bg-white hover:bg-primary-100 hover:text-primary-600">
-        <Icon v-show="isBookmark === false" name="fa6-regular:bookmark" />
-        <Icon v-show="isBookmark === true" name="fa6-solid:bookmark" class="text-primary-600" />
-      </button>
-    </div>
-
-    <div class="flex gap-4 items-center">
-      <button @click="copyLink()" title="Copy link" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
-        <Icon name="bi:link-45deg" />
-      </button>
-    </div>
-  </div>
-
-
-    <div class="flex gap-2 items-start mb-2  text-15px" v-if="currentArticle?.topics">
-      <div>
-        <Icon name="material-symbols:trending-up" class="w-5 h-5"/>
-      </div>
-      <span>Chủ đề: </span>
-      <ul>
-        <li v-for="(topic, index) in currentArticle?.topics" :key="index" class="mb-1">
-          <nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link>
-          <!-- <nuxt-link :to="`topic/${topic.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link> -->
-        </li>
-      </ul> 
-    </div>
-
-    <div class="flex gap-2 items-start mb-2  text-15px" v-if="currentArticle?.events">
-      <div>
-        <Icon name="ic:baseline-event" class="w-5 h-5"/>
-      </div>
-      <span>Sự kiện: </span>
-      <ul>
-        <li v-for="(event, index) in currentArticle?.events" :key="index" class="mb-1">
-          <nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link>
-          <!-- <nuxt-link :to="`event/${event.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link> -->
-        </li>
-      </ul> 
-    </div>
-    
-    <div class="flex gap-2 items-start mb-2  text-15px" v-if="currentArticle?.tags">
-      <div>
-        <Icon name="mdi:tag" class="w-5 h-5"/>
-      </div>
-      <span>Tags: </span>
-      <ul class="flex gap-6 flex-wrap">
-        <li v-for="(tag, index) in currentArticle?.tags" :key="index" class="mb-1 font-normal text-black-500 relative after:absolute after:content-['/'] after:right--4 last:after:content-[''] after:text-[#eee]">
-          <nuxt-link to="#" class="hover:text-primary-600">{{ tag.title }}</nuxt-link>
-          <!-- <nuxt-link :to="`topic/${tag.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ tag.title }}</nuxt-link> -->
-        </li>
-      </ul> 
-    </div>
-</template>
-
-<style lang="scss" scoped>
-:root {
-  --step: 1;
-}
-#sub,
-#intro,
-#intro + div {
-  font-size: calc(16px + var(--step) * 1px);
-}
-
-#title {
-  font-size: calc(28px + var(--step) * 1px);
-}
-
-#published-on {
-  font-size: calc(14px + var(--step) * 1px);
-}
-</style>

components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import { useArticleStore } from "~/stores/articles";
-import Poll from "~/components/article/immerse/Poll.vue";
-import Quiz from "~/components/article/immerse/Quiz.vue";
-import Survey from "~/components/article/immerse/Survey.vue";
-import Document from "~/components/article/immerse/Document.vue";
-import Attachment from "@/components/article/immerse/Attachment.vue";
-import Tag from "@/components/article/immerse/Tag.vue";
-const { currentArticle } = storeToRefs(useArticleStore());
-import { useDynamicPageStore } from "~/stores/dynamic-page";
-import { useCategoryStore } from "~/stores/category";
-
-const store = reactive({
-  dynamicPage: useDynamicPageStore(),
-  article: useArticleStore(),
-  category: useCategoryStore(),
-});
-
-const { categoryTree } = storeToRefs(store.category);
-
-await store.category.fetchBySiteId();
-const currentCategoryTree = (store.category.currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId));
-function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
-  for (const category of categories) {
-    const currentPath = [...path, { title: category.title, code: category.code }];
-    if (category.id === targetId) {
-      return currentPath;
-    }
-    if (category.children) {
-      const result: any = findElementPathById(category.children, targetId, currentPath);
-      if (result) {
-        return result;
-      }
-    }
-  }
-  return null;
-}
-
-onMounted(async () => {
-  clickElement("figure", "custom-figure", "data-code");
-  clickElement("author", "author", "data-code");
-
-  let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
-  let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
-  if (detailEmagazine && breakcrumb) {
-    breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
-  }
-});
-
-function clickElement(type: string, selector: string, attribute: string) {
-  const elements = document.querySelectorAll(selector);
-  elements.forEach((element) => {
-    element.addEventListener("click", (event) => {
-      event.preventDefault();
-      const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
-
-      const a = document.createElement("a");
-      a.href = url;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-    });
-  });
-}
-
-const isBookmark = ref(false);
-const onClickBookmark = () => {
-  isBookmark.value = !isBookmark.value;
-};
-async function copyLink() {
-  try {
-    const url = window.location.href;
-    await navigator.clipboard.writeText(url);
-    alert("copy link thành công");
-  } catch (error) {
-    alert(error);
-  }
-}
-
-</script>
-<template>
-  <div class="content" v-if="currentArticle">
-    <div id="breakcrumb" class="flex justify-between items-center my-3">
-      <ul class="flex gap-6 items-center text-md">
-        <template v-for="(category, index) in currentCategoryTree" :key="index">
-          <li class="font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
-            <nuxt-link :class="index !== 0 ? '!text-black-500' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
-          </li>
-        </template>
-      </ul>
-
-      <span id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</span>
-    </div>
-    <h1 id="sub" v-html="currentArticle?.sub" class="font-bold opacity-60 pb-1"></h1>
-    <h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
-
-    <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1 mb-3"></div>
-    <component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
-
-    <div id="navigation__bottom" class="py-5 flex flex-wrap justify-between items-center">
-      <div class="flex gap-4 items-center">
-        <nuxt-link
-          :to="{ name: 'categories', params: { categories: `${currentCategoryTree[currentCategoryTree.length - 1]?.code}` } }"
-          title="Quay trở lại"
-          class="w-10 h-10 rounded-8px flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer"
-        >
-          <Icon name="fa6-solid:arrow-left" />
-        </nuxt-link>
-        <button @click="onClickBookmark()" class="w-10 h-10 rounded-8px border-1px bg-white hover:bg-primary-100 hover:text-primary-600">
-          <Icon v-show="isBookmark === false" name="fa6-regular:bookmark" />
-          <Icon v-show="isBookmark === true" name="fa6-solid:bookmark" class="text-primary-600" />
-        </button>
-      </div>
-
-      <div class="flex gap-4 items-center">
-        <button @click="copyLink()" title="Copy link" class="w-10 h-10 rounded-8px flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
-          <Icon name="bi:link-45deg" />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-#sub,
-#intro,
-#intro + div {
-  font-size: 16px;
-}
-
-#title {
-  font-size: 28px;
-}
-
-#published-on {
-  font-size: 14px;
-}
-</style>

components/dynamic-page/page-component/templates/articles/layouts/details/Video.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import Comment from "@/components/dynamic-page/page-component/templates/other/comments/default.vue";
-import { useArticleStore } from "~/stores/articles";
-import Poll from "~/components/article/immerse/Poll.vue";
-import Quiz from "~/components/article/immerse/Quiz.vue";
-import Survey from "~/components/article/immerse/Survey.vue";
-import Document from "~/components/article/immerse/Document.vue";
-import Attachment from "@/components/article/immerse/Attachment.vue";
-import Tag from "@/components/article/immerse/Tag.vue";
-const { currentArticle } = storeToRefs(useArticleStore());
-import { useDynamicPageStore } from "~/stores/dynamic-page";
-import { useCategoryStore } from "~/stores/category";
-
-const store = reactive({
-  dynamicPage: useDynamicPageStore(),
-  article: useArticleStore(),
-  category: useCategoryStore(),
-});
-</script>
-<template>
-  <div class="grid grid-cols-1 md:grid-cols-3">
-    <div class="md:col-span-2">
-      <div id="article-detail" class="flex-1 [&_iframe]:w-full [&_iframe]:max-w-full [&_iframe]:max-h-52 md:[&_iframe]:max-h-full [&_video]:max-w-full [&_video]:w-full">
-        <div v-html="currentArticle?.detail" />
-      </div>
-    </div>
-
-    <div class="px-4 pt-2 bg-[rgb(248,249,250)]">
-      <h1 class="text-2rem text-#495057 font-700" v-html="currentArticle.title"></h1>
-      <p class="line-clamp-3 font-400" v-html="currentArticle.intro"></p>
-      <h5 class="text-end font-600 opacity-75">Tác giả</h5>
-
-      <p><b class="text-primary-600 fw-bold">Danh mục</b> <span class="ms-2 opacity-25 fw-semibold">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</span></p>
-      <Comment />
-    </div>
-  </div>
-</template>
-<style scoped lang="scss">
-.line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-</style>

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

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-
-import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from '@/utils/parseSQL';
-
-const _props = defineProps<{
-  dataResult?: any[];
-  dataQuery?: string;
-}>();
-
-const SETTING_OPTIONS = {
-  MAX_ELEMENT: 5,
-};
-
-const _dataResult = computed(() => {
-  let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill(null);
-  const result = getInputValue(_props.dataResult, 'ARRAY');
-  result && result.length > 0 && _components.map((_ : any, index : any) => {
-    _components[index] = result[index] || null;
-  })
-  return _components;
-});
-</script>
-
-<template>
-  <div>
-    <div class="flex gap-4 items-end">
-      <template v-for="(component, index) in _dataResult">
-        <nuxt-link v-if="component" :key="index" :to="`/${component.code}`" class=" py-1 font-400 text-[16px] first:font-600 first:text-[20px] sm:block hidden first:block">
-          <h3 class="m-0 leading-none hover:text-primary-600 transition-all duration-300">{{ component.title }}</h3>
-        </nuxt-link>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { isEmpty } from "@/utils/lodash";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  label?: any;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 3,
+};
+
+const _dataResult = computed(() => {
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  let _components = Array(Number(designObject.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return Object.assign({}, _components);
+});
+
+const designObject = computed(() => {
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+const mapActivesToItems = (index: number) => {
+  if (designObject.value && designObject.value.listCss) {
+    return designObject.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <div :id="`cpn_${_props.component.id}`" class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
+    <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
+      <template v-if="!isEmpty(component)">
+        <div>
+          <h3 :style="mapActivesToItems(index)['h3.categories']">
+            <nuxt-link :to="`/${component.code}`">{{ component.title }}</nuxt-link>
+          </h3>
+        </div>
+        <div v-html="designObject.styleClasses"></div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.border-pri {
+  .categories-container {
+    padding: 0;
+  }
+}
+.categories-container {
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  align-items: flex-end;
+  width: fit-content;
+  overflow: hidden;
+  padding: 20px;
+
+  .category {
+    height: 100%;
+
+    h3 {
+      font-weight: 500;
+      font-size: 13px;
+      margin: 0px !important;
+    }
+
+    &:first-child {
+      h3 {
+        font-weight: 600;
+        font-size: 17px;
+      }
+    }
+  }
+
+  .empty {
+    border-radius: 6px;
+    background: #409eff;
+    width: 50px;
+
+    > div {
+      min-height: 20px;
+    }
+  }
+}
+.border-custom {
+  border-color: #e5e5e5 !important;
+}
+</style>

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { isEmpty } from "@/utils/lodash";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  label?: any;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 3,
+};
+
+const _dataResult = computed(() => {
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  let _components = Array(Number(designObject.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return Object.assign({}, _components);
+});
+
+const designObject = computed(() => {
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+const mapActivesToItems = (index: number) => {
+  if (designObject.value && designObject.value.listCss) {
+    return designObject.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <div :id="`cpn_${_props.component.id}`" class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
+    <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
+      <template v-if="!isEmpty(component)">
+        <div class="category-content">
+          <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.984 2.456V4.184H4.336V5.992H2.4V4.184H0.752V2.456H2.4V0.648H4.336V2.456H5.984Z" fill="black" />
+          </svg>
+
+          <h3 :style="mapActivesToItems(index)['h3.categories']" class="whitespace-nowrap">
+             <nuxt-link :to="`/${component.code}`">{{ component.title }}</nuxt-link>
+          </h3>
+        </div>
+        <div v-if="designObject.styleClasses" v-html="designObject.styleClasses"></div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.border-pri {
+  .categories-container {
+    padding: 0;
+  }
+}
+.categories-container {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  overflow: hidden;
+  padding: 16px;
+
+  .category {
+    &-content {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    h3 {
+      color: #000;
+      font-weight: 400;
+      line-height: 180%;
+      font-size: 14px;
+      margin: 0px !important;
+    }
+  }
+
+  .empty {
+    border-radius: 6px;
+    background: #409eff;
+    width: 100px;
+
+    > div {
+      min-height: 20px;
+    }
+  }
+}
+.border-custom {
+  border-color: #e5e5e5 !important;
+}
+</style>

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

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

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

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

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

@@ -1 +1 @@
-export { default as Category_Default } from './layouts/Default.vue'
+export { default as Categories } from './categories/index.vue'

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

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import { enumPageComponentTemplates } from "@/definitions/enum";
-import {
-    Category_Default
-} from "./index";
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Categories } from "./index";
+
 const _props = defineProps<{
   settings: any;
   component?: any;
 }>();
 
 const definedDynamicComponent: Record<string, any> = {
-  'TYPE:Category-MAX:5': Category_Default,
+  [enumPageComponentTemplate[enumPageComponentKey.CATEGORY]['CATEGORY']]: Categories,
 };
 
-const getCurrentComponent = computed(() => `${_props.settings.layout}`);
+const getCurrentComponent = computed(() => _props.settings.template);
+
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};
@@ -30,5 +30,10 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="GET_PROPS()" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>
+ 

components/dynamic-page/page-component/templates/categories/layouts/Default.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { isEmpty } from "lodash";
-import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
-
-const emit = defineEmits(["dropData", "selectComponent"]);
-
-const _props = defineProps<{
-  dataResult?: any[];
-  dataQuery?: string;
-  label?: string;
-}>();
-
-const SETTING_OPTIONS = {
-  MAX_ELEMENT: 5,
-};
-
-const _dataResult = computed(() => {
-  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
-  let _components = Array(Number(designObject.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
-  const result = getInputValue(_props.dataResult, "ARRAY");
-  result &&
-    result.length > 0 &&
-    _components.map((_: any, index: any) => {
-      _components[index] = result[index] || null;
-    });
-  return Object.assign({}, _components);
-});
-
-const designObject = computed(() => {
-  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
-});
-
-async function dropData(event: any) {
-  const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
-  const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
-  const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
-  const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
-
-  emit("dropData", {
-    dataResult: result,
-    dataType,
-    dataQuery: getDataQuery,
-  });
-}
-
-const selectComponent = () => {
-  emit("selectComponent");
-};
-
-
-const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
-  const designObject = _props.label ? getInputValue(_props.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;
-};
-</script>
-
-<template>
-  <div>
-    <div
-      class="categories-container  border-custom"
-      @click="selectComponent"
-      :class="[designObject['LAYOUT_WRAP'] || 'horizontal', ...(designObject['borderWrap']?.length > 0 ? designObject['borderWrap'] : [])]"
-      :style="[designObject['background'] && `background: ${designObject['background']}`]"
-    >
-      <div
-        v-for="(component, index) in _dataResult"
-        :key="index"
-        :class="[...(handleActiveItem('border', 'activesBorder', index, [])['border']?.length > 0 ? handleActiveItem('border', 'activesBorder', index, [])['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']"
-      >
-        <template v-if="!isEmpty(component)">
-          <nuxt-link :to="`/${component.code}`"
-          class="sm:block hidden hover:text-primary-600"
-          :class="index == 0 ? 'border-b-1px border-primary-600' : 'text-black-400 font-normal'" 
-            :style="[
-              handleActiveItem('fontSizeTitle', 'activesFontSize', index, designObject.defaultFontSizeTitle)['fontSizeTitle'] &&
-                `font-size: ${handleActiveItem('fontSizeTitle', 'activesFontSize', index, designObject.defaultFontSizeTitle)['fontSizeTitle']}px`,
-              handleActiveItem('fontWeightTitle', 'activesFontWeight', index, designObject.defaultFontWeightTitle)['fontWeightTitle'] &&
-                `font-weight: ${handleActiveItem('fontWeightTitle', 'activesFontWeight', index, designObject.defaultFontWeightTitle)['fontWeightTitle']}`,
-                designObject['color'] && `color: ${designObject['color']}`
-            ]"
-          >
-            {{ component.title }}
-          </nuxt-link>
-        </template>
-
-        <div v-else @dragover.prevent @drop.stop.prevent="dropData($event)"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.categories-container {
-  display: flex;
-  gap: 10px;
-  align-items: flex-end;
-  width: fit-content;
-  overflow: hidden;
-  padding: 20px;
-
-  &.vertical {
-    flex-direction: column;
-  }
-  &.horizontal {
-    flex-direction: row;
-  }
-  .category {
-    height: 100%;
-
-    a {
-      font-size: 15px;
-      margin: 0px !important;
-    }
-
-    &:first-child {
-      a {
-        font-weight: 600;
-        font-size: 17px;
-      }
-    }
-  }
-}
-.border-custom {
-  border-color: #e5e5e5 !important;
-}
-.borderLeft {
-  border-left: 1px solid;
-}
-.borderRight {
-  border-right: 1px solid;
-}
-.borderTop {
-  border-top: 1px solid;
-}
-.borderBottom {
-  border-bottom: 1px solid;
-}
-</style>

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+import { isEmpty } from "@/utils/lodash";
+import { enumPageComponentTemplates } from "@/definitions/enum";
+
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  layout?: string;
+  label?: any;
+  content?: any;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 5,
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_Audio",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
+};
+
+const LAYOUT_PARSE = computed(() => {
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return _components;
+});
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <div :id="`cpn_${_props.component.id}`" class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
+    <DynamicComponent
+      v-for="(component, index) in _dataResult"
+      :key="index"
+      :settings="{
+        template: SETTING_OPTIONS.TEMPLATE,
+        layout: SETTING_OPTIONS.LAYOUT,
+        label: mapActivesToItems(Number(index)),
+        dataResult: !isEmpty(component) ? { ...component } : null,
+      }"
+      :component="COMPONENT"
+    />
+  </div>
+  <div v-html="LAYOUT_PARSE.styleClasses"></div>
+</template>
+
+<style lang="scss" scoped>
+.collection-container {
+  display: grid;
+  &.column {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  &.row {
+    grid-template-rows: auto;
+    grid-auto-flow: column;
+  }
+  &.border-pri {
+    gap: 5px;
+  }
+  &.border-custom {
+    border-color: #e5e5e5 !important;
+  }
+  .empty {
+    min-height: 100px;
+    border-radius: 6px;
+    background: #409eff;
+  }
+  &.noData {
+    border-radius: 6px;
+  }
+}
+</style>

components/dynamic-page/page-component/templates/collections/articles/Default.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+import { isEmpty } from "@/utils/lodash";
+import { enumPageComponentTemplates } from "@/definitions/enum";
+
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  layout?: string;
+  label?: any;
+  content?: any;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 5,
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_Default",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
+};
+
+const LAYOUT_PARSE = computed(() => {
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return _components;
+});
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <div :id="`cpn_${_props.component.id}`" class="collection-container border-custom overflow-hidden" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
+    <DynamicComponent
+      v-for="(component, index) in _dataResult"
+      :key="index"
+      :settings="{
+        template: SETTING_OPTIONS.TEMPLATE,
+        layout: SETTING_OPTIONS.LAYOUT,
+        label: mapActivesToItems(Number(index)),
+        dataResult: !isEmpty(component) ? { ...component } : null,
+      }"
+      :component="COMPONENT"
+    />
+  </div>
+  <div v-html="LAYOUT_PARSE.styleClasses"></div>
+</template>
+
+<style lang="scss" scoped>
+.collection-container {
+  display: grid;
+  &.column {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  &.row {
+    grid-template-rows: auto;
+    grid-auto-flow: column;
+  }
+  &.border-pri {
+    gap: 5px;
+  }
+  &.border-custom {
+    border-color: #e5e5e5 !important;
+  }
+  .empty {
+    min-height: 100px;
+    border-radius: 6px;
+    background: #409eff;
+  }
+  &.noData {
+    border-radius: 6px;
+  }
+}
+</style>

components/dynamic-page/page-component/templates/collections/articles/Video.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+import { isEmpty } from "@/utils/lodash";
+import { enumPageComponentTemplates } from "@/definitions/enum";
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+// const store = reactive({
+//   page: useCmsPageStore(),
+//   section: usePageSectionStore(),
+// });
+// const { currentScreenMode } = storeToRefs(useCmsPageStore());
+
+const _props = defineProps<{
+  dataResult?: any[];
+  dataQuery?: string;
+  layout?: string;
+  label?: string;
+  content?: any;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 9,
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_VideoHightLight",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
+};
+
+const LAYOUT_PARSE = computed(() => {
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return _components;
+});
+
+async function dropData(data: any) {
+  if (data) {
+    const { dataResult, dataType } = data;
+    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
+    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
+    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
+
+    emit("dropData", {
+      dataResult: result,
+      dataType,
+      dataQuery: getDataQuery,
+    });
+  }
+}
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <div
+    :id="`cpn_${_props.component?.id}`"
+    class="collection-video-container border-custom"
+    :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]"
+    @click="selectComponent"
+    :style="LAYOUT_PARSE['div.collection-container']"
+  >
+    <div v-for="(component, index) in _dataResult" :key="index">
+      <div class="wrap">
+        <!-- {{ index }} -->
+        <DynamicComponent
+          :settings="{
+            template: SETTING_OPTIONS.TEMPLATE,
+            layout: SETTING_OPTIONS.LAYOUT,
+            label: mapActivesToItems(Number(index)),
+            dataResult: !isEmpty(component) ? { ...component } : null,
+          }"
+          :component="COMPONENT"
+          @drop-data="dropData"
+        />
+      </div>
+    </div>
+  </div>
+  <div v-html="LAYOUT_PARSE.styleClasses" style="display: none" v-if="LAYOUT_PARSE.styles"></div>
+</template>
+
+<style lang="scss">
+.collection-video-container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  gap: 20px;
+  & > div {
+    background-color: #eee;
+    position: relative;
+    width: 100%;
+    padding-top: calc((9 / 16) * 100%);
+
+    & > .wrap {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+
+      & > .basic-article {
+        height: 100%;
+
+        & > .article_video {
+          height: 100%;
+
+          & > .article_video_thumb {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            overflow: hidden;
+
+            & > .article_video_content {
+              padding: 0 24px 8px 24px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+
+              & > span {
+                margin-bottom: 10px;
+              }
+              & > .article-title {
+                text-align: center;
+                font-size: 18px;
+                font-weight: 700;
+                line-height: 130%;
+                margin: 0;
+              }
+              & > .article-intro {
+                display: none;
+              }
+            }
+          }
+
+          & > .empty-box {
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            margin: 0px;
+            & > div {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+    &:nth-child(1) {
+      grid-column: span 2 / span 2;
+      grid-row: span 2 / span 2;
+      order: 6;
+      background-color: aqua;
+
+      & > .wrap {
+        & > .basic-article {
+          & > .article_video {
+            & > .article_video_thumb {
+              & > .article_video_content {
+                padding: 0 120px 24px 120px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      order: 2;
+      background-color: red;
+    }
+    &:nth-child(3) {
+      order: 3;
+      background-color: green;
+    }
+    &:nth-child(4) {
+      order: 4;
+      background-color: orange;
+    }
+    &:nth-child(5) {
+      order: 5;
+      background-color: orangered;
+    }
+    &:nth-child(6) {
+      order: 6;
+      background-color: brown;
+    }
+    &:nth-child(7) {
+      order: 7;
+      background-color: blueviolet;
+    }
+    &:nth-child(8) {
+      order: 8;
+      background-color: darkred;
+    }
+    &:nth-child(9) {
+      order: 9;
+      background-color: darkcyan;
+    }
+  }
+  // &.column-phone {
+  //   grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  // }
+  // &.column {
+  //   grid-template-columns: repeat(1, minmax(0, 1fr));
+  // }
+  // &.row {
+  //   grid-template-rows: auto;
+  //   grid-auto-flow: column;
+  // }
+  // &.border-pri {
+  //   gap: 5px;
+  // }
+  // &.border-custom {
+  //   border-color: #e5e5e5 !important;
+  // }
+  // .empty {
+  //   min-height: 100px;
+  //   border-radius: 6px;
+  //   background: #409eff;
+  // }
+  // &.noData {
+  //   border-radius: 6px;
+  // }
+}
+</style>

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

@@ -0,0 +1,3 @@
+export { default as Default_Collection } from './Default.vue'
+export { default as Audio_Collection } from './Audio.vue'
+export { default as Video_Collection } from './Video.vue'

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

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Default_Collection, Audio_Collection, Video_Collection } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any;
+}>();
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]}`]["ARTICLE_COLLECTION_DEFAULT"]]: Default_Collection,
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]}`]["ARTICLE_COLLECTION_AUDIO"]]: Audio_Collection,
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]}`]["ARTICLE_COLLECTION_VIDEO"]]: Video_Collection,
+};
+
+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 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
+</template>

components/dynamic-page/page-component/templates/collections/categories/index.ts

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

components/dynamic-page/page-component/templates/collections/categories/index.vue

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

components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+import { isEmpty } from "@/utils/lodash";
+import { enumPageComponentTemplates } from "@/definitions/enum";
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  layout?: string;
+  label?: string;
+  content?: any;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 6,
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_MissHightLight",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
+};
+
+const LAYOUT_PARSE = computed(() => {
+  // console.log(_props.label);
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return _components;
+});
+
+async function dropData(data: any) {
+  if (data) {
+    const { dataResult, dataType } = data;
+    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
+    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
+    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
+
+    emit("dropData", {
+      dataResult: result,
+      dataType,
+      dataQuery: getDataQuery,
+    });
+  }
+}
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <section :id="`cpn_${_props.component.id}`" class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
+    <div class="wrap" v-for="(component, index) in _dataResult" :key="index">
+      <DynamicComponent
+        class="box"
+        :settings="{
+          template: SETTING_OPTIONS.TEMPLATE,
+          layout: SETTING_OPTIONS.LAYOUT,
+          label: { ...mapActivesToItems(Number(index)) },
+          dataResult: !isEmpty(component) ? { ...component } : null,
+        }"
+        :component="COMPONENT"
+        @drop-data="dropData"
+      />
+    </div>
+  </section>
+  <!-- <conllection
+    class="collection-container border-custom overflow-hidden"
+    :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]"
+    @click="selectComponent"
+    :style="LAYOUT_PARSE['div.collection-container']"
+  >
+    <DynamicComponent
+      v-for="(component, index) in _dataResult"
+      :key="index"
+      :class="[index === 0 || index === 1 ? 'row-span-3' : index === 2 || index === 3 ? 'row-span-2' : 'row-span-1']"
+      :settings="{
+        template: SETTING_OPTIONS.TEMPLATE,
+        layout: SETTING_OPTIONS.LAYOUT,
+        label: { ...mapActivesToItems(Number(index)) },
+        dataResult: !isEmpty(component) ? { ...component } : null,
+      }"
+      :component="COMPONENT"
+      @drop-data="dropData"
+    />
+  </conllection> -->
+  <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display: none"></div>
+</template>
+
+<style lang="scss" scoped>
+.gallery {
+  column-count: 4;
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  gap: 16px;
+
+  @media (min-width: 640px) and (max-width: 1024px) {
+    column-count: 2;
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+  }
+
+  @media (max-width: 640px) {
+    column-count: 1;
+    -webkit-column-count: 1;
+    -moz-column-count: 1;
+  }
+
+  .wrap {
+    position: relative;
+    width: 100%;
+    &:nth-child(1),
+    &:nth-child(2) {
+      padding-top: 615px;
+    }
+    &:nth-child(3),
+    &:nth-child(5) {
+      padding-top: 358px;
+    }
+
+    &:nth-child(4),
+    &:nth-child(6) {
+      margin-top: 16px;
+      padding-top: 241px;
+    }
+
+    & > .box {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding-bottom: 30px;
+      // margin: 10px 0;
+    }
+  }
+  .row-span-3 {
+    // grid-row: span 3 / span 3;
+    // height: 585px;
+
+    // margin: 10px 0;
+    // &:nth-child(1) {
+    //   background-color: red;
+    // }
+    // &:nth-child(2) {
+    //   background-color: yellow;
+    // }
+  }
+  .row-span-2 {
+    // margin: 10px 0;
+    // grid-row: span 2 / span 2;
+    // height: 328px;
+    // background-color: aqua;
+    // .basic-article {
+    // }
+  }
+  .row-span-1 {
+    // grid-row: span 1 / span 1;
+    // height: 211px;
+    // background-color: green;
+
+    // .basic-article {
+    // }
+  }
+}
+
+.image img {
+  height: auto;
+  width: 100%;
+}
+.collection-container {
+  // display: grid;
+  // grid-template-columns: repeat(4, 1fr);
+  // grid-template-rows: repeat(3, 1fr);
+  gap: 20px;
+  column-count: 4;
+}
+</style>

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

@@ -1 +1,2 @@
-export { default as Collection_Article } from './layouts/Article.vue'
+export { default as Article_Collection } from './articles/index.vue'
+export { default as Category_Collection } from './categories/index.vue'

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

@@ -1,17 +1,18 @@
 <script lang="ts" setup>
-import {
-    Collection_Article
-} from "./index";
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Article_Collection, Category_Collection } from "./index";
+
 const _props = defineProps<{
   settings: any;
   component?: any;
+  content?: any;
 }>();
-
 const definedDynamicComponent: Record<string, any> = {
-  'TYPE:Article-LAYOUT:vertical-DATA:HORIZONTAL': Collection_Article,
+  [enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]]: Article_Collection,
+  [enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["CATEGORY"]]: Category_Collection,
 };
 
-const getCurrentComponent = computed(() => `${_props.settings.layout}`);
+const getCurrentComponent = computed(() => _props.settings.template);
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};
@@ -26,8 +27,13 @@ const GET_PROPS = computed(() => {
     }
   };
 });
+
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="GET_PROPS()" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>

components/dynamic-page/page-component/templates/collections/layouts/Article.vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
-import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
-import { isEmpty, groupBy } from "lodash";
-import { breakpoint } from "~/definitions";
-import { useWindowSize } from "@vueuse/core";
-const { width } = useWindowSize()
-const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
-
-// const store = reactive({
-//   section: usePageSectionStore(),
-// });
-// const { currentScreenMode } = storeToRefs(useCmsPageStore());
-
-const _props = defineProps<{
-  dataResult?: any[];
-  dataQuery?: string;
-  layout?: string;
-  label?: string;
-}>();
-
-const SETTING_OPTIONS = {
-  MAX_ELEMENT: 5,
-  TEMPLATE: "Article",
-  LAYOUT: "TYPE:Card",
-};
-
-const LAYOUT_PARSE = computed(() => {
-  const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
-    const parseItem = _layout.split(":");
-    return {
-      [parseItem[0]]: parseItem[1],
-    };
-  });
-  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
-  return Object.assign({}, ...parseLayout, designObject);
-});
-
-const _dataResult = computed(() => {
-  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
-  const result = getInputValue(_props.dataResult, "ARRAY");
-  result &&
-    result.length > 0 &&
-    _components.map((_: any, index: any) => {
-      _components[index] = result[index] || null;
-    });
-  return _components;
-});
-
-async function dropData(data: any) {
-  if (data) {
-    const { dataResult, dataType } = data;
-    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
-    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
-    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
-
-    emit("dropData", {
-      dataResult: result,
-      dataType,
-      dataQuery: getDataQuery,
-    });
-  }
-}
-
-const selectComponent = () => {
-  emit("selectComponent");
-};
-
-const handleActiveItem = (listKey: string[], listKeyActive: string[], index: number, listDefaultValue: any) => {
-  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
-  const updatedDesignObject = { ...designObject };
-
-  const dataDefault = {
-    fontSizeTitle: "defaultFontSizeTitle",
-    fontWeightTitle: "defaultFontWeightTitle",
-  };
-
-  for (let i = 0; i < listKeyActive.length; i++) {
-    const keyActive = listKeyActive[i];
-    const key = listKey[i];
-    const defaultValue = listDefaultValue[i] || designObject[dataDefault[key]];
-
-    if (Array.isArray(designObject[keyActive])) {
-      const isActive = designObject[keyActive].includes(index + 1);
-      updatedDesignObject[key] = isActive ? designObject[key] : defaultValue;
-    } else {
-      delete updatedDesignObject[key];
-    }
-  }
-
-  return updatedDesignObject;
-};
-
-const mapActivesToItems = (index: number) => {
-  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
-  const output = {};
-
-  designObject.layoutGrid?.forEach((item: any) => {
-    item.actives.forEach((active: any) => {
-      output[active] = { ...item };
-    });
-  });
-
-  return output[index + 1] || {};
-};
-</script>
-
-<template>
-  <div
-    class="collection-container border-custom"
-    :class="[LAYOUT_PARSE['LAYOUT_WRAP'] || 'vertical', ...(LAYOUT_PARSE['borderWrap']?.length > 0 ? LAYOUT_PARSE['borderWrap'] : [])]"
-    @click="selectComponent"
-    :style="[`grid-template-columns: repeat(${width < breakpoint.sm ? 1 : LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`, LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
-  >
-    <DynamicComponent
-      v-for="(component, index) in _dataResult"
-      :key="index"
-      :style="[
-        mapActivesToItems(index)['colSpan'] && `grid-column: span ${mapActivesToItems(index)['colSpan']} / span ${mapActivesToItems(index)['colSpan']}`,
-        mapActivesToItems(index)['colStart'] && `grid-column-start: ${mapActivesToItems(index)['colStart']}`,
-        mapActivesToItems(index)['colEnd'] && `grid-column-end: ${mapActivesToItems(index)['colEnd']}`,
-      ]"
-      :settings="{
-        template: SETTING_OPTIONS.TEMPLATE,
-        layout: SETTING_OPTIONS.LAYOUT,
-        label: handleActiveItem(['border', 'HIDE', 'fontSizeTitle', 'fontWeightTitle'], ['activesBorder', 'activesHide', 'activesFontSize', 'activesFontWeight'], index, [[], [], null, null]),
-        dataResult: !isEmpty(component) ? { ...component } : null,
-      }"
-      @drop-data="dropData"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.collection-container {
-  display: grid;
-  &.border-custom {
-    border-color: #e5e5e5 !important;
-  }
-  &.borderLeft {
-    border-left: 1px solid;
-  }
-  &.borderRight {
-    border-right: 1px solid;
-  }
-  &.borderTop {
-    border-top: 1px solid;
-  }
-  &.borderBottom {
-    border-bottom: 1px solid;
-  }
-  &.vertical {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-  &.horizontal {
-    grid-template-rows: auto;
-    grid-auto-flow: column;
-  }
-
-  &.noData {
-    border-radius: 6px;
-  }
-}
-</style>

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

@@ -1,12 +1,7 @@
-
-// Category
-export { default as BasicCategories } from './categories/BasicCategories.vue'
-export { default as CollectionPaging } from './pageCategories/collection_page.vue'
-
-export { default as Dynamic_Other } from './other/index.vue'
-export { default as Dynamic_Section } from './sections/index.vue';
-export { default as Dynamic_Advertising } from './advertising/index.vue'
-export { default as Dynamic_Category } from './categories/index.vue'
-export { default as Dynamic_Article } from './articles/index.vue'
-export { default as Dynamic_Collection } from './collections/index.vue'
-export { default as Dynamic_Navigation } from './navigations/index.vue'
+export { default as Articles } from './articles/index.vue'
+export { default as Navigations } from './navigations/index.vue'
+export { default as Collections } from './collections/index.vue'
+export { default as Sections } from './sections/index.vue'
+export { default as Categories } from './categories/index.vue'
+export { default as Advertisings } from './advertisings/index.vue'
+export { default as Others } from './others/index.vue'

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

@@ -1,27 +1,29 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
-import { Dynamic_Section, Dynamic_Category, Dynamic_Collection, Dynamic_Navigation, Dynamic_Other, Dynamic_Advertising, Dynamic_Article } from "./index";
+import { Articles, Navigations, Collections, Sections, Categories, Advertisings, Others } from "./index";
+
 const _props = defineProps<{
   settings: any;
   component?: any;
+  content?: any;
 }>();
 
 const definedDynamicComponent: Record<string, any> = {
-  [enumPageComponentTemplates.ARTICLE]: Dynamic_Article,
-  [enumPageComponentTemplates.CATEGORY]: Dynamic_Category,
-  [enumPageComponentTemplates.COLLECTION]: Dynamic_Collection,
-  [enumPageComponentTemplates.SECTION]: Dynamic_Section,
-  [enumPageComponentTemplates.OTHER]: Dynamic_Other,
-  [enumPageComponentTemplates.ADVERTISING]: Dynamic_Advertising,
-  [enumPageComponentTemplates.NAVIGATION]: Dynamic_Navigation,
+  [enumPageComponentTemplates.ARTICLE]: Articles,
+  [enumPageComponentTemplates.NAVIGATION]: Navigations,
+  [enumPageComponentTemplates.COLLECTION]: Collections,
+  [enumPageComponentTemplates.SECTION]: Sections,
+  [enumPageComponentTemplates.CATEGORY]: Categories,
+  [enumPageComponentTemplates.ADVERTISING]: Advertisings,
+  [enumPageComponentTemplates.OTHER]: Others,
 };
-// console.log(_props.settings.template, 'template')
-const getCurrentComponent = computed(() => `${_props.settings.template}`);
+
+const getCurrentComponent = computed(() => _props.component?.taxonomy);
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};
     if (_props.settings) {
-      for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
+      for (const [key, value] of Object.entries(_props.settings)) {
         props = {
           ...props,
           [key]: value,
@@ -34,6 +36,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <!-- <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...(GET_PROPS()), component: _props.component, settings: _props.settings }" /> -->
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>

components/dynamic-page/page-component/templates/navigations/bottoms/Default.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { isEmpty } from "@/utils/lodash";
+import { nanoid } from "nanoid";
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
+import { buildTree } from "@/utils/recusive";
+
+const _props = defineProps<{
+  content?: any;
+  component?: any;
+}>();
+</script>
+
+<template>
+  <div class="px-4 mt-4">
+    <div class="nav-container">
+      <template v-if="_props.content">
+        <div v-for="(item, index) in buildTree(_props.content)" :key="index" class="nav-items-box">
+          <div class="submenu-container">
+            <nuxt-link :to="`/${item.slug}`"
+              ><h4 class="font-raleway">{{ item.title }}</h4></nuxt-link
+            >
+            <div class="ml-2">
+              <nuxt-link v-for="(_item, _index) in item.childs ? item.childs : []" :key="_index" :to="`/${_item.slug}`"
+                ><h5 class="font-raleway">
+                  {{ _item.title }}
+                </h5></nuxt-link
+              >
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  width: 100px;
+  height: 30px;
+  border-radius: 4px;
+  background: #409eff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: 18px;
+  color: white;
+  cursor: pointer;
+}
+
+.nav-container {
+  display: flex;
+  .nav-items-box {
+    width: 20%;
+  }
+}
+
+.submenu-container {
+  > div {
+    margin-left: 10px;
+  }
+  h4 {
+    font-size: 12px;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 5px;
+  }
+  h5 {
+    font-size: 12px;
+    font-weight: 400;
+    color: white;
+    margin-bottom: 5px;
+  }
+}
+</style>

components/dynamic-page/page-component/templates/navigations/bottoms/index.ts

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

components/dynamic-page/page-component/templates/navigations/bottoms/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Navigation_Default } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any
+}>();
+
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']]['NAVIGATION_BOTTOM_DEFAULT']]: Navigation_Default,
+};
+
+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 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
+</template>

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

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
 import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
-import { enumPageComponentStaticChild, enumPageComponentLayouts } from "@/definitions/enum";
+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,9 +19,9 @@ 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">
-                    <nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
-                        <div class="">{{ record?.title }}</div>
-                    </nuxt-link>
+                    <div class="navigation_title">
+                        <nuxt-link :to="`/${record?.slug}`" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                    </div>
                     <div class="navigation-item submenu-container dropdown-container">
                         <RecusiveNavItem :records="record.childs" />
                     </div>
@@ -29,12 +29,14 @@ const setGlobalState = (id: any) => {
             </template>
             <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
                 <div class="navigation-submenu">
-                    <nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
-                        <div class="">{{ record?.title }}</div>
-                    </nuxt-link>
+                    <div class="position-relative ps-3">
+                        <div class="navigation_title ">
+                            <nuxt-link :to="`/${record?.slug}`" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                        </div>
+                    </div>
                     <div class="full-layout dropdown-container">
                         <template v-if="record.data">
-                            <div class="p-2">
+                            <div class="p-1">
                                 <RecusiveSection type="section" :id="record.data" />
                             </div>
                         </template>
@@ -42,9 +44,9 @@ const setGlobalState = (id: any) => {
                 </div>
             </template>
             <template v-else>
-                <nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
-                    <div class="navigation-item">{{ record?.title }}</div>
-                </nuxt-link>
+                <div class="navigation_title navigation-item" >
+                    <nuxt-link :to="`/${record?.slug}`" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                </div>
             </template>
         </div>
     </div>
@@ -52,9 +54,14 @@ const setGlobalState = (id: any) => {
 
 <style lang="scss" scoped>
     .navigation-branch {
+        .navigation_title {
+            font-size: 14px;
+            font-weight: 400;
+            text-align: left;
+        }
         .navigation-submenu {
             position: relative;
-            padding: 12px 5px;
+            padding: 15px 5px;
             &:hover {
                 > .dropdown-container {
                     opacity: 1;
@@ -101,10 +108,8 @@ const setGlobalState = (id: any) => {
             top: 100%;
         }
         .full-layout {
-            width: 800px;
-            z-index: 100;
-            // height: 400px;
-
+            width: 1200px;
+            z-index: 2;
         }
 
         .show-menu {

components/dynamic-page/page-component/templates/navigations/directions/Default.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { isEmpty } from "@/utils/lodash";
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { getInputValue } from "@/utils/parseSQL";
+
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 10,
+};
+</script>
+
+<template>
+  <section>
+    <div v-for="navItem, index in Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})" :key="index">
+      <div class="empty"></div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  width: 120px;
+  min-height: 100px;
+  border-radius: 6px;
+  background: #409eff;
+}
+</style>

components/dynamic-page/page-component/templates/navigations/directions/index.ts

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

components/dynamic-page/page-component/templates/navigations/directions/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Navigation_Default } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any
+}>();
+
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['DIRECTION']]['NAVIGATION_BOTTOM_DEFAULT']]: Navigation_Default,
+};
+
+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 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
+</template>

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

@@ -1,4 +1,4 @@
 // Navigation
-export { default as Top_Navigation } from './layouts/Top.vue'
-export { default as Bottom_Navigation } from './layouts/Bottom.vue'
-export { default as Direction_Navigation } from './layouts/Direction.vue'
+export { default as Top_Navigation } from './tops/index.vue'
+export { default as Bottom_Navigation } from './bottoms/index.vue'
+export { default as Direction_Navigation } from './directions/index.vue'

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
-import { Direction_Navigation, Bottom_Navigation, Top_Navigation } from "./index";
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Top_Navigation, Bottom_Navigation, Direction_Navigation } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -9,11 +9,12 @@ const _props = defineProps<{
 }>();
 
 const definedDynamicComponent: Record<string, any> = {
-  [enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-DIRECTION']]: Direction_Navigation,
-  [enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM']]: Bottom_Navigation,
-  [enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP']]: Top_Navigation,
+  [enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['DIRECTION']]: Direction_Navigation,
+  [enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']]: Bottom_Navigation,
+  [enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']]: Top_Navigation,
 };
-const getCurrentComponent = computed(() => `${_props.settings.layout}`);
+
+const getCurrentComponent = computed(() => _props.settings.template);
 
 const GET_PROPS = computed(() => {
   return () => {
@@ -32,5 +33,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component
+    v-if="definedDynamicComponent[getCurrentComponent]" 
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>

components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-// import { isEmpty } from "lodash";
-// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
-// import { getInputValue } from "@/utils/cms/page/parseSQL";
-
-// const emit = defineEmits(["selectComponent"]);
-
-// const _props = defineProps<{
-//   dataResult?: any[];
-//   dataQuery?: string;
-//   component?: any;
-// }>();
-
-// const SETTING_OPTIONS = {
-//   MAX_ELEMENT: 10,
-// };
-</script>
-
-<template>
-  lay outa
-  <!-- <section>
-    <div v-for="navItem, index in Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})" :key="index">
-      <div class="empty"></div>
-    </div>
-  </section> -->
-</template>
-
-<style lang="scss" scoped>
-.empty {
-  width: 120px;
-  min-height: 100px;
-  border-radius: 6px;
-  background: #409eff;
-}
-</style>

components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { isEmpty } from "lodash";
-// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
-// import { getInputValue } from "@/utils/cms/page/parseSQL";
-
-// const emit = defineEmits(["selectComponent"]);
-
-// const _props = defineProps<{
-//   dataResult?: any[];
-//   dataQuery?: string;
-//   component?: any;
-// }>();
-
-// const SETTING_OPTIONS = {
-//   MAX_ELEMENT: 10,
-// };
-</script>
-
-<template>
-  ád
-  <!-- <section>
-    <div v-for="navItem, index in Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})" :key="index">
-      <div class="empty"></div>
-    </div>
-  </section> -->
-</template>
-
-<style lang="scss" scoped>
-.empty {
-  width: 120px;
-  min-height: 100px;
-  border-radius: 6px;
-  background: #409eff;
-}
-</style>

components/dynamic-page/page-component/templates/navigations/layouts/Top.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
-import { buildTree } from "@/utils/recusive";
-import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
-
-const _props = defineProps<{
-  content?: any[];
-  component?: any;
-}>();
-</script>
-
-<template>
-  <nav class="border-y-1px border-y-[#dddddd] border-solid">
-    <div class="">
-      <RecusiveNavItem :records="_props.content && buildTree(_props.content)" :component="_props.component" />
-    </div>
-  </nav>
-</template>
-

components/dynamic-page/page-component/templates/navigations/tops/Default.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { buildTree } from "@/utils/recusive";
+import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
+
+const _props = defineProps<{
+  content?: any;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 10,
+};
+</script>
+
+<template>
+  <nav>
+    <div class="flex gap-3 justify-end items-center">
+      <RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />
+    </div>
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  width: 100px;
+  min-height: 20px;
+  border-radius: 4px;
+  background: #409eff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: 18px;
+  color: white;
+  margin: 5px 0px;
+}
+</style>

components/dynamic-page/page-component/templates/navigations/tops/index.ts

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

components/dynamic-page/page-component/templates/navigations/tops/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Navigation_Default } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any
+}>();
+
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']]['NAVIGATION_TOP_DEFAULT']]: Navigation_Default,
+};
+
+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 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
+</template>

components/dynamic-page/page-component/templates/other/comments/default.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="mt-4">
-    <div class="input_comment width_common mb-2">
-      <div class="box-area-input width_common">
-        <textarea id="txtComment" class="block_input"
-          placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
-      </div>
-    </div>
-
-    <div class="mb-2">
-      <button type="button" class="mr-2 p-2 bg-blue-500 text-[#fff] rounded text-xs">
-        Gửi bình luận
-        <Icon name="ri:send-plane-2-fill"></Icon>
-      </button>
-    </div>
-
-  </div>
-</template>
-
-<style scoped lang="scss">
-
-
-.input_comment {
-  padding: 0;
-  margin-top: 10px;
-  background: #f5f5f5;
-  position: relative;
-  width: 100%;
-  border-top: 1px solid #dedede;
-  border-right: 1px solid #dedede;
-  border-bottom: 1px solid #dedede;
-  border-radius: 5px;
-}
-
-
-
-.box-area-input {
-  background: #f7f7f7;
-  border-radius: 4px;
-  position: relative;
-  padding: 10px 0 10px 0;
-  border-left: 2px solid rgba(59, 130, 246, 1);
-}
-
-
-.input_comment textarea.block_input {
-  height: 30px;
-  -webkit-transition-duration: 200ms;
-  transition-duration: 200ms;
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
-  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
-}
-
-.input_comment textarea.block_input {
-  height: 76px;
-  overflow: hidden;
-  resize: none;
-}
-
-.box-area-input .block_input {
-  background: #f7f7f7;
-}
-
-.input_comment textarea {
-  font: 400 16px/150% arial;
-  background: #fff;
-  border: none;
-  width: 100%;
-  height: 58px;
-  color: #4f4f4f !important;
-  overflow: hidden;
-  padding: 5px 37px 0 15px;
-}
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="tel"],
-textarea,
-select {
-  background: #fff;
-  width: 100%;
-  height: 30px;
-  line-height: 30px;
-  border: 1px solid #ccc;
-  font-size: 14px;
-  margin: 3px 0;
-  padding: 0 5px;
-  outline: none;
-}
-
-input,
-textarea {
-  font-family: arial;
-  font-size: 11px;
-  border: none;
-  background: none;
-}
-</style>

components/dynamic-page/page-component/templates/other/details/default.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { breakpoint } from '~/definitions';
-import { useWindowSize } from '@vueuse/core'
-const { width } = useWindowSize()
-import { useArticleStore } from '~/stores/articles';
-import { useDynamicPageStore } from "~/stores/dynamic-page"; 
-import Poll from '~/components/article/immerse/Poll.vue'
-import Quiz from '~/components/article/immerse/Quiz.vue'
-import Survey from '~/components/article/immerse/Survey.vue'
-import Document from '~/components/article/immerse/Document.vue'
-import Attachment from '@/components/article/immerse/Attachment.vue'
-import Tag from '@/components/article/immerse/Tag.vue'
-import Articlerelation from '~/components/article/immerse/ArticleRelation.vue'
-const { currentArticle } = storeToRefs(useArticleStore());
-const { step } = storeToRefs(useDynamicPageStore());
-
-const router = useRouter()
-// import * as cherrio from 'cheerio'
-
-// const $ = cherrio.load(currentArticle.value.detail)
-// for(let index = 0; index < $('articlerelation').length, index++) {
-//     $('articlerelation')[index]
-// }
-// console.log($('articlerelation').length, 'cherrip')
-// onBeforeMount(async () => {
-//     await useArticleStore().getArticleCondition({ids: [1, 2, 3]})
-// })
-// console.log(router,'route')
-onMounted(() => {
-    // const elements = document.querySelectorAll('custom-figure')
-    // elements.forEach((element) => {
-    //     element.addEventListener('click', (event) => {
-    //         event.preventDefault();
-    //         console.log(element, 'element')
-    //         const url = `figure/${element.getAttribute('data-code')}`;
-
-    //         const a = document.createElement('a')
-    //         a.href = url;
-    //         document.body.appendChild(a)
-    //         a.click();
-    //         document.body.removeChild(a);
-    //     })
-    // })
-
-    clickElement('figure', 'custom-figure', 'data-code')
-    clickElement('author', 'author', 'data-code')
-})
-
-function clickElement(type: string, selector: string, attribute: string) {
-    const elements = document.querySelectorAll(selector)
-    elements.forEach((element) => {
-        element.addEventListener('click', (event) => {
-            event.preventDefault();
-            const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
-
-            const a = document.createElement('a')
-            a.href = url;
-            document.body.appendChild(a)
-            a.click();
-            document.body.removeChild(a);
-        })
-    })
-}
-// const fileName = ref('')
-// onMounted(() => {
-//     const documentElements = document.querySelectorAll('document, attachment')
-
-//     console.log(documentElements, 'doc')
-
-//     if(documentElements.length > 0) {
-//         documentElements.forEach((doc) => {
-//             doc.addEventListener('click', (event) => {
-//                 event.preventDefault();
-//                 const url = doc.getAttribute('data-resource');
-//                 const file = doc.getAttribute('data-resource') ? doc.getAttribute('data-resource')?.toString().split('.').pop() : 'docx'
-//                 fileName.value = `${doc.getAttribute('data-title')}.${file}` ;
-//                 console.log(url , fileName.value, '123')
-//                 if(url && fileName.value) {
-//                     const a = document.createElement('a');
-//                     a.href = url?.toString();
-//                     a.download = fileName.value;
-//                     document.body.appendChild(a);
-//                     a.click();
-//                     document.body.removeChild(a);
-//                 }
-//             })
-//         })
-//     }
-// })
-</script>
-<template>
-    <div class="content" v-if="currentArticle">
-        <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1"></h1>
-        <h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
-        <p id="published-on" class="text-gray-600  mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
-        <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1  mb-3"></div>
-        <component :is="{template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag} }"  />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-#sub, #intro, #intro + div {
-    font-size: calc(16px + var(--step) * 1px);
-}
-
-#title {
-    font-size: calc(28px + var(--step) * 1px);
-}
-
-#published-on {
-    font-size: calc(14px + var(--step) * 1px);
-}
-</style>

components/dynamic-page/page-component/templates/other/details/emagazine.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { useArticleStore } from '~/stores/articles';
-import { breakpoint } from '~/definitions';
-import { useWindowSize } from '@vueuse/core'
-
-const { width } = useWindowSize()
-import { useDynamicPageStore } from "~/stores/dynamic-page"; 
-const { currentArticle } = storeToRefs(useArticleStore());
-const { step } = storeToRefs(useDynamicPageStore());
-
-</script>
-<template>
-    <div class="content" v-if="currentArticle">
-        <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
-        <h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${32 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
-        <p id="published-on" class="text-gray-600 mb-3" :style="{ 'font-size': `${14 + Number(step)}px` }">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
-
-        <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1  mb-3" :style="{'font-size': `${16 + Number(step)}px`}"></div>
-        <div id="article-detail" :class="' tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-#title {}
-</style>

components/dynamic-page/page-component/templates/other/details/infographics.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { useArticleStore } from '~/stores/articles';
-import { breakpoint } from '~/definitions';
-import { useWindowSize } from '@vueuse/core'
-
-const { width } = useWindowSize()
-import { useDynamicPageStore } from "~/stores/dynamic-page"; 
-const { currentArticle } = storeToRefs(useArticleStore());
-const { step } = storeToRefs(useDynamicPageStore());
-
-</script>
-<template>
-    <div class="content" v-if="currentArticle">
-        <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
-        <h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${32 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
-        <p id="published-on" class="text-gray-600 mb-3" :style="{ 'font-size': `${14 + Number(step)}px` }">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
-
-        <!-- <div class="author">Tác giả - Thời gian tạo</div> -->
-        <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest mb-3" :style="{'font-size': `${16 + Number(step)}px`}"></div>
-        <div id="article-detail" :class="'text-[16px] tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
-
-    </div>
-</template>
-
-<style scoped lang="scss">
-    .content {
-        overflow: hidden;
-    }
-</style>

components/dynamic-page/page-component/templates/other/details/podcast.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
-const { currentArticle } = storeToRefs(useArticleStore());
-import Topic from "@/components/article/Topic.vue";
-import Event from "@/components/article/Event.vue";
-import Tag from "@/components/article/Tag.vue";
-
-const getSrc = (htmlString: string) => {
-  const srcRegex = /src="([^"]+)"/;
-  return htmlString?.match(srcRegex);
-};
-// const getArticleById = async (articleId: number) => {
-//   try {
-//     const { apiUrl } = useRuntimeConfig().public;
-//     const { item }: any = await $fetch(`${apiUrl}/cms/digital-article/${articleId}`, {
-//       headers: {
-//         Site: "1",
-//       },
-//     });
-//     return item;
-//   } catch (error) {
-//     handleError(error);
-//   }
-// };
-const store = reactive({
-  tag: useTagStore(),
-  topic: useTopicStore(),
-  event: useEventStore()
-});
-
-// const listTag = ref([]);
-// const listTopic = ref([]);
-// const listEvent = ref([])
-
-// const getTagsAndTopicsAndEvents = async () => {
-//   if (!currentArticle) return;
-
-//   const fetchData = async (ids, fetchFn, list) => {
-//     if (!ids) return;
-//     const data = await Promise.all(ids.split(",").map(fetchFn));
-//     if (data.length > 0) list.value = data;
-//   };
-
-//   await Promise.all([
-//     fetchData(currentArticle.tagIds, store.tag.fetchById, listTag), 
-//     fetchData(currentArticle.topicIds, store.topic.fetchById, listTopic),
-//     fetchData(currentArticle.eventIds, store.event.fetchById, listEvent)
-//   ]);
-// };
-
-// getTagsAndTopicsAndEvents();
-const listArticle = ref([]);
-const audioPlay = ref({});
-const defaultClass = {
-  article: ["group", "max-w-full", "grid", "gap-3", "overflow-hidden", "p-4"],
-  thumbnail: ["rounded-3xl", "shadow-md", "max-w-full", "w-full", "aspect-5/3", "group-hover:scale-[1.05]", "duration-500", "ease-in-out", "object-cover"],
-  title: ["font-bold", "px-4", "md:px-0", "xl:text-xl", "text-base"],
-  brief: ["text-sm", "sm:text-base", "mx-4", "pb-4", "md:pb-0", "md:mx-0", "border-b", "border-stone-400", "md:border-none"],
-};
-// const getListArticle = async () => {
-//   if (currentArticle && currentArticle.audioIds) {
-//     const audioIds = currentArticle.audioIds.split(",").map(Number);
-//     const articles = await Promise.all(audioIds.map(async (audioId) => await getArticleById(audioId)));
-//     if (articles.length > 0) {
-//       listArticle.value = articles;
-//       audioPlay.value = articles[0];
-//     }
-//   }
-//   // const test = "8,9";
-// };
-// getListArticle();
-</script>
-
-<template>
-  <div class="w-full grid grid-cols-12 gap-4" v-if="currentArticle">
-    <div class="col-span-12 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + currentArticle?.thumbnail + '); background-size: cover;'">
-      <div class="absolute inset-0 bg-black opacity-80 z-1"></div>
-      <div class="w-full mx-auto px-4 max-w-6xl relative flex items-center justify-center">
-        <div class="w-full h-40 md:h-80 absolute inset-0 z-2">
-          <div class="grid grid-cols-10 w-full">
-            <div class="col-span-3 flex justify-center items-center h-60 md:h-80 mx-2 md:mx-8">
-              <div
-                class="h-40 md:h-60 w-full rounded-tl-3xl rounded-br-3xl border-double px-2 overflow-x-hidden relative overflow-y-hidden bg-cover z-1 after:z-2 after:content-[''] after:w-full after:h-full after:top-0 after:left-0 after:bg-#000 after:opacity-30 after:absolute"
-                :style="{ backgroundImage: `url(${currentArticle?.thumbnail})` }"
-              >
-                <img :src="currentArticle?.thumbnail" alt="" class="relative z-3 h-40 md:h-60 w-full object-contain" />
-              </div>
-            </div>
-            <div class="col-span-7 grid grid-cols-12 relative">
-              <div class="col-span-12 w-full grid grid-cols-12 mt-8 md:mb-4">
-                <div class="col-span-11">
-                  <h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']" v-html="currentArticle?.title"></h1>
-                  <time class="xs:mt-0.5 text-[10px] md:text-sm text-[#fff]">
-                    {{ utils.dateFormat(currentArticle?.createdOn, "dddd, DD/MM/YYYY - HH:mm") }}
-                  </time>
-                </div>
-              </div>
-              <div class="col-span-12 w-full mb-4 hidden md:block">
-                <div v-html="currentArticle?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
-              </div>
-              <div class="col-span-11">
-                <AudioPlayer :src="getSrc(currentArticle?.detail)?.[1]" />
-                <!-- <Topic :topics="listTopic" />
-                <Event :events="listEvent" />
-                <Tag :tags="listTag" /> -->
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- <div class="md:col-span-3 col-span-12" v-if="listArticle?.length > 1">
-      <div class="flex items-center mb-5">
-        <ul class="bg-red-500 text-white text-sm font-semibold hover:bg-red-400 font-medium inline-block rounded-tl-lg rounded-br-lg">
-          <li class="inline-block uppercase rounded-l-lg border-radius border-red-500 border-r-0 px-2 py-1 text-center block transition-transform duration-300 transform hover:scale-105">Podcast Hôm nay</li>
-        </ul>
-        <div class="border border-slate-7 flex-grow ml-4"></div>
-      </div>
-      <div class="grid w-full">
-        <div class="" v-for="(item, index) in listArticle.filter((item) => item.id !== audioPlay.id)" :key="index">
-          <article mode="basic" :class="defaultClass.article" @click="audioPlay = { ...item }">
-            <div class="rounded-sm overflow-hidden relative">
-              <NuxtImg :src="item?.thumbnail || '/images/default-thumbnail.jpg'" placeholder fit="cover" :class="defaultClass.thumbnail" loading="lazy" />
-              <div class="absolute bottom-2 left-0 bg-stone-200/[.56] h-10 flex justify-center items-center w-20 rounded-full">
-                <span class="icon">
-                  <svg width="30" height="30" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M12.0131 0.5C5.38869 0.5 0 5.88331 0 12.5C0 19.1167 5.38869 24.5 12.0131 24.5C18.6376 24.5 24.0263 19.1167 24.0263 12.5C24.0263 5.88331 18.6376 0.5 12.0131 0.5ZM16.7889 12.9204L9.78122 17.4204C9.6991 17.4736 9.60426 17.5 9.51041 17.5C9.42829 17.5 9.34518 17.4795 9.2709 17.439C9.10957 17.3511 9.00985 17.1831 9.00985 17V8C9.00985 7.81691 9.10957 7.64891 9.2709 7.56102C9.42927 7.47411 9.62773 7.47945 9.78122 7.57958L16.7889 12.0796C16.9316 12.1714 17.0186 12.3301 17.0186 12.5C17.0186 12.6699 16.9316 12.8286 16.7889 12.9204Z"
-                      fill="#FF0000"
-                    ></path>
-                  </svg>
-                </span>
-              </div>
-            </div>
-            <p class="xs:mt-0.5 xs:text-sm text-sm">{{ utils.dateFormat(item?.createdOn) }}</p>
-            <h3 :class="defaultClass.title" v-html="item?.title"></h3>
-          </article>
-        </div>
-      </div>
-    </div> -->
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.name {
-  text-align: center;
-  line-height: 100px;
-}
-</style>

components/dynamic-page/page-component/templates/other/details/video.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import Comment from "@/components/dynamic-page/page-component/templates/other/comments/default.vue";
-import Topic from "@/components/article/Topic.vue";
-import Event from "@/components/article/Event.vue";
-import Tag from "@/components/article/Tag.vue";
-
-const { currentArticle } = storeToRefs(useArticleStore());
-const store = reactive({
-  tag: useTagStore(),
-  topic: useTopicStore(),
-  event: useEventStore()
-});
-
-// const listTag = ref([]);
-// const listTopic = ref([]);
-// const listEvent = ref([])
-
-// const getTagsAndTopicsAndEvents = async () => {
-//   if (!currentArticle) return;
-//   const fetchData = async (ids, fetchFn, list) => {
-//     if (!ids) return;
-//     const data = await Promise.all(ids.split(",").map(fetchFn));
-//     if (data.length > 0) list.value = data;
-//   };
-//   await Promise.all([
-//     fetchData(currentArticle.value.tagIds, store.tag.fetchById, listTag), 
-//     fetchData(currentArticle.value.topicIds, store.topic.fetchById, listTopic),
-//     fetchData(currentArticle.value.eventIds, store.event.fetchById, listEvent)
-//   ]);
-// };
-
-// getTagsAndTopicsAndEvents();
-</script>
-
-<template>
-  <div class="max-w-1500px mx-auto">
-    <article class="w-full flex flex-col lg:flex-row gap-4 overflow-x-hidden mt-4 bg-#f7f7f7">
-      <div id="article-detail" class="flex-1 [&_iframe]:w-full [&_iframe]:max-w-full [&_iframe]:max-h-52 md:[&_iframe]:max-h-full [&_video]:max-w-full [&_video]:w-full">
-        <div v-html="currentArticle?.detail" />
-      </div>
-      <div class="lg:w-[480px] overflow-y-auto lg:max-h-560px">
-        <div class="w-full pt-6 pr-3">
-          <h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60"></h1>
-          <h1 v-html="currentArticle?.title" class="text-2xl font-bold text-left sm:text-3xl xl:text-4xl" />
-          <!-- <ArticleMeta class="!justify-start items-center gap-x-2" :authors="article?.authors" :createdOn="article?.createdOn" :createdBy="article?.createdBy" /> -->
-
-          <div id="article-brief" class="mx-auto xl:max-w-6xl text-balance">
-            <div v-html="currentArticle?.intro" class="font-semibold text-left" />
-          </div>
-          <!-- <section>
-                <article class="mb-[1rem] py-[1rem] border-y-[1px] border-solid border-[#e0e0e0] flex items-center">
-                  <iframe
-                    :src="`https://www.facebook.com/plugins/like.php?href=${ORIGIN}/${category?.code}/${article?.code}&amp;width=160&amp;layout=button&amp;action=like&amp;size=small&amp;share=true&amp;height=65&amp;appId`"
-                    width="140" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
-                    allowfullscreen="true"
-                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
-                </article>
-              </section> -->
-          <!-- <Topic :topics="listTopic" />
-          <Event :events="listEvent" />
-          <Tag :tags="listTag" /> -->
-          <section id="comment-section" class="grid">
-                <Comment :articleId="currentArticle?.articleId" />
-            </section>
-        </div>
-      </div>
-    </article>
-    <div class="w-full border-t-2 border-dashed mt-4" />
-  </div>
-</template>

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

@@ -1,6 +0,0 @@
-export { default as Article_Detail_Emagazine } from './details/emagazine.vue'
-export { default as Article_Detail_Default } from './details/default.vue'
-export { default as Article_Detail_Infographics } from './details/infographics.vue'
-export { default as Article_Detail_Podcast } from './details/podcast.vue'
-export { default as Article_Detail_Video } from './details/video.vue'
-export { default as Comment } from './comments/default.vue'

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

@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-import { enumPageComponentTemplates } from "@/definitions/enum";
-import { Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Comment, Article_Detail_Podcast, Article_Detail_Video
-} from "./index";
-const _props = defineProps<{
-  settings: any;
-  component?: any;
-}>();
-
-const definedDynamicComponent: Record<string, any> = {
-  'ARTICLE_DETAIL_DEFAULT': Article_Detail_Default,
-  'ARTICLE_DETAIL_INFOGRAPHICS': Article_Detail_Infographics,
-  'ARTICLE_DETAIL_EMAGAZINE': Article_Detail_Emagazine,
-  'COMMENT_DEFAULT': Comment,
-  PODCAST: Article_Detail_Podcast,
-  VIDEO: Article_Detail_Video
-};
-
-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()" />
-</template>

components/dynamic-page/page-component/templates/others/comments/Default.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="comment">
+    <div class="input_comment width_common mb-2">
+      <div class="box-area-input width_common">
+        <textarea id="txtComment" class="block_input" placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
+      </div>
+    </div>
+    <div class="mb-2">
+      <button type="button" class="send-comment">
+        Gửi bình luận
+        <Icon name="ri:send-plane-2-fill"></Icon>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.comment {
+  pointer-events: none;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.w-full {
+  width: 100%;
+}
+.send-comment {
+  padding: 0.5rem;
+  margin-right: 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  background-color: #409eff;
+  border: 1px solid;
+  color: #fff;
+}
+.container {
+  width: 100%;
+  max-width: 80rem;
+  &.h3 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+  }
+}
+.input_comment {
+  padding: 0;
+  margin-top: 10px;
+  background: #fff;
+  position: relative;
+  width: 100%;
+  border-radius: 5px;
+  border-top: 1px solid #dedede;
+  border-right: 1px solid #dedede;
+  border-bottom: 1px solid #dedede;
+}
+
+.box-area-input {
+  /* background: #f3f6f9; */
+  border-radius: 4px;
+  position: relative;
+  padding: 5px 10px;
+  border-left: 2px solid rgba(59, 130, 246, 1);
+}
+
+.input_comment textarea.block_input {
+  height: 30px;
+  font-size: 14px;
+}
+textarea::placeholder {
+  color: #878a99;
+}
+.input_comment textarea.block_input {
+  height: 58px;
+  overflow: hidden;
+  resize: none;
+}
+
+/* .box-area-input .block_input {
+    background: #f7f7f7;
+  } */
+
+.input_comment textarea {
+  background: #fff;
+  border: none;
+  width: 100%;
+  height: 58px;
+  overflow: hidden;
+}
+</style>

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

@@ -0,0 +1,4 @@
+// export { default as Weather_Day } from './weathers/WeatherDay.vue'
+// export { default as Comment_Default } from './comments/Default.vue'
+export { default as Other_Weather } from './weathers/index.vue'
+export { default as Other_Stock } from './stocks/index.vue'

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

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Other_Weather, Other_Stock } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any;
+}>();
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentTemplate[enumPageComponentKey.OTHER]["WEATHER"]]: Other_Weather,
+  [enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']]: Other_Stock,
+  // [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]: Article_Detail,
+};
+const getCurrentComponent = 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 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
+</template>

components/dynamic-page/page-component/templates/others/stocks/334x641.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import { nanoid } from 'nanoid';
+  import JSWidget from '@/components/widget/JSwidget.vue';
+
+  const widgetOptions = {
+    "locale": "vi",
+    "width": "334px",
+    "height": "250px",
+    "price_line_color": "#71BDDF",
+    "grid_color": "#999999",
+    "label_color": "#999999",
+  }
+</script>
+<template>
+  <JSWidget 
+    :CONTAINER_ID="nanoid(10)" 
+    :SCRIPT_ID="nanoid(10)" 
+    SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
+    :options="widgetOptions" 
+    :inside="false"
+    widgetKey="FireAnt" 
+  />
+</template>
+<style lang="scss" scoped>
+div {
+  width: 100%;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

components/dynamic-page/page-component/templates/others/stocks/Full.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+  import { nanoid } from 'nanoid';
+  import JSWidget from '@/components/widget/JSwidget.vue';
+
+  const widgetOptions = {
+    "symbols": [
+      {
+        "proName": "FOREXCOM:SPXUSD",
+        "title": "S&P 500 Index"
+      },
+      {
+        "proName": "FOREXCOM:NSXUSD",
+        "title": "US 100 Cash CFD"
+      },
+      {
+        "proName": "FX_IDC:EURUSD",
+        "title": "EUR to USD"
+      },
+      {
+        "proName": "BITSTAMP:BTCUSD",
+        "title": "Bitcoin"
+      },
+      {
+        "proName": "BITSTAMP:ETHUSD",
+        "title": "Ethereum"
+      }
+    ],
+    "isTransparent": false,
+    "showSymbolLogo": true,
+    "colorTheme": "dark",
+    "locale": "en"
+  }
+</script>
+
+<template>
+  <div>
+    <JSWidget 
+      :CONTAINER_ID="nanoid(10)" 
+      :SCRIPT_ID="nanoid(10)" 
+      SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js" 
+      :options="widgetOptions" 
+      :inside="true"
+      widgetKey="TradingView" 
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+div {
+  width: 100%;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+

components/dynamic-page/page-component/templates/others/stocks/index.ts

@@ -0,0 +1,2 @@
+export { default as Stock_Default } from './334x641.vue'
+export { default as Stock_FullSize } from './Full.vue'