104 lines
2.6 KiB
Vue
104 lines
2.6 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, groupBy } from "lodash";
|
||
|
|
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||
|
|
|
||
|
|
const _props = defineProps<{
|
||
|
|
dataResult?: any[];
|
||
|
|
dataQuery?: string;
|
||
|
|
layout?: string;
|
||
|
|
label?: string;
|
||
|
|
content?: any;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const SETTING_OPTIONS = {
|
||
|
|
MAX_ELEMENT: 5,
|
||
|
|
TEMPLATE: "TYPE:Card",
|
||
|
|
LAYOUT: "TYPE:Card_Audio",
|
||
|
|
};
|
||
|
|
|
||
|
|
const COMPONENT = {
|
||
|
|
taxonomy: enumPageComponentTemplates.ARTICLE,
|
||
|
|
};
|
||
|
|
|
||
|
|
const LAYOUT_PARSE = computed(() => {
|
||
|
|
return _props.label ? getInputValue(_props.label, "OBJECT") : {};
|
||
|
|
});
|
||
|
|
|
||
|
|
const _dataResult = computed(() => {
|
||
|
|
let _components = Array(Number(LAYOUT_PARSE.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;
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapActivesToItems = (index: number) => {
|
||
|
|
if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
|
||
|
|
return LAYOUT_PARSE.value.listCss[index] || {};
|
||
|
|
}
|
||
|
|
return {};
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
|
||
|
|
<DynamicComponent
|
||
|
|
v-for="(component, index) in _dataResult"
|
||
|
|
:key="index"
|
||
|
|
:settings="{
|
||
|
|
template: SETTING_OPTIONS.TEMPLATE,
|
||
|
|
layout: SETTING_OPTIONS.LAYOUT,
|
||
|
|
label: mapActivesToItems(Number(index)),
|
||
|
|
dataResult: !isEmpty(component) ? { ...component } : null,
|
||
|
|
}"
|
||
|
|
:component="COMPONENT"
|
||
|
|
@drop-data="dropData"
|
||
|
|
/>
|
||
|
|
<div v-html="LAYOUT_PARSE.styleClasses"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.collection-container {
|
||
|
|
display: grid;
|
||
|
|
&.column {
|
||
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
&.row {
|
||
|
|
grid-template-rows: auto;
|
||
|
|
grid-auto-flow: column;
|
||
|
|
}
|
||
|
|
&.border-pri {
|
||
|
|
gap: 5px;
|
||
|
|
}
|
||
|
|
&.border-custom {
|
||
|
|
border-color: #e5e5e5 !important;
|
||
|
|
}
|
||
|
|
&.borderLeft {
|
||
|
|
border-left: 1px solid;
|
||
|
|
}
|
||
|
|
&.borderRight {
|
||
|
|
border-right: 1px solid;
|
||
|
|
}
|
||
|
|
&.borderTop {
|
||
|
|
border-top: 1px solid;
|
||
|
|
}
|
||
|
|
&.borderBottom {
|
||
|
|
border-bottom: 1px solid;
|
||
|
|
}
|
||
|
|
.empty {
|
||
|
|
min-height: 100px;
|
||
|
|
border-radius: 6px;
|
||
|
|
background: #409eff;
|
||
|
|
}
|
||
|
|
&.noData {
|
||
|
|
border-radius: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|