From 3a7132ea98bab21d39b1c79b12745dca68daee4e Mon Sep 17 00:00:00 2001
From: Duong Truong Phong <duongtrphong1211@gmail.com>
Date: Fri, 31 May 2024 13:57:40 +0700
Subject: [PATCH 1/3] phongdt:podcast

---
 components/article/podcast.vue        |  91 ++++++++++++
 organisms/article/ArticlePodcast.vue  |  61 ++++++++
 organisms/audioPlayer/AudioPlayer.vue | 162 ++++++++++++++++++++
 pages/index.vue                       |   3 +-
 server/models/article.ts              | 151 +++++++++++++++++++
 server/models/author.ts               |  31 ++++
 stores/article.ts                     | 204 ++++++++++++++++++++++++++
 7 files changed, 702 insertions(+), 1 deletion(-)
 create mode 100644 components/article/podcast.vue
 create mode 100644 organisms/article/ArticlePodcast.vue
 create mode 100644 organisms/audioPlayer/AudioPlayer.vue
 create mode 100644 server/models/article.ts
 create mode 100644 server/models/author.ts
 create mode 100644 stores/article.ts

diff --git a/components/article/podcast.vue b/components/article/podcast.vue
new file mode 100644
index 0000000..936a03e
--- /dev/null
+++ b/components/article/podcast.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
+import ArticlePodcast from "~/organisms/article/ArticlePodcast.vue";
+
+const props = defineProps<{ article: any }>();
+
+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/article/${articleId}`, {
+      headers: {
+        Site: "1",
+      },
+    });
+    return item;
+  } catch (error) {
+    handleError(error);
+  }
+};
+const listArticle = computed(() => {
+  // if (props.article && props.article.audioIds) {
+  //   return props.article.audioIds.split(",").map((audioId: number) => getArticleById(audioId));
+  // }
+  // return []
+    const test = "8,2,3";
+    return test.split(",").map((audioId) => getArticleById(audioId));
+});
+</script>
+
+<template>
+  <div class="w-full grid grid-cols-12 gap-4" v-if="listArticle?.length > 0">
+    <div class="col-span-9 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + listArticle[0]?.thumbnail + '); background-size: cover;'">
+      <div class="absolute inset-0 bg-black opacity-80 z-1"></div>
+      <Wrap class="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(${listArticle[0]?.thumbnail})` }"
+              >
+                <img :src="listArticle[0]?.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="listArticle[0]?.sub" class="text-xl font-bold text-white opacity-60"></h1>
+                  <h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']">{{ listArticle[0]?.title }}</h1>
+                  <time class="xs:mt-0.5 text-[10px] md:text-sm text-[#fff]">
+                    {{ utils.dateFormat(listArticle[0]?.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="listArticle[0]?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
+              </div>
+              <div class="col-span-11">
+                <AudioPlayer :src="getSrc(listArticle[0]?.detail)?.[1]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Wrap>
+    </div>
+    <div class="col-span-3">
+      <div class="flex items-center mt-5 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.slice(1)" :key="index">
+          <ArticlePodcast mode="podcast" image-size="md" text-size="lg" :createdOn="item?.createdOn" :title="item?.title" :slug="'/' + item.category?.code + '/' + item.code" :thumb="item?.thumbnail" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.name {
+  text-align: center;
+  line-height: 100px;
+}
+</style>
diff --git a/organisms/article/ArticlePodcast.vue b/organisms/article/ArticlePodcast.vue
new file mode 100644
index 0000000..9f46fa2
--- /dev/null
+++ b/organisms/article/ArticlePodcast.vue
@@ -0,0 +1,61 @@
+
+<script setup lang='ts'>
+
+const props = defineProps<{
+    thumb: string
+    title: string
+    brief?: string
+    slug: string
+    createdOn : string
+    titleClass?: string
+    clampIntro?: string
+}>()
+
+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',
+        props.titleClass ? props.titleClass : [
+            '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',props.clampIntro
+    ]
+}
+
+</script>
+
+<template>
+    <NuxtLink :to="slug || '#!'" :title="title">
+        <article mode="basic" :class="defaultClass.article">
+            <div class="rounded-sm overflow-hidden relative">
+                <NuxtImg :src="thumb || '/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>
+                            <!-- Nghe tập này -->
+                </div>
+            </div>
+            <p class="xs:mt-0.5 xs:text-sm text-sm">{{ utils.dateFormat(createdOn) }}</p>
+            <h3 :class="defaultClass.title" v-html="title"></h3>
+            <div v-if='brief' :class="defaultClass.brief" v-html="brief"> </div>
+        </article>
+    </NuxtLink>
+</template>
\ No newline at end of file
diff --git a/organisms/audioPlayer/AudioPlayer.vue b/organisms/audioPlayer/AudioPlayer.vue
new file mode 100644
index 0000000..8139f4c
--- /dev/null
+++ b/organisms/audioPlayer/AudioPlayer.vue
@@ -0,0 +1,162 @@
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+    src?: string
+}>()
+
+const isMoreControl = ref(false)
+const isPlayed = ref(true)
+const isVolume = ref(true)
+const speedList = ref<{ [key: number]: string }>({
+    1: '0.5x',
+    2: '0.75x',
+    3: '1.0x',
+    4: '1.25x',
+    5: '1.50x',
+})
+const speedIndexDefault = ref(3)
+const speedDefault = ref(speedList.value[speedIndexDefault.value])
+const volume = ref(1.0);
+const audioPlayer = ref<HTMLAudioElement | null>(null);
+const currentTime = ref(0);
+const duration = ref(0);
+
+function setUpVolums() {
+    isVolume.value = !isVolume.value
+    if (audioPlayer.value) {
+        if (isVolume.value) {
+            audioPlayer.value.volume = 1;
+        } else {
+            audioPlayer.value.volume = 0;
+        }
+    }
+}
+
+const updateVolume = () => {
+    if (audioPlayer.value) {
+        audioPlayer.value.volume = volume.value;
+        if (volume.value == 0) {
+            isVolume.value = false
+        } else {
+            isVolume.value = true
+        }
+    }
+};
+
+function chanageSpeed() {
+    if (speedIndexDefault.value < 5) {
+        speedIndexDefault.value += 1
+        if (audioPlayer.value) {
+            audioPlayer.value.playbackRate += 0.25;
+        }
+        speedDefault.value = speedList.value[speedIndexDefault.value]
+    } else {
+        if (audioPlayer.value) {
+            audioPlayer.value.playbackRate = 0.5;
+        }
+        speedIndexDefault.value = 1
+        speedDefault.value = speedList.value[1]
+    }
+}
+
+function togglePlayer() {
+    isPlayed.value = !isPlayed.value
+    if (audioPlayer.value) {
+        if (isPlayed.value) {
+            audioPlayer.value.pause();
+        } else {
+            audioPlayer.value.play();
+        }
+    }
+}
+
+function replayAndForward(time: number) {
+    if (audioPlayer.value) {
+        if (audioPlayer.value.currentTime == audioPlayer.value.duration) {
+            isPlayed.value = true
+        } else {
+            audioPlayer.value.currentTime = audioPlayer.value.currentTime + time
+        }
+    }
+}
+
+const seekToTime = () => {
+    if (audioPlayer.value) {
+        audioPlayer.value.currentTime = currentTime.value;
+    }
+};
+
+const updateCurrentTime = () => {
+    if (audioPlayer.value) {
+        currentTime.value = audioPlayer.value.currentTime;
+    }
+}
+
+const updateDuration = () => {
+    if (audioPlayer.value) {
+        duration.value = audioPlayer.value.duration;
+    }
+}
+
+const currrentTimeComputed = computed(() => {
+    return utils.formattedTime(currentTime.value)
+})
+
+const durationComputed = computed(() => {
+    return utils.formattedTime(duration.value)
+})
+
+</script>
+
+<template>
+    <audio :src="src" preload="auto" ref="audioPlayer" @timeupdate="updateCurrentTime" @loadedmetadata="updateDuration" />
+    <div class="relative">
+        <div class="w-full">
+            <input class="w-full accent-[#fff] cursor-pointer" type="range" v-model="currentTime" @input="seekToTime" :max="duration" />
+
+            <div class="flex items-center justify-between px-4 ">
+                <span class="text-[10px] sm:text-lg font-normal font-[Raleway] text-[#fff]">{{ currrentTimeComputed }}</span>
+                <span class="text-[10px] sm:text-lg font-normal font-[Raleway] text-[#fff]">{{ durationComputed }}</span>
+            </div>
+        </div>
+        <div class="w-full px-4 ">
+            <div class="flex items-center justify-between">
+                <div>
+                    <button @click="chanageSpeed"
+                        class="text-[#fff] bg-transparent text-sm sm:text-sm lg:text-lg flex gap-1"><span
+                            class="hidden lg:block">Tốc độ phát </span> <span
+                            class="font-bold text-[12px] sm:text-sm lg:text-lg">{{
+                                speedDefault
+                            }}</span> </button>
+                </div>
+                <div>
+                    <button @click="replayAndForward(-5)" class="hover:bg-stone-200 bg-transparent p-2 rounded-full">
+                        <Icon name="ri:replay-5-fill" color="fff" class="text-lg sm:text-2xl md:text-4xl" style="" />
+                    </button>
+                    <button @click="togglePlayer" class="bg-transparent">
+                        <Icon v-if="isPlayed" name="ri:play-circle-fill" color="fff"
+                            class="text-lg sm:text-3xl md:text-6xl" />
+                        <Icon v-if="!isPlayed" name="ri:pause-circle-fill" color="fff"
+                            class="text-lg sm:text-3xl md:text-6xl" />
+                    </button>
+                    <button @click="replayAndForward(5)" class="hover:bg-stone-200 bg-transparent p-2 rounded-full">
+                        <Icon name="ri:forward-5-line" color="fff" class="text-lg sm:text-2xl md:text-4xl" />
+                    </button>
+                </div>
+                <div class="flex items-center">
+                    <button class="bg-transparent">
+                        <div class="flex gap-2 ">
+                            <Icon v-if="isVolume" @click="setUpVolums()" name="ri:volume-up-fill" color="fff"
+                                class="text-lg md:text-2xl lg:text-3xl" />
+                            <Icon v-if="!isVolume" @click="setUpVolums()" name="ri:volume-mute-fill" color="fff"
+                                class="text-lg md:text-2xl lg:text-3xl" />
+                            <input v-if="isVolume" class="accent-[#fff] w-12 lg:w-20 cursor-pointer" type="range" v-model="volume"
+                                @input="updateVolume" min="0" max="1" step="0.1" />
+                        </div>
+                </button>
+            </div>
+        </div>
+    </div>
+</div></template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 2127d92..bba6ced 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@ import _cloneDeep from 'lodash/cloneDeep';
 
 import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
-
+import Podcast from "~/components/article/podcast.vue"
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
@@ -34,6 +34,7 @@ useHead({
 <template>
   <main class="h-screen" v-if="currentPage">
     <DynamicTemplate :settings="currentPage.settings">
+      <Podcast></Podcast>
       <template v-if="sectionPublished && sectionPublished.length > 0">
         <DynamicSection
           v-for="(section, index) in sectionPublished"
diff --git a/server/models/article.ts b/server/models/article.ts
new file mode 100644
index 0000000..92e07c7
--- /dev/null
+++ b/server/models/article.ts
@@ -0,0 +1,151 @@
+import { utils } from "~/utils/utilities";
+import { Author } from "./author";
+import Base from "./base";
+import { H3Event } from "h3";
+import { ref } from "vue"
+
+/**
+ * Represents an article.
+ */
+export type Article = {
+    id: number;
+    siteId: number;
+    articleId: number;
+    categoryId: number;
+    sub?: string; // tiền tố của tiêu đề
+    title: string;
+    intro?: string;
+    brief?: string;
+    detail?: string;
+    summary?: string;
+    thumbnail?: string;
+    represent?: string;
+    keyword?: string;
+    description?: string;
+    code?: string; // slug
+    redirect?: string;
+    type?: number; // 1: Editorial, 2: General , 3: Reportage , 4: Interview , 5: Survey , 6: Tutorial , 7: Podcast, 8: Broadcast  , 9: Talkshow  , 10: Livestream  , 11: Translation  , 12: Promotion  , 99: Other
+    layoutType?: number; // 1: Normal  , 2: Short  , 3: Long  , 4: Page, 99: Other
+    contentType?: number; // 1: General   , 2: Photo   , 3: Audio   , 4: Video   , 5: Graphic   , 6: Document   , 7: Interaction, 99: Other
+    feature?: string; // Private, Exclusive, Featured, Sponsored ,Important ,Archived
+    interaction?: string; // user hobbies
+    language?: string; // vi, en, ...
+    otherSettings?: string;
+    views?: number;
+    likes?: number;
+    rates?: number;
+    follows?: number;
+    shares?: number;
+    reports?: number;
+    comments?: number;
+    otherStatistics?: string;
+    order?: number;
+    priority?: number;
+    tags?: string;
+    authors?: Author[];
+    topics?: string;
+    events?: string;
+    relations?: Article[];
+    categories?: string;
+    sourceTitle?: string;
+    sourceUrl?: string;
+    sourceType?: string;
+    status?: number;
+} & Base;
+
+export const listPaging = async (event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public;
+        const { categoryId, authorId, eventId, tagId, topicId, page, limit, sort } = getQuery(event)
+        const query = ref({})
+        if(eventId) {
+            query.value = { eventId }
+        } 
+        if(categoryId) {
+            query.value = { categoryId }
+        }
+        if(authorId) {
+            query.value = { authorId }
+        }
+        if(tagId) {
+            query.value = { tagId }
+        }
+        if(topicId) {
+            query.value = { topicId }
+        }
+        const { items, total }: any = await $fetch(`${apiUrl}/cms/article-publishing/condition/paging:${page}-${limit}/sorting:${sort}`,{
+            method: 'POST',
+            headers: {site: 1},
+            body:{ ...query.value }
+        })
+        
+        return { items, total };
+    } catch (error) {
+        handleError(error);
+    }
+}
+
+export const listPagingWithTagId = async (event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { tagId, page, limit, sort } = getQuery(event)
+        const { items, total }: any = await $fetch(`${apiUrl}/cms/article-publishing/condition/paging:${page}-${limit}/sorting:${sort}`, {
+            method: 'POST',
+            headers: {
+                site: 1
+            },
+            body: {
+                tagId
+            }
+        })
+        return { items, total }
+    } catch (error) {
+        handleError(error);
+    }
+}
+
+// export const listPagingWithEventId = async (event: H3Event) => {
+//     try {
+//         const { apiUrl } = useRuntimeConfig().public
+//         const { eventId, page, limit, sort } = getQuery(event)
+//         const obj = { eventId }
+//         const { items, total }: any =  await $fetch(`${apiUrl}/cms/article-publishing/condition/paging:${page}-${limit}/sorting:${sort}`,{
+//             method: 'POST',
+//             headers: {
+//                 site: 1
+//             },
+//             body:{ ...obj }
+//         })
+//         return { items, total }
+//     } catch (error) {
+//         handleError(error);
+//     }
+// }
+export const listSectionArticle = async (event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public;
+        const { layout } = getQuery(event)
+        
+        const { item }: any = await $fetch(`${apiUrl}/cms/category-section-article/category:41-sectionCode:${layout}`,{
+            method: 'GET',
+        })
+        
+        return { item };
+    } catch (error) {
+        handleError(error);
+    }
+}
+export const get = async (event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public;
+        const { articleId } = getQuery(event)
+        const { item }: any = await $fetch(`${apiUrl}/cms/article-publishing/code:${articleId}`, {
+            headers: {
+                Site: '1'
+            }
+        })
+        return item;
+    } catch (error) {
+        handleError(error);
+    }
+}
\ No newline at end of file
diff --git a/server/models/author.ts b/server/models/author.ts
new file mode 100644
index 0000000..8280af4
--- /dev/null
+++ b/server/models/author.ts
@@ -0,0 +1,31 @@
+import { utils } from "~/utils/utilities";
+import Base from "./base";
+import { H3Event } from "h3";
+
+export  type Author = {
+    id:number;
+    siteId:number;
+    userId:number;
+    title:string
+    code:string;
+    description?:string;
+    thumbnail?:string;
+    feature?:string;
+    type?:number;
+}
+
+export const fetchByCode = async (event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { authorCode }: any = getQuery(event)
+        const { items }: any = await $fetch(`${apiUrl}/cms/author/code:${authorCode}`, {
+            method: 'GET',
+            headers: {
+                site: 1
+            }
+        })
+        return items[0]
+    } catch (error) {
+        handleError(error)
+    }
+}
\ No newline at end of file
diff --git a/stores/article.ts b/stores/article.ts
new file mode 100644
index 0000000..f3be200
--- /dev/null
+++ b/stores/article.ts
@@ -0,0 +1,204 @@
+import type { LocationQuery } from '#vue-router';
+import type { PaginationInfo } from '~/objects';
+import type { Article } from '~/server/models/article';
+
+export const useArticleStoreV2 = defineStore('article-v2', () => {
+
+  const { serverResourceUrl, pagingDefault, pagingLimit } = useRuntimeConfig().public
+
+  const pagination = ref<PaginationInfo>({
+    page: utils.toNumber(pagingDefault),
+    limit: utils.toNumber(pagingLimit),
+    total: 0,
+  });
+
+  async function fetchByCategoryIdWithPaging(categoryId: number, limit?: string | number) {
+    const { data, error } = await useFetch<any>(`/api/v2/articles-paging?categoryId=${categoryId}&page=${pagination.value.page}&limit=${limit ? limit : pagination.value.limit}&sort=createdon desc`)
+
+    if (error.value) {
+      pagination.value.total = 0;
+      return [] as Article[]
+    }
+
+    data.value.items.forEach((item: Article) => {
+      item.title = item.title.replace(/<p>|<\/p>/g, '')
+    })
+
+    pagination.value.total = data.value.total;
+
+    return data.value.items
+  }
+
+  // async function fetchByTagId(tagId: number, limit?: number, page?: number) {
+  //   if(limit) {
+  //     pagination.value.limit = limit;
+  //   }
+  //   if(page) {
+  //     pagination.value.page = page;
+  //   }
+  //   const { data, error } = await useFetch<any>(`/api/v2/articles-tag`, {
+  //     query: {
+  //       tagId: tagId,
+  //       limit: pagination.value.limit,
+  //       page: pagination.value.page,
+  //       sort: 'createdon desc'
+  //     }
+  //   })
+  //   if(error.value) {
+  //     return null
+  //   }
+    
+  //   pagination.value.total = data.value.total
+  //   return data.value.items
+  // }
+
+  // async function fetchByTagId(tagId: number, limit?: number) {
+  //   const { data, error } = await useFetch<any>(`/api/v2/articles-tag`, {
+  //     query: {
+  //       tagId: tagId,
+  //       limit: limit ? limit : pagination.value.limit,
+  //       page: pagination.value.page,
+  //       sort: 'createdon desc'
+  //     }
+  //   })
+
+  //   if(error.value) {
+  //     return null;
+  //   }
+
+  //   pagination.value.total = data.value.total
+
+  //   return data.value.items
+  // }
+
+  async function fetchByCategorySectionArticle(layout: number) {
+    const { data, error } = await useFetch<any>(`/api/v2/articles-category-section?layout=${layout}`)
+    // if (error.value) {
+    //   return {} as Article{}
+    // }
+    // data.value.items.forEach((item: Article) => {
+    //   item.title = item.title.replace(/<p>|<\/p>/g, '')
+    // })
+    if(error.value) {
+      return {}
+    }
+    return data.value
+  }
+
+  async function fetchByEventId(eventId: number, limit?: number) {
+    if(limit) {
+      pagination.value.limit = limit
+    }
+    const { data, error } = await useFetch<any>(`/api/v2/articles-paging`, {
+      query: {
+        eventId: eventId,
+        page: pagination.value.page,
+        limit: pagination.value.limit,
+        sort: 'createdon desc'
+      }
+    })
+
+    if(error.value) {
+      return null
+    }
+
+    pagination.value.total = data.value.total
+    return data.value.items
+  }
+
+  async function fetchByAuthorId(authorId: number, limit?:number) {
+    if(limit) {
+      pagination.value.limit = limit
+    }
+    const { data, error } = await useFetch<any>(`/api/v2/articles-paging`, {
+      query: {
+        authorId: authorId,
+        page: pagination.value.page,
+        limit: pagination.value.limit,
+        sort: 'createdon desc'
+      }
+    })
+
+    if(error.value) {
+      return null
+    }
+
+    pagination.value.total = data.value.total
+    return data.value.items
+  }
+
+  async function fetchByTopicId(topicId: number, limit?: number) {
+    if(limit) {
+      pagination.value.limit = limit
+    }
+    const { data, error } = await useFetch<any>(`/api/v2/articles-paging`, {
+      query: {
+        topicId: topicId,
+        page: pagination.value.page,
+        limit: pagination.value.limit,
+        sort: 'createdon desc'
+      }
+    })
+
+    if(error.value) {
+      return null
+    }
+    pagination.value.total = data.value.total
+    return data.value.items
+  }
+
+  async function fetchByTagId(tagId: number, limit?: number) {
+    if(limit) {
+      pagination.value.limit = limit
+    }
+    const { data, error } = await useFetch<any>(`/api/v2/articles-paging`, {
+      query: {
+        tagId: tagId,
+        page: pagination.value.page,
+        limit: pagination.value.limit,
+        sort: 'createdon desc'
+      }
+    })
+
+    if(error.value) {
+      return null
+    }
+
+    pagination.value.total = data.value.total
+    return data.value.items
+  }
+
+  async function fetchById(id: string) {
+    const { data, error } = await useFetch<Article>(`/api/v2/articles`, { query: { articleId: id } })
+
+    if (error.value) {
+      return null
+    }
+
+    if (data.value) {
+      data.value.title = data.value.title.replace(/<p>|<\/p>/g, '')
+      data.value.detail = utils.domainImage(data.value.detail, serverResourceUrl)
+    }
+
+    return data.value
+  }
+
+  function setStateFromRoute(query: LocationQuery) {
+    if (query.page) pagination.value.page = utils.toNumber(query.page);
+    else
+      pagination.value.page = utils.toNumber(
+        useRuntimeConfig().public.pagingDefault
+      );
+    if (query.limit) pagination.value.limit = utils.toNumber(query.limit);
+    else
+      pagination.value.limit = utils.toNumber(
+        useRuntimeConfig().public.pagingLimit
+      );
+  }
+
+  return { pagination, fetchByTagId, fetchByCategoryIdWithPaging, fetchById, setStateFromRoute, fetchByCategorySectionArticle, fetchByEventId, fetchByTopicId, fetchByAuthorId }
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useArticleStoreV2, import.meta.hot))
+}

From 9e72b00aa7521be3634dec5a72d58486abddc020 Mon Sep 17 00:00:00 2001
From: Duong Truong Phong <duongtrphong1211@gmail.com>
Date: Fri, 31 May 2024 15:29:14 +0700
Subject: [PATCH 2/3] phongdt:audio podcast

---
 components/article/podcast.vue       |  78 ++++++----
 organisms/article/ArticlePodcast.vue |  61 --------
 pages/index.vue                      |   2 -
 server/models/article.ts             | 151 --------------------
 stores/article.ts                    | 204 ---------------------------
 5 files changed, 54 insertions(+), 442 deletions(-)
 delete mode 100644 organisms/article/ArticlePodcast.vue
 delete mode 100644 server/models/article.ts
 delete mode 100644 stores/article.ts

diff --git a/components/article/podcast.vue b/components/article/podcast.vue
index 936a03e..aee8026 100644
--- a/components/article/podcast.vue
+++ b/components/article/podcast.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
-import ArticlePodcast from "~/organisms/article/ArticlePodcast.vue";
 
 const props = defineProps<{ article: any }>();
 
@@ -11,7 +10,7 @@ const getSrc = (htmlString: string) => {
 const getArticleById = async (articleId: number) => {
   try {
     const { apiUrl } = useRuntimeConfig().public;
-    const { item }: any = await $fetch(`${apiUrl}/cms/article/${articleId}`, {
+    const { item }: any = await $fetch(`${apiUrl}/cms/digital-article/${articleId}`, {
       headers: {
         Site: "1",
       },
@@ -21,62 +20,93 @@ const getArticleById = async (articleId: number) => {
     handleError(error);
   }
 };
-const listArticle = computed(() => {
-  // if (props.article && props.article.audioIds) {
-  //   return props.article.audioIds.split(",").map((audioId: number) => getArticleById(audioId));
-  // }
-  // return []
-    const test = "8,2,3";
-    return test.split(",").map((audioId) => getArticleById(audioId));
-});
+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 (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();
 </script>
 
 <template>
   <div class="w-full grid grid-cols-12 gap-4" v-if="listArticle?.length > 0">
-    <div class="col-span-9 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + listArticle[0]?.thumbnail + '); background-size: cover;'">
+    <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="absolute inset-0 bg-black opacity-80 z-1"></div>
-      <Wrap class="relative flex items-center justify-center">
+      <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(${listArticle[0]?.thumbnail})` }"
+                :style="{ backgroundImage: `url(${audioPlay?.thumbnail})` }"
               >
-                <img :src="listArticle[0]?.thumbnail" alt="" class="relative z-3 h-40 md:h-60 w-full object-contain" />
+                <img :src="audioPlay?.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="listArticle[0]?.sub" class="text-xl font-bold text-white opacity-60"></h1>
-                  <h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']">{{ listArticle[0]?.title }}</h1>
+                  <!-- <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>
                   <time class="xs:mt-0.5 text-[10px] md:text-sm text-[#fff]">
-                    {{ utils.dateFormat(listArticle[0]?.createdOn, "dddd, DD/MM/YYYY - HH:mm") }}
+                    {{ utils.dateFormat(audioPlay?.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="listArticle[0]?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
+                <div v-html="audioPlay?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
               </div>
               <div class="col-span-11">
-                <AudioPlayer :src="getSrc(listArticle[0]?.detail)?.[1]" />
+                <AudioPlayer :src="getSrc(audioPlay?.detail)?.[1]" />
               </div>
             </div>
           </div>
         </div>
-      </Wrap>
+      </div>
     </div>
-    <div class="col-span-3">
-      <div class="flex items-center mt-5 mb-5">
+    <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.slice(1)" :key="index">
-          <ArticlePodcast mode="podcast" image-size="md" text-size="lg" :createdOn="item?.createdOn" :title="item?.title" :slug="'/' + item.category?.code + '/' + item.code" :thumb="item?.thumbnail" />
+        <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>
+                <!-- Nghe tập này -->
+              </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>
diff --git a/organisms/article/ArticlePodcast.vue b/organisms/article/ArticlePodcast.vue
deleted file mode 100644
index 9f46fa2..0000000
--- a/organisms/article/ArticlePodcast.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-
-<script setup lang='ts'>
-
-const props = defineProps<{
-    thumb: string
-    title: string
-    brief?: string
-    slug: string
-    createdOn : string
-    titleClass?: string
-    clampIntro?: string
-}>()
-
-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',
-        props.titleClass ? props.titleClass : [
-            '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',props.clampIntro
-    ]
-}
-
-</script>
-
-<template>
-    <NuxtLink :to="slug || '#!'" :title="title">
-        <article mode="basic" :class="defaultClass.article">
-            <div class="rounded-sm overflow-hidden relative">
-                <NuxtImg :src="thumb || '/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>
-                            <!-- Nghe tập này -->
-                </div>
-            </div>
-            <p class="xs:mt-0.5 xs:text-sm text-sm">{{ utils.dateFormat(createdOn) }}</p>
-            <h3 :class="defaultClass.title" v-html="title"></h3>
-            <div v-if='brief' :class="defaultClass.brief" v-html="brief"> </div>
-        </article>
-    </NuxtLink>
-</template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index bba6ced..3fbe9c0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,6 @@ import _cloneDeep from 'lodash/cloneDeep';
 
 import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
-import Podcast from "~/components/article/podcast.vue"
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
@@ -34,7 +33,6 @@ useHead({
 <template>
   <main class="h-screen" v-if="currentPage">
     <DynamicTemplate :settings="currentPage.settings">
-      <Podcast></Podcast>
       <template v-if="sectionPublished && sectionPublished.length > 0">
         <DynamicSection
           v-for="(section, index) in sectionPublished"
diff --git a/server/models/article.ts b/server/models/article.ts
deleted file mode 100644
index 92e07c7..0000000
--- a/server/models/article.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { utils } from "~/utils/utilities";
-import { Author } from "./author";
-import Base from "./base";
-import { H3Event } from "h3";
-import { ref } from "vue"
-
-/**
- * Represents an article.
- */
-export type Article = {
-    id: number;
-    siteId: number;
-    articleId: number;
-    categoryId: number;
-    sub?: string; // tiền tố của tiêu đề
-    title: string;
-    intro?: string;
-    brief?: string;
-    detail?: string;
-    summary?: string;
-    thumbnail?: string;
-    represent?: string;
-    keyword?: string;
-    description?: string;
-    code?: string; // slug
-    redirect?: string;
-    type?: number; // 1: Editorial, 2: General , 3: Reportage , 4: Interview , 5: Survey , 6: Tutorial , 7: Podcast, 8: Broadcast  , 9: Talkshow  , 10: Livestream  , 11: Translation  , 12: Promotion  , 99: Other
-    layoutType?: number; // 1: Normal  , 2: Short  , 3: Long  , 4: Page, 99: Other
-    contentType?: number; // 1: General   , 2: Photo   , 3: Audio   , 4: Video   , 5: Graphic   , 6: Document   , 7: Interaction, 99: Other
-    feature?: string; // Private, Exclusive, Featured, Sponsored ,Important ,Archived
-    interaction?: string; // user hobbies
-    language?: string; // vi, en, ...
-    otherSettings?: string;
-    views?: number;
-    likes?: number;
-    rates?: number;
-    follows?: number;
-    shares?: number;
-    reports?: number;
-    comments?: number;
-    otherStatistics?: string;
-    order?: number;
-    priority?: number;
-    tags?: string;
-    authors?: Author[];
-    topics?: string;
-    events?: string;
-    relations?: Article[];
-    categories?: string;
-    sourceTitle?: string;
-    sourceUrl?: string;
-    sourceType?: string;
-    status?: number;
-} & Base;
-
-export const listPaging = async (event: H3Event) => {
-    try {
-        const { apiUrl } = useRuntimeConfig().public;
-        const { categoryId, authorId, eventId, tagId, topicId, page, limit, sort } = getQuery(event)
-        const query = ref({})
-        if(eventId) {
-            query.value = { eventId }
-        } 
-        if(categoryId) {
-            query.value = { categoryId }
-        }
-        if(authorId) {
-            query.value = { authorId }
-        }
-        if(tagId) {
-            query.value = { tagId }
-        }
-        if(topicId) {
-            query.value = { topicId }
-        }
-        const { items, total }: any = await $fetch(`${apiUrl}/cms/article-publishing/condition/paging:${page}-${limit}/sorting:${sort}`,{
-            method: 'POST',
-            headers: {site: 1},
-            body:{ ...query.value }
-        })
-        
-        return { items, total };
-    } catch (error) {
-        handleError(error);
-    }
-}
-
-export const listPagingWithTagId = async (event: H3Event) => {
-    try {
-        const { apiUrl } = useRuntimeConfig().public
-        const { tagId, page, limit, sort } = getQuery(event)
-        const { items, total }: any = await $fetch(`${apiUrl}/cms/article-publishing/condition/paging:${page}-${limit}/sorting:${sort}`, {
-            method: 'POST',
-            headers: {
-                site: 1
-            },
-            body: {
-                tagId
-            }
-        })
-        return { items, total }
-    } catch (error) {
-        handleError(error);
-    }
-}
-
-// export const listPagingWithEventId = async (event: H3Event) => {
-//     try {
-//         const { apiUrl } = useRuntimeConfig().public
-//         const { eventId, page, limit, sort } = getQuery(event)
-//         const obj = { eventId }
-//         const { items, total }: any =  await $fetch(`${apiUrl}/cms/article-publishing/condition/paging:${page}-${limit}/sorting:${sort}`,{
-//             method: 'POST',
-//             headers: {
-//                 site: 1
-//             },
-//             body:{ ...obj }
-//         })
-//         return { items, total }
-//     } catch (error) {
-//         handleError(error);
-//     }
-// }
-export const listSectionArticle = async (event: H3Event) => {
-    try {
-        const { apiUrl } = useRuntimeConfig().public;
-        const { layout } = getQuery(event)
-        
-        const { item }: any = await $fetch(`${apiUrl}/cms/category-section-article/category:41-sectionCode:${layout}`,{
-            method: 'GET',
-        })
-        
-        return { item };
-    } catch (error) {
-        handleError(error);
-    }
-}
-export const get = async (event: H3Event) => {
-    try {
-        const { apiUrl } = useRuntimeConfig().public;
-        const { articleId } = getQuery(event)
-        const { item }: any = await $fetch(`${apiUrl}/cms/article-publishing/code:${articleId}`, {
-            headers: {
-                Site: '1'
-            }
-        })
-        return item;
-    } catch (error) {
-        handleError(error);
-    }
-}
\ No newline at end of file
diff --git a/stores/article.ts b/stores/article.ts
deleted file mode 100644
index f3be200..0000000
--- a/stores/article.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-import type { LocationQuery } from '#vue-router';
-import type { PaginationInfo } from '~/objects';
-import type { Article } from '~/server/models/article';
-
-export const useArticleStoreV2 = defineStore('article-v2', () => {
-
-  const { serverResourceUrl, pagingDefault, pagingLimit } = useRuntimeConfig().public
-
-  const pagination = ref<PaginationInfo>({
-    page: utils.toNumber(pagingDefault),
-    limit: utils.toNumber(pagingLimit),
-    total: 0,
-  });
-
-  async function fetchByCategoryIdWithPaging(categoryId: number, limit?: string | number) {
-    const { data, error } = await useFetch<any>(`/api/v2/articles-paging?categoryId=${categoryId}&page=${pagination.value.page}&limit=${limit ? limit : pagination.value.limit}&sort=createdon desc`)
-
-    if (error.value) {
-      pagination.value.total = 0;
-      return [] as Article[]
-    }
-
-    data.value.items.forEach((item: Article) => {
-      item.title = item.title.replace(/<p>|<\/p>/g, '')
-    })
-
-    pagination.value.total = data.value.total;
-
-    return data.value.items
-  }
-
-  // async function fetchByTagId(tagId: number, limit?: number, page?: number) {
-  //   if(limit) {
-  //     pagination.value.limit = limit;
-  //   }
-  //   if(page) {
-  //     pagination.value.page = page;
-  //   }
-  //   const { data, error } = await useFetch<any>(`/api/v2/articles-tag`, {
-  //     query: {
-  //       tagId: tagId,
-  //       limit: pagination.value.limit,
-  //       page: pagination.value.page,
-  //       sort: 'createdon desc'
-  //     }
-  //   })
-  //   if(error.value) {
-  //     return null
-  //   }
-    
-  //   pagination.value.total = data.value.total
-  //   return data.value.items
-  // }
-
-  // async function fetchByTagId(tagId: number, limit?: number) {
-  //   const { data, error } = await useFetch<any>(`/api/v2/articles-tag`, {
-  //     query: {
-  //       tagId: tagId,
-  //       limit: limit ? limit : pagination.value.limit,
-  //       page: pagination.value.page,
-  //       sort: 'createdon desc'
-  //     }
-  //   })
-
-  //   if(error.value) {
-  //     return null;
-  //   }
-
-  //   pagination.value.total = data.value.total
-
-  //   return data.value.items
-  // }
-
-  async function fetchByCategorySectionArticle(layout: number) {
-    const { data, error } = await useFetch<any>(`/api/v2/articles-category-section?layout=${layout}`)
-    // if (error.value) {
-    //   return {} as Article{}
-    // }
-    // data.value.items.forEach((item: Article) => {
-    //   item.title = item.title.replace(/<p>|<\/p>/g, '')
-    // })
-    if(error.value) {
-      return {}
-    }
-    return data.value
-  }
-
-  async function fetchByEventId(eventId: number, limit?: number) {
-    if(limit) {
-      pagination.value.limit = limit
-    }
-    const { data, error } = await useFetch<any>(`/api/v2/articles-paging`, {
-      query: {
-        eventId: eventId,
-        page: pagination.value.page,
-        limit: pagination.value.limit,
-        sort: 'createdon desc'
-      }
-    })
-
-    if(error.value) {
-      return null
-    }
-
-    pagination.value.total = data.value.total
-    return data.value.items
-  }
-
-  async function fetchByAuthorId(authorId: number, limit?:number) {
-    if(limit) {
-      pagination.value.limit = limit
-    }
-    const { data, error } = await useFetch<any>(`/api/v2/articles-paging`, {
-      query: {
-        authorId: authorId,
-        page: pagination.value.page,
-        limit: pagination.value.limit,
-        sort: 'createdon desc'
-      }
-    })
-
-    if(error.value) {
-      return null
-    }
-
-    pagination.value.total = data.value.total
-    return data.value.items
-  }
-
-  async function fetchByTopicId(topicId: number, limit?: number) {
-    if(limit) {
-      pagination.value.limit = limit
-    }
-    const { data, error } = await useFetch<any>(`/api/v2/articles-paging`, {
-      query: {
-        topicId: topicId,
-        page: pagination.value.page,
-        limit: pagination.value.limit,
-        sort: 'createdon desc'
-      }
-    })
-
-    if(error.value) {
-      return null
-    }
-    pagination.value.total = data.value.total
-    return data.value.items
-  }
-
-  async function fetchByTagId(tagId: number, limit?: number) {
-    if(limit) {
-      pagination.value.limit = limit
-    }
-    const { data, error } = await useFetch<any>(`/api/v2/articles-paging`, {
-      query: {
-        tagId: tagId,
-        page: pagination.value.page,
-        limit: pagination.value.limit,
-        sort: 'createdon desc'
-      }
-    })
-
-    if(error.value) {
-      return null
-    }
-
-    pagination.value.total = data.value.total
-    return data.value.items
-  }
-
-  async function fetchById(id: string) {
-    const { data, error } = await useFetch<Article>(`/api/v2/articles`, { query: { articleId: id } })
-
-    if (error.value) {
-      return null
-    }
-
-    if (data.value) {
-      data.value.title = data.value.title.replace(/<p>|<\/p>/g, '')
-      data.value.detail = utils.domainImage(data.value.detail, serverResourceUrl)
-    }
-
-    return data.value
-  }
-
-  function setStateFromRoute(query: LocationQuery) {
-    if (query.page) pagination.value.page = utils.toNumber(query.page);
-    else
-      pagination.value.page = utils.toNumber(
-        useRuntimeConfig().public.pagingDefault
-      );
-    if (query.limit) pagination.value.limit = utils.toNumber(query.limit);
-    else
-      pagination.value.limit = utils.toNumber(
-        useRuntimeConfig().public.pagingLimit
-      );
-  }
-
-  return { pagination, fetchByTagId, fetchByCategoryIdWithPaging, fetchById, setStateFromRoute, fetchByCategorySectionArticle, fetchByEventId, fetchByTopicId, fetchByAuthorId }
-})
-
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useArticleStoreV2, import.meta.hot))
-}

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 3/3] 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: