79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-background">
|
|
<NuxtLayout name="default">
|
|
<main class="container mx-auto px-4 py-8">
|
|
<div v-if="loading" class="text-center py-12">Loading...</div>
|
|
<div v-else-if="error" class="text-destructive">Error: {{ error }}</div>
|
|
<div v-else-if="object">
|
|
<div class="mb-6">
|
|
<NuxtLink to="/setup/objects" class="text-sm text-primary hover:underline">
|
|
← Back to Objects
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<h1 class="text-3xl font-bold mb-6">{{ object.label }}</h1>
|
|
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-semibold mb-4">Fields</h2>
|
|
<div class="space-y-2">
|
|
<div
|
|
v-for="field in object.fields"
|
|
:key="field.id"
|
|
class="p-4 border rounded-lg bg-card"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="font-semibold">{{ field.label }}</h3>
|
|
<p class="text-sm text-muted-foreground">
|
|
Type: {{ field.type }} | API Name: {{ field.apiName }}
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2 text-xs">
|
|
<span
|
|
v-if="field.isRequired"
|
|
class="px-2 py-1 bg-destructive/10 text-destructive rounded"
|
|
>
|
|
Required
|
|
</span>
|
|
<span
|
|
v-if="field.isUnique"
|
|
class="px-2 py-1 bg-primary/10 text-primary rounded"
|
|
>
|
|
Unique
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</NuxtLayout>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const { api } = useApi()
|
|
|
|
const object = ref<any>(null)
|
|
const loading = ref(true)
|
|
const error = ref<string | null>(null)
|
|
|
|
const fetchObject = async () => {
|
|
try {
|
|
loading.value = true
|
|
const apiName = route.params.apiName as string
|
|
object.value = await api.get(`/setup/objects/${apiName}`)
|
|
} catch (e: any) {
|
|
error.value = e.message
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchObject()
|
|
})
|
|
</script>
|