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

thainv-dev: UI

Browse Source
This commit is contained in:
nguyen van thai
2024-06-18 14:04:24 +07:00
parent f17e28472c
commit d103f4bbf7
19 changed files with 246 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/collections/layouts/Article.vue
+72 -35
View File
@@ -1,10 +1,17 @@
<script setup lang="ts">
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
import isEmpty from "lodash/isEmpty";
import { isEmpty, groupBy } from "lodash";
import { breakpoint } from "~/definitions";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize()
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
// const store = reactive({
// section: usePageSectionStore(),
// });
// const { currentScreenMode } = storeToRefs(useCmsPageStore());
const _props = defineProps<{
dataResult?: any[];
dataQuery?: string;
@@ -18,7 +25,7 @@ const SETTING_OPTIONS = {
LAYOUT: "TYPE:Card",
};
const layoutParse = computed(() => {
const LAYOUT_PARSE = computed(() => {
const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
const parseItem = _layout.split(":");
return {
@@ -30,7 +37,7 @@ const layoutParse = computed(() => {
});
const _dataResult = computed(() => {
let _components = Array(Number(layoutParse.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
const result = getInputValue(_props.dataResult, "ARRAY");
result &&
result.length > 0 &&
@@ -58,55 +65,89 @@ async function dropData(data: any) {
const selectComponent = () => {
emit("selectComponent");
};
const handleActiveItem = (listKey: string[], listKeyActive: string[], index: number, listDefaultValue: any) => {
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
const updatedDesignObject = { ...designObject };
const dataDefault = {
fontSizeTitle: "defaultFontSizeTitle",
fontWeightTitle: "defaultFontWeightTitle",
};
for (let i = 0; i < listKeyActive.length; i++) {
const keyActive = listKeyActive[i];
const key = listKey[i];
const defaultValue = listDefaultValue[i] || designObject[dataDefault[key]];
if (Array.isArray(designObject[keyActive])) {
const isActive = designObject[keyActive].includes(index + 1);
updatedDesignObject[key] = isActive ? designObject[key] : defaultValue;
} else {
delete updatedDesignObject[key];
}
}
return updatedDesignObject;
};
const mapActivesToItems = (index: number) => {
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
const output = {};
designObject.layoutGrid?.forEach((item: any) => {
item.actives.forEach((active: any) => {
output[active] = { ...item };
});
});
return output[index + 1] || {};
};
</script>
<template>
<div>
<div
class="collection-container p-2 border-custom"
:class="[layoutParse['LAYOUT_WRAP'] || 'vertical', ...(layoutParse['borderWrap']?.length > 0 ? layoutParse['borderWrap'] : [])]"
@click="selectComponent"
:style="[`grid-template-columns: repeat(${currentScreenMode === 'smartphone' ? 1 : layoutParse['COLUMN']}, minmax(0, 1fr))`, layoutParse['background'] && `background: ${layoutParse['background']}`]"
>
<DynamicComponent
class="h-full"
v-for="(component, index) in _dataResult"
:key="index"
:settings="{
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
label,
dataResult: !isEmpty(component) ? { ...component } : null,
}"
@drop-data="dropData"
/>
</div>
<div
class="collection-container border-custom"
:class="[LAYOUT_PARSE['LAYOUT_WRAP'] || 'vertical', ...(LAYOUT_PARSE['borderWrap']?.length > 0 ? LAYOUT_PARSE['borderWrap'] : [])]"
@click="selectComponent"
:style="[`grid-template-columns: repeat(${width < breakpoint.sm ? 1 : LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`, LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
>
<DynamicComponent
v-for="(component, index) in _dataResult"
:key="index"
:style="[
mapActivesToItems(index)['colSpan'] && `grid-column: span ${mapActivesToItems(index)['colSpan']} / span ${mapActivesToItems(index)['colSpan']}`,
mapActivesToItems(index)['colStart'] && `grid-column-start: ${mapActivesToItems(index)['colStart']}`,
mapActivesToItems(index)['colEnd'] && `grid-column-end: ${mapActivesToItems(index)['colEnd']}`,
]"
:settings="{
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
label: handleActiveItem(['border', 'HIDE', 'fontSizeTitle', 'fontWeightTitle'], ['activesBorder', 'activesHide', 'activesFontSize', 'activesFontWeight'], index, [[], [], null, null]),
dataResult: !isEmpty(component) ? { ...component } : null,
}"
@drop-data="dropData"
/>
</div>
</template>
<style lang="scss" scoped>
.collection-container {
display: grid;
gap: 10px;
&.border-custom {
border-color: #e5e5e5 !important;
}
&.borderLeft {
border-left: 1px solid;
padding-left: 10px;
}
&.borderRight {
border-right: 1px solid;
padding-right: 10px;
}
&.borderTop {
border-top: 1px solid;
padding-top: 10px;
}
&.borderBottom {
border-bottom: 1px solid;
padding-bottom: 10px;
}
&.vertical {
grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -115,11 +156,7 @@ const selectComponent = () => {
grid-template-rows: auto;
grid-auto-flow: column;
}
.empty {
min-height: 100px;
border-radius: 6px;
background: #409eff;
}
&.noData {
border-radius: 6px;
}