106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<template>
|
||
<div class="bg-white p-6 rounded-lg shadow-md max-w-lg mx-auto">
|
||
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Record Attendance</h2>
|
||
|
||
<form @submit.prevent="submitForm">
|
||
<!-- Select Student -->
|
||
<div class="mb-4">
|
||
<label for="student" class="block text-sm font-medium text-gray-700">Select Student</label>
|
||
<select
|
||
v-model="attendance.studentId"
|
||
id="student"
|
||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
|
||
required
|
||
>
|
||
<option disabled value="">Select a Student</option>
|
||
<option v-for="student in students" :key="student.id" :value="student.id">
|
||
{{ student.name }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Select Attendance Status -->
|
||
<div class="mb-4">
|
||
<label for="status" class="block text-sm font-medium text-gray-700">Attendance Status</label>
|
||
<select
|
||
v-model="attendance.status"
|
||
id="status"
|
||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
|
||
required
|
||
>
|
||
<option value="present">Present</option>
|
||
<option value="absent">Absent</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Date Input -->
|
||
<div class="mb-4">
|
||
<label for="date" class="block text-sm font-medium text-gray-700">Date</label>
|
||
<input
|
||
v-model="attendance.date"
|
||
type="date"
|
||
id="date"
|
||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<!-- Submit Button -->
|
||
<div class="flex justify-end">
|
||
<button
|
||
type="submit"
|
||
class="px-6 py-2 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
|
||
>
|
||
Record Attendance
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
// Props: Array of students passed to the component
|
||
const props = defineProps({
|
||
students: Array, // List of student objects { id, name }
|
||
})
|
||
|
||
// Data model for attendance form
|
||
const attendance = ref({
|
||
studentId: '',
|
||
status: 'present',
|
||
date: new Date().toISOString().split('T')[0], // Set default to today’s date
|
||
})
|
||
|
||
// Handle form submission
|
||
const submitForm = () => {
|
||
// This function should handle submitting the attendance data
|
||
// You can make an API call or handle logic here
|
||
console.log('Form Submitted:', attendance.value)
|
||
|
||
// Reset the form after submission
|
||
attendance.value = {
|
||
studentId: '',
|
||
status: 'present',
|
||
date: new Date().toISOString().split('T')[0],
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
form {
|
||
max-width: 500px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
label {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
input,
|
||
select {
|
||
font-size: 1rem;
|
||
}
|
||
</style>
|
||
|