diff --git a/static/js/components/DuplicatesManager.js b/static/js/components/DuplicatesManager.js index 63713e4b..66fa1f33 100644 --- a/static/js/components/DuplicatesManager.js +++ b/static/js/components/DuplicatesManager.js @@ -335,13 +335,28 @@ export class DuplicatesManager { } try { - // Show confirmation dialog - if (!confirm(`Are you sure you want to delete ${this.selectedForDeletion.size} selected recipes?`)) { - return; + // Show the delete confirmation modal instead of a simple confirm + const duplicateDeleteCount = document.getElementById('duplicateDeleteCount'); + if (duplicateDeleteCount) { + duplicateDeleteCount.textContent = this.selectedForDeletion.size; } + // Use the modal manager to show the confirmation modal + modalManager.showModal('duplicateDeleteModal'); + } catch (error) { + console.error('Error preparing delete:', error); + showToast('Error: ' + error.message, 'error'); + } + } + + // Add new method to execute deletion after confirmation + async confirmDeleteDuplicates() { + try { document.body.classList.add('loading'); + // Close the modal + modalManager.closeModal('duplicateDeleteModal'); + // Prepare recipe IDs for deletion const recipeIds = Array.from(this.selectedForDeletion); diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js index 8b1d5b6d..3b21c78f 100644 --- a/static/js/managers/ModalManager.js +++ b/static/js/managers/ModalManager.js @@ -158,6 +158,18 @@ export class ModalManager { }); } + // Add duplicateDeleteModal registration + const duplicateDeleteModal = document.getElementById('duplicateDeleteModal'); + if (duplicateDeleteModal) { + this.registerModal('duplicateDeleteModal', { + element: duplicateDeleteModal, + onClose: () => { + this.getModal('duplicateDeleteModal').element.classList.remove('show'); + document.body.classList.remove('modal-open'); + } + }); + } + // Set up event listeners for modal toggles const supportToggle = document.getElementById('supportToggleBtn'); if (supportToggle) { @@ -221,7 +233,7 @@ export class ModalManager { // Store current scroll position before showing modal this.scrollPosition = window.scrollY; - if (id === 'deleteModal' || id === 'excludeModal') { + if (id === 'deleteModal' || id === 'excludeModal' || id === 'duplicateDeleteModal') { modal.element.classList.add('show'); } else { modal.element.style.display = 'block'; diff --git a/static/js/recipes.js b/static/js/recipes.js index 0bca2aca..8dc6dc80 100644 --- a/static/js/recipes.js +++ b/static/js/recipes.js @@ -390,6 +390,10 @@ class RecipeManager { deleteSelectedDuplicates() { this.duplicatesManager.deleteSelectedDuplicates(); } + + confirmDeleteDuplicates() { + this.duplicatesManager.confirmDeleteDuplicates(); + } exitDuplicateMode() { this.duplicatesManager.exitDuplicateMode(); diff --git a/templates/components/modals.html b/templates/components/modals.html index 0f822086..d046a27d 100644 --- a/templates/components/modals.html +++ b/templates/components/modals.html @@ -24,6 +24,21 @@ + +