40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
<template>
|
|
<div class="p-4">
|
|
<h2 class="text-xl font-bold mb-4">Add New Class</h2>
|
|
<form @submit.prevent="addClass" class="space-y-4">
|
|
<div>
|
|
<label class="block mb-1">Class Name</label>
|
|
<input v-model="newClass.name" class="border p-2 w-full" required />
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1">Section</label>
|
|
<input v-model="newClass.section" class="border p-2 w-full" required />
|
|
</div>
|
|
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Add Class</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useDirectus } from '../../app/composables/useDirectus'
|
|
|
|
const { createItem } = useDirectus()
|
|
|
|
const newClass = ref({
|
|
name: '',
|
|
section: '',
|
|
})
|
|
|
|
const addClass = async () => {
|
|
try {
|
|
await createItem('classes', newClass.value)
|
|
alert('Class added successfully!')
|
|
newClass.value = { name: '', section: '' }
|
|
} catch (err) {
|
|
alert('Failed to add class.')
|
|
console.error(err)
|
|
}
|
|
}
|
|
</script>
|
|
|