neogenia/neo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP - add contct and contact details

Browse Source
This commit is contained in:
Francisco Gaona
2026-01-12 21:08:47 +01:00
parent f8a3cffb64
commit ca11c8cbe7
19 changed files with 551 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/components/PageLayoutRenderer.vue
View File

@@ -17,6 +17,7 @@
:record-data="modelValue"
:mode="readonly ? VM.DETAIL : VM.EDIT"
@update:model-value="handleFieldUpdate(fieldItem.field.apiName, $event)"
@update:related-fields="handleRelatedFieldsUpdate"
/>
</div>
</div>
@@ -34,6 +35,7 @@
:record-data="modelValue"
:mode="readonly ? VM.DETAIL : VM.EDIT"
@update:model-value="handleFieldUpdate(field.apiName, $event)"
@update:related-fields="handleRelatedFieldsUpdate"
/>
</div>
</div>
@@ -96,6 +98,17 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
emit('update:modelValue', updated)
}
const handleRelatedFieldsUpdate = (values: Record<string, any>) => {
if (props.readonly) return
const updated = {
...props.modelValue,
...values,
}
emit('update:modelValue', updated)
}
</script>
<style scoped>

14
frontend/components/fields/FieldRenderer.vue
View File

@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<{
'update:modelValue': [value: any]
'update:relatedFields': [value: Record<string, any>]
}>()
const { api } = useApi()
@@ -40,6 +41,10 @@ const isReadOnly = computed(() => props.readonly || props.field.isReadOnly || pr
const isEditMode = computed(() => props.mode === ViewMode.EDIT)
const isListMode = computed(() => props.mode === ViewMode.LIST)
const isDetailMode = computed(() => props.mode === ViewMode.DETAIL)
const relationTypeValue = computed(() => {
if (!props.field.relationTypeField) return null
return props.recordData?.[props.field.relationTypeField] ?? null
})
// Check if field is a relationship field
const isRelationshipField = computed(() => {
@@ -100,6 +105,13 @@ const formatValue = (val: any): string => {
return String(val)
}
}
const handleRelationTypeUpdate = (value: string | null) => {
if (!props.field.relationTypeField) return
emit('update:relatedFields', {
[props.field.relationTypeField]: value,
})
}
</script>
<template>
@@ -162,7 +174,9 @@ const formatValue = (val: any): string => {
v-if="field.type === FieldType.BELONGS_TO"
:field="field"
v-model="value"
:relation-type-value="relationTypeValue"
:base-url="baseUrl"
@update:relation-type-value="handleRelationTypeUpdate"
/>
<!-- Text Input -->

68
frontend/components/fields/LookupField.vue
View File

@@ -4,6 +4,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Check, ChevronsUpDown, X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import type { FieldConfig } from '@/types/field-types'
@@ -13,6 +14,7 @@ interface Props {
modelValue: string | null // The ID of the selected record
readonly?: boolean
baseUrl?: string // Base API URL, defaults to '/central'
relationTypeValue?: string | null
}
const props = withDefaults(defineProps<Props>(), {
@@ -23,6 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<{
'update:modelValue': [value: string | null]
'update:relationTypeValue': [value: string | null]
}>()
const { api } = useApi()
@@ -31,10 +34,21 @@ const searchQuery = ref('')
const records = ref<any[]>([])
const loading = ref(false)
const selectedRecord = ref<any | null>(null)
const selectedRelationObject = ref<string | null>(null)
// Get the relation configuration
const relationObject = computed(() => props.field.relationObject || props.field.apiName.replace('Id', ''))
const availableRelationObjects = computed(() => {
if (props.field.relationObjects && props.field.relationObjects.length > 0) {
return props.field.relationObjects
}
const fallback = props.field.relationObject || props.field.apiName.replace('Id', '')
return fallback ? [fallback] : []
})
const relationObject = computed(() => selectedRelationObject.value || availableRelationObjects.value[0])
const displayField = computed(() => props.field.relationDisplayField || 'name')
const shouldShowTypeSelector = computed(() => availableRelationObjects.value.length > 1)
// Display value for the selected record
const displayValue = computed(() => {
@@ -55,6 +69,11 @@ const filteredRecords = computed(() => {
// Fetch available records for the lookup
const fetchRecords = async () => {
if (!relationObject.value) {
records.value = []
return
}
loading.value = true
try {
const endpoint = `${props.baseUrl}/${relationObject.value}/records`
@@ -72,6 +91,15 @@ const fetchRecords = async () => {
}
}
const handleRelationTypeChange = (value: string) => {
selectedRelationObject.value = value
emit('update:relationTypeValue', value)
searchQuery.value = ''
selectedRecord.value = null
emit('update:modelValue', null)
fetchRecords()
}
// Handle record selection
const selectRecord = (record: any) => {
selectedRecord.value = record
@@ -94,7 +122,24 @@ watch(() => props.modelValue, (newValue) => {
}
})
watch(() => props.relationTypeValue, (newValue) => {
if (!newValue) return
if (availableRelationObjects.value.includes(newValue)) {
selectedRelationObject.value = newValue
fetchRecords()
}
})
onMounted(() => {
selectedRelationObject.value = props.relationTypeValue && availableRelationObjects.value.includes(props.relationTypeValue)
? props.relationTypeValue
: availableRelationObjects.value[0] || null
// Emit initial relation type if we have a default selection so hidden relationTypeField gets populated
if (selectedRelationObject.value) {
emit('update:relationTypeValue', selectedRelationObject.value)
}
fetchRecords()
})
</script>
@@ -103,6 +148,25 @@ onMounted(() => {
<div class="lookup-field space-y-2">
<Popover v-model:open="open">
<div class="flex gap-2">
<Select
v-if="shouldShowTypeSelector"
:model-value="relationObject"
:disabled="readonly || loading"
@update:model-value="handleRelationTypeChange"
>
<SelectTrigger class="w-40">
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="option in availableRelationObjects"
:key="option"
:value="option"
>
{{ option }}
</SelectItem>
</SelectContent>
</Select>
<PopoverTrigger as-child>
<Button
variant="outline"
@@ -131,7 +195,7 @@ onMounted(() => {
<Command>
<CommandInput
v-model="searchQuery"
placeholder="Search..."
:placeholder="relationObject ? `Search ${relationObject}...` : 'Search...'"
/>
<CommandEmpty>
{{ loading ? 'Loading...' : 'No results found.' }}

14
frontend/components/views/DetailViewEnhanced.vue
View File

@@ -98,10 +98,20 @@ const visibleRelatedLists = computed<RelatedListConfig[]>(() => {
const layoutRelatedLists = pageLayout.value?.relatedLists
if (!layoutRelatedLists || layoutRelatedLists.length === 0) {
return []
// Page layout has no related list selections; show all by default
return relatedLists
}
return relatedLists.filter(list => layoutRelatedLists.includes(list.relationName))
const normalize = (name: string) => name?.toLowerCase().replace(/[^a-z0-9]/g, '')
const layoutNormalized = layoutRelatedLists.map(normalize)
const filtered = relatedLists.filter(list => {
const name = list.relationName
return layoutRelatedLists.includes(name) || layoutNormalized.includes(normalize(name))
})
// If nothing matched (e.g., relationName changed), fall back to showing all
return filtered.length > 0 ? filtered : relatedLists
})
</script>

11
frontend/components/views/EditView.vue
View File

@@ -159,6 +159,13 @@ const updateFieldValue = (apiName: string, value: any) => {
delete errors.value[apiName]
}
}
const handleRelatedFieldsUpdate = (values: Record<string, any>) => {
formData.value = {
...formData.value,
...values,
}
}
</script>
<template>
@@ -223,7 +230,9 @@ const updateFieldValue = (apiName: string, value: any) => {
:field="field"
:model-value="formData[field.apiName]"
:mode="ViewMode.EDIT"
:record-data="formData"
@update:model-value="updateFieldValue(field.apiName, $event)"
@update:related-fields="handleRelatedFieldsUpdate"
/>
<p v-if="errors[field.apiName]" class="text-sm text-destructive">
{{ errors[field.apiName] }}
@@ -252,7 +261,9 @@ const updateFieldValue = (apiName: string, value: any) => {
:field="field"
:model-value="formData[field.apiName]"
:mode="ViewMode.EDIT"
:record-data="formData"
@update:model-value="updateFieldValue(field.apiName, $event)"
@update:related-fields="handleRelatedFieldsUpdate"
/>
<p v-if="errors[field.apiName]" class="text-sm text-destructive">
{{ errors[field.apiName] }}

11
frontend/components/views/EditViewEnhanced.vue
View File

@@ -176,6 +176,13 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
delete errors.value[fieldName]
}
}
const handleRelatedFieldsUpdate = (values: Record<string, any>) => {
formData.value = {
...formData.value,
...values,
}
}
</script>
<template>
@@ -259,10 +266,12 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
<FieldRenderer
:field="field"
:model-value="formData[field.apiName]"
:record-data="formData"
:mode="ViewMode.EDIT"
:error="errors[field.apiName]"
:base-url="baseUrl"
@update:model-value="handleFieldUpdate(field.apiName, $event)"
@update:related-fields="handleRelatedFieldsUpdate"
/>
</div>
</div>
@@ -283,10 +292,12 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
<FieldRenderer
:field="field"
:model-value="formData[field.apiName]"
:record-data="formData"
:mode="ViewMode.EDIT"
:error="errors[field.apiName]"
:base-url="baseUrl"
@update:model-value="handleFieldUpdate(field.apiName, $event)"
@update:related-fields="handleRelatedFieldsUpdate"
/>
</div>
</div>

2
frontend/composables/useFieldViews.ts
View File

@@ -50,7 +50,9 @@ export const useFields = () => {
step: fieldDef.step,
accept: fieldDef.accept,
relationObject: fieldDef.relationObject,
relationObjects: fieldDef.relationObjects,
relationDisplayField: fieldDef.relationDisplayField,
relationTypeField: fieldDef.relationTypeField,
// Formatting
format: fieldDef.format,

2
frontend/types/field-types.ts
View File

@@ -91,7 +91,9 @@ export interface FieldConfig {
step?: number; // For number
accept?: string; // For file/image
relationObject?: string; // For relationship fields
relationObjects?: string[]; // For polymorphic relationship fields
relationDisplayField?: string; // Which field to display for relations
relationTypeField?: string; // Field API name storing the selected relation type
// Formatting
format?: string; // Date format, number format, etc.