55 lines
1.8 KiB
Vue
55 lines
1.8 KiB
Vue
<template>
|
||
<div class="p-6">
|
||
<NuxtLink to="/students" class="text-blue-600 hover:underline mb-4 inline-block">← Back to Students</NuxtLink>
|
||
|
||
<div v-if="loading" class="text-gray-500">Loading student details...</div>
|
||
|
||
<div v-else-if="student" class="bg-white shadow-md p-6 rounded-lg">
|
||
<h2 class="text-2xl font-semibold mb-4">{{ student.name }}</h2>
|
||
|
||
<ul class="space-y-2 text-gray-700">
|
||
<li><strong>Email:</strong> {{ student.email }}</li>
|
||
<li><strong>Phone:</strong> {{ student.phone }}</li>
|
||
<li><strong>Date of Birth:</strong> {{ student.dob }}</li>
|
||
<li><strong>Gender:</strong> {{ student.gender }}</li>
|
||
<li><strong>Class:</strong> {{ student.class_id?.name || 'N/A' }}</li>
|
||
<li><strong>Section:</strong> {{ student.class_id?.section || 'N/A' }}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div v-else class="text-red-600">
|
||
Student not found.
|
||
</div>
|
||
<NuxtLink :to="`/students/${student.id}/edit`" class="text-blue-500 mt-4 block">✏️ Edit Student</NuxtLink>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useRoute } from 'vue-router'
|
||
import { ref, onMounted } from 'vue'
|
||
import { useDirectus } from '../../app/composables/useDirectus'
|
||
|
||
const route = useRoute()
|
||
const directus = useDirectus()
|
||
|
||
const student = ref(null)
|
||
const loading = ref(true)
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const { data } = await directus.items('students').readOne(route.params.id, {
|
||
fields: ['id', 'name', 'email', 'phone', 'dob', 'gender', 'class_id.name', 'class_id.section']
|
||
})
|
||
student.value = data
|
||
} catch (error) {
|
||
console.error('Error fetching student:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style>
|
||
|