WIP - related lists and look up field

frontend/components/fields/FieldRenderer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -9,19 +9,31 @@ import { DatePicker } from '@/components/ui/date-picker'
 import { Badge } from '@/components/ui/badge'
 import { FieldConfig, FieldType, ViewMode } from '@/types/field-types'
 import { Label } from '@/components/ui/label'
+import LookupField from '@/components/fields/LookupField.vue'
 
 interface Props {
   field: FieldConfig
   modelValue: any
   mode: ViewMode
   readonly?: boolean
+  baseUrl?: string // Base URL for API calls
+  recordData?: any // Full record data to access related objects
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  baseUrl: '/api/central',
+})
+
 const emit = defineEmits<{
   'update:modelValue': [value: any]
 }>()
 
+const { $api } = useNuxtApp() as unknown as { $api: Function }
+
+// For relationship fields, store the related record for display
+const relatedRecord = ref<any | null>(null)
+const loadingRelated = ref(false)
+
 const value = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -32,10 +44,88 @@ const isEditMode = computed(() => props.mode === ViewMode.EDIT)
 const isListMode = computed(() => props.mode === ViewMode.LIST)
 const isDetailMode = computed(() => props.mode === ViewMode.DETAIL)
 
+// Check if field is a relationship field
+const isRelationshipField = computed(() => {
+  return [FieldType.BELONGS_TO].includes(props.field.type)
+})
+
+// Get relation object name (e.g., 'tenants' -> singular 'tenant')
+const getRelationPropertyName = () => {
+  const relationObject = props.field.relationObject || props.field.apiName.replace('Id', '')
+  // Convert plural to singular for property name (e.g., 'tenants' -> 'tenant')
+  return relationObject.endsWith('s') ? relationObject.slice(0, -1) : relationObject
+}
+
+// Fetch related record for display
+const fetchRelatedRecord = async () => {
+  if (!isRelationshipField.value || !props.modelValue) return
+  
+  const relationObject = props.field.relationObject || props.field.apiName.replace('Id', '')
+  const displayField = props.field.relationDisplayField || 'name'
+  
+  loadingRelated.value = true
+  try {
+    const record = await $api(`${props.baseUrl}/${relationObject}/${props.modelValue}`)
+    relatedRecord.value = record
+  } catch (err) {
+    console.error('Error fetching related record:', err)
+    relatedRecord.value = null
+  } finally {
+    loadingRelated.value = false
+  }
+}
+
+// Display value for relationship fields
+const relationshipDisplayValue = computed(() => {
+  if (!isRelationshipField.value) return props.modelValue || '-'
+  
+  // First, check if the parent record data includes the related object
+  // This happens when backend uses .withGraphFetched()
+  if (props.recordData) {
+    const relationPropertyName = getRelationPropertyName()
+    const relatedObject = props.recordData[relationPropertyName]
+    
+    if (relatedObject && typeof relatedObject === 'object') {
+      const displayField = props.field.relationDisplayField || 'name'
+      return relatedObject[displayField] || relatedObject.id || props.modelValue
+    }
+  }
+  
+  // Otherwise use the fetched related record
+  if (relatedRecord.value) {
+    const displayField = props.field.relationDisplayField || 'name'
+    return relatedRecord.value[displayField] || relatedRecord.value.id
+  }
+  
+  // Show loading state
+  if (loadingRelated.value) {
+    return 'Loading...'
+  }
+  
+  // Fallback to ID
+  return props.modelValue || '-'
+})
+
+// Watch for changes in modelValue for relationship fields
+watch(() => props.modelValue, () => {
+  if (isRelationshipField.value && (isDetailMode.value || isListMode.value)) {
+    fetchRelatedRecord()
+  }
+})
+
+// Load related record on mount if needed
+onMounted(() => {
+  if (isRelationshipField.value && props.modelValue && (isDetailMode.value || isListMode.value)) {
+    fetchRelatedRecord()
+  }
+})
+
 const formatValue = (val: any): string => {
   if (val === null || val === undefined) return '-'
   
   switch (props.field.type) {
+    case FieldType.BELONGS_TO:
+      return relationshipDisplayValue.value
     case FieldType.DATE:
       return val instanceof Date ? val.toLocaleDateString() : new Date(val).toLocaleDateString()
     case FieldType.DATETIME:
@@ -113,9 +203,17 @@ const formatValue = (val: any): string => {
 
     <!-- Edit View - Input components -->
     <div v-else-if="isEditMode && !isReadOnly">
+      <!-- Relationship Field - Lookup -->
+      <LookupField
+        v-if="field.type === FieldType.BELONGS_TO"
+        :field="field"
+        v-model="value"
+        :base-url="baseUrl"
+      />
+
       <!-- Text Input -->
       <Input
-        v-if="[FieldType.TEXT, FieldType.EMAIL, FieldType.URL, FieldType.PASSWORD].includes(field.type)"
+        v-else-if="[FieldType.TEXT, FieldType.EMAIL, FieldType.URL, FieldType.PASSWORD].includes(field.type)"
         :id="field.id"
         v-model="value"
         :type="field.type === FieldType.PASSWORD ? 'password' : field.type === FieldType.EMAIL ? 'email' : field.type === FieldType.URL ? 'url' : 'text'"

frontend/components/fields/LookupField.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+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 { Check, ChevronsUpDown, X } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import type { FieldConfig } from '@/types/field-types'
+
+interface Props {
+  field: FieldConfig
+  modelValue: string | null // The ID of the selected record
+  readonly?: boolean
+  baseUrl?: string // Base API URL, defaults to '/api/central'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  baseUrl: '/api/central',
+  modelValue: null,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+const { $api } = useNuxtApp() as unknown as { $api: Function }
+const open = ref(false)
+const searchQuery = ref('')
+const records = ref<any[]>([])
+const loading = ref(false)
+const selectedRecord = ref<any | null>(null)
+
+// Get the relation configuration
+const relationObject = computed(() => props.field.relationObject || props.field.apiName.replace('Id', ''))
+const displayField = computed(() => props.field.relationDisplayField || 'name')
+
+// Display value for the selected record
+const displayValue = computed(() => {
+  if (!selectedRecord.value) return 'Select...'
+  return selectedRecord.value[displayField.value] || selectedRecord.value.id
+})
+
+// Filtered records based on search
+const filteredRecords = computed(() => {
+  if (!searchQuery.value) return records.value
+  
+  const query = searchQuery.value.toLowerCase()
+  return records.value.filter(record => {
+    const displayValue = record[displayField.value] || record.id
+    return displayValue.toLowerCase().includes(query)
+  })
+})
+
+// Fetch available records for the lookup
+const fetchRecords = async () => {
+  loading.value = true
+  try {
+    const response = await $api(`${props.baseUrl}/${relationObject.value}`)
+    records.value = response || []
+    
+    // If we have a modelValue, find the selected record
+    if (props.modelValue) {
+      selectedRecord.value = records.value.find(r => r.id === props.modelValue) || null
+    }
+  } catch (err) {
+    console.error('Error fetching lookup records:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Handle record selection
+const selectRecord = (record: any) => {
+  selectedRecord.value = record
+  emit('update:modelValue', record.id)
+  open.value = false
+}
+
+// Clear selection
+const clearSelection = () => {
+  selectedRecord.value = null
+  emit('update:modelValue', null)
+}
+
+// Watch for external modelValue changes
+watch(() => props.modelValue, (newValue) => {
+  if (newValue && records.value.length > 0) {
+    selectedRecord.value = records.value.find(r => r.id === newValue) || null
+  } else if (!newValue) {
+    selectedRecord.value = null
+  }
+})
+
+onMounted(() => {
+  fetchRecords()
+})
+</script>
+
+<template>
+  <div class="lookup-field space-y-2">
+    <Popover v-model:open="open">
+      <div class="flex gap-2">
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            role="combobox"
+            :aria-expanded="open"
+            :disabled="readonly || loading"
+            class="flex-1 justify-between"
+          >
+            <span class="truncate">{{ displayValue }}</span>
+            <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        
+        <Button
+          v-if="selectedRecord && !readonly"
+          variant="outline"
+          size="icon"
+          @click="clearSelection"
+          class="shrink-0"
+        >
+          <X class="h-4 w-4" />
+        </Button>
+      </div>
+      
+      <PopoverContent class="w-[400px] p-0">
+        <Command>
+          <CommandInput 
+            v-model="searchQuery"
+            placeholder="Search..." 
+          />
+          <CommandEmpty>
+            {{ loading ? 'Loading...' : 'No results found.' }}
+          </CommandEmpty>
+          <CommandList>
+            <CommandGroup>
+              <CommandItem
+                v-for="record in filteredRecords"
+                :key="record.id"
+                :value="record.id"
+                @select="selectRecord(record)"
+              >
+                <Check
+                  :class="cn(
+                    'mr-2 h-4 w-4',
+                    selectedRecord?.id === record.id ? 'opacity-100' : 'opacity-0'
+                  )"
+                />
+                {{ record[displayField] || record.id }}
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+    
+    <!-- Display readonly value -->
+    <div v-if="readonly && selectedRecord" class="text-sm text-muted-foreground">
+      {{ selectedRecord[displayField] || selectedRecord.id }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lookup-field {
+  width: 100%;
+}
+</style>