NSG_PORTAL_V2/components/dynamic-page/page-component/templates/articles/individuals/Card.vue

<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
}>()

const LAYOUT_PARSE = computed(() => {
    const parseLayout = props.layout?.split('-')?.map((_layout : any) => {
        const parseItem = _layout.split(':')
        return {
            [parseItem[0]]: parseItem[0] === 'HIDE' ? parseItem[1].split(',') : parseItem[1],
        };
    }) || [];
    return Object.assign({}, ...parseLayout);
})

const emit = defineEmits(['selectComponent', 'dropData']);

const selectComponent = () => {
    emit('selectComponent');
}

const parseData = computed(() => {
    if(!props.dataResult) return 
    const result = getInputValue(props.dataResult, 'OBJECT');
    return result
}) 

const drop = (e: any) => {
    if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
        const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
        const { dataType, dataResult } = JSON.parse(data);
        const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
        emit('dropData', { 
            dataType,
            dataResult, 
            dataQuery: dataQuery,
        });
    }
}
</script>

<template>
    <article class="basic-article gap-x-4" :class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '']">
        <div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail">
            <template v-if="parseData">
                <img class="object-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
            </template>
        </div>
        <div class="basic-article_content" :class="[!parseData && 'no-data']">
            <div>
                <template v-if="parseData">
                    <nuxt-link :to="`/bai-viet/${parseData.slug}`">
                        <h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 line-clamp-2 text-base font-700 hover:text-primary-600 transition-all duration-300">
                            {{ parseData.title?.replace(/<[^>]+>/g, '') }}
                        </h3>
                    </nuxt-link>
                </template>
                <p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-3 sm:line-clamp-3 text-[14px]">
                    <template v-if="parseData">
                        <template v-if="parseData.intro">
                            {{ parseData.intro?.replace(/<[^>]+>/g, '') }}
                        </template>
                        <template v-if="parseData.sub">
                            {{ parseData.sub?.replace(/<[^>]+>/g, '') }}
                        </template>
                    </template>
                </p>
            </div>
        </div>
    </article>
</template>

<style lang="scss" scoped>
.basic-article {
    display: grid;
    height: 100%;

    &.vertical {
        @apply lg:grid-cols-1 sm:grid-cols-2;
        .basic-article_content {
            padding: 10px 0px;
        }
    }

    &.horizontal {
        grid-template-columns: 1fr 1fr;
        .basic-article_content {
            padding: 0px 0px;
        }

        &.reverse {
            .basic-article_thumbnail {
                grid-column: 2;
            }

            .basic-article_content {
                grid-row: 1;
            }
        }
    }

    &_thumbnail {
        flex: 1;

        img {
            width: 100%;
            border-radius: 6px;
            aspect-ratio: 16/10;
        }
    }

    .empty-block {
        background-color: #409eff;
        height: 100px;
        display: block;
    }
}
</style>