Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2 into thainv-dev

components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
+import isEmpty from "lodash/isEmpty";
 const emit = defineEmits(['dropData', 'selectComponent'])
 
 const _props = defineProps<{

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>
-  
+    <div class="mb-2">
+      <button type="button" class="mr-2 p-2 bg-blue-500 text-[#fff] rounded text-xs">
+        Gửi bình luận
+        <Icon name="ri:send-plane-2-fill"></Icon>
+      </button>
+    </div>
+
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+
+.input_comment {
+  padding: 0;
+  margin-top: 10px;
+  background: #f5f5f5;
+  position: relative;
+  width: 100%;
+  border-top: 1px solid #dedede;
+  border-right: 1px solid #dedede;
+  border-bottom: 1px solid #dedede;
+  border-radius: 5px;
+}
+
+
+
+.box-area-input {
+  background: #f7f7f7;
+  border-radius: 4px;
+  position: relative;
+  padding: 10px 0 10px 0;
+  border-left: 2px solid rgba(59, 130, 246, 1);
+}
+
+
+.input_comment textarea.block_input {
+  height: 30px;
+  -webkit-transition-duration: 200ms;
+  transition-duration: 200ms;
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
+  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
+}
+
+.input_comment textarea.block_input {
+  height: 76px;
+  overflow: hidden;
+  resize: none;
+}
+
+.box-area-input .block_input {
+  background: #f7f7f7;
+}
+
+.input_comment textarea {
+  font: 400 16px/150% arial;
+  background: #fff;
+  border: none;
+  width: 100%;
+  height: 58px;
+  color: #4f4f4f !important;
+  overflow: hidden;
+  padding: 5px 37px 0 15px;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+textarea,
+select {
+  background: #fff;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+  margin: 3px 0;
+  padding: 0 5px;
+  outline: none;
+}
+
+input,
+textarea {
+  font-family: arial;
+  font-size: 11px;
+  border: none;
+  background: none;
+}
+</style>

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

@@ -1,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">

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>

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

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

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

@@ -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>

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

@@ -2,6 +2,8 @@ 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 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'

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

@@ -1,7 +1,8 @@
 <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, Article_Detail_Video
+} from "./index";
 const _props = defineProps<{
   settings: any;
   component?: any;
@@ -15,8 +16,8 @@ const definedDynamicComponent: Record<string, any> = {
   'ADS_DEFAULT': ADS_Default,
   'ARTICLE_BUTTON': Article_Button,
   COMMENT: Comment,
-//   POCAST: Podcast,
-//   VIDEO: Video
+  PODCAST: Article_Detail_Podcast,
+  VIDEO: Article_Detail_Video
 };
 
 const getCurrentComponent = computed(() => `${_props.settings.layout}`);