From b34da6956c885ad4746a0c26d824dbaca0f461ce Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Wed, 7 Jan 2026 21:00:06 +0100
Subject: [PATCH] WIP - Fix create field dialog placement and look up field
 creation

---
 backend/src/object/object.service.ts         |   1 +
 frontend/components/fields/FieldRenderer.vue |   3 +-
 frontend/components/fields/LookupField.vue   |   3 +-
 frontend/pages/setup/objects/[apiName].vue   | 169 ++++++++++---------
 4 files changed, 92 insertions(+), 84 deletions(-)

diff --git a/backend/src/object/object.service.ts b/backend/src/object/object.service.ts
index 1b66bca..add4327 100644
--- a/backend/src/object/object.service.ts
+++ b/backend/src/object/object.service.ts
@@ -394,6 +394,7 @@ export class ObjectService {
       'url': 'URL',
       'color': 'TEXT',
       'json': 'JSON',
+      'lookup': 'LOOKUP',
       'belongsTo': 'LOOKUP',
       'hasMany': 'LOOKUP',
       'manyToMany': 'LOOKUP',
diff --git a/frontend/components/fields/FieldRenderer.vue b/frontend/components/fields/FieldRenderer.vue
index 313c10c..9ea7e14 100644
--- a/frontend/components/fields/FieldRenderer.vue
+++ b/frontend/components/fields/FieldRenderer.vue
@@ -21,7 +21,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/central',
+  // Default to runtime objects endpoint; override when consuming central entities
+  baseUrl: '/runtime/objects',
 })
 
 const emit = defineEmits<{
diff --git a/frontend/components/fields/LookupField.vue b/frontend/components/fields/LookupField.vue
index 8dcdbe2..ba8bc8e 100644
--- a/frontend/components/fields/LookupField.vue
+++ b/frontend/components/fields/LookupField.vue
@@ -16,7 +16,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/central',
+  // Default to runtime objects endpoint; override when consuming central entities
+  baseUrl: '/runtime/objects',
   modelValue: null,
 })
 
diff --git a/frontend/pages/setup/objects/[apiName].vue b/frontend/pages/setup/objects/[apiName].vue
index b4998be..f4a5eb2 100644
--- a/frontend/pages/setup/objects/[apiName].vue
+++ b/frontend/pages/setup/objects/[apiName].vue
@@ -189,100 +189,105 @@
       </main>
 
       <!-- Field Management Dialog -->
-      <div v-if="showFieldDialog" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-        <div class="bg-white rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
-          <div class="sticky top-0 bg-white border-b p-6 flex items-center justify-between">
-            <h2 class="text-2xl font-bold">
-              {{ fieldDialogMode === 'create' ? 'Create New Field' : 'Edit Field' }}
-            </h2>
-            <button
-              @click="closeFieldDialog"
-              class="text-gray-500 hover:text-gray-700 text-2xl font-bold"
-            >
-              ×
-            </button>
-          </div>
-
-          <div class="p-6 space-y-6">
-            <!-- Field Type Selection (only for creation) -->
-            <div v-if="fieldDialogMode === 'create'">
-              <FieldTypeSelector
-                v-model="fieldForm.type"
-              />
+      <Teleport to="body">
+        <div
+          v-if="showFieldDialog"
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-[100]"
+        >
+          <div class="bg-white rounded-lg shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+            <div class="sticky top-0 bg-white border-b p-6 flex items-center justify-between">
+              <h2 class="text-2xl font-bold">
+                {{ fieldDialogMode === 'create' ? 'Create New Field' : 'Edit Field' }}
+              </h2>
+              <button
+                @click="closeFieldDialog"
+                class="text-gray-500 hover:text-gray-700 text-2xl font-bold"
+              >
+                ×
+              </button>
             </div>
 
-            <!-- Common Attributes -->
-            <div v-if="fieldForm.type">
-              <h3 class="text-lg font-semibold mb-4">Basic Properties</h3>
-              <FieldAttributesCommon
-                :label="fieldForm.label"
-                :api-name="fieldForm.apiName"
-                :description="fieldForm.description"
-                :placeholder="fieldForm.placeholder"
-                :help-text="fieldForm.helpText"
-                :display-order="fieldForm.displayOrder"
-                :is-required="fieldForm.isRequired"
-                :is-unique="fieldForm.isUnique"
-                :default-value="fieldForm.defaultValue"
-                :is-editing="fieldDialogMode === 'edit'"
-                :has-data="fieldForm.hasData"
-                @update="updateCommonAttributes"
-              />
-            </div>
+            <div class="p-6 space-y-6">
+              <!-- Field Type Selection (only for creation) -->
+              <div v-if="fieldDialogMode === 'create'">
+                <FieldTypeSelector
+                  v-model="fieldForm.type"
+                />
+              </div>
 
-            <!-- Type-Specific Attributes -->
-            <div v-if="fieldForm.type">
-              <h3 class="text-lg font-semibold mb-4">Type-Specific Settings</h3>
-              <FieldAttributesType
-                :field-type="fieldForm.type"
-                :attributes="fieldForm.typeAttributes"
-                @update="updateTypeAttributes"
-              />
-            </div>
+              <!-- Common Attributes -->
+              <div v-if="fieldForm.type">
+                <h3 class="text-lg font-semibold mb-4">Basic Properties</h3>
+                <FieldAttributesCommon
+                  :label="fieldForm.label"
+                  :api-name="fieldForm.apiName"
+                  :description="fieldForm.description"
+                  :placeholder="fieldForm.placeholder"
+                  :help-text="fieldForm.helpText"
+                  :display-order="fieldForm.displayOrder"
+                  :is-required="fieldForm.isRequired"
+                  :is-unique="fieldForm.isUnique"
+                  :default-value="fieldForm.defaultValue"
+                  :is-editing="fieldDialogMode === 'edit'"
+                  :has-data="fieldForm.hasData"
+                  @update="updateCommonAttributes"
+                />
+              </div>
 
-            <!-- Lookup Field Selection -->
-            <div v-if="(fieldForm.type === 'lookup' || fieldForm.type === 'belongsTo') && fieldDialogMode === 'create'">
-              <h3 class="text-lg font-semibold mb-4">Related Object</h3>
-              <div class="grid grid-cols-4 gap-4">
-                <label class="text-sm font-medium leading-8">Select Object</label>
-                <div class="col-span-3">
-                  <select
-                    v-model="fieldForm.referenceObject"
-                    class="w-full px-3 py-2 border rounded-md text-sm"
-                  >
-                    <option value="">-- Select an object --</option>
-                    <option
-                      v-for="obj in availableObjects"
-                      :key="obj.id"
-                      :value="obj.apiName"
+              <!-- Type-Specific Attributes -->
+              <div v-if="fieldForm.type">
+                <h3 class="text-lg font-semibold mb-4">Type-Specific Settings</h3>
+                <FieldAttributesType
+                  :field-type="fieldForm.type"
+                  :attributes="fieldForm.typeAttributes"
+                  @update="updateTypeAttributes"
+                />
+              </div>
+
+              <!-- Lookup Field Selection -->
+              <div v-if="(fieldForm.type === 'lookup' || fieldForm.type === 'belongsTo') && fieldDialogMode === 'create'">
+                <h3 class="text-lg font-semibold mb-4">Related Object</h3>
+                <div class="grid grid-cols-4 gap-4">
+                  <label class="text-sm font-medium leading-8">Select Object</label>
+                  <div class="col-span-3">
+                    <select
+                      v-model="fieldForm.referenceObject"
+                      class="w-full px-3 py-2 border rounded-md text-sm"
                     >
-                      {{ obj.label }} ({{ obj.apiName }})
-                    </option>
-                  </select>
+                      <option value="">-- Select an object --</option>
+                      <option
+                        v-for="obj in availableObjects"
+                        :key="obj.id"
+                        :value="obj.apiName"
+                      >
+                        {{ obj.label }} ({{ obj.apiName }})
+                      </option>
+                    </select>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <!-- Error Message -->
-            <div v-if="fieldDialogError" class="p-3 bg-red-100 text-red-800 rounded-md text-sm">
-              {{ fieldDialogError }}
-            </div>
+              <!-- Error Message -->
+              <div v-if="fieldDialogError" class="p-3 bg-red-100 text-red-800 rounded-md text-sm">
+                {{ fieldDialogError }}
+              </div>
 
-            <!-- Action Buttons -->
-            <div class="flex gap-3 justify-end pt-4">
-              <Button variant="outline" @click="closeFieldDialog">
-                Cancel
-              </Button>
-              <Button
-                :disabled="!fieldForm.label || !fieldForm.apiName || !fieldForm.type"
-                @click="saveField"
-              >
-                {{ fieldDialogMode === 'create' ? 'Create Field' : 'Update Field' }}
-              </Button>
+              <!-- Action Buttons -->
+              <div class="flex gap-3 justify-end pt-4">
+                <Button variant="outline" @click="closeFieldDialog">
+                  Cancel
+                </Button>
+                <Button
+                  :disabled="!fieldForm.label || !fieldForm.apiName || !fieldForm.type"
+                  @click="saveField"
+                >
+                  {{ fieldDialogMode === 'create' ? 'Create Field' : 'Update Field' }}
+                </Button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </Teleport>
     </NuxtLayout>
   </div>
 </template>