Add dynamic related lists with page layout support

This commit is contained in:
phyroslam
2026-01-08 15:15:28 -08:00
parent 16907aadf8
commit 9be98e4a09
12 changed files with 287 additions and 35 deletions

View File

@@ -87,6 +87,22 @@ const getFieldsBySection = (section: FieldSection) => {
const usePageLayout = computed(() => {
return pageLayout.value && pageLayout.value.fields && pageLayout.value.fields.length > 0
})
const visibleRelatedLists = computed<RelatedListConfig[]>(() => {
const relatedLists = props.config.relatedLists || []
if (!relatedLists.length) return []
if (!usePageLayout.value) {
return relatedLists
}
const layoutRelatedLists = pageLayout.value?.relatedLists
if (!layoutRelatedLists || layoutRelatedLists.length === 0) {
return []
}
return relatedLists.filter(list => layoutRelatedLists.includes(list.relationName))
})
</script>
<template>
@@ -138,7 +154,7 @@ const usePageLayout = computed(() => {
<Tabs v-else default-value="details" class="space-y-6">
<TabsList>
<TabsTrigger value="details">Details</TabsTrigger>
<TabsTrigger v-if="config.relatedLists && config.relatedLists.length > 0" value="related">
<TabsTrigger v-if="visibleRelatedLists.length > 0" value="related">
Related
</TabsTrigger>
<TabsTrigger v-if="showSharing && data.id" value="sharing">
@@ -224,9 +240,9 @@ const usePageLayout = computed(() => {
<!-- Related Lists Tab -->
<TabsContent value="related" class="space-y-6">
<div v-if="config.relatedLists && config.relatedLists.length > 0">
<div v-if="visibleRelatedLists.length > 0">
<RelatedList
v-for="relatedList in config.relatedLists"
v-for="relatedList in visibleRelatedLists"
:key="relatedList.relationName"
:config="relatedList"
:parent-id="data.id"