119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
|
<div class="page-layout-renderer">
|
|
<div
|
|
v-if="layout && layout.fields.length > 0"
|
|
class="grid gap-4"
|
|
:style="gridStyle"
|
|
>
|
|
<div
|
|
v-for="fieldItem in sortedFields"
|
|
:key="fieldItem.fieldId"
|
|
:style="getFieldStyle(fieldItem)"
|
|
class="field-container"
|
|
>
|
|
<FieldRenderer
|
|
v-if="fieldItem.field"
|
|
:field="fieldItem.field"
|
|
:model-value="modelValue?.[fieldItem.field.apiName]"
|
|
:mode="readonly ? VM.DETAIL : VM.EDIT"
|
|
@update:model-value="handleFieldUpdate(fieldItem.field.apiName, $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fallback: Simple two-column layout if no page layout is configured -->
|
|
<div v-else class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div
|
|
v-for="field in fields"
|
|
:key="field.id"
|
|
class="field-container"
|
|
>
|
|
<FieldRenderer
|
|
:field="field"
|
|
:model-value="modelValue?.[field.apiName]"
|
|
:mode="readonly ? VM.DETAIL : VM.EDIT"
|
|
@update:model-value="handleFieldUpdate(field.apiName, $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, watch } from 'vue'
|
|
import type { FieldConfig, ViewMode } from '~/types/field-types'
|
|
import type { PageLayoutConfig, FieldLayoutItem } from '~/types/page-layout'
|
|
import FieldRenderer from '@/components/fields/FieldRenderer.vue'
|
|
import { ViewMode as VM } from '~/types/field-types'
|
|
|
|
const props = defineProps<{
|
|
fields: FieldConfig[]
|
|
layout?: PageLayoutConfig | null
|
|
modelValue?: Record<string, any>
|
|
readonly?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: Record<string, any>]
|
|
}>()
|
|
|
|
// Grid configuration for 6 columns
|
|
const GRID_COLUMNS = 6
|
|
const gridStyle = computed(() => ({
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(${GRID_COLUMNS}, 1fr)`,
|
|
gap: '1rem',
|
|
}))
|
|
|
|
// Map field IDs to field objects and sort by position
|
|
const sortedFields = computed(() => {
|
|
if (!props.layout || !props.layout.fields) return []
|
|
|
|
const fieldsMap = new Map(props.fields.map(f => [f.id, f]))
|
|
|
|
return props.layout.fields
|
|
.map(item => ({
|
|
...item,
|
|
field: fieldsMap.get(item.fieldId),
|
|
}))
|
|
.filter(item => item.field)
|
|
.sort((a, b) => {
|
|
// Sort by y position first, then x position
|
|
if (a.y !== b.y) return a.y - b.y
|
|
return a.x - b.x
|
|
})
|
|
})
|
|
|
|
const getFieldStyle = (item: FieldLayoutItem) => {
|
|
return {
|
|
gridColumnStart: item.x + 1,
|
|
gridColumnEnd: `span ${item.w}`,
|
|
gridRowStart: item.y + 1,
|
|
gridRowEnd: `span ${item.h}`,
|
|
}
|
|
}
|
|
|
|
const handleFieldUpdate = (fieldName: string, value: any) => {
|
|
if (props.readonly) return
|
|
|
|
const updated = {
|
|
...props.modelValue,
|
|
[fieldName]: value,
|
|
}
|
|
|
|
emit('update:modelValue', updated)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-layout-renderer {
|
|
width: 100%;
|
|
}
|
|
|
|
.field-container {
|
|
min-height: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|