55 lines
1.8 KiB
Vue
55 lines
1.8 KiB
Vue
<template>
|
|
<div class="p-6 max-w-3xl mx-auto">
|
|
<h2 class="text-2xl font-bold mb-6">📄 Student Profile</h2>
|
|
|
|
<div v-if="student" class="bg-white p-6 rounded shadow-md space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div><strong>Name:</strong> {{ student.name }}</div>
|
|
<div><strong>Email:</strong> {{ student.email }}</div>
|
|
<div><strong>Phone:</strong> {{ student.phone }}</div>
|
|
<div><strong>Date of Birth:</strong> {{ formatDate(student.dob) }}</div>
|
|
<div><strong>Gender:</strong> {{ student.gender }}</div>
|
|
<div>
|
|
<strong>Class:</strong>
|
|
{{ student.class_id?.name }} - {{ student.class_id?.section }}
|
|
</div>
|
|
</div>
|
|
|
|
<NuxtLink :to="`/students/edit?id=${student.id}`" class="inline-block mt-4 bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">
|
|
✏️ Edit Profile
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div v-else class="text-gray-500">Loading student profile...</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useDirectus } from '../../app/composables/useDirectus'
|
|
|
|
const route = useRoute()
|
|
const directus = useDirectus()
|
|
const student = ref(null)
|
|
|
|
const fetchStudent = async () => {
|
|
try {
|
|
const studentId = route.query.id
|
|
const data = await directus.items('students').readOne(studentId, {
|
|
fields: ['*', 'class_id.name', 'class_id.section']
|
|
})
|
|
student.value = data
|
|
} catch (err) {
|
|
console.error('Failed to load student profile:', err)
|
|
}
|
|
}
|
|
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr) return '-'
|
|
return new Date(dateStr).toLocaleDateString()
|
|
}
|
|
|
|
onMounted(fetchStudent)
|
|
</script>
|
|
|