feat(RecipeDetail): implementada funcionalidad para eliminar recetas con un modal

src/views/RecipeDetail.vue

@@ -7,14 +7,14 @@
                         <div class="d-flex justify-content-between align-items-center mb-4">
                         <div class="d-flex justify-content-between align-items-center mb-4">
                             <span v-if="recipe.favorite" 
                             <span v-if="recipe.favorite" 
                                     class="badge badge-custom px-3 py-2 shadow-sm">
                                     class="badge badge-custom px-3 py-2 shadow-sm">
-                                <i class="bi bi-heart-fill"></i> Favorita
+                                <i class="bi bi-heart-fill me-2"></i> Favorita
                             </span>
                             </span>
 
 
                             <div v-if="mode === 'view'" class="d-flex gap-2">
                             <div v-if="mode === 'view'" class="d-flex gap-2">
                                 <button @click="editRecipe" class="btn btn-outline-custom">
                                 <button @click="editRecipe" class="btn btn-outline-custom">
                                     <i class="bi bi-pencil-square"></i> Editar
                                     <i class="bi bi-pencil-square"></i> Editar
                                 </button>
                                 </button>
-                                <button @click="deleteRecipe" class="btn btn-danger">
+                                <button @click="openDeleteModal" class="btn btn-danger">
                                     <i class="bi bi-trash"></i> Eliminar
                                     <i class="bi bi-trash"></i> Eliminar
                                 </button>
                                 </button>
                             </div>
                             </div>
@@ -120,19 +120,31 @@
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
+
+    <ConfirmModal 
+        modalId="deleteRecipeModal" 
+        message="¿Estás seguro de que quieres eliminar esta receta? Esta acción es irreversible."
+        @confirmed="deleteRecipe" 
+    />
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import ConfirmModal from '@/components/ConfirmModal.vue';
 import { useRecipeStore } from '@/stores/recipeStore';
 import { useRecipeStore } from '@/stores/recipeStore';
 import { computed, onMounted, ref } from 'vue';
 import { computed, onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import defaultImage from '@/assets/default-recipe.jpg';
 import defaultImage from '@/assets/default-recipe.jpg';
+import * as bootstrap from 'bootstrap';
 
 
 // Estado de la vista: 'view' o 'edit'
 // Estado de la vista: 'view' o 'edit'
 const mode = ref('view');
 const mode = ref('view');
 
 
 const recipeStore = useRecipeStore();
 const recipeStore = useRecipeStore();
 const route = useRoute();
 const route = useRoute();
+const router = useRouter();
+
+// Id de la receta a eliminar
+const recipeToDeleteId = ref(null);
 
 
 // Usa una propiedad computada para acceder al estado reactivo del store
 // Usa una propiedad computada para acceder al estado reactivo del store
 const recipe = computed(() => recipeStore.recipe);
 const recipe = computed(() => recipeStore.recipe);
@@ -165,6 +177,24 @@ const processedIngredients = computed(() => {
         };
         };
     });
     });
 });
 });
+
+// Funciones para eliminar la receta
+const openDeleteModal = () => {
+    // Guarda el ID de la receta actual
+    recipeToDeleteId.value = recipe.value.id; 
+    
+    // Muestra el modal de Bootstrap
+    const deleteModal = new bootstrap.Modal(document.getElementById('deleteRecipeModal'));
+    deleteModal.show();
+};
+
+const deleteRecipe = async () => {
+    if (!recipeToDeleteId.value) return;
+        await recipeStore.delete(recipeToDeleteId.value);
+        
+        // Redirige al usuario a la página de recetas después de eliminar
+        router.push('/recipes');       
+};
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
@@ -244,5 +274,6 @@ textarea {
 .badge-custom {
 .badge-custom {
     background-color: #793E6C;
     background-color: #793E6C;
     color: white;
     color: white;
+    font-size: 14px;
 }
 }
 </style>
 </style>
\ No newline at end of file