thainv-dev: Fix
This commit is contained in:
nguyen van thai
@@ -4,6 +4,8 @@ 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;
|
||||
@@ -19,13 +21,12 @@ const defineTypeRecusive = {
|
||||
const SETTING_OPTIONS = computed(() => {
|
||||
let _setting_options = {};
|
||||
switch (props.layout) {
|
||||
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
@@ -35,87 +36,92 @@ const SETTING_OPTIONS = computed(() => {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']:
|
||||
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']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 4,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_ONE"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 1,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TWO"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_THREE"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FOUR"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 4,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FIVE"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 5,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SIX"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 6,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SEVEN"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 7,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_EIGHT"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 8,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_NINE"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 9,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 10,
|
||||
};
|
||||
@@ -130,70 +136,78 @@ const SETTING_OPTIONS = computed(() => {
|
||||
});
|
||||
|
||||
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 = {};
|
||||
switch (props.layout) {
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout two_col_layout",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout six_col_layout",
|
||||
1: "col-span-5",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout six_col_layout",
|
||||
1: "col-span-2",
|
||||
2: "col-span-3",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
|
||||
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout three_col_layout",
|
||||
0: "col-span-2",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout three_col_layout",
|
||||
1: "col-span-2",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout six_col_layout",
|
||||
1: "col-span-5",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout five_col_layout",
|
||||
1: "col-span-4",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout three_col_layout",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout four_col_layout",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout four_col_layout",
|
||||
1: "col-span-2",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout five_col_layout",
|
||||
1: "col-span-3",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']:
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout six_col_layout",
|
||||
1: "col-span-4",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout six_col_layout",
|
||||
1: "col-span-2",
|
||||
2: "col-span-3",
|
||||
};
|
||||
break;
|
||||
default:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout basic_column",
|
||||
@@ -203,6 +217,22 @@ const CLASS_FOR_SECTION = computed(() => {
|
||||
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") : {};
|
||||
});
|
||||
@@ -210,7 +240,7 @@ const LAYOUT_PARSE = computed(() => {
|
||||
const mapActivesToItems = (index: number) => {
|
||||
if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
|
||||
return LAYOUT_PARSE.value.listCss[index] || {};
|
||||
}
|
||||
}
|
||||
return {};
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user