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

feat: new layout

Browse Source
This commit is contained in:
MoreStrive
2024-06-28 15:39:26 +07:00
parent ab3419bd5f
commit ad962eda86
134 changed files with 4977 additions and 2985 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/sections/layouts/Article.vue → components/dynamic-page/page-component/templates/sections/articles/Default.vue
+96 -41
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { isEmpty } from "@/utils/lodash";
import { isEmpty } from "lodash";
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
const router = useRouter();
@@ -7,8 +7,12 @@ const route = useRoute();
const emit = defineEmits(["dropData", "selectComponent"]);
const store = reactive({
component: usePageComponentStore(),
});
const _props = defineProps<{
dataResult?: any;
dataResult?: any[];
dataQuery?: string;
component?: any;
label?: string;
@@ -20,13 +24,19 @@ const SETTING_OPTIONS = {
LAYOUT: "TYPE:Card",
};
// const page = ref(1);
const limit = ref(1);
const totals = ref(1);
const page = ref(1);
const limit = ref(5);
const totals = ref(2);
const type = "Article";
const listArticlePaging = ref([]);
const listArticleByCategory = computed(() => {
return getInputValue(_props.dataResult, "ARRAY");
const data = getInputValue(_props.dataResult, "OBJECT");
if (data && Object.keys(data)?.length > 0) {
totals.value = data.Total;
return data?.Data;
}
return [];
});
const designObject = computed(() => {
@@ -49,21 +59,25 @@ const dropData = (event: any) => {
//?cpn_1=page:2&cpn_2=page:1
// Get[Article] Top[5] With[Categories:1]
const select = (page: number) => {
const select = async (pageActive: number) => {
const componentId = _props.component?.id;
if (componentId) {
router.push({
query: {
...route.query,
[`cpn_${componentId}`]: `page:${page}`,
[`cpn_${componentId}`]: `page:${pageActive}`,
},
});
}
page.value = Number(pageActive);
await loadPage(Number(pageActive));
};
const handleRouteChange = (query: any) => {
const [_, value] = query[`cpn_${_props.component?.id}`]?.split(":");
if (value) {
loadPage(Number(value));
const handleRouteChange = async (query: any) => {
const param = query[`cpn_${_props.component?.id}`];
if (param) {
const [_, value] = param.split(":") || [];
page.value = value;
await loadPage(value);
}
};
@@ -71,32 +85,52 @@ onBeforeMount(() => {
if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
});
const loadPage = (page: string | number) => {
// listArticleByCategory.value =
const loadPage = async (page: number) => {
let newDataQuery = "";
const regex = /Page\[(.*?)\]/;
const match = _props.component?.settings?.dataQuery?.match(regex);
if (match) {
const [pageData] = match;
newDataQuery = _props.component?.settings?.dataQuery.replace(pageData, `Page[${page}]`);
} else {
newDataQuery = _props.component?.settings?.dataQuery + ` Page[${page}]`;
}
const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
const data = getInputValue(res?.settings?.dataResult, "OBJECT");
if (Object.keys(data).length > 0) {
totals.value = data.Total;
listArticlePaging.value = data?.Data || [];
}
};
const handleNextPrev = (type: "+" | "-") => {
if (listArticleByCategory.value?.length > 0) {
if (type === "+") {
page.value += 1;
} else if (type === "-") {
page.value -= 1;
}
select(page.value);
}
};
const selectComponent = () => {
emit("selectComponent");
};
watch(
() => route.query,
(newQuery) => {
handleRouteChange(newQuery);
const mapActivesToItems = (index: number) => {
if (designObject.value && designObject.value.listCss) {
return designObject.value.listCss[index] || {};
}
);
return {};
};
</script>
<template>
<section>
<div class="section-container" @click="selectComponent" @dragover.prevent @drop.stop.prevent="dropData($event)" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
<div
class="collection-container"
:class="[designObject['LAYOUT_WRAP'] || 'vertical', ...(designObject['borderWrap']?.length > 0 ? designObject['borderWrap'] : [])]"
:style="[designObject['background'] && `background: ${designObject['background']}`]"
>
<div class="section-layout" :style="designObject['div.section']">
<template v-if="listArticleByCategory?.length > 0">
<template v-for="(component, index) in listArticleByCategory">
<template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory">
<DynamicComponent
:key="index"
v-if="!isEmpty(component)"
@@ -104,28 +138,35 @@ watch(
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
dataResult: { ...component },
label,
label: mapActivesToItems(Number(index)),
}"
/>
</template>
</template>
<template v-else>
<div class="empty"><h6 class="px-2 text-center">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 cursor-pointer" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="w-7 h-6 text-primary-600">
<a class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
<i class="el-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
></path>
</svg>
</i>
</a>
<a class="btn-page" @click="() => select(index + 1)" v-for="(_, index) in totals">{{ index + 1 }}</a>
<a class="btn-page next-page cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="w-7 h-6 text-primary-600">
<a v-if="listArticleByCategory?.length > 0" :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</a>
<a class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
<i class="el-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
></path>
</svg>
</i>
</a>
</div>
</div>
@@ -135,8 +176,9 @@ watch(
<style lang="scss" scoped>
.section-container {
.collection-container {
display: grid;
.section-layout {
display: flex;
flex-direction: column;
/* gap: 10px; */
overflow-x: scroll;
&.border-custom {
@@ -154,15 +196,20 @@ watch(
&.borderBottom {
border-bottom: 1px solid;
}
&.vertical {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
&.horizontal {
grid-template-rows: auto;
grid-auto-flow: column;
}
.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;
@@ -198,6 +245,14 @@ watch(
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&.active {
background: #409eff;
color: white;
}
}
}
.el-empty {
padding: 12px 0;
}
</style>
components/dynamic-page/page-component/templates/sections/articles/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Default_Pagination } from './Default.vue'
components/dynamic-page/page-component/templates/sections/articles/index.vue
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts" setup>
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
import { Default_Pagination } from "./index";
const _props = defineProps<{
settings: any;
component?: any;
}>();
const definedDynamicComponent: Record<string, any> = {
[enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.SECTION]['ARTICLE']}`]['ARTICLE_SECTION_DEFAULT']]: Default_Pagination,
};
const getCurrentComponent = computed(() => `${_props.settings.layout}`);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
if (_props.settings) {
for (const [key, value] of Object.entries(_props.settings)) {
props = {
...props,
[key]: value,
};
}
return props;
}
};
});
</script>
<template>
<component
:is="definedDynamicComponent[getCurrentComponent]"
v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }"
/>
</template>
components/dynamic-page/page-component/templates/sections/index.ts
+1 -1
View File
@@ -1 +1 @@
export { default as Article_Pagination } from './layouts/Article.vue'
export { default as Article_Pagination } from './articles/index.vue'
components/dynamic-page/page-component/templates/sections/index.vue
+7 -4
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
import { Article_Pagination } from "./index";
const _props = defineProps<{
@@ -8,10 +8,10 @@ const _props = defineProps<{
}>();
const definedDynamicComponent: Record<string, any> = {
'TYPE:Article-LAYOUT:horizontal-DATA:HORIZONTAL': Article_Pagination
[enumPageComponentTemplate[enumPageComponentKey.SECTION]['ARTICLE']]: Article_Pagination,
};
const getCurrentComponent = computed(() => `${_props.settings.layout}`);
const getCurrentComponent = computed(() => _props.settings.template);
const GET_PROPS = computed(() => {
return () => {
@@ -30,5 +30,8 @@ const GET_PROPS = computed(() => {
</script>
<template>
<component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
<component
:is="definedDynamicComponent[getCurrentComponent]"
v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }"
/>
</template>