deploy

Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2
minhnt-dev: Video Card
2024-07-02 16:03:24 +07:00 · 2024-07-01 16:06:28 +07:00 · 2024-07-01 16:05:16 +07:00
6 changed files with 92 additions and 121 deletions
@@ -26,9 +26,6 @@ const parseData = computed(() => {
  <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']">
@@ -77,7 +74,7 @@ const parseData = computed(() => {
                    class="article_video_thumb" 
                    :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
                >
-                    <i class="ri-play-circle-line"></i>
+                  <Icon name="ri:play-circle-line" />
                </div>
                <div class="article_video_content">
                    <div>
@@ -88,20 +85,9 @@ const parseData = computed(() => {
                </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>
+    <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
  </article>
 </template>

@@ -110,6 +96,7 @@ const parseData = computed(() => {
        .article_video_container {
            display: flex;
            align-items: center;
+            
            .article_video_thumb {
                background-size: cover;
                background-repeat: no-repeat;
@@ -119,8 +106,10 @@ const parseData = computed(() => {
                width: 250px;
                height: 140px;
                border-radius: 2px;
-                margin: 10px;
                text-align: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
                &::after {
                    content: '';
                    position: absolute;
@@ -131,17 +120,18 @@ const parseData = computed(() => {
                    top: 0px;
                    left: 0px;
                }
-                i {
+                svg {
                    font-size: 40px;
                    color: white;
                    position: relative;
                    z-index: 2;
                }
            }
+
            .article_video_content {
                position: relative;
                z-index: 2;
-                margin: 10px 0px;
+                padding: 10px;
                > div {
                    background: #ffffff;
                }
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
 import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+import  { getResource } from "@/utils/resourceHandler";

 const props = defineProps<{
  dataResult?: any;
@@ -20,89 +21,52 @@ const parseData = computed(() => {
  const result = getInputValue(props.dataResult, "OBJECT");
  return result;
 });
+
+const playVideo = ref<boolean>(false)
+
+onMounted(() => {
+  getResource(JSON.parse(props.dataResult).detail)
+  console.log()
+})
 </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>
+      <template v-if="parseData">
+          <div 
+            v-if="!playVideo"
+            class="article_video_thumb h-full" 
+            :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
+          >
+              <div></div>
+              <div class="article_video_content">
+                  <span><Icon name="ri:play-circle-line" class="text-white" /></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>
+          <video src=""></video>
+      </template>
    </div>

-    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+    <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
  </article>
 </template>

 <style lang="scss" scoped>
    .article_video {
-        .article_video_thumb {
+      @apply min-h-465px;
+      .article_video_thumb {
+            @apply flex flex-col justify-end min-h-465px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
@@ -110,7 +74,7 @@ const parseData = computed(() => {
            z-index: 0;
            padding: 120px 85px 60px 85px;
            border-radius: 2px;
-            margin: 10px;
+            overflow: hidden;
            cursor: pointer;
            &::after {
                content: '';
@@ -139,19 +103,11 @@ const parseData = computed(() => {
                    font-weight: 400;
                }

-                i {
+                svg {
                    font-size: 80px;
                    color: #ed1c24;
                }
            }
        }
-        .empty-box {
-            background-color: #409eff;
-            margin: 10px;
-            min-height: 60px;
-            i {
-                font-size: 60px;
-            }
-        }
    }
 </style>
@@ -45,13 +45,11 @@ const mapActivesToItems = (index: number) => {
            <path d="M5.984 2.456V4.184H4.336V5.992H2.4V4.184H0.752V2.456H2.4V0.648H4.336V2.456H5.984Z" fill="black" />
          </svg>

-          <h3
-            :style="mapActivesToItems(index)['h3.categories']"
-          >
+          <h3 :style="mapActivesToItems(index)['h3.categories']">
            {{ component.title }}
          </h3>
        </div>
-        <div v-html="designObject.styleClasses"></div>
+        <div v-if="designObject.styleClasses" v-html="designObject.styleClasses"></div>
      </template>
    </div>
  </div>
@@ -11,26 +11,26 @@ const _props = defineProps<{
 }>();

 const definedDynamicSection: Record<string, any> = {
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]]: NONE_DEFAULT_LAYOUT, 
  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]]: NONE_DEFAULT_LAYOUT, 
  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]]: NONE_DEFAULT_LAYOUT, 
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_ONE"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TWO"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_THREE"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FOUR"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FIVE"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SIX"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SEVEN"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_EIGHT"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_NINE"]]: NONE_DEFAULT_LAYOUT, 
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]]: NONE_DEFAULT_LAYOUT, 
 };

 const getCurrentSection = computed(() => {
@@ -4,7 +4,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
 </script>

 <template>
-  <footer id="footer" class="main-footer">
+  <footer id="footer" class="main-footer mt-20">
    <div class="main-footer-container">
      <div class="footer-centertab">
        <div>
@@ -0,0 +1,27 @@
+import * as cherrio from 'cheerio'
+
+const getResource = (data: any) => {
+    const result = {
+        videoHightlight: null,
+        imageHightlight: null,
+        resources: [],
+    };
+    const $ = cherrio.load(`<div class="get-resource">${data}</div>`)
+    const html : any = $('.get-resource').html();
+    html.find('video, figure img, img').each((index : any, element: any) => {
+        // if (index === 0) result.videoHightlight = 
+    });
+
+    console.log(html)
+
+    // <div>
+    //     <video controls="controls" width="100%" height="auto" data-id="578" data-resource="https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/video/28thi-tot-nghiep-ptth-2024-1719829616.mp4" data-title="28thi-tot-nghiep-ptth-2024">
+    //         <source src="https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/video/28thi-tot-nghiep-ptth-2024-1719829616.mp4" type="video/mp4">
+    //     </video>
+    // </div>
+}
+
+
+export {
+    getResource
+}
Author	SHA1	Message	Date
MoreStrive	ee5c6f40f1	deploy	2024-07-02 16:03:24 +07:00
MoreStrive	4bf217c207	Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2	2024-07-01 16:06:28 +07:00
MoreStrive	0adb6fca36	minhnt-dev: Video Card	2024-07-01 16:05:16 +07:00