192 lines
9.1 KiB
Vue
192 lines
9.1 KiB
Vue
<template>
|
|
<TransitionRoot as="template" :show="isOpen">
|
|
<Dialog as="div" class="relative z-50" @close="closeModal">
|
|
<TransitionChild
|
|
as="template"
|
|
enter="ease-out duration-300"
|
|
enter-from="opacity-0"
|
|
enter-to="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
>
|
|
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
</TransitionChild>
|
|
|
|
<div class="fixed inset-0 z-10 overflow-y-auto">
|
|
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
<TransitionChild
|
|
as="template"
|
|
enter="ease-out duration-300"
|
|
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
enter-to="opacity-100 translate-y-0 sm:scale-100"
|
|
leave="ease-in duration-200"
|
|
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
|
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
>
|
|
<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
|
|
<div>
|
|
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
|
|
<Cog6ToothIcon class="h-6 w-6 text-blue-600" aria-hidden="true" />
|
|
</div>
|
|
<div class="mt-3 text-center sm:mt-5">
|
|
<DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
|
|
Sources préférées
|
|
</DialogTitle>
|
|
<div class="mt-2">
|
|
<p class="text-sm text-gray-500">
|
|
Configurez l'ordre de priorité des sources pour ce manga. Les sources en haut de la liste seront privilégiées.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading state -->
|
|
<div v-if="isLoading" class="mt-5 flex justify-center items-center py-8">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
|
|
<!-- Error state -->
|
|
<div v-else-if="error" class="mt-5 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
|
{{ error.message || 'Une erreur est survenue lors du chargement des sources.' }}
|
|
</div>
|
|
|
|
<!-- Sources list -->
|
|
<div v-else class="mt-5">
|
|
<div v-if="localSources.length === 0" class="text-center py-8 text-gray-500">
|
|
Aucune source disponible
|
|
</div>
|
|
<div v-else class="space-y-2">
|
|
<div
|
|
v-for="(source, index) in localSources"
|
|
:key="source.id"
|
|
class="flex items-center p-3 bg-gray-50 rounded-lg border border-gray-200"
|
|
>
|
|
<div class="flex items-center space-x-2 mr-3">
|
|
<button
|
|
type="button"
|
|
class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50"
|
|
:disabled="index === 0"
|
|
@click="moveUp(index)"
|
|
>
|
|
<ChevronUpIcon class="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50"
|
|
:disabled="index === localSources.length - 1"
|
|
@click="moveDown(index)"
|
|
>
|
|
<ChevronDownIcon class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-medium text-gray-900">{{ source.name }}</div>
|
|
<div class="text-sm text-gray-500">{{ source.description || source.baseUrl }}</div>
|
|
</div>
|
|
<div class="text-sm text-gray-400">
|
|
Priorité {{ index + 1 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
|
|
<button
|
|
type="button"
|
|
class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 sm:col-start-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
:disabled="isSaving || isLoading"
|
|
@click="saveChanges"
|
|
>
|
|
<div v-if="isSaving" class="flex items-center">
|
|
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
|
Sauvegarde...
|
|
</div>
|
|
<span v-else>Sauvegarder</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
|
|
@click="closeModal"
|
|
:disabled="isSaving"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
|
|
import { ChevronDownIcon, ChevronUpIcon, Cog6ToothIcon } from '@heroicons/vue/24/outline';
|
|
import { ref, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
isOpen: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
sources: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
isLoading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
error: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
isSaving: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['close', 'save']);
|
|
|
|
// Copie locale des sources pour le drag & drop
|
|
const localSources = ref([]);
|
|
|
|
// Watcher pour mettre à jour la copie locale quand les props changent
|
|
watch(
|
|
() => props.sources,
|
|
(newSources) => {
|
|
localSources.value = [...newSources];
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
|
|
const closeModal = () => {
|
|
emit('close');
|
|
};
|
|
|
|
const moveUp = (index) => {
|
|
if (index > 0) {
|
|
const sources = [...localSources.value];
|
|
[sources[index - 1], sources[index]] = [sources[index], sources[index - 1]];
|
|
localSources.value = sources;
|
|
}
|
|
};
|
|
|
|
const moveDown = (index) => {
|
|
if (index < localSources.value.length - 1) {
|
|
const sources = [...localSources.value];
|
|
[sources[index], sources[index + 1]] = [sources[index + 1], sources[index]];
|
|
localSources.value = sources;
|
|
}
|
|
};
|
|
|
|
const saveChanges = () => {
|
|
// Extraire seulement les IDs dans l'ordre actuel
|
|
const sourceIds = localSources.value.map(source => source.id);
|
|
emit('save', sourceIds);
|
|
};
|
|
</script>
|