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

Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2

Browse Source
This commit is contained in:
MoreStrive
2024-07-05 09:48:47 +07:00
parent 76d4628100 7bf902041e
commit 815ce88d95
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",
components/dynamic-page/page-section/templates/articles/index.vue
+1 -1
View File
@@ -10,7 +10,7 @@ const _props = defineProps<{
}>();
const definedDynamicSection: Record<string, any> = {
[enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DEFAULT']]: Article_Section_Default,
[`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DEFAULT"]}`]: Article_Section_Default,
[`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]}`]: Article_Detail,
};
components/dynamic-page/page-section/templates/category/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Misses_Section } from './misses/index.vue'
components/dynamic-page/page-section/templates/category/index.vue
+42
View File
@@ -0,0 +1,42 @@
<script lang="ts" setup>
import type { PageSection } from "@/server/models/dynamic-page/index";
import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
import { Misses_Section } from "./index";
const _props = defineProps<{
settings?: any;
content?: any;
section: PageSection;
}>();
const definedDynamicSection: Record<string, any> = {
[enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']]: Misses_Section,
};
const getCurrentSection = computed(() => _props.settings.template);
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="definedDynamicSection[getCurrentSection]"
v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
>
<slot />
</component>
</template>
components/dynamic-page/page-section/templates/category/misses/Default.vue
+43
View File
@@ -0,0 +1,43 @@
<script setup lang="ts">
import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
import type { PageSection } from "@/server/models/dynamic-page/index";
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
const props = defineProps<{
label?: any;
layout?: string;
settings?: any;
content?: any;
section: PageSection;
}>();
</script>
<template>
<section>
<div>
<div>
<div>
<img class="w-full " src="~/assets/images/tienphong/MissCategory.png" alt="">
</div>
<div class="mt-3">
<template v-if="props.layout">
<DynamicLayout
:layout="props.layout"
:content="props.content"
:settings="props.settings"
:section="props.section"
/>
</template>
</div>
</div>
</div>
</section>
</template>
<style lang="scss" scoped>
.border-custom {
border-color: #e5e5e5 !important;
}
</style>
components/dynamic-page/page-section/templates/category/misses/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Default } from './Default.vue'
components/dynamic-page/page-section/templates/category/misses/index.vue
+39
View File
@@ -0,0 +1,39 @@
<script lang="ts" setup>
import type { PageSection } from "@/server/models/dynamic-page/index";
import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
import { Default } from "./index";
const _props = defineProps<{
settings?: any;
content?: any;
section: PageSection;
}>();
const definedDynamicSection: Record<string, any> = {
[enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']]: Default,
};
const getCurrentSection = computed(() => _props.settings.template);
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="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
<slot />
</component>
</template>
components/dynamic-page/page-section/templates/index.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export { default as None_Section } from './none/index.vue'
export { default as Section__ } from './sections/index.vue'
export { default as Category_Section } from './category/index.vue'
export { default as Article_Section } from './articles/index.vue'
components/dynamic-page/page-section/templates/index.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { PageSection } from "@/server/models/dynamic-page/index";
import { enumPageSectionKey } from "@/definitions/enum";
import { None_Section,Section__, Article_Section } from "./index";
import { None_Section,Category_Section, Article_Section } from "./index";
const _props = defineProps<{
settings?: any;
@@ -11,7 +11,7 @@ const _props = defineProps<{
const definedDynamicSection: Record<string, any> = {
[enumPageSectionKey.NONE]: None_Section,
[enumPageSectionKey.SECTION]: Section__,
[enumPageSectionKey.CATEGORY]: Category_Section,
[enumPageSectionKey.ARTICLE]: Article_Section,
};
components/dynamic-page/page-section/templates/sections/index.vue
+1 -1
View File
@@ -11,7 +11,7 @@ const _props = defineProps<{
}>();
const definedDynamicSection: Record<string, any> = {
[enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']]: Misses_Section,
// [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']]: Misses_Section,
};
const getCurrentSection = computed(() => _props.settings.template);
components/dynamic-page/page-section/templates/sections/misses/index.vue
+1 -1
View File
@@ -11,7 +11,7 @@ const _props = defineProps<{
}>();
const definedDynamicSection: Record<string, any> = {
[enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISS']['DEFAULT']]: Default,
// [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISS']['DEFAULT']]: Default,
};
const getCurrentSection = computed(() => _props.settings.template);