99 lines
3.0 KiB
Vue
99 lines
3.0 KiB
Vue
<template>
|
|
<div class="bg-white p-6 rounded-lg shadow-md max-w-2xl mx-auto">
|
|
<h2 class="text-2xl font-semibold text-gray-700 mb-4">
|
|
Student Details: {{ student.name }}
|
|
</h2>
|
|
|
|
<!-- Student Info -->
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between">
|
|
<div class="font-medium text-gray-600">Name:</div>
|
|
<div class="text-gray-800">{{ student.name }}</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<div class="font-medium text-gray-600">Email:</div>
|
|
<div class="text-gray-800">{{ student.email }}</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<div class="font-medium text-gray-600">Phone:</div>
|
|
<div class="text-gray-800">{{ student.phone }}</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<div class="font-medium text-gray-600">Date of Birth:</div>
|
|
<div class="text-gray-800">{{ formatDate(student.dob) }}</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<div class="font-medium text-gray-600">Gender:</div>
|
|
<div class="text-gray-800">{{ capitalize(student.gender) }}</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<div class="font-medium text-gray-600">Class:</div>
|
|
<div class="text-gray-800">{{ student.class.name }} - {{ student.class.section }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Attendance Info -->
|
|
<div class="mt-6">
|
|
<h3 class="text-xl font-semibold text-gray-700 mb-4">Attendance Records</h3>
|
|
|
|
<div class="space-y-2">
|
|
<div v-for="attendance in student.attendance" :key="attendance.id" class="flex justify-between">
|
|
<div class="font-medium text-gray-600">{{ formatDate(attendance.date) }}:</div>
|
|
<div class="text-gray-800">{{ attendance.status === 'present' ? 'Present' : 'Absent' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Button -->
|
|
<div class="mt-6">
|
|
<NuxtLink
|
|
:to="`/students/edit/${student.id}`"
|
|
class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
|
|
>
|
|
Edit Student
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from 'vue'
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
student: Object, // The student object containing all the details
|
|
})
|
|
|
|
// Format Date (Helper function)
|
|
const formatDate = (date) => {
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric' }
|
|
return new Date(date).toLocaleDateString(undefined, options)
|
|
}
|
|
|
|
// Capitalize first letter of gender
|
|
const capitalize = (text) => {
|
|
return text.charAt(0).toUpperCase() + text.slice(1)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Style the details section */
|
|
h2 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|
|
|