61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<template>
|
|
<div class="p-6">
|
|
<h2 class="text-2xl font-bold mb-6">🏫 Classes List</h2>
|
|
|
|
<div v-if="loading" class="text-gray-500">Loading classes...</div>
|
|
|
|
<div v-else-if="classes.length">
|
|
<table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="text-left px-4 py-2">#</th>
|
|
<th class="text-left px-4 py-2">Class Name</th>
|
|
<th class="text-left px-4 py-2">Section</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(cls, index) in classes" :key="cls.id" class="border-t">
|
|
<td class="px-4 py-2">{{ index + 1 }}</td>
|
|
<td class="px-4 py-2">{{ cls.name }}</td>
|
|
<td class="px-4 py-2">{{ cls.section }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div v-else class="text-gray-500 mt-4">No classes found.</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useDirectus } from '../../app/composables/useDirectus'
|
|
|
|
const directus = useDirectus()
|
|
const classes = ref([])
|
|
const loading = ref(true)
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const { data } = await directus.items('classes').readByQuery({
|
|
fields: ['id', 'name', 'section'],
|
|
sort: ['name']
|
|
})
|
|
classes.value = data
|
|
} catch (err) {
|
|
console.error('Error loading classes:', err)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
th, td {
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
</style>
|
|
|