172 lines
8.2 KiB
Vue
172 lines
8.2 KiB
Vue
<script setup>
|
|
import AdminLayout from '@/Layouts/AdminLayout.vue';
|
|
import { Head, useForm, Link, usePage, router } from '@inertiajs/vue3';
|
|
import { ref, computed } from 'vue';
|
|
import Modal from '@/Components/Modal.vue';
|
|
import InputLabel from '@/Components/InputLabel.vue';
|
|
import TextInput from '@/Components/TextInput.vue';
|
|
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
|
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
|
import DangerButton from '@/Components/DangerButton.vue';
|
|
import InputError from '@/Components/InputError.vue';
|
|
|
|
const props = defineProps({
|
|
quizzes: Array
|
|
});
|
|
|
|
const page = usePage();
|
|
const flashSuccess = computed(() => page.props.flash?.success);
|
|
|
|
const isModalOpen = ref(false);
|
|
const editingQuiz = ref(null);
|
|
|
|
const form = useForm({
|
|
title: '',
|
|
description: '',
|
|
duration_minutes: 60,
|
|
});
|
|
|
|
const openEditModal = (quiz) => {
|
|
editingQuiz.value = quiz;
|
|
form.title = quiz.title;
|
|
form.description = quiz.description;
|
|
form.duration_minutes = quiz.duration_minutes;
|
|
isModalOpen.value = true;
|
|
};
|
|
|
|
const deleteQuiz = (id) => {
|
|
if (confirm('Voulez-vous vraiment supprimer ce quiz ? Toutes les questions et tentatives associées seront supprimées.')) {
|
|
router.delete(route('admin.quizzes.destroy', id));
|
|
}
|
|
};
|
|
|
|
const closeModal = () => {
|
|
isModalOpen.value = false;
|
|
editingQuiz.value = null;
|
|
form.reset();
|
|
};
|
|
|
|
const submit = () => {
|
|
if (editingQuiz.value) {
|
|
form.put(route('admin.quizzes.update', editingQuiz.value.id), {
|
|
onSuccess: () => closeModal(),
|
|
});
|
|
} else {
|
|
form.post(route('admin.quizzes.store'), {
|
|
onSuccess: () => closeModal(),
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Gestion des Quiz" />
|
|
|
|
<AdminLayout>
|
|
<template #header>
|
|
Gestion des Quiz
|
|
</template>
|
|
|
|
<!-- Flash Messages -->
|
|
<div v-if="flashSuccess" class="mb-8 p-6 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-2xl flex items-center gap-4 animate-in fade-in slide-in-from-top-4 duration-500">
|
|
<div class="p-2 bg-emerald-500 rounded-lg text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-emerald-800 dark:text-emerald-400">Succès !</p>
|
|
<p class="text-emerald-700 dark:text-emerald-500 text-sm">{{ flashSuccess }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h3 class="text-2xl font-bold">Liste des Quiz</h3>
|
|
<PrimaryButton @click="isModalOpen = true">
|
|
Créer un Quiz
|
|
</PrimaryButton>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div v-for="quiz in quizzes" :key="quiz.id" class="bg-white dark:bg-slate-800 rounded-3xl shadow-sm border border-slate-200 dark:border-slate-700 flex flex-col h-full group hover:shadow-xl transition-all duration-300">
|
|
<div class="p-8 pb-4">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<h4 class="text-xl font-bold text-slate-900 dark:text-slate-100 group-hover:text-indigo-600 transition-colors">{{ quiz.title }}</h4>
|
|
<span class="px-3 py-1 bg-indigo-50 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400 text-[10px] font-black uppercase tracking-widest rounded-full">
|
|
{{ quiz.duration_minutes }} min
|
|
</span>
|
|
</div>
|
|
<p class="text-slate-500 dark:text-slate-400 text-sm line-clamp-3">
|
|
{{ quiz.description || 'Aucune description' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-auto p-4 bg-slate-50/50 dark:bg-slate-900/30 border-t border-slate-100 dark:border-slate-800 flex justify-between items-center rounded-b-3xl">
|
|
<Link :href="route('admin.quizzes.show', quiz.id)" class="px-4 py-2 text-indigo-600 dark:text-indigo-400 font-bold text-xs uppercase tracking-widest hover:text-indigo-900 dark:hover:text-white transition-colors">
|
|
Questions
|
|
</Link>
|
|
<div class="flex items-center gap-1">
|
|
<button @click="openEditModal(quiz)" class="p-2 text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-xl transition-colors" title="Modifier">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
</button>
|
|
<button @click="deleteQuiz(quiz.id)" class="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors" title="Supprimer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="quizzes.length === 0" class="col-span-full py-12 text-center text-slate-500 italic">
|
|
Aucun quiz créé.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quiz Modal (Create/Edit) -->
|
|
<Modal :show="isModalOpen" @close="closeModal">
|
|
<div class="p-8">
|
|
<h3 class="text-2xl font-black uppercase tracking-tight mb-8">
|
|
{{ editingQuiz ? 'Modifier le Quiz' : 'Créer un nouveau Quiz' }}
|
|
</h3>
|
|
|
|
<form @submit.prevent="submit" class="space-y-6">
|
|
<div>
|
|
<InputLabel for="title" value="Titre du Quiz" />
|
|
<TextInput id="title" type="text" class="mt-1 block w-full" v-model="form.title" required />
|
|
<InputError class="mt-2" :message="form.errors.title" />
|
|
</div>
|
|
|
|
<div>
|
|
<InputLabel for="description" value="Description" />
|
|
<textarea
|
|
id="description"
|
|
class="mt-1 block w-full border-slate-300 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
|
|
rows="3"
|
|
v-model="form.description"
|
|
></textarea>
|
|
<InputError class="mt-2" :message="form.errors.description" />
|
|
</div>
|
|
|
|
<div>
|
|
<InputLabel for="duration" value="Durée (minutes)" />
|
|
<TextInput id="duration" type="number" class="mt-1 block w-full" v-model="form.duration_minutes" required />
|
|
<InputError class="mt-2" :message="form.errors.duration_minutes" />
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 mt-8">
|
|
<SecondaryButton @click="isModalOpen = false" :disabled="form.processing">
|
|
Annuler
|
|
</SecondaryButton>
|
|
<PrimaryButton :disabled="form.processing">
|
|
{{ editingQuiz ? 'Modifier Quiz' : 'Créer Quiz' }}
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
</AdminLayout>
|
|
</template>
|