WIP - use objection and working lookup field to owner

frontend/components/PageLayoutRenderer.vue

@@ -14,6 +14,7 @@
           v-if="fieldItem.field"
           :field="fieldItem.field"
           :model-value="modelValue?.[fieldItem.field.apiName]"
+          :record-data="modelValue"
           :mode="readonly ? VM.DETAIL : VM.EDIT"
           @update:model-value="handleFieldUpdate(fieldItem.field.apiName, $event)"
         />
@@ -30,6 +31,7 @@
         <FieldRenderer
           :field="field"
           :model-value="modelValue?.[field.apiName]"
+          :record-data="modelValue"
           :mode="readonly ? VM.DETAIL : VM.EDIT"
           @update:model-value="handleFieldUpdate(field.apiName, $event)"
         />

frontend/components/fields/FieldRenderer.vue

@@ -30,10 +30,6 @@ const emit = defineEmits<{
 
 const { api } = useApi()
 
-// 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),
@@ -49,80 +45,36 @@ const isRelationshipField = computed(() => {
   return [FieldType.BELONGS_TO].includes(props.field.type)
 })
 
-// Get relation object name (e.g., 'tenants' -> singular 'tenant')
+// Get relation object name from field apiName (e.g., 'ownerId' -> 'owner')
 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.get(`${props.baseUrl}/${relationObject}/${props.modelValue}`)
-    relatedRecord.value = record
-  } catch (err) {
-    console.error('Error fetching related record:', err)
-    relatedRecord.value = null
-  } finally {
-    loadingRelated.value = false
-  }
+  // Backend attaches related object using field apiName without 'Id' suffix, lowercase
+  // e.g., ownerId -> owner, accountId -> account
+  return props.field.apiName.replace(/Id$/, '').toLowerCase()
 }
 
 // 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
+  // If no related object found in recordData, just show the ID
+  // (The fetch mechanism is removed to avoid N+1 queries)
   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
@@ -168,6 +120,7 @@ const formatValue = (val: any): string => {
         {{ formatValue(value) }}
       </Badge>
       <template v-else>
+
         {{ formatValue(value) }}
       </template>
     </div>

frontend/components/fields/LookupField.vue

@@ -56,7 +56,8 @@ const filteredRecords = computed(() => {
 const fetchRecords = async () => {
   loading.value = true
   try {
-    const response = await api.get(`${props.baseUrl}/${relationObject.value}`)
+    const endpoint = `${props.baseUrl}/${relationObject.value}/records`
+    const response = await api.get(endpoint)
     records.value = response || []
     
     // If we have a modelValue, find the selected record

frontend/components/views/DetailViewEnhanced.vue

@@ -19,10 +19,12 @@ interface Props {
   data: any
   loading?: boolean
   objectId?: string // For fetching page layout
+  baseUrl?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
+  baseUrl: '/runtime/objects',
 })
 
 const emit = defineEmits<{
@@ -170,6 +172,7 @@ const usePageLayout = computed(() => {
                   :model-value="data[field.apiName]"
                   :record-data="data"
                   :mode="ViewMode.DETAIL"
+                  :base-url="baseUrl"
                 />
               </div>
             </CardContent>
@@ -192,6 +195,7 @@ const usePageLayout = computed(() => {
                 :model-value="data[field.apiName]"
                 :record-data="data"
                 :mode="ViewMode.DETAIL"
+                :base-url="baseUrl"
               />
             </div>
           </CardContent>

frontend/components/views/EditViewEnhanced.vue

@@ -19,12 +19,14 @@ interface Props {
   loading?: boolean
   saving?: boolean
   objectId?: string // For fetching page layout
+  baseUrl?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   data: () => ({}),
   loading: false,
   saving: false,
+  baseUrl: '/runtime/objects',
 })
 
 const emit = defineEmits<{
@@ -260,6 +262,7 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
                     :model-value="formData[field.apiName]"
                     :mode="ViewMode.EDIT"
                     :error="errors[field.apiName]"
+                    :base-url="baseUrl"
                     @update:model-value="handleFieldUpdate(field.apiName, $event)"
                   />
                 </div>
@@ -283,6 +286,7 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
                   :model-value="formData[field.apiName]"
                   :mode="ViewMode.EDIT"
                   :error="errors[field.apiName]"
+                  :base-url="baseUrl"
                   @update:model-value="handleFieldUpdate(field.apiName, $event)"
                 />
               </div>

frontend/components/views/ListView.vue

@@ -21,12 +21,14 @@ interface Props {
   data?: any[]
   loading?: boolean
   selectable?: boolean
+  baseUrl?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   data: () => [],
   loading: false,
   selectable: false,
+  baseUrl: '/runtime/objects',
 })
 
 const emit = defineEmits<{
@@ -207,6 +209,7 @@ const handleAction = (actionId: string) => {
                 :model-value="row[field.apiName]"
                 :record-data="row"
                 :mode="ViewMode.LIST"
+                :base-url="baseUrl"
               />
             </TableCell>
             <TableCell @click.stop>