WIP - add contct and contact details

frontend/components/fields/FieldRenderer.vue

@@ -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 -->

frontend/components/fields/LookupField.vue

@@ -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.' }}