82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<div class="bg-white p-4 rounded-lg shadow-md">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Attendance List</h2>
|
|
|
|
<table class="min-w-full table-auto border-collapse">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-2 text-left border-b">Student Name</th>
|
|
<th class="px-4 py-2 text-left border-b">Attendance Status</th>
|
|
<th class="px-4 py-2 text-left border-b">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="student in students" :key="student.id">
|
|
<td class="px-4 py-2 border-b">{{ student.name }}</td>
|
|
<td class="px-4 py-2 border-b">
|
|
<span
|
|
:class="{
|
|
'bg-green-100 text-green-700': student.attendanceStatus === 'present',
|
|
'bg-red-100 text-red-700': student.attendanceStatus === 'absent',
|
|
}"
|
|
class="px-3 py-1 rounded-full text-xs font-medium"
|
|
>
|
|
{{ capitalize(student.attendanceStatus) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-2 border-b">
|
|
<button
|
|
@click="toggleAttendance(student)"
|
|
class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
|
|
>
|
|
Toggle Status
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from 'vue'
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
students: Array, // Array of student objects passed down to the component
|
|
})
|
|
|
|
// Toggle Attendance Status (Helper function)
|
|
const toggleAttendance = (student) => {
|
|
student.attendanceStatus = student.attendanceStatus === 'present' ? 'absent' : 'present'
|
|
}
|
|
|
|
// Capitalize Attendance Status
|
|
const capitalize = (text) => {
|
|
return text.charAt(0).toUpperCase() + text.slice(1)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
table {
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
th {
|
|
background-color: #f7fafc;
|
|
color: #2d3748;
|
|
text-align: left;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #f1f1f1;
|
|
}
|
|
</style>
|
|
|