nguyen van thai
128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<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";
|
|
|
|
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
|
|
|
|
const _props = defineProps<{
|
|
dataResult?: any[];
|
|
dataQuery?: string;
|
|
layout?: string;
|
|
label?: string;
|
|
}>();
|
|
|
|
const SETTING_OPTIONS = {
|
|
MAX_ELEMENT: 5,
|
|
TEMPLATE: "Article",
|
|
LAYOUT: "TYPE:Card",
|
|
};
|
|
|
|
const layoutParse = computed(() => {
|
|
const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
|
|
const parseItem = _layout.split(":");
|
|
return {
|
|
[parseItem[0]]: parseItem[1],
|
|
};
|
|
});
|
|
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
|
|
return Object.assign({}, ...parseLayout, designObject);
|
|
});
|
|
|
|
const _dataResult = computed(() => {
|
|
let _components = Array(Number(layoutParse.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
|
|
const result = getInputValue(_props.dataResult, "ARRAY");
|
|
result &&
|
|
result.length > 0 &&
|
|
_components.map((_: any, index: any) => {
|
|
_components[index] = result[index] || null;
|
|
});
|
|
return _components;
|
|
});
|
|
|
|
async function dropData(data: any) {
|
|
if (data) {
|
|
const { dataResult, dataType } = data;
|
|
const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
|
|
const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
|
|
const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
|
|
|
|
emit("dropData", {
|
|
dataResult: result,
|
|
dataType,
|
|
dataQuery: getDataQuery,
|
|
});
|
|
}
|
|
}
|
|
|
|
const selectComponent = () => {
|
|
emit("selectComponent");
|
|
};
|
|
</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>
|
|
</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));
|
|
}
|
|
&.horizontal {
|
|
grid-template-rows: auto;
|
|
grid-auto-flow: column;
|
|
}
|
|
.empty {
|
|
min-height: 100px;
|
|
border-radius: 6px;
|
|
background: #409eff;
|
|
}
|
|
&.noData {
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
</style>
|