From 2f8c9b9cb8029e4428821e5d60979562f98f934d Mon Sep 17 00:00:00 2001
From: Duong Truong Phong <duongtrphong1211@gmail.com>
Date: Fri, 31 May 2024 16:38:12 +0700
Subject: [PATCH] phongdt:podcast details

---
 .../articles/collections/BasicCollection.vue  | 15 +---
 .../templates/other/details/default.vue       |  2 -
 .../templates/other/details/emagazine.vue     |  1 -
 .../templates/other/details/infographics.vue  |  2 -
 .../templates/other/details}/podcast.vue      | 77 +++++++++----------
 .../page-component/templates/other/index.ts   |  1 +
 .../page-component/templates/other/index.vue  |  5 +-
 pages/bai-viet/[slug].vue                     |  4 +-
 8 files changed, 44 insertions(+), 63 deletions(-)
 rename components/{article => dynamic-page/page-component/templates/other/details}/podcast.vue (69%)

diff --git a/components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue b/components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue
index 5c496a4..de7479f 100644
--- a/components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue
+++ b/components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue
@@ -1,6 +1,6 @@
 <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 { getInputValue } from '@/utils/parseSQL';
 import { isEmpty } from "lodash";
 
 const _props = defineProps<{
@@ -37,7 +37,8 @@ const _dataResult = computed(() => {
 
 <template>
   <div>
-    <div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'">
+    <div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'"
+    :style="`grid-template-columns: repeat(${Number(LAYOUT_PARSE['COLUMN'])}}, minmax(0, 1fr))`">
       <div v-for="(component, index) in _dataResult" :key="index">
         <template v-if="!isEmpty(component)">
           <DynamicComponent
@@ -46,16 +47,6 @@ const _dataResult = computed(() => {
               layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
               dataResult: { ...component },
             }"
-            @drop-data="dropData"
-          />
-        </template>
-        <template v-else>
-          <DynamicComponent
-            :settings="{
-              template: LAYOUT_PARSE.TYPE || SETTING_OPTIONS.TEMPLATE,
-              layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
-            }"
-            @drop-data="dropData"
           />
         </template>
       </div>
diff --git a/components/dynamic-page/page-component/templates/other/details/default.vue b/components/dynamic-page/page-component/templates/other/details/default.vue
index 1c2c479..fb33191 100644
--- a/components/dynamic-page/page-component/templates/other/details/default.vue
+++ b/components/dynamic-page/page-component/templates/other/details/default.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { useArticleStore } from '~/stores/articles';
-const emit = defineEmits(['dropData', 'selectComponent'])
 const { currentArticle } = storeToRefs(useArticleStore());
-console.log(currentArticle.value ,'12')
 </script>
 <template>
     <div class="content" v-if="currentArticle">
diff --git a/components/dynamic-page/page-component/templates/other/details/emagazine.vue b/components/dynamic-page/page-component/templates/other/details/emagazine.vue
index a1aa0d6..33bd0d7 100644
--- a/components/dynamic-page/page-component/templates/other/details/emagazine.vue
+++ b/components/dynamic-page/page-component/templates/other/details/emagazine.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useArticleStore } from '~/stores/articles';
-const emit = defineEmits(['dropData', 'selectComponent'])
 const { currentArticle } = storeToRefs(useArticleStore());
 
 </script>
diff --git a/components/dynamic-page/page-component/templates/other/details/infographics.vue b/components/dynamic-page/page-component/templates/other/details/infographics.vue
index 7abb8c3..97bb709 100644
--- a/components/dynamic-page/page-component/templates/other/details/infographics.vue
+++ b/components/dynamic-page/page-component/templates/other/details/infographics.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
-const emit = defineEmits(['dropData', 'selectComponent'])
 
 const _props = defineProps<{
   dataResult?: any[]
diff --git a/components/article/podcast.vue b/components/dynamic-page/page-component/templates/other/details/podcast.vue
similarity index 69%
rename from components/article/podcast.vue
rename to components/dynamic-page/page-component/templates/other/details/podcast.vue
index aee8026..71714e8 100644
--- a/components/article/podcast.vue
+++ b/components/dynamic-page/page-component/templates/other/details/podcast.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
 import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
-
-const props = defineProps<{ article: any }>();
+const { currentArticle } = storeToRefs(useArticleStore());
 
 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 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 listArticle = ref([]);
 const audioPlay = ref({});
 const defaultClass = {
@@ -28,25 +27,23 @@ const defaultClass = {
   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 (props.article && props.article.audioIds) {
-    const audioIds = props.article.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";
-  // const audioIds = test.split(",");
-  // const articles = await Promise.all(audioIds.map(async (audioId) => await getArticleById(audioId)));
-};
-getListArticle();
+// 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="listArticle?.length > 0">
-    <div class="md:col-span-9 col-span-12 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + audioPlay?.thumbnail + '); background-size: cover;'">
+  <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">
@@ -54,33 +51,32 @@ getListArticle();
             <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(${audioPlay?.thumbnail})` }"
+                :style="{ backgroundImage: `url(${currentArticle?.thumbnail})` }"
               >
-                <img :src="audioPlay?.thumbnail" alt="" class="relative z-3 h-40 md:h-60 w-full object-contain" />
+                <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 v-html="audioPlay?.sub" class="text-xl font-bold text-white opacity-60"></h1> -->
-                  <h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']" v-html="audioPlay?.title"></h1>
+                  <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(audioPlay?.createdOn, "dddd, DD/MM/YYYY - HH:mm") }}
+                    {{ 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="audioPlay?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
+                <div v-html="currentArticle?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
               </div>
               <div class="col-span-11">
-                <AudioPlayer :src="getSrc(audioPlay?.detail)?.[1]" />
+                <AudioPlayer :src="getSrc(currentArticle?.detail)?.[1]" />
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="md:col-span-3 col-span-12" v-if="listArticle?.length > 1">
+    <!-- <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>
@@ -101,7 +97,6 @@ getListArticle();
                     ></path>
                   </svg>
                 </span>
-                <!-- Nghe tập này -->
               </div>
             </div>
             <p class="xs:mt-0.5 xs:text-sm text-sm">{{ utils.dateFormat(item?.createdOn) }}</p>
@@ -109,7 +104,7 @@ getListArticle();
           </article>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
diff --git a/components/dynamic-page/page-component/templates/other/index.ts b/components/dynamic-page/page-component/templates/other/index.ts
index 62514c6..737187a 100644
--- a/components/dynamic-page/page-component/templates/other/index.ts
+++ b/components/dynamic-page/page-component/templates/other/index.ts
@@ -2,6 +2,7 @@ export { default as Article_Button } from './copyLinks/ArticleButton.vue'
 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 Default_Breadcrumb} from './breadcrumb/default.vue'
 export { default as ADS_Default } from './ads/default.vue';
 export { default as Comment } from './comments/default.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/other/index.vue b/components/dynamic-page/page-component/templates/other/index.vue
index effdbf5..f2ecef7 100644
--- a/components/dynamic-page/page-component/templates/other/index.vue
+++ b/components/dynamic-page/page-component/templates/other/index.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
-// import { Default_Breadcrumb, Comment, Podcast, Video, Article_Detail_Default, ADS_Default, Article_Button, Article_Detail_Infographics, Article_Detail_Emagazine} from "./index";
-import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Default_Breadcrumb, ADS_Default, Comment} from "./index";
+import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Default_Breadcrumb, ADS_Default, Comment, Article_Detail_Podcast} from "./index";
 const _props = defineProps<{
   settings: any;
   component?: any;
@@ -15,7 +14,7 @@ const definedDynamicComponent: Record<string, any> = {
   'ADS_DEFAULT': ADS_Default,
   'ARTICLE_BUTTON': Article_Button,
   COMMENT: Comment,
-//   POCAST: Podcast,
+  PODCAST: Article_Detail_Podcast,
 //   VIDEO: Video
 };
 
diff --git a/pages/bai-viet/[slug].vue b/pages/bai-viet/[slug].vue
index 3b213ce..aeffbaf 100644
--- a/pages/bai-viet/[slug].vue
+++ b/pages/bai-viet/[slug].vue
@@ -37,7 +37,7 @@ const loadPage = async (contentType: string | number) => {
 
 watch(currentArticle, async () => {
   let isContentType : string = '';
-  console.log(currentArticle.value.contentType, 'type')
+  console.log(currentArticle.value, 'type')
   switch (currentArticle.value?.contentType) {
     case 1:
         isContentType = 'trang-doi-song'
@@ -47,7 +47,7 @@ watch(currentArticle, async () => {
         break;
 
     case 3:
-        isContentType = 'ArticleLayoutPodcast'
+        isContentType = 'trang-chi-tiet-podcast'
         break;
 
     case 4: