minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minhnt-dev: api service

Browse Source
This commit is contained in:
MoreStrive
2024-05-31 12:49:28 +07:00
parent 86bebfd66e
commit 94abf5ce61
9 changed files with 66 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/articles/individuals/Card.vue
+2 -2
View File
@@ -49,13 +49,13 @@ const drop = (e: any) => {
<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-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
<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.id}`">
<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-100 transition-all duration-300">
{{ parseData.title?.replace(/<[^>]+>/g, '') }}
</h3>
components/dynamic-page/page-component/templates/index.vue
+2 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
import { Article_BasicCard, BasicCategories, Article_BasicCollection } from "./index";
import { Article_BasicCard, BasicCategories, Article_BasicCollection, CollectionPaging } from "./index";
const _props = defineProps<{
settings: any;
@@ -11,6 +11,7 @@ const definedDynamicComponent: Record<string, any> = {
[enumPageComponentTemplates.ARTICLE]: Article_BasicCard,
[enumPageComponentTemplates.CATEGORY]: BasicCategories,
[enumPageComponentTemplates.COLLECTION]: Article_BasicCollection,
[enumPageComponentTemplates.SECTION]: CollectionPaging,
};
const getCurrentComponent = computed(() => `${_props.settings.template}`);
components/dynamic-page/page-component/templates/pageCategories/collection_page.vue
+36 -58
View File
@@ -1,12 +1,10 @@
<script setup lang="ts">
import { isEmpty } from "lodash";
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_PAGING_QUERY_DROP } from '@/utils/parseSQL';
import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
const router = useRouter();
const route = useRoute();
const emit = defineEmits(["dropData", "selectComponent"]);
const _props = defineProps<{
dataResult?: any[];
dataQuery?: string;
@@ -21,34 +19,12 @@ const SETTING_OPTIONS = {
// const page = ref(1);
const limit = ref(1);
const totals = ref(2);
const category = ref(0);
const listArticleByCategory = ref([]);
const totals = ref(1);
const type = "Article";
// watch(
// () => _props.dataResult,
// (newValue) => {
// const result = getInputValue(newValue, "ARRAY");
// listArticleByCategory.value = result;
// }
// );
const dropData = (event: any) => {
const queryBy = {
Category: "Categories",
};
const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
// const getDataQuery = `Get[${type}] Top[20] With[${queryBy[dataType]}:${dataResult.id}]`;
const getDataQuery = COLLECTION_PAGING_QUERY_DROP(type, { key: queryBy[dataType], value: dataResult.id })
category.value = dataResult.id;
emit("dropData", {
dataResult: [],
dataType,
dataQuery: getDataQuery,
});
};
const listArticleByCategory = computed(() => {
return getInputValue(_props.dataResult, "ARRAY");
});
//?cpn_1=page:2&cpn_2=page:1
// Get[Article] Top[5] With[Categories:1]
@@ -70,11 +46,9 @@ const handleRouteChange = (query: any) => {
}
};
onBeforeMount(()=>{
const result = getInputValue( _props.dataResult, "ARRAY");
listArticleByCategory.value = result;
handleRouteChange(route.query)
})
onBeforeMount(() => {
if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
});
const loadPage = (page: string | number) => {
console.log(`Loading page ${page}`);
@@ -91,27 +65,23 @@ watch(
<template>
<section>
<div class="section-container" @dragover.prevent @drop.stop.prevent="dropData($event)"
:class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
<div class="section-container" @click="selectComponent" @dragover.prevent @drop.stop.prevent="dropData($event)" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
<div class="collection-container">
<template v-if="category">
<template v-if="listArticleByCategory?.length > 0">
<template v-for="(component, index) in listArticleByCategory" :key="index">
<DynamicComponent
v-if="!isEmpty(component)"
:settings="{
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
dataResult: { ...component },
}"
/>
</template>
</template>
<template v-else>
<el-result icon="success" title="Success" sub-title="Nội dung danh sách bài viết sẽ ở đây"> </el-result>
<template v-if="listArticleByCategory?.length > 0">
<template v-for="(component, index) in listArticleByCategory" :key="index">
<DynamicComponent
v-if="!isEmpty(component)"
:settings="{
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
dataResult: { ...component },
}"
/>
</template>
</template>
<template v-else><el-empty image-size="90px" description="Kéo Category vào đây" /></template>
<template v-else>
<div class="empty"><h6>Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
</template>
<div class="button-page flex">
<a class="btn-page prev-page">
<i class="el-icon">
@@ -123,7 +93,7 @@ watch(
</svg>
</i>
</a>
<a class="btn-page" @click="() => select(index + 1)" v-for="(_, index) in totals">{{ index + 1 }}</a>
<a class="btn-page" @click="() => select(index + 1)" v-for="(_, index) in totals" :key="index">{{ index + 1 }}</a>
<a class="btn-page next-page">
<i class="el-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
@@ -142,15 +112,23 @@ watch(
<style lang="scss" scoped>
.section-container {
.empty {
min-height: 100px;
border-radius: 6px;
background: #409eff;
}
.collection-container {
display: grid;
gap: 10px;
}
.empty {
width: 100%;
height: 100%;
min-height: 50px;
background-color: #409eff;
display: flex;
white-space: normal;
justify-content: center;
align-items: center;
h6{
color: #fff;
}
}
.basic-article {
&.article {
margin-bottom: 10px;