WIP - Fix create field dialog placement and look up field creation
This commit is contained in:
@@ -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',
|
||||||
|
|||||||
@@ -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<{
|
||||||
|
|||||||
@@ -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,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user