feat(setting): implémenter la suppression d'une ContentSource
- Ajoute DeleteContentSourceCommand + CommandHandler (CQRS)
- Expose DELETE /api/content-sources/{id} via API Platform (Resource, Provider, Processor)
- Ajoute 2 tests Feature (204 succès, 404 not found)
- Frontend : méthode delete() dans le repository, action deleteSource() dans le store
- Nouveau composant ContentSourceDeleteModal (modale de confirmation)
- Bouton Supprimer dans la toolbar de ScrapperEdit (visible en mode édition uniquement)
This commit is contained in:
parent
36f873aaca
commit
fc4ab68e8b
@@ -28,6 +28,10 @@ export const useContentSourceStore = defineStore('contentSource', {
|
||||
// Health check state
|
||||
checkingHealth: false,
|
||||
checkHealthError: null,
|
||||
|
||||
// Delete state
|
||||
deleting: false,
|
||||
deleteError: null,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
@@ -172,6 +176,28 @@ export const useContentSourceStore = defineStore('contentSource', {
|
||||
}
|
||||
},
|
||||
|
||||
// Delete a source
|
||||
async deleteSource(id) {
|
||||
if (this.deleting) return;
|
||||
|
||||
this.deleting = true;
|
||||
this.deleteError = null;
|
||||
|
||||
try {
|
||||
await contentSourceRepository.delete(id);
|
||||
this.sources = this.sources.filter(source => source.id !== id);
|
||||
if (this.currentSource && this.currentSource.id === id) {
|
||||
this.currentSource = null;
|
||||
}
|
||||
} catch (error) {
|
||||
this.deleteError = error.message;
|
||||
console.error('Erreur lors de la suppression de la source:', error);
|
||||
throw error;
|
||||
} finally {
|
||||
this.deleting = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Clear current source
|
||||
clearCurrentSource() {
|
||||
this.currentSource = null;
|
||||
|
||||
@@ -93,6 +93,17 @@ export class ApiContentSourceRepository {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Supprime une source de contenu
|
||||
*/
|
||||
async delete(id) {
|
||||
try {
|
||||
await this.apiClient.delete(`/content-sources/${id}`);
|
||||
} catch (error) {
|
||||
throw new Error(error.response?.data?.message || 'Erreur lors de la suppression de la source');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Teste une configuration de scraper
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<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 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 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 dark:bg-gray-800 px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div class="mb-6">
|
||||
<DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">
|
||||
Supprimer la source de contenu
|
||||
</DialogTitle>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-if="error" class="mb-6 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Warning message -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<ExclamationTriangleIcon class="h-6 w-6 text-red-500 mr-3" />
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">Action irréversible</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Êtes-vous sûr de vouloir supprimer la source <strong>{{ source?.baseUrl }}</strong> ?
|
||||
</p>
|
||||
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-md p-4">
|
||||
<div class="flex">
|
||||
<ExclamationTriangleIcon class="h-5 w-5 text-yellow-400" />
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">
|
||||
Attention
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
|
||||
<p>Cette source ne pourra plus être utilisée pour le scraping des chapitres.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="mt-6 flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
@click="closeModal"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
@click="confirmDelete"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<ArrowPathIcon v-if="isLoading" class="h-4 w-4 mr-2 animate-spin" />
|
||||
{{ isLoading ? 'Suppression...' : 'Supprimer définitivement' }}
|
||||
</button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
|
||||
import { ArrowPathIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/outline';
|
||||
|
||||
const props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
source: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
error: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'confirm']);
|
||||
|
||||
const closeModal = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
emit('confirm');
|
||||
};
|
||||
</script>
|
||||
@@ -176,6 +176,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Modal -->
|
||||
<ContentSourceDeleteModal
|
||||
:is-open="isDeleteModalOpen"
|
||||
:source="currentSource"
|
||||
:is-loading="isDeleting"
|
||||
:error="deleteError"
|
||||
@close="isDeleteModalOpen = false"
|
||||
@confirm="confirmDeleteSource" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -185,6 +194,7 @@ import {
|
||||
CheckCircleIcon,
|
||||
ExclamationTriangleIcon,
|
||||
PencilSquareIcon,
|
||||
TrashIcon,
|
||||
XCircleIcon,
|
||||
XMarkIcon
|
||||
} from '@heroicons/vue/24/outline';
|
||||
@@ -194,6 +204,7 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
|
||||
import { useContentSourceStore } from '../../application/store/contentSourceStore';
|
||||
import { ApiContentSourceRepository } from '../../infrastructure/api/apiContentSourceRepository';
|
||||
import ContentSourceDeleteModal from '../components/ContentSourceDeleteModal.vue';
|
||||
import ContentSourceForm from '../components/ContentSourceForm.vue';
|
||||
|
||||
const route = useRoute();
|
||||
@@ -217,6 +228,9 @@ const showTestResults = ref(false);
|
||||
const showSuccessMessage = ref(false);
|
||||
const testResults = ref({});
|
||||
const testingConfiguration = ref(false);
|
||||
const isDeleteModalOpen = ref(false);
|
||||
const isDeleting = ref(false);
|
||||
const deleteError = ref(null);
|
||||
|
||||
const isEditing = computed(() => !!route.params.id);
|
||||
|
||||
@@ -238,6 +252,7 @@ const toolbarConfig = computed(() => ({
|
||||
{ type: 'label', text: isEditing.value ? 'Modifier la configuration' : 'Nouvelle configuration', class: 'text-sm font-medium' },
|
||||
],
|
||||
rightSection: [
|
||||
...(isEditing.value ? [{ type: 'button', icon: TrashIcon, label: 'Supprimer', onClick: () => { isDeleteModalOpen.value = true; }, class: 'text-red-600 hover:text-red-700' }, { type: 'divider' }] : []),
|
||||
{ type: 'button', icon: PencilSquareIcon, label: isEditing.value ? 'Mettre à jour' : 'Créer', onClick: () => formRef.value?.submitForm(), disabled: saving.value },
|
||||
],
|
||||
}));
|
||||
@@ -328,6 +343,21 @@ const handleImageLoad = (event) => {
|
||||
event.target.style.display = 'block';
|
||||
};
|
||||
|
||||
const confirmDeleteSource = async () => {
|
||||
isDeleting.value = true;
|
||||
deleteError.value = null;
|
||||
|
||||
try {
|
||||
await contentSourceStore.deleteSource(route.params.id);
|
||||
isDeleteModalOpen.value = false;
|
||||
await router.push({ name: 'scrapper-configurations' });
|
||||
} catch (error) {
|
||||
deleteError.value = error.message;
|
||||
} finally {
|
||||
isDeleting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const formatErrorType = (type) => {
|
||||
const typeMap = {
|
||||
'selector_error': 'Erreur sélecteur',
|
||||
|
||||
Reference in New Issue
Block a user