WIP - Fix create field dialog placement and look up field creation

This commit is contained in:
Francisco Gaona
2026-01-07 21:00:06 +01:00
parent 6c73eb1658
commit b34da6956c
4 changed files with 92 additions and 84 deletions

View File

@@ -394,6 +394,7 @@ export class ObjectService {
'url': 'URL', 'url': 'URL',
'color': 'TEXT', 'color': 'TEXT',
'json': 'JSON', 'json': 'JSON',
'lookup': 'LOOKUP',
'belongsTo': 'LOOKUP', 'belongsTo': 'LOOKUP',
'hasMany': 'LOOKUP', 'hasMany': 'LOOKUP',
'manyToMany': 'LOOKUP', 'manyToMany': 'LOOKUP',

View File

@@ -21,7 +21,8 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
baseUrl: '/central', // Default to runtime objects endpoint; override when consuming central entities
baseUrl: '/runtime/objects',
}) })
const emit = defineEmits<{ const emit = defineEmits<{

View File

@@ -16,7 +16,8 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
baseUrl: '/central', // Default to runtime objects endpoint; override when consuming central entities
baseUrl: '/runtime/objects',
modelValue: null, modelValue: null,
}) })

View File

@@ -189,100 +189,105 @@
</main> </main>
<!-- Field Management Dialog --> <!-- Field Management Dialog -->
<div v-if="showFieldDialog" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"> <Teleport to="body">
<div class="bg-white rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto"> <div
<div class="sticky top-0 bg-white border-b p-6 flex items-center justify-between"> v-if="showFieldDialog"
<h2 class="text-2xl font-bold"> class="fixed inset-0 bg-black/50 flex items-center justify-center z-[100]"
{{ fieldDialogMode === 'create' ? 'Create New Field' : 'Edit Field' }} >
</h2> <div class="bg-white rounded-lg shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
<button <div class="sticky top-0 bg-white border-b p-6 flex items-center justify-between">
@click="closeFieldDialog" <h2 class="text-2xl font-bold">
class="text-gray-500 hover:text-gray-700 text-2xl font-bold" {{ fieldDialogMode === 'create' ? 'Create New Field' : 'Edit Field' }}
> </h2>
× <button
</button> @click="closeFieldDialog"
</div> class="text-gray-500 hover:text-gray-700 text-2xl font-bold"
>
<div class="p-6 space-y-6"> ×
<!-- Field Type Selection (only for creation) --> </button>
<div v-if="fieldDialogMode === 'create'">
<FieldTypeSelector
v-model="fieldForm.type"
/>
</div> </div>
<!-- Common Attributes --> <div class="p-6 space-y-6">
<div v-if="fieldForm.type"> <!-- Field Type Selection (only for creation) -->
<h3 class="text-lg font-semibold mb-4">Basic Properties</h3> <div v-if="fieldDialogMode === 'create'">
<FieldAttributesCommon <FieldTypeSelector
:label="fieldForm.label" v-model="fieldForm.type"
:api-name="fieldForm.apiName" />
:description="fieldForm.description" </div>
: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>
<!-- Type-Specific Attributes --> <!-- Common Attributes -->
<div v-if="fieldForm.type"> <div v-if="fieldForm.type">
<h3 class="text-lg font-semibold mb-4">Type-Specific Settings</h3> <h3 class="text-lg font-semibold mb-4">Basic Properties</h3>
<FieldAttributesType <FieldAttributesCommon
:field-type="fieldForm.type" :label="fieldForm.label"
:attributes="fieldForm.typeAttributes" :api-name="fieldForm.apiName"
@update="updateTypeAttributes" :description="fieldForm.description"
/> :placeholder="fieldForm.placeholder"
</div> :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 --> <!-- Type-Specific Attributes -->
<div v-if="(fieldForm.type === 'lookup' || fieldForm.type === 'belongsTo') && fieldDialogMode === 'create'"> <div v-if="fieldForm.type">
<h3 class="text-lg font-semibold mb-4">Related Object</h3> <h3 class="text-lg font-semibold mb-4">Type-Specific Settings</h3>
<div class="grid grid-cols-4 gap-4"> <FieldAttributesType
<label class="text-sm font-medium leading-8">Select Object</label> :field-type="fieldForm.type"
<div class="col-span-3"> :attributes="fieldForm.typeAttributes"
<select @update="updateTypeAttributes"
v-model="fieldForm.referenceObject" />
class="w-full px-3 py-2 border rounded-md text-sm" </div>
>
<option value="">-- Select an object --</option> <!-- Lookup Field Selection -->
<option <div v-if="(fieldForm.type === 'lookup' || fieldForm.type === 'belongsTo') && fieldDialogMode === 'create'">
v-for="obj in availableObjects" <h3 class="text-lg font-semibold mb-4">Related Object</h3>
:key="obj.id" <div class="grid grid-cols-4 gap-4">
:value="obj.apiName" <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 value="">-- Select an object --</option>
</option> <option
</select> v-for="obj in availableObjects"
:key="obj.id"
:value="obj.apiName"
>
{{ obj.label }} ({{ obj.apiName }})
</option>
</select>
</div>
</div> </div>
</div> </div>
</div>
<!-- Error Message --> <!-- Error Message -->
<div v-if="fieldDialogError" class="p-3 bg-red-100 text-red-800 rounded-md text-sm"> <div v-if="fieldDialogError" class="p-3 bg-red-100 text-red-800 rounded-md text-sm">
{{ fieldDialogError }} {{ fieldDialogError }}
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="flex gap-3 justify-end pt-4"> <div class="flex gap-3 justify-end pt-4">
<Button variant="outline" @click="closeFieldDialog"> <Button variant="outline" @click="closeFieldDialog">
Cancel Cancel
</Button> </Button>
<Button <Button
:disabled="!fieldForm.label || !fieldForm.apiName || !fieldForm.type" :disabled="!fieldForm.label || !fieldForm.apiName || !fieldForm.type"
@click="saveField" @click="saveField"
> >
{{ fieldDialogMode === 'create' ? 'Create Field' : 'Update Field' }} {{ fieldDialogMode === 'create' ? 'Create Field' : 'Update Field' }}
</Button> </Button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </Teleport>
</NuxtLayout> </NuxtLayout>
</div> </div>
</template> </template>