68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-background">
|
|
<header class="border-b">
|
|
<div class="container mx-auto px-4 py-4">
|
|
<NuxtLink to="/" class="text-xl font-bold">Neo Platform</NuxtLink>
|
|
</div>
|
|
</header>
|
|
<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="record">
|
|
<div class="mb-6">
|
|
<NuxtLink
|
|
:to="`/app/${appSlug}/${pageSlug}`"
|
|
class="text-sm text-primary hover:underline"
|
|
>
|
|
← Back to List
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<h1 class="text-3xl font-bold mb-6">{{ record.name || 'Record Detail' }}</h1>
|
|
|
|
<div class="space-y-4">
|
|
<div v-for="(value, key) in record" :key="key" class="border-b pb-2">
|
|
<div class="text-sm text-muted-foreground">{{ key }}</div>
|
|
<div class="font-medium">{{ value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const { api } = useApi()
|
|
|
|
const appSlug = computed(() => route.params.appSlug as string)
|
|
const pageSlug = computed(() => route.params.pageSlug as string)
|
|
const recordId = computed(() => route.params.recordId as string)
|
|
|
|
const record = ref<any>(null)
|
|
const loading = ref(true)
|
|
const error = ref<string | null>(null)
|
|
const objectApiName = ref('')
|
|
|
|
const fetchRecord = async () => {
|
|
try {
|
|
loading.value = true
|
|
|
|
// First get page metadata to know which object this is
|
|
const page = await api.get(`/runtime/apps/${appSlug.value}/pages/${pageSlug.value}`)
|
|
objectApiName.value = page.objectApiName
|
|
|
|
// Then fetch the record
|
|
record.value = await api.get(`/runtime/objects/${objectApiName.value}/records/${recordId.value}`)
|
|
} catch (e: any) {
|
|
error.value = e.message
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchRecord()
|
|
})
|
|
</script>
|