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

thainv-dev

Browse Source
This commit is contained in:
nguyen van thai
2024-07-05 09:45:00 +07:00
parent 554ceab3c6
commit 7bf902041e
21 changed files with 486 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-section/layouts/category/misses/Default.vue
+135
View File
@@ -0,0 +1,135 @@
<script setup lang="ts">
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
import { getInputValue } from "@/utils/parseSQL";
import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
import type { PageSection } from "@/server/models/dynamic-page/index";
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
const props = defineProps<{
layout?: string;
content?: any;
settings: any;
section: PageSection;
}>();
const defineTypeRecusive = {
COMPONENT: "component",
SECTION: "section",
};
const SETTING_OPTIONS = computed(() => {
let _setting_options = {
MAX_ELEMENT: 1,
};
return _setting_options;
});
const designObject = computed(() => {
// không truyền lable là chữ lên sẽ lỗi
return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
});
const CLASS_FOR_SECTION = computed(() => {
let _classForSection = {
section_layout: "section_layout basic_column",
};
return _classForSection;
});
const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
const designObject = props?.section?.settings?.label ? getInputValue(props.section.settings.label, "OBJECT") : {};
const updatedDesignObject = { ...designObject };
if (Array.isArray(designObject[keyActive])) {
const isActive = designObject[keyActive].includes(Number(index) + 1);
return {
...updatedDesignObject,
[key]: isActive ? designObject[key] : defaultValue,
};
}
delete updatedDesignObject[key];
return updatedDesignObject;
};
const LAYOUT_PARSE = computed(() => {
return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
});
const mapActivesToItems = (index: number) => {
if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
return LAYOUT_PARSE.value.listCss[index] || {};
}
return {};
};
</script>
<template>
<div
class="section_layout border-custom"
:class="[CLASS_FOR_SECTION.section_layout]"
:style="LAYOUT_PARSE['div.section_layout']"
>
<div
class="section_child"
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
:key="index"
:class="['border-custom', CLASS_FOR_SECTION[index]]"
:style="mapActivesToItems(index)['div.section_child']"
>
<RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
</div>
</div>
</template>
<style lang="scss" scoped>
.border-pri {
&.section_layout {
gap: 5px;
}
}
.section_layout {
display: grid;
&.smartphone_layout {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
&.basic_column {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
&.two_col_layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
&.three_col_layout {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
&.four_col_layout {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
&.five_col_layout {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
&.six_col_layout {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.border-custom {
border-color: #e5e5e5 !important;
}
}
</style>
components/dynamic-page/page-section/layouts/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export { default as NONE_DEFAULT_LAYOUT } from './none/Default.vue'
export { default as MISS_DEFAULT_LAYOUT } from './sections/misses/Default.vue'
export { default as MISS_DEFAULT_LAYOUT } from './category/misses/Default.vue'
export { default as ARTICLE_DETAIL_DEFAULT } from './articles/details/Default.vue'
components/dynamic-page/page-section/layouts/index.vue
+4 -1
View File
@@ -14,6 +14,8 @@ const definedDynamicSection: Record<string, any> = {
/* NONE */
[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_FIVE_THREE_TWO_TWO"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]]: NONE_DEFAULT_LAYOUT,
@@ -35,7 +37,7 @@ const definedDynamicSection: Record<string, any> = {
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]]: NONE_DEFAULT_LAYOUT,
/* SECTION */
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.SECTION]["MISSES"]]["DEFAULT"]]: MISS_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.CATEGORY]["MISSES"]]["DEFAULT"]]: MISS_DEFAULT_LAYOUT,
/** ARTICLE */
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]]["DEFAULT"]]: ARTICLE_DETAIL_DEFAULT,
@@ -61,6 +63,7 @@ const GET_PROPS = computed(() => {
</script>
<template>
<component
:is="definedDynamicSection[getCurrentSection]"
v-bind="{
components/dynamic-page/page-section/layouts/none/Default.vue
+18 -117
View File
@@ -18,123 +18,6 @@ const defineTypeRecusive = {
SECTION: "section",
};
const SETTING_OPTIONS = computed(() => {
let _setting_options = {};
switch (props.layout) {
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]:
_setting_options = {
MAX_ELEMENT: 2,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
_setting_options = {
MAX_ELEMENT: 3,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
_setting_options = {
MAX_ELEMENT: 2,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
_setting_options = {
MAX_ELEMENT: 2,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
_setting_options = {
MAX_ELEMENT: 2,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
_setting_options = {
MAX_ELEMENT: 2,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
_setting_options = {
MAX_ELEMENT: 3,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
_setting_options = {
MAX_ELEMENT: 4,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]:
_setting_options = {
MAX_ELEMENT: 3,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]:
_setting_options = {
MAX_ELEMENT: 3,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
_setting_options = {
MAX_ELEMENT: 3,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_ONE"]:
_setting_options = {
MAX_ELEMENT: 1,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TWO"]:
_setting_options = {
MAX_ELEMENT: 2,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_THREE"]:
_setting_options = {
MAX_ELEMENT: 3,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FOUR"]:
_setting_options = {
MAX_ELEMENT: 4,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FIVE"]:
_setting_options = {
MAX_ELEMENT: 5,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SIX"]:
_setting_options = {
MAX_ELEMENT: 6,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SEVEN"]:
_setting_options = {
MAX_ELEMENT: 7,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_EIGHT"]:
_setting_options = {
MAX_ELEMENT: 8,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_NINE"]:
_setting_options = {
MAX_ELEMENT: 9,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]:
_setting_options = {
MAX_ELEMENT: 10,
};
break;
default:
_setting_options = {
MAX_ELEMENT: 1,
};
break;
}
return _setting_options;
});
const designObject = computed(() => {
// không truyền lable là chữ lên sẽ lỗi
return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
@@ -167,6 +50,24 @@ const CLASS_FOR_SECTION = computed(() => {
1: "col-span-5",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
_classForSection = {
section_layout: "section_layout twelve_col_layout",
0: "col-span-5",
1: "col-span-3",
2: "col-span-2",
3: "col-span-2",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
_classForSection = {
section_layout: "section_layout twelve_col_layout",
0: "col-span-2",
1: "col-span-5",
2: "col-span-3",
3: "col-span-2",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
_classForSection = {
section_layout: "section_layout five_col_layout",