minhnt-dev: fix bugs
This commit is contained in:
MoreStrive
@@ -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>
|
||||
@@ -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>
|
||||
@@ -1,2 +1,4 @@
|
||||
export { default as Article_Card_Default } from './Card.vue'
|
||||
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'
|
||||
@@ -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;
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user