From 0bfbfa77117820bd2b1c20c7b4ab40a013e00f73 Mon Sep 17 00:00:00 2001
From: Duong Truong Phong <duongtrphong1211@gmail.com>
Date: Mon, 3 Jun 2024 12:27:22 +0700
Subject: [PATCH] phongdt:page video

---
 components/article/Event.vue                  |  14 ++
 components/article/Tag.vue                    |  23 +++
 components/article/Topic.vue                  |  15 ++
 .../templates/components/AudioPlayer.vue      | 156 --------------
 .../templates/components/Podcast.vue          | 191 ------------------
 .../templates/components/Video.vue            |  74 -------
 .../templates/other/comments/default.vue      | 184 +++++++++--------
 .../templates/other/details/podcast.vue       |  33 +++
 .../templates/other/details/video.vue         |  70 +++++++
 .../page-component/templates/other/index.ts   |   1 +
 .../page-component/templates/other/index.vue  |   6 +-
 pages/bai-viet/[slug].vue                     |   2 +-
 server/api/services/[...].ts                  |   6 +
 server/models/event.ts                        |  50 +++++
 server/models/tag.ts                          |  36 ++++
 server/models/topic.ts                        |  60 ++++++
 stores/event.ts                               |  45 +++++
 stores/tag.ts                                 |  28 +++
 stores/topic.ts                               |  55 +++++
 19 files changed, 538 insertions(+), 511 deletions(-)
 create mode 100644 components/article/Event.vue
 create mode 100644 components/article/Tag.vue
 create mode 100644 components/article/Topic.vue
 delete mode 100644 components/dynamic-page/page-component/templates/components/AudioPlayer.vue
 delete mode 100644 components/dynamic-page/page-component/templates/components/Podcast.vue
 delete mode 100644 components/dynamic-page/page-component/templates/components/Video.vue
 create mode 100644 components/dynamic-page/page-component/templates/other/details/video.vue
 create mode 100644 server/models/event.ts
 create mode 100644 server/models/tag.ts
 create mode 100644 server/models/topic.ts
 create mode 100644 stores/event.ts
 create mode 100644 stores/tag.ts
 create mode 100644 stores/topic.ts

diff --git a/components/article/Event.vue b/components/article/Event.vue
new file mode 100644
index 0000000..50c0dbb
--- /dev/null
+++ b/components/article/Event.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{ events: any[] }>()
+</script>
+
+<template>
+    <div v-if="events?.length" class="mt-6">
+        <h3 class="text-xl font-semibold after:content-[':']">Sự kiện</h3>
+        <ul class="flex flex-col gap-2 list-disc ml-4 my-2 pl-3 flex-wrap">
+            <li v-for="(event, index) in events" :key="index" class="font-semibold text-primary-100">
+                <nuxt-link :to="{ name: 'event-eventSlug', params: { eventSlug: event.code } }">{{ event.title }}</nuxt-link>
+            </li>
+        </ul>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/article/Tag.vue b/components/article/Tag.vue
new file mode 100644
index 0000000..023688e
--- /dev/null
+++ b/components/article/Tag.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{ tags?: any[] }>();
+
+</script>
+
+<template>
+    <div v-if="tags?.length"
+        class="flex flex-col items-center justify-between gap-6 sm:flex-row mt-6">
+        <div id="article-tags" class="flex order-2 gap-4 xl:order-1">
+            <h3 class="text-xl font-semibold after:content-[':']">Tag</h3>
+            <div class="flex items-center gap-4 flex-wrap">
+                <template v-for="(item, index) in tags" :key="index">
+                    <div v-if="item.code">
+                        <nuxt-link :to="{ name: 'tag-tagSlug', params:{ tagSlug: item.code } }" class="text-blue-500 hover:text-blue-600">
+                        {{ item?.title }}
+                    </nuxt-link>
+                    </div>
+                </template>
+
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/article/Topic.vue b/components/article/Topic.vue
new file mode 100644
index 0000000..fe91aa4
--- /dev/null
+++ b/components/article/Topic.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{topics?: any[]}>()
+</script>
+<template>
+    <div v-if="topics?.length" class="flex flex-col items-center justify-between gap-6 sm:flex-row mt-6">
+        <div class="flex order-2 gap-4 xl:order-1">
+            <h3 class="text-xl font-semibold after:content-[':'] whitespace-nowrap">Chủ đề</h3>
+            <div class="flex items-center gap-4 flex-wrap">
+                <NuxtLink v-for="(item, index) in topics" :key="index" :to="{ name:'topic-topicSlug', params:{ topicSlug: item.code } }" class="text-blue-500 hover:text-blue-600">
+                    {{ item?.title }},
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/components/AudioPlayer.vue b/components/dynamic-page/page-component/templates/components/AudioPlayer.vue
deleted file mode 100644
index f7d7f30..0000000
--- a/components/dynamic-page/page-component/templates/components/AudioPlayer.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{}>();
-
-</script>
-
-<template>
-  <div class="player">
-    <div class="player__track">
-        <input class="player__track-range" type="range" disabled />
-        <div class="player__time">
-            <span class="player__time-current">00:00</span>
-            <span class="player__time-duration">00:00</span>
-        </div>
-    </div>
-    <div class="player__controls">
-        <div class="player__speed">
-            <button class="player__speed-button">
-                <span class="player__speed-label">Tốc độ phát</span>
-                <span class="player__speed-value">1.0x</span>
-            </button>
-        </div>
-        <div class="player__actions">
-            <button class="player__actions-button player__actions-button--replay">
-                <Icon name="ri:replay-5-fill" class="player__icon player__icon--replay" />
-            </button>
-            <button class="player__actions-button player__actions-button--pause">
-                <Icon name="ri:play-circle-fill" class="player__icon player__icon--pause" />
-            </button>
-            <button class="player__actions-button player__actions-button--forward">
-                <Icon name="ri:forward-5-line" class="player__icon player__icon--forward" />
-            </button>
-        </div>
-        <div class="player__volume">
-            <button class="player__volume-button">
-                <div class="player__volume-control">
-                    <Icon name="ri:volume-up-fill" class="player__icon player__icon--volume" />
-                    <input class="player__volume-range" type="range" disabled />
-                </div>
-            </button>
-        </div>
-    </div>
-</div>
-
-</template>
-<style lang="scss" scoped>
-.player {
-  &__track {
-    width: 100%;
-  }
-
-  &__track-range {
-    width: 100%;
-    height: 5px;
-    accent-color: #fff;
-    cursor: pointer;
-  }
-
-  &__time {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 1rem;
-
-    &-current,
-    &-duration {
-      font-size: 10px;
-      font-family: 'Raleway', sans-serif;
-      font-weight: normal;
-      color: #fff;
-    }
-  }
-
-  &__controls {
-    width: 100%;
-    padding: 0 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    & > div {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-  }
-
-  &__speed {
-    &-button {
-      color: #fff;
-      background-color: transparent;
-      font-size: 0.75rem;
-      display: flex;
-      gap: 0.25rem;
-
-      &-value {
-        font-weight: bold;
-        font-size: 0.75rem;
-      }
-    }
-  }
-
-  &__actions {
-    &-button {
-      background-color: transparent;
-      padding: 0.5rem;
-      border-radius: 100%;
-      color: white;
-      width: fit-content;
-      height: fit-content;
-      &--replay:hover,
-      &--forward:hover {
-        background-color: #d6d3d1;
-      }
-    }
-  }
-  &__icon {
-      &--replay,
-      &--forward,
-      &--pause {
-        font-size: 20px;
-      }
-
-      &--pause {
-        font-size: 44px;
-      }
-    }
-  &__volume {
-    display: flex;
-    align-items: center;
-
-    &-button {
-      background-color: transparent;
-      color: white;
-    }
-
-    &-control {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-
-      & .player__icon--volume {
-        font-size: 1.125rem;
-      }
-
-      & .player__volume-range {
-        accent-color: #fff;
-        width: 3rem;
-        height: 5px;
-        cursor: pointer;
-      }
-    }
-  }
-}
-button{
-  border: 0;
-}
-
-</style>
diff --git a/components/dynamic-page/page-component/templates/components/Podcast.vue b/components/dynamic-page/page-component/templates/components/Podcast.vue
deleted file mode 100644
index 69a14c8..0000000
--- a/components/dynamic-page/page-component/templates/components/Podcast.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<script setup lang="ts">
-import AudioPlayer from './AudioPlayer.vue'
-</script>
-<template>
-  <div class="banner">
-    <div class="banner__background" style="background-image: url('https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg')">
-      <div class="banner__overlay"></div>
-      <Wrap class="banner__content">
-        <div class="banner__inner">
-          <div class="article">
-            <div class="article__image-container">
-              <div class="article__image-wrapper" style="background-image: url('https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg')">
-                <img src="https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg" alt="" class="article__image" />
-              </div>
-            </div>
-            <div class="article__content">
-              <div class="article__header">
-                <div class="article__header-text">
-                  <h1 class="article__title">Podcast Truyện ngắn: Như cơi đựng trầu</h1>
-                  <time class="article__date">T2, 29 Th01 2024 16:57</time>
-                </div>
-              </div>
-              <div class="article__intro">
-                <div class="article__intro-text">Tình cảm vợ chồng êm ấm 12 năm, tối nay được định đoạt bằng tờ giấy vô hồn, vốn là người dễ xúc động nên trong lúc viết, Ngân Thương để mấy giọt nước mắt rơi xuống làm đôi chỗ bị nhòe đi.</div>
-              </div>
-              <div class="article__audio">
-                <AudioPlayer />
-              </div>
-            </div>
-          </div>
-        </div>
-      </Wrap>
-    </div>
-  </div>
-</template>
-<style scoped lang="scss">
-.banner {
-  &__background {
-    width: 100%;
-    height: 60px;
-    background-size: cover;
-    @media (min-width: 768px) {
-      height: 25rem;
-    }
-
-    position: relative;
-    background-position: center;
-  }
-
-  &__overlay {
-    position: absolute;
-    inset: 0;
-    background-color: black;
-    opacity: 0.8;
-    z-index: 1;
-  }
-
-  &__content {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__inner {
-    width: 100%;
-    height: 40px;
-
-    @media (min-width: 768px) {
-      height: 80px;
-    }
-
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-    .article {
-      display: grid;
-      grid-template-columns: repeat(10, 1fr);
-      width: 100%;
-
-      &__image-container {
-        grid-column: span 3;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 15rem;
-        min-width: 100px;
-        @media (min-width: 768px) {
-          height: 20rem;
-          margin: 0 2rem;
-        }
-        margin: 0 0.5rem;
-      }
-
-      &__image-wrapper {
-        height: 10rem;
-        @media (min-width: 768px) {
-          height: 15rem;
-        }
-        width: 100%;
-        border-radius: 1.5rem 0 0 1.5rem;
-        padding: 0.5rem;
-        overflow: hidden;
-        position: relative;
-        background-size: cover;
-        z-index: 1;
-
-        &::after {
-          content: "";
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          background-color: #000;
-          opacity: 0.3;
-          position: absolute;
-          z-index: 2;
-        }
-      }
-
-      &__image {
-        position: relative;
-        z-index: 3;
-        height: 10rem;
-        @media (min-width: 768px) {
-          height: 15rem;
-        }
-        width: 100%;
-        object-fit: contain;
-      }
-
-      &__content {
-        grid-column: span 7;
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        position: relative;
-      }
-
-      &__header {
-        grid-column: span 12;
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        margin-top: 2rem;
-
-        &-text {
-          grid-column: span 11;
-        }
-      }
-
-      &__subtitle {
-        font-size: 14px;
-        font-weight: bold;
-        color: rgba(255, 255, 255, 0.6);
-      }
-
-      &__title {
-        font-size: 19px;
-        color: #fff;
-        font-weight: bold;
-        font-family: "SFD";
-      }
-
-      &__date {
-        margin-top: 0.125rem;
-        font-size: 14px;
-        color: #fff;
-      }
-
-      &__intro {
-        grid-column: span 12;
-        margin-bottom: 1rem;
-        display: none;
-        @media (min-width: 768px) {
-          display: block;
-        }
-      }
-
-      &__intro-text {
-        text-align: left;
-        font-size: 16px;
-        color: #fff;
-        font-family: "SFD";
-      }
-
-      &__audio {
-        grid-column: span 10;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/dynamic-page/page-component/templates/components/Video.vue b/components/dynamic-page/page-component/templates/components/Video.vue
deleted file mode 100644
index 347a57d..0000000
--- a/components/dynamic-page/page-component/templates/components/Video.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <article class="article">
-    <div id="article-detail" class="article__detail">
-      <div>
-        <video controls="controls" width="100%" height="auto" data-file-id="149" data-resource="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" data-title="Download.mp4">
-          <source src="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" type="video/mp4" />
-        </video>
-      </div>
-    </div>
-    <div class="article__sidebar">
-      <div class="article__sidebar-content">
-        <h1 class="article__title">Tranh cãi chuyện 'quán không nhận chuyển khoản'</h1>
-        <div class="article__author-info">
-          <div class="article__author">
-            <p class="article__author-name">Thanh Huệ</p>
-          </div>
-          <span class="article__separator">-</span>
-          <p class="article__date">T4, 15 Th05 2024 10:55</p>
-        </div>
-        <div id="article-brief" class="article__brief">
-          <div class="article__intro-text">Những ngày cận Tết tại Hà Nội, các hội thi hoa đào, quất cảnh với đa dạng các sản phẩm độc đáo, bắt mắt đ đuợc các nghệ nhân đem đến cho khách tham quan chiêm ngưỡng.</div>
-        </div>
-      </div>
-    </div>
-  </article>
-</template>
-<style scoped lang="scss">
-.article {
-  width: 100%;
-  display: flex;
-  /* flex-direction: column; */
-  gap: 1rem; // Equivalent to gap-4
-  margin-top: 1rem; // Equivalent to mt-4
-  background-color: #f7f7f7;
-
-  &__detail {
-    flex: 1;
-
-    iframe,
-    video {
-      width: 100%;
-      max-width: 100%;
-      &.iframe {
-        max-height: 13rem; // Equivalent to max-h-52
-      }
-    }
-  }
-
-  &__sidebar {
-    width: 50%;
-    &-content {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    font-size: 17px; // Equivalent to text-2xl
-    font-weight: 600;
-    text-align: left;
-  }
-
-  &__author-info {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-  p {
-    margin: 0;
-  }
-  video {
-    pointer-events: none;
-  }
-}
-</style>
diff --git a/components/dynamic-page/page-component/templates/other/comments/default.vue b/components/dynamic-page/page-component/templates/other/comments/default.vue
index eecfaf1..792cd18 100644
--- a/components/dynamic-page/page-component/templates/other/comments/default.vue
+++ b/components/dynamic-page/page-component/templates/other/comments/default.vue
@@ -1,91 +1,101 @@
 <template>
-    <div class="comment">
-      <div class="input_comment width_common mb-2">
-        <div class="box-area-input width_common">
-          <textarea id="txtComment" class="block_input outline-0  outline-none outline-offset-0" placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
-        </div>
-      </div>
-      <div class="mb-2">
-        <button type="button" class="send-comment">
-          Gửi bình luận
-          <Icon name="ri:send-plane-2-fill"></Icon>
-        </button>
+  <div class="mt-4">
+    <div class="input_comment width_common mb-2">
+      <div class="box-area-input width_common">
+        <textarea id="txtComment" class="block_input"
+          placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
       </div>
     </div>
-  </template>
-  
-  <style scoped lang="scss">
 
-  .mb-2 {
-    margin-bottom: 0.5rem;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .send-comment {
-    padding: 0.5rem;
-    margin-right: 0.5rem;
-    border-radius: 0.25rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    background-color: #409eff;
-    border: 1px solid;
-    color: #fff;
-  }
-  .container {
-    width: 100%;
-    max-width: 80rem;
-    &.h3 {
-      font-size: 1.25rem;
-      line-height: 1.75rem;
-      font-weight: 700;
-    }
-  }
-  .input_comment {
-    padding: 0;
-    margin-top: 10px;
-    background: #fff;
-    position: relative;
-    width: 100%;
-    border-radius: 5px;
-    border-top: 1px solid #dedede;
-    border-right: 1px solid #dedede;
-    border-bottom: 1px solid #dedede;
-  }
-  
-  
-  .box-area-input {
-    /* background: #f3f6f9; */
-    border-radius: 4px;
-    position: relative;
-    padding: 5px 10px;
-    border-left: 2px solid rgba(59, 130, 246, 1);
-  }
-  
-  
-  .input_comment textarea.block_input {
-    height: 30px;
-    font-size: 14px;
-  }
-  textarea::placeholder {
-    color: #878a99;
-  }
-  .input_comment textarea.block_input {
-    height: 58px;
-    overflow: hidden;
-    resize: none;
-  }
-  
-  /* .box-area-input .block_input {
-    background: #f7f7f7;
-  } */
-  
-  .input_comment textarea {
-    background: #fff;
-    border: none;
-    width: 100%;
-    height: 58px;
-    overflow: hidden;
-  }
-  </style>
-  
\ No newline at end of file
+    <div class="mb-2">
+      <button type="button" class="mr-2 p-2 bg-blue-500 text-[#fff] rounded text-xs">
+        Gửi bình luận
+        <Icon name="ri:send-plane-2-fill"></Icon>
+      </button>
+    </div>
+
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+
+.input_comment {
+  padding: 0;
+  margin-top: 10px;
+  background: #f5f5f5;
+  position: relative;
+  width: 100%;
+  border-top: 1px solid #dedede;
+  border-right: 1px solid #dedede;
+  border-bottom: 1px solid #dedede;
+  border-radius: 5px;
+}
+
+
+
+.box-area-input {
+  background: #f7f7f7;
+  border-radius: 4px;
+  position: relative;
+  padding: 10px 0 10px 0;
+  border-left: 2px solid rgba(59, 130, 246, 1);
+}
+
+
+.input_comment textarea.block_input {
+  height: 30px;
+  -webkit-transition-duration: 200ms;
+  transition-duration: 200ms;
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
+  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
+}
+
+.input_comment textarea.block_input {
+  height: 76px;
+  overflow: hidden;
+  resize: none;
+}
+
+.box-area-input .block_input {
+  background: #f7f7f7;
+}
+
+.input_comment textarea {
+  font: 400 16px/150% arial;
+  background: #fff;
+  border: none;
+  width: 100%;
+  height: 58px;
+  color: #4f4f4f !important;
+  overflow: hidden;
+  padding: 5px 37px 0 15px;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+textarea,
+select {
+  background: #fff;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+  margin: 3px 0;
+  padding: 0 5px;
+  outline: none;
+}
+
+input,
+textarea {
+  font-family: arial;
+  font-size: 11px;
+  border: none;
+  background: none;
+}
+</style>
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/other/details/podcast.vue b/components/dynamic-page/page-component/templates/other/details/podcast.vue
index 71714e8..cbdae7b 100644
--- a/components/dynamic-page/page-component/templates/other/details/podcast.vue
+++ b/components/dynamic-page/page-component/templates/other/details/podcast.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
 const { currentArticle } = storeToRefs(useArticleStore());
+import Topic from "@/components/article/Topic.vue";
+import Event from "@/components/article/Event.vue";
+import Tag from "@/components/article/Tag.vue";
 
 const getSrc = (htmlString: string) => {
   const srcRegex = /src="([^"]+)"/;
@@ -19,6 +22,33 @@ const getSrc = (htmlString: string) => {
 //     handleError(error);
 //   }
 // };
+const store = reactive({
+  tag: useTagStore(),
+  topic: useTopicStore(),
+  event: useEventStore()
+});
+
+// const listTag = ref([]);
+// const listTopic = ref([]);
+// const listEvent = ref([])
+
+// const getTagsAndTopicsAndEvents = async () => {
+//   if (!currentArticle) return;
+
+//   const fetchData = async (ids, fetchFn, list) => {
+//     if (!ids) return;
+//     const data = await Promise.all(ids.split(",").map(fetchFn));
+//     if (data.length > 0) list.value = data;
+//   };
+
+//   await Promise.all([
+//     fetchData(currentArticle.tagIds, store.tag.fetchById, listTag), 
+//     fetchData(currentArticle.topicIds, store.topic.fetchById, listTopic),
+//     fetchData(currentArticle.eventIds, store.event.fetchById, listEvent)
+//   ]);
+// };
+
+// getTagsAndTopicsAndEvents();
 const listArticle = ref([]);
 const audioPlay = ref({});
 const defaultClass = {
@@ -70,6 +100,9 @@ const defaultClass = {
               </div>
               <div class="col-span-11">
                 <AudioPlayer :src="getSrc(currentArticle?.detail)?.[1]" />
+                <!-- <Topic :topics="listTopic" />
+                <Event :events="listEvent" />
+                <Tag :tags="listTag" /> -->
               </div>
             </div>
           </div>
diff --git a/components/dynamic-page/page-component/templates/other/details/video.vue b/components/dynamic-page/page-component/templates/other/details/video.vue
new file mode 100644
index 0000000..189e6d8
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/other/details/video.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import Comment from "@/components/dynamic-page/page-component/templates/other/comments/default.vue";
+import Topic from "@/components/article/Topic.vue";
+import Event from "@/components/article/Event.vue";
+import Tag from "@/components/article/Tag.vue";
+
+const { currentArticle } = storeToRefs(useArticleStore());
+const store = reactive({
+  tag: useTagStore(),
+  topic: useTopicStore(),
+  event: useEventStore()
+});
+
+// const listTag = ref([]);
+// const listTopic = ref([]);
+// const listEvent = ref([])
+
+// const getTagsAndTopicsAndEvents = async () => {
+//   if (!currentArticle) return;
+//   const fetchData = async (ids, fetchFn, list) => {
+//     if (!ids) return;
+//     const data = await Promise.all(ids.split(",").map(fetchFn));
+//     if (data.length > 0) list.value = data;
+//   };
+//   await Promise.all([
+//     fetchData(currentArticle.value.tagIds, store.tag.fetchById, listTag), 
+//     fetchData(currentArticle.value.topicIds, store.topic.fetchById, listTopic),
+//     fetchData(currentArticle.value.eventIds, store.event.fetchById, listEvent)
+//   ]);
+// };
+
+// getTagsAndTopicsAndEvents();
+</script>
+
+<template>
+  <div class="max-w-1500px mx-auto">
+    <article class="w-full flex flex-col lg:flex-row gap-4 overflow-x-hidden mt-4 bg-#f7f7f7">
+      <div id="article-detail" class="flex-1 [&_iframe]:w-full [&_iframe]:max-w-full [&_iframe]:max-h-52 md:[&_iframe]:max-h-full [&_video]:max-w-full [&_video]:w-full">
+        <div v-html="currentArticle?.detail" />
+      </div>
+      <div class="lg:w-[480px] overflow-y-auto lg:max-h-560px">
+        <div class="w-full pt-6 pr-3">
+          <h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60"></h1>
+          <h1 v-html="currentArticle?.title" class="text-2xl font-bold text-left sm:text-3xl xl:text-4xl" />
+          <!-- <ArticleMeta class="!justify-start items-center gap-x-2" :authors="article?.authors" :createdOn="article?.createdOn" :createdBy="article?.createdBy" /> -->
+
+          <div id="article-brief" class="mx-auto xl:max-w-6xl text-balance">
+            <div v-html="currentArticle?.intro" class="font-semibold text-left" />
+          </div>
+          <!-- <section>
+                <article class="mb-[1rem] py-[1rem] border-y-[1px] border-solid border-[#e0e0e0] flex items-center">
+                  <iframe
+                    :src="`https://www.facebook.com/plugins/like.php?href=${ORIGIN}/${category?.code}/${article?.code}&amp;width=160&amp;layout=button&amp;action=like&amp;size=small&amp;share=true&amp;height=65&amp;appId`"
+                    width="140" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
+                    allowfullscreen="true"
+                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
+                </article>
+              </section> -->
+          <!-- <Topic :topics="listTopic" />
+          <Event :events="listEvent" />
+          <Tag :tags="listTag" /> -->
+          <section id="comment-section" class="grid">
+                <Comment :articleId="currentArticle?.articleId" />
+            </section>
+        </div>
+      </div>
+    </article>
+    <div class="w-full border-t-2 border-dashed mt-4" />
+  </div>
+</template>
diff --git a/components/dynamic-page/page-component/templates/other/index.ts b/components/dynamic-page/page-component/templates/other/index.ts
index 737187a..a03d302 100644
--- a/components/dynamic-page/page-component/templates/other/index.ts
+++ b/components/dynamic-page/page-component/templates/other/index.ts
@@ -3,6 +3,7 @@ export { default as Article_Detail_Emagazine } from './details/emagazine.vue'
 export { default as Article_Detail_Default } from './details/default.vue'
 export { default as Article_Detail_Infographics } from './details/infographics.vue'
 export { default as Article_Detail_Podcast } from './details/podcast.vue'
+export { default as Article_Detail_Video } from './details/video.vue'
 export { default as 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 f2ecef7..c4a213b 100644
--- a/components/dynamic-page/page-component/templates/other/index.vue
+++ b/components/dynamic-page/page-component/templates/other/index.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
-import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Default_Breadcrumb, ADS_Default, Comment, Article_Detail_Podcast} from "./index";
+import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, 
+  Default_Breadcrumb, ADS_Default, Comment, Article_Detail_Podcast, Article_Detail_Video
+} from "./index";
 const _props = defineProps<{
   settings: any;
   component?: any;
@@ -15,7 +17,7 @@ const definedDynamicComponent: Record<string, any> = {
   'ARTICLE_BUTTON': Article_Button,
   COMMENT: Comment,
   PODCAST: Article_Detail_Podcast,
-//   VIDEO: Video
+  VIDEO: Article_Detail_Video
 };
 
 const getCurrentComponent = computed(() => `${_props.settings.layout}`);
diff --git a/pages/bai-viet/[slug].vue b/pages/bai-viet/[slug].vue
index a980a85..6139873 100644
--- a/pages/bai-viet/[slug].vue
+++ b/pages/bai-viet/[slug].vue
@@ -51,7 +51,7 @@ watch(currentArticle, async () => {
         break;
 
     case 4:
-        isContentType = 'ArticleLayoutVideo'
+        isContentType = 'trang-chi-tiet-video-clip'
         break;
 
     case 5:
diff --git a/server/api/services/[...].ts b/server/api/services/[...].ts
index 637397f..491a43c 100644
--- a/server/api/services/[...].ts
+++ b/server/api/services/[...].ts
@@ -1,8 +1,14 @@
 import { createRouter, defineEventHandler, useBase } from 'h3'
 import * as navigationCtrl from '~/server/models/navigation'
+import * as eventCtrl from '~/server/models/event'
+import * as tagCtrl from '~/server/models/tag'
+import * as topicCtrl from '~/server/models/topic'
 
 const router = createRouter()
 
 router.get('/navigation', defineEventHandler(navigationCtrl.get)) 
+router.get('/tag', defineEventHandler(tagCtrl.fetchById))
+router.get('/topic', defineEventHandler(topicCtrl.fetchById))
+router.get('/event', defineEventHandler(eventCtrl.fetchById))
 
 export default useBase('/api/services', router.handler)
diff --git a/server/models/event.ts b/server/models/event.ts
new file mode 100644
index 0000000..b5336b3
--- /dev/null
+++ b/server/models/event.ts
@@ -0,0 +1,50 @@
+import { utils } from "~/utils/utilities";
+import Base from "./base";
+import { H3Event } from "h3";
+
+export const listPaging = async(event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { siteId, page, fetch } = getQuery(event)
+
+        const { items, total }: any = await $fetch(`${apiUrl}/cms/event/condition/paging:${page}-${fetch}`, {
+            method: 'POST',
+            body: {siteIds: [siteId]}
+        })
+        return {items, total}
+    } catch (error) {
+        handleError(error);
+    }
+}
+
+export const fetchByCode = async(event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { eventCode }: any = getQuery(event)
+        const { item }: any = await $fetch(`${apiUrl}/cms/event/code:${eventCode}`, {
+            method: 'GET',
+            headers: {
+                Site: 1
+            }
+        })
+        return item
+    } catch (error) {
+        handleError(error)
+    }
+}
+
+export const fetchById = async(event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { eventId }: any = getQuery(event)
+        const { item }: any = await $fetch(`${apiUrl}/cms/event/${eventId}`, {
+            method: 'GET',
+            headers: {
+                Site: 1
+            }
+        })
+        return item
+    } catch (error) {
+        handleError(error)
+    }
+}
diff --git a/server/models/tag.ts b/server/models/tag.ts
new file mode 100644
index 0000000..e3b81b0
--- /dev/null
+++ b/server/models/tag.ts
@@ -0,0 +1,36 @@
+import { utils } from "~/utils/utilities";
+import { Author } from "./author";
+import Base from "./base";
+import { H3Event } from "h3";
+
+export const get = async(event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { code } = getQuery(event)
+
+        const { items }: any = await $fetch(`${apiUrl}/cms/tag/code:${code}`, {
+            headers: {
+                site: 1
+            }
+        })
+        return items
+    } catch(error) {
+        handleError(error);
+    }
+}
+
+export const fetchById = async(event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { tagId }: any = getQuery(event)
+        const { item }: any = await $fetch(`${apiUrl}/cms/tag/${tagId}`, {
+            method: 'GET',
+            headers: {
+                Site: 1
+            }
+        })
+        return item
+    } catch (error) {
+        handleError(error)
+    }
+}
\ No newline at end of file
diff --git a/server/models/topic.ts b/server/models/topic.ts
new file mode 100644
index 0000000..2a6392e
--- /dev/null
+++ b/server/models/topic.ts
@@ -0,0 +1,60 @@
+import { utils } from "~/utils/utilities";
+import { Author } from "./author";
+import Base from "./base";
+import { ref } from "vue"
+import { H3Event } from "h3";
+
+export const listPaging = async (event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { categoryId, page, limit, sort } = getQuery(event)
+        const query = ref({})
+        if(categoryId) {
+            query.value = { categoryId }
+        }
+
+        const { items, total }: any = await $fetch(`${apiUrl}/cms/topic/condition/paging:${page}-${limit}/sorting:${sort}`,{
+            method: 'POST',
+            headers: {site: 1},
+            body:{ ...query.value }
+        })
+        
+        return { items, total };
+    } catch (error) {
+        handleError(error)
+    }
+}
+
+export const fetchByCode = async(event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { topicCode }: any = getQuery(event)
+        const { item }: any = await $fetch(`${apiUrl}/cms/topic/code:${topicCode}`, {
+            method: 'GET',
+            headers: {
+                site: 1
+            }
+        })
+
+        return item
+    } catch (error) {
+        handleError(error)
+    }
+}
+
+export const fetchById = async(event: H3Event) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { topicId }: any = getQuery(event)
+        const { item }: any = await $fetch(`${apiUrl}/cms/topic/${topicId}`, {
+            method: 'GET',
+            headers: {
+                site: 1
+            }
+        })
+
+        return item
+    } catch (error) {
+        handleError(error)
+    }
+}
\ No newline at end of file
diff --git a/stores/event.ts b/stores/event.ts
new file mode 100644
index 0000000..d2d394f
--- /dev/null
+++ b/stores/event.ts
@@ -0,0 +1,45 @@
+import { LocationQuery } from "vue-router";
+import { defineStore, acceptHMRUpdate } from "pinia";
+
+export const useEventStore = defineStore('event', () => {
+
+    const pagination = ref({
+        page: utils.toNumber(useRuntimeConfig().public.pagingDefault),
+        limit: utils.toNumber(useRuntimeConfig().public.pagingLimit),
+        total: 0,
+    });
+
+    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);
+    }
+
+    async function listPaging(siteId: number, page: number, fetch: number) {
+        const { data, error } = await useFetch<any>(`/api/services/events-paging?siteId=${siteId}&page=${page}&fetch=${fetch}`)
+        if (error.value) {
+            return null
+        }
+        return data.value
+    }
+
+    async function fetchById(id: string) {
+        const { data, error } = await useFetch<any>(`/api/services/event`, {
+            query: {
+                eventId: id
+            }
+        })
+        if(error.value) {
+            return null
+        }
+
+        return data.value
+    }
+
+    return { listPaging, fetchById, setStateFromRoute, pagination }
+})
+
+if (import.meta.hot) {
+    import.meta.hot.accept(acceptHMRUpdate(useEventStore, import.meta.hot))
+}
\ No newline at end of file
diff --git a/stores/tag.ts b/stores/tag.ts
new file mode 100644
index 0000000..b35c53c
--- /dev/null
+++ b/stores/tag.ts
@@ -0,0 +1,28 @@
+export const useTagStore = defineStore('tag', () => {
+    // async function fetchByCode(code: string) {
+    //     const { data, error } = await useFetch<any>(`/api/services/tag`, { query: {code: code}})
+    //     if(error.value) {
+    //         return null
+    //     }
+    //     return data.value[0]
+    // }
+
+    async function fetchById(id: string) {
+        const { data, error } = await useFetch<any>(`/api/services/tag`, {
+            query: {
+                tagId: id
+            }
+        })
+        if(error.value) {
+            return null
+        }
+
+        return data.value
+    }
+
+    return { fetchById }
+})
+
+if(import.meta.hot) {
+    import.meta.hot.accept(acceptHMRUpdate(useTagStore, import.meta.hot))
+}
\ No newline at end of file
diff --git a/stores/topic.ts b/stores/topic.ts
new file mode 100644
index 0000000..44342c1
--- /dev/null
+++ b/stores/topic.ts
@@ -0,0 +1,55 @@
+import { LocationQuery } from "vue-router";
+import { defineStore, acceptHMRUpdate } from "pinia";
+
+export const useTopicStore = defineStore('topic', () => {
+    const pagination = ref({
+        page: utils.toNumber(useRuntimeConfig().public.pagingDefault),
+        limit: utils.toNumber(useRuntimeConfig().public.pagingLimit),
+        total: 0,
+    });
+
+    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);
+    }
+
+    async function fetchById(topicId: string) {
+        const { data, error } =  await useFetch<any>(`/api/services/topic`, {
+            query: {
+                topicId: topicId
+            }
+        })
+        if(error.value) {
+            return null
+        }
+
+        return data.value
+    }
+
+    async function fetchByCategoryId(categoryId: number, limit?: number) {
+        if(limit) {
+            pagination.value.limit = limit
+        }
+        const { data, error } =  await useFetch<any>(`/api/services/topics-paging`, {
+            query: {
+                categoryId: categoryId,
+                limit: pagination.value.limit,
+                page: pagination.value.page,
+                sort: 'createdon desc'
+            }
+        })
+        if(error.value) {
+            return null
+        }
+
+        return data.value.items
+    }
+
+    return { pagination, setStateFromRoute, fetchById, fetchByCategoryId }
+})
+
+if (import.meta.hot) {
+    import.meta.hot.accept(acceptHMRUpdate(useTopicStore, import.meta.hot))
+}
\ No newline at end of file
-- 
2.52.0