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

minhnt-dev: fix page template

Browse Source
This commit is contained in:
MoreStrive
2024-07-12 19:13:34 +07:00
parent 212e6d357c
commit dffbe39fa6
19 changed files with 413 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page/layouts/Default.vue
-78
View File
@@ -1,78 +0,0 @@
<script setup lang="ts">
import { getInputValue } from "@/utils/parseSQL";
const props = defineProps<{
layout?: any,
label?:any
}>()
const CLASS_FOR_LAYOUT = computed(() => {
let _classForLayout = {};
switch (props.layout) {
case 'Full_Page':
_classForLayout = {
page_container: 'page_container full-size-page',
layout_container: 'layout_container full-size-layout',
};
break;
case 'Center_Page':
_classForLayout = {
page_container: 'page_container full-size-page',
layout_container: 'layout_container center-layout',
};
break;
case 'Background_Page':
_classForLayout = {
page_container: 'page_container full-size-page background-container',
layout_container: 'layout_container center-layout',
};
break;
default:
_classForLayout = {
page_container: 'page_container',
layout_container: 'layout_container',
};
break;
}
return _classForLayout;
})
const LAYOUT_PARSE = computed(() => {
return props?.label ? getInputValue(props.label, "OBJECT") : {};
});
</script>
<template>
<div :class="[CLASS_FOR_LAYOUT.page_container]" :style="LAYOUT_PARSE['div.page_container']">
<div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
// padding: 20px 0;
&.full-size-page {
width: 100%;
}
// .full-size-layout {
// padding-left: 20px;
// padding-right: 20px;
// }
}
.layout_container {
padding-top: 20px;
&.center-layout {
max-width: 1440px;
padding: 0 27.5px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
</style>
components/dynamic-page/page/layouts/homes/Default.vue
+76
View File
@@ -0,0 +1,76 @@
<script setup lang="ts">
import { getInputValue } from "@/utils/parseSQL";
import { enumPageLayouts, enumPageTemplate, enumPageKey } from "@/definitions/enum";
const props = defineProps<{
layout?: any,
label?:any
}>()
const CLASS_FOR_LAYOUT = computed(() => {
let _classForLayout = {};
switch (props.layout) {
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['DEFAULT']:
_classForLayout = {
page_container: "page_container full-size-page",
layout_container: "layout_container center-layout",
};
break;
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['FULL']:
_classForLayout = {
page_container: "page_container full-size-page",
layout_container: "layout_container full-size-layout",
};
break;
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['BACKGROUND_PAGE']:
_classForLayout = {
page_container: "page_container full-size-page background-container",
layout_container: "layout_container center-layout",
};
break;
default:
_classForLayout = {
page_container: "page_container",
layout_container: "layout_container",
};
break;
}
return _classForLayout;
});
</script>
<template>
<div :class="[CLASS_FOR_LAYOUT.page_container]">
<div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
// padding: 20px 0;
&.full-size-page {
width: 100%;
}
// .full-size-layout {
// padding-left: 20px;
// padding-right: 20px;
// }
}
.layout_container {
padding-top: 20px;
&.center-layout {
max-width: 1440px;
padding: 0 27.5px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
</style>
components/dynamic-page/page/layouts/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export { default as BASE_LAYOUT } from './Default.vue'
export { default as Home_Default } from './homes/Default.vue'
// Article
export { default as ARTICLE_LONG_LAYOUT } from './articles/Long.vue'
components/dynamic-page/page/layouts/index.vue
+25 -34
View File
@@ -1,46 +1,37 @@
<script lang="ts" setup>
import { layouts } from "@/definitions/enum";
import {
BASE_LAYOUT,
ARTICLE_SHORT_LAYOUT,
ARTICLE_PAGE_LAYOUT,
ARTICLE_NORMAL_LAYOUT,
ARTICLE_NONE_LAYOUT,
ARTICLE_LONG_LAYOUT,
} from './index';
import { enumPageKey, enumPageTemplate, enumPageLayouts } from "@/definitions/enum";
import { Home_Default, ARTICLE_LONG_LAYOUT, ARTICLE_NONE_LAYOUT, ARTICLE_NORMAL_LAYOUT, ARTICLE_PAGE_LAYOUT, ARTICLE_SHORT_LAYOUT } from "./index";
const _props = defineProps<{
settings?: any,
}>()
settings?: any;
}>();
const definedDynamicPageLayout: Record<string, any> = {
'Default': BASE_LAYOUT,
[layouts.FULL_PAGE]: BASE_LAYOUT,
[layouts.CENTER_PAGE]: BASE_LAYOUT,
[layouts.BACKGROUND_PAGE]: BASE_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["DEFAULT"]]: Home_Default,
[enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["FULL"]]: Home_Default,
[enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["BACKGROUND_PAGE"]]: Home_Default,
'ARTICLE_SHORT': ARTICLE_SHORT_LAYOUT,
'ARTICLE_PAGE': ARTICLE_PAGE_LAYOUT,
'ARTICLE_NORMAL': ARTICLE_NORMAL_LAYOUT,
'ARTICLE_NONE': ARTICLE_NONE_LAYOUT,
'ARTICLE_LONG': ARTICLE_LONG_LAYOUT,
}
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_SHORT"]]: ARTICLE_SHORT_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_PAGE"]]: ARTICLE_PAGE_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_NORMAL"]]: ARTICLE_NORMAL_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_NONE"]]: ARTICLE_NONE_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_LONG"]]: ARTICLE_LONG_LAYOUT,
};
const getCurrentLayout = computed(() => _props.settings.layout);
const getCurrentLayout = computed(() => _props.settings?.layout);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
for (const [key, value] of Object.entries(_props.settings)) {
props = {
...props,
[key]: value
}
}
return props;
};
})
return () => {
let props: any = {};
for (const [key, value] of Object.entries(_props.settings)) {
props = {
...props,
[key]: value,
};
}
return props;
};
});
</script>
<template>
components/dynamic-page/page/templates/articles/Default.vue → components/dynamic-page/page/templates/articles/DetailDefault.vue
+1 -1
View File
@@ -9,7 +9,7 @@ const props = defineProps<{
</script>
<template>
<div class="h-100 overflow-y-auto">
<div class="h-full overflow-y-auto">
<HeaderHomeTemplate />
<DynamicLayout :settings="props.settings">
<slot />
components/dynamic-page/page/templates/articles/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as DetailDefault } from './DetailDefault.vue';
components/dynamic-page/page/templates/articles/index.vue
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts" setup>
import { DetailDefault } from './index';
import { enumPageKey, enumPageTemplate } from "@/definitions/enum";
const _props = defineProps<{
settings: any
}>()
const definedDynamicPage: Record<string, any> = {
[enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]: DetailDefault,
}
const getCurrentTemplate = computed(() => {
return _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 v-if="definedDynamicPage[getCurrentTemplate]" :is="definedDynamicPage[getCurrentTemplate]" v-bind="{...(GET_PROPS()), settings: _props.settings}">
<slot />
</component>
</template>
components/dynamic-page/page/templates/homes/Basic.vue → components/dynamic-page/page/templates/homes/Home.vue
+9 -12
View File
@@ -2,22 +2,19 @@
import DynamicLayout from "~/components/dynamic-page/page/layouts/index.vue";
import HeaderHomeTemplate from "~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue";
import FooterHomeTemplate from "~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue";
const props = defineProps<{
settings?: any;
}>();
const props = defineProps<{
settings?: any
}>()
</script>
<template>
<div>
<HeaderHomeTemplate>
<DynamicLayout :settings="props.settings">
<div class="h-full overflow-y-auto">
<HeaderHomeTemplate />
<DynamicLayout :settings="props.settings">
<slot />
</DynamicLayout>
</HeaderHomeTemplate>
<DynamicLayout :settings="props.settings">
<slot />
</DynamicLayout>
<FooterHomeTemplate />
</div>
<FooterHomeTemplate />
</div>
</template>
components/dynamic-page/page/templates/homes/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Home } from './Home.vue';
components/dynamic-page/page/templates/homes/index.vue
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts" setup>
import { Home } from './index';
import { enumPageKey, enumPageTemplate } from "@/definitions/enum";
const _props = defineProps<{
settings: any
}>()
const definedDynamicPage: Record<string, any> = {
[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]: Home,
}
const getCurrentTemplate = computed(() => {
return _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 v-if="definedDynamicPage[getCurrentTemplate]" :is="definedDynamicPage[getCurrentTemplate]" v-bind="{...(GET_PROPS()), settings: _props.settings}">
<slot />
</component>
</template>
components/dynamic-page/page/templates/index.ts
+2 -1
View File
@@ -1 +1,2 @@
export { default as HomeBasic } from './homes/Basic.vue'
export { default as Home } from './homes/index.vue'
export { default as Article } from './articles/index.vue'
components/dynamic-page/page/templates/index.vue
+24 -22
View File
@@ -1,39 +1,41 @@
<script lang="ts" setup>
import { HomeBasic } from './index';
import { Home, Article } from "./index";
import type { Page } from "@/models/cms";
import { enumPageKey } from "@/definitions/enum";
const _props = defineProps<{
settings: any
}>()
settings: any;
page: Page;
}>();
const definedDynamicPage: Record<string, any> = {
'Home' : HomeBasic,
'Article': HomeBasic
}
[enumPageKey.HOME]: Home,
[enumPageKey.ARTICLE]: Article,
};
const getCurrentTemplate = computed(() => {
return _props.settings && _props.settings.template || '';
return _props.page?.taxonomy || "";
});
const GET_PROPS = computed(() => {
return () => {
let props : any = {};
if (_props.settings) {
for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
props = {
...props,
[key]: value
}
}
}
return props;
};
})
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
class="overflow-x-hidden"
class="overflow-x-hidden"
v-if="definedDynamicPage[getCurrentTemplate]"
:is="definedDynamicPage[getCurrentTemplate]"
v-bind="{...(GET_PROPS()), settings: _props.settings}"