Add Contact standard object, related lists, meilisearch, pagination, search, AI assistant

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,15 +14,18 @@ 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>(), {
-  baseUrl: '/central',
+  // Default to runtime objects endpoint; override when consuming central entities
+  baseUrl: '/runtime/objects',
   modelValue: null,
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: string | null]
+  'update:relationTypeValue': [value: string | null]
 }>()
 
 const { api } = useApi()
@@ -30,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(() => {
@@ -54,11 +69,18 @@ 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`
     const response = await api.get(endpoint)
-    records.value = response || []
+    records.value = Array.isArray(response)
+      ? response
+      : response?.data || response?.records || []
     
     // If we have a modelValue, find the selected record
     if (props.modelValue) {
@@ -71,6 +93,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
@@ -93,7 +124,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>
@@ -102,6 +150,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"
@@ -130,7 +197,7 @@ onMounted(() => {
         <Command>
           <CommandInput 
             v-model="searchQuery"
-            placeholder="Search..." 
+            :placeholder="relationObject ? `Search ${relationObject}...` : 'Search...'" 
           />
           <CommandEmpty>
             {{ loading ? 'Loading...' : 'No results found.' }}