WIP - Fix create field dialog placement and look up field creation
This commit is contained in:
Francisco Gaona
@@ -394,6 +394,7 @@ export class ObjectService {
|
||||
'url': 'URL',
|
||||
'color': 'TEXT',
|
||||
'json': 'JSON',
|
||||
'lookup': 'LOOKUP',
|
||||
'belongsTo': 'LOOKUP',
|
||||
'hasMany': 'LOOKUP',
|
||||
'manyToMany': 'LOOKUP',
|
||||
|
||||
@@ -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<{
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user