From a01eedc2bce828570c7da7c9d69bcceaa7eaa217 Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Mon, 1 Jul 2024 15:14:17 +0700
Subject: [PATCH] minhnt-dev: fix bugs

---
 .../templates/articles/cards/Video.vue        | 174 ++++++++++++++++++
 .../articles/cards/VideoBackground.vue        | 157 ++++++++++++++++
 .../templates/articles/cards/index.ts         |   4 +-
 .../templates/articles/cards/index.vue        |   5 +-
 4 files changed, 337 insertions(+), 3 deletions(-)
 create mode 100644 components/dynamic-page/page-component/templates/articles/cards/Video.vue
 create mode 100644 components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue

diff --git a/components/dynamic-page/page-component/templates/articles/cards/Video.vue b/components/dynamic-page/page-component/templates/articles/cards/Video.vue
new file mode 100644
index 0000000..cac9a8c
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/articles/cards/Video.vue
@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+
+const props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+
+const LAYOUT_PARSE = computed(() => {
+  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
+  return Object.assign({}, designObject);
+});
+
+const parseData = computed(() => {
+  if (!props.dataResult) return;
+  const result = getInputValue(props.dataResult, "OBJECT");
+  return result;
+});
+</script>
+
+<template>
+  <article
+    class="basic-article border-custom"
+    :class="LAYOUT_PARSE['article_Class']"
+    @click="selectComponent"
+    @dragover.prevent
+    @drop.stop.prevent="drop"
+    :style="LAYOUT_PARSE['article']"
+  >
+    <!-- <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
+      <template v-if="parseData">
+        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+      </template>
+      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
+    </div>
+    <div class="basic-article_content" :class="[!parseData && 'no-data']">
+      <template v-if="parseData?.topics && parseData?.topics.length > 0">
+        <nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
+          <h5>{{ parseData?.topics[0].title }}</h5>
+        </nuxt-link>
+      </template>
+      <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+        <template v-if="parseData">
+          {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+        </template>
+        <span v-else class="empty-block" style="height: 8px"></span>
+      </h3>
+      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
+          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
+        }}</span>
+        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
+      </div>
+      <p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+        <template v-if="parseData">
+          {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
+        </template>
+        <span v-else class="empty-block" style="height: 5px"></span>
+      </p>
+      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
+          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
+        }}</span>
+        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
+      </div>
+    </div>
+     -->
+
+    <div class="article_video">
+        <template v-if="parseData">
+            <div class="article_video_container">
+                <div 
+                    class="article_video_thumb" 
+                    :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
+                >
+                    <i class="ri-play-circle-line"></i>
+                </div>
+                <div class="article_video_content">
+                    <div>
+                        <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+                            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+                        </h3>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <div v-else>
+            <div class="empty-box">
+                <div class="d-flex justify-content-center align-items-center flex-column empty-block" style="background-color: #409eff;">
+                    <i class="ri-play-circle-line text-white"></i>
+                </div>
+                <div class="empty-block">
+                    <div style="height: 8px"></div>
+                    <div style="height: 8px"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+  </article>
+</template>
+
+<style lang="scss" scoped>
+    .article_video {
+        .article_video_container {
+            display: flex;
+            align-items: center;
+            .article_video_thumb {
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+                position: relative;
+                z-index: 0;
+                width: 250px;
+                height: 140px;
+                border-radius: 2px;
+                margin: 10px;
+                text-align: center;
+                &::after {
+                    content: '';
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    background-color: rgba(0, 0, 0, 0.4);
+                    z-index: 1;
+                    top: 0px;
+                    left: 0px;
+                }
+                i {
+                    font-size: 40px;
+                    color: white;
+                    position: relative;
+                    z-index: 2;
+                }
+            }
+            .article_video_content {
+                position: relative;
+                z-index: 2;
+                margin: 10px 0px;
+                > div {
+                    background: #ffffff;
+                }
+                h3 {
+                    font-size: 16px;
+                    font-weight: 500;
+                    line-height: 24px;
+                    text-align: left;
+                    margin-bottom: 12px;
+                }
+            }
+        }
+    }
+    .empty-box {
+        margin: 10px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .empty-block {
+            width: 50%;
+            > div {
+                background-color: #409eff;
+                margin-bottom: 5px;
+            }
+        }
+        i {
+            font-size: 60px;
+        }
+    }
+</style>
diff --git a/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue b/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
new file mode 100644
index 0000000..55d8680
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+
+const props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+
+const LAYOUT_PARSE = computed(() => {
+  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
+  return Object.assign({}, designObject);
+});
+
+const parseData = computed(() => {
+  if (!props.dataResult) return;
+  const result = getInputValue(props.dataResult, "OBJECT");
+  return result;
+});
+</script>
+
+<template>
+  <article
+    class="basic-article border-custom"
+    :class="LAYOUT_PARSE['article_Class']"
+    @click="selectComponent"
+    @dragover.prevent
+    @drop.stop.prevent="drop"
+    :style="LAYOUT_PARSE['article']"
+  >
+    <!-- <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
+      <template v-if="parseData">
+        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+      </template>
+      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
+    </div>
+    <div class="basic-article_content" :class="[!parseData && 'no-data']">
+      <template v-if="parseData?.topics && parseData?.topics.length > 0">
+        <nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
+          <h5>{{ parseData?.topics[0].title }}</h5>
+        </nuxt-link>
+      </template>
+      <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+        <template v-if="parseData">
+          {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+        </template>
+        <span v-else class="empty-block" style="height: 8px"></span>
+      </h3>
+      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
+          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
+        }}</span>
+        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
+      </div>
+      <p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+        <template v-if="parseData">
+          {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
+        </template>
+        <span v-else class="empty-block" style="height: 5px"></span>
+      </p>
+      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
+          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
+        }}</span>
+        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
+      </div>
+    </div>
+
+     -->
+
+    <div class="article_video">
+        <template v-if="parseData">
+            <div 
+                class="article_video_thumb" 
+                :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
+            >
+                <div></div>
+                <div class="article_video_content">
+                    <span><i class="ri-play-circle-line"></i></span>
+                    <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+                        {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+                    </h3>
+                    <p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+                        {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
+                    </p>
+                </div>
+            </div>
+        </template>
+        <div v-else class="empty-box">
+            <div class="d-flex justify-content-center align-items-center flex-column">
+                <i class="ri-play-circle-line text-white"></i>
+            </div>
+        </div>
+    </div>
+
+    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+  </article>
+</template>
+
+<style lang="scss" scoped>
+    .article_video {
+        .article_video_thumb {
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+            position: relative;
+            z-index: 0;
+            padding: 120px 85px 60px 85px;
+            border-radius: 2px;
+            margin: 10px;
+            cursor: pointer;
+            &::after {
+                content: '';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.4);
+                z-index: 1;
+                top: 0px;
+                left: 0px;
+            }
+            .article_video_content {
+                position: relative;
+                z-index: 2;
+
+                h3 {
+                    font-size: 44px;
+                    font-weight: 700;
+                    line-height: 57.2px;
+                    text-align: left;
+                    margin-bottom: 12px;
+                }
+
+                p {
+                    font-size: 14px;
+                    font-weight: 400;
+                }
+
+                i {
+                    font-size: 80px;
+                    color: #ed1c24;
+                }
+            }
+        }
+        .empty-box {
+            background-color: #409eff;
+            margin: 10px;
+            min-height: 60px;
+            i {
+                font-size: 60px;
+            }
+        }
+    }
+</style>
diff --git a/components/dynamic-page/page-component/templates/articles/cards/index.ts b/components/dynamic-page/page-component/templates/articles/cards/index.ts
index c8cabee..0ba58a1 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/index.ts
+++ b/components/dynamic-page/page-component/templates/articles/cards/index.ts
@@ -1,2 +1,4 @@
 export { default as Article_Card_Default } from './Card.vue'
-export { default as Article_Card_Audio } from './Audio.vue'
\ No newline at end of file
+export { default as Article_Card_Audio } from './Audio.vue'
+export { default as Article_Card_Video } from './Video.vue'
+export { default as Article_Card_Video_Hightlight } from './VideoBackground.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/articles/cards/index.vue b/components/dynamic-page/page-component/templates/articles/cards/index.vue
index 81dc114..0acacba 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/index.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Article_Card_Default, Article_Card_Audio } from "./index";
+import { Article_Card_Default, Article_Card_Audio, Article_Card_Video, Article_Card_Video_Hightlight } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -11,10 +11,11 @@ const _props = defineProps<{
 const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_DEFAULT"]]: Article_Card_Default,
   [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_AUDIO"]]: Article_Card_Audio,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_VIDEO"]]: Article_Card_Video,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_VIDEO_HIGHLIGHT"]]: Article_Card_Video_Hightlight,
 };
 
 const getCurrentComponent = computed(() => {
-  console.log(_props.settings.layout, enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_DEFAULT"]);
   return _props.settings.layout;
 });