97 lines
3.5 KiB
Vue
97 lines
3.5 KiB
Vue
<template>
|
|
<div class="overflow-x-auto bg-white p-4 rounded-lg shadow-md">
|
|
<table class="min-w-full table-auto">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">ID</th>
|
|
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Name</th>
|
|
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Email</th>
|
|
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Phone</th>
|
|
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Class</th>
|
|
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Loop through the students data -->
|
|
<tr v-for="student in students" :key="student.id" class="border-b hover:bg-gray-50">
|
|
<td class="px-4 py-2 text-sm text-gray-700">{{ student.id }}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-700">{{ student.name }}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-700">{{ student.email }}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-700">{{ student.phone }}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-700">{{ student.class_name }}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-700">
|
|
<button @click="editStudent(student.id)" class="text-blue-500 hover:underline">Edit</button>
|
|
<button @click="deleteStudent(student.id)" class="text-red-500 hover:underline ml-4">Delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<pagination :current-page="currentPage" :total-pages="totalPages" @page-changed="changePage" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import Pagination from '@/components/ui/Pagination.vue'
|
|
|
|
// Data for students (this will typically come from an API)
|
|
const students = ref([
|
|
{ id: 1, name: 'John Doe', email: 'john@example.com', phone: '123-456-7890', class_name: '10A' },
|
|
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', phone: '987-654-3210', class_name: '10B' },
|
|
{ id: 3, name: 'Mary Johnson', email: 'mary@example.com', phone: '555-666-7777', class_name: '11A' },
|
|
// Add more students as needed
|
|
])
|
|
|
|
// Pagination state
|
|
const currentPage = ref(1)
|
|
const totalPages = computed(() => Math.ceil(students.value.length / 10)) // Assuming 10 students per page
|
|
|
|
// Change page handler
|
|
const changePage = (newPage) => {
|
|
currentPage.value = newPage
|
|
// Here you can implement pagination logic to fetch data for the selected page
|
|
}
|
|
|
|
// Edit student handler
|
|
const editStudent = (id) => {
|
|
console.log('Edit student with ID:', id)
|
|
// You can redirect to an edit page or open a modal for editing
|
|
// For example: router.push({ name: 'edit-student', params: { id } })
|
|
}
|
|
|
|
// Delete student handler
|
|
const deleteStudent = (id) => {
|
|
console.log('Delete student with ID:', id)
|
|
// Implement delete logic here (e.g., API call to delete the student)
|
|
// After deletion, you can filter out the student from the list
|
|
students.value = students.value.filter((student) => student.id !== id)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
th {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
button:hover {
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|
|
|