From fcb826a7c6bf19463f90619c8f7ca350384d9cef Mon Sep 17 00:00:00 2001
From: nguyen van thai <nguyenvanthailtv@gmail.com>
Date: Tue, 25 Jun 2024 09:08:44 +0700
Subject: [PATCH 1/2] thainv-dev: Fix Ui

---
 assets/styles/style.scss                               |  2 +-
 .../page-component/templates/articles/layouts/Card.vue |  2 +-
 .../templates/articles/layouts/details/General.vue     | 10 +++++-----
 .../templates/articles/layouts/details/Image.vue       |  8 ++++----
 .../templates/articles/layouts/details/Podcast.vue     |  9 +++++----
 .../page-component/templates/collections/index.vue     |  4 +++-
 .../templates/collections/layouts/Article.vue          |  4 +++-
 .../dynamic-page/page-component/templates/index.vue    |  3 ++-
 .../dynamic-page/page-section/RecusiveSection.vue      |  1 +
 9 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index dce8d24..f226929 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -40,7 +40,7 @@ img {
 }
 
 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;
     }
 }
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/Card.vue b/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
index eb79af8..328bc0b 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
@@ -68,7 +68,7 @@ const drop = (e: any) => {
       <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"
+          class="line-clamp hover:text-primary-600 font-bold font-archivo"
           :style="[
             LAYOUT_PARSE['fontSizeTitle'] && `font-size: ${LAYOUT_PARSE['fontSizeTitle']}px`,
             LAYOUT_PARSE['fontWeightTitle'] && `font-weight: ${LAYOUT_PARSE['fontWeightTitle']}`,
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue b/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
index 07f9b29..d9aad05 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
@@ -54,9 +54,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");
   }
 
   document.documentElement.style.setProperty("--step", '0');
@@ -93,10 +93,10 @@ async function copyLink() {
   }
 
 }
-
+console.log(currentArticle.value,'currentArtice')
 </script>
 <template>
-  <div id="breakcrumb" class="flex justify-between items-center my-3 font-arial">
+  <div id="breadcrumb" 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">
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue b/components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue
index f536b53..b16a728 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/details/Image.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");
   }
 });
 
@@ -80,7 +80,7 @@ async function copyLink() {
 </script>
 <template>
   <div class="content" v-if="currentArticle">
-    <div id="breakcrumb" class="flex justify-between items-center my-3">
+    <div id="breadcrumb" 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">
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue b/components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue
index d09a5bd..1b9cf8d 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/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>
diff --git a/components/dynamic-page/page-component/templates/collections/index.vue b/components/dynamic-page/page-component/templates/collections/index.vue
index 8940c90..cefb114 100644
--- a/components/dynamic-page/page-component/templates/collections/index.vue
+++ b/components/dynamic-page/page-component/templates/collections/index.vue
@@ -5,6 +5,7 @@ import {
 const _props = defineProps<{
   settings: any;
   component?: any;
+  content?: any
 }>();
 
 const definedDynamicComponent: Record<string, any> = {
@@ -26,8 +27,9 @@ const GET_PROPS = computed(() => {
     }
   };
 });
+
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="GET_PROPS()" />
+  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{...GET_PROPS(), content: _props.content}" />
 </template>
diff --git a/components/dynamic-page/page-component/templates/collections/layouts/Article.vue b/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
index d3b29bc..819c4ef 100644
--- a/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
+++ b/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
@@ -16,8 +16,8 @@ const _props = defineProps<{
   dataQuery?: string;
   layout?: string;
   label?: string;
+  content?: any
 }>();
-
 const SETTING_OPTIONS = {
   MAX_ELEMENT: 5,
   TEMPLATE: "Article",
@@ -102,6 +102,8 @@ const mapActivesToItems = (index: number) => {
 
   return output[index + 1] || {};
 };
+
+const CONTENT_PARSE = computed(() => JSON.parse(_props.content))
 </script>
 
 <template>
diff --git a/components/dynamic-page/page-component/templates/index.vue b/components/dynamic-page/page-component/templates/index.vue
index 0f9f10e..46e4455 100644
--- a/components/dynamic-page/page-component/templates/index.vue
+++ b/components/dynamic-page/page-component/templates/index.vue
@@ -4,6 +4,7 @@ import { Dynamic_Section, Dynamic_Category, Dynamic_Collection, Dynamic_Navigati
 const _props = defineProps<{
   settings: any;
   component?: any;
+  content?: any
 }>();
 
 const definedDynamicComponent: Record<string, any> = {
@@ -35,5 +36,5 @@ const GET_PROPS = computed(() => {
 
 <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 :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
 </template>
diff --git a/components/dynamic-page/page-section/RecusiveSection.vue b/components/dynamic-page/page-section/RecusiveSection.vue
index 2b5a040..d2f325b 100644
--- a/components/dynamic-page/page-section/RecusiveSection.vue
+++ b/components/dynamic-page/page-section/RecusiveSection.vue
@@ -43,6 +43,7 @@ const findDataPosition = computed(() => {
         v-if="findDataPosition && findDataPosition?.id" 
         :settings="findDataPosition.settings" 
         :component="findDataPosition"
+        :content="findDataPosition.content"
       />
     </template>
     <template v-else-if="props.type === defineTypeRecusive.SECTION">

From 24ecc2195d5782d807fc2ed1e66c9ace912f5336 Mon Sep 17 00:00:00 2001
From: nguyen van thai <nguyenvanthailtv@gmail.com>
Date: Tue, 25 Jun 2024 14:52:45 +0700
Subject: [PATCH 2/2] =?UTF-8?q?thainv-dev:=20Fix=20b=C3=A0i=20vi=E1=BA=BFt?=
 =?UTF-8?q?=20li=C3=AAn=20quan?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../articles/layouts/details/General.vue          |  1 -
 .../templates/collections/layouts/Article.vue     | 15 +++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue b/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
index d9aad05..9f5e429 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
@@ -93,7 +93,6 @@ async function copyLink() {
   }
 
 }
-console.log(currentArticle.value,'currentArtice')
 </script>
 <template>
   <div id="breadcrumb" class="flex justify-between items-center my-3 font-arial">
diff --git a/components/dynamic-page/page-component/templates/collections/layouts/Article.vue b/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
index 819c4ef..176d3ce 100644
--- a/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
+++ b/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
+/**
+ * Content: Type: 1 - Bài viết liên quan | 2 - Bài viết cùng chuyên mục
+ * 
+ */
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
 import { breakpoint } from "~/definitions";
 import { useWindowSize } from "@vueuse/core";
 const { width } = useWindowSize()
 const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
-
+const { currentArticle } = storeToRefs(useArticleStore())
 // const store = reactive({
 //   section: usePageSectionStore(),
 // });
@@ -35,7 +39,14 @@ const LAYOUT_PARSE = computed(() => {
   return Object.assign({}, ...parseLayout, designObject);
 });
 
+const CONTENT_PARSE = computed(() => JSON.parse(_props.content))
+
 const _dataResult = computed(() => {
+
+  console.log(currentArticle.value, 'Content_parse')
+  if(CONTENT_PARSE.value?.type && CONTENT_PARSE.value?.type === 1) {
+    return currentArticle.value.relatedArticles || []
+  }
   let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
   const result = getInputValue(_props.dataResult, "ARRAY");
   result &&
@@ -103,7 +114,7 @@ const mapActivesToItems = (index: number) => {
   return output[index + 1] || {};
 };
 
-const CONTENT_PARSE = computed(() => JSON.parse(_props.content))
+
 </script>
 
 <template>