feat(Recipes): implementada funcionalidad para buscar recetas

src/views/Recipes.vue

 <template>
 <template>
     <section class="bg-custom py-5 flex-grow-1">
     <section class="bg-custom py-5 flex-grow-1">
         <div class="container px-4 px-lg-5 mt-1">
         <div class="container px-4 px-lg-5 mt-1">
+
+            <div class="d-flex justify-content-center mb-4">
+                <div class="input-group" style="max-width: 500px;">
+                    <input type="text" class="form-control" placeholder="Buscar por nombre o ingrediente..."
+                            aria-label="Buscar recetas" v-model="searchQuery" @input="handleSearch" />
+                </div>
+            </div>
+
             <div class="d-flex justify-content-between align-items-center mb-4">
             <div class="d-flex justify-content-between align-items-center mb-4">
                 <div>
                 <div>
                     <label>
                     <label>
@@ -59,20 +67,48 @@
 <script setup>
 <script setup>
 import RecipeCard from '@/components/RecipeCard.vue';
 import RecipeCard from '@/components/RecipeCard.vue';
 import { useRecipeStore } from '@/stores/recipeStore';
 import { useRecipeStore } from '@/stores/recipeStore';
-import { onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 
 const recipeStore = useRecipeStore();
 const recipeStore = useRecipeStore();
 
 
+// Variables para la búsqueda
+const searchQuery = ref('');
+let searchTimeout = null;
+
 onMounted(() => {
 onMounted(() => {
     recipeStore.readAll(0, recipeStore.pageSize, recipeStore.sortDirection);
     recipeStore.readAll(0, recipeStore.pageSize, recipeStore.sortDirection);
 });
 });
 
 
 watch(() => recipeStore.pageSize, (newSize) => {
 watch(() => recipeStore.pageSize, (newSize) => {
+    // Cuando cambia el tamaño de página, se mantiene el estado de la búsqueda
+    if (searchQuery.value) {
+        recipeStore.search(searchQuery.value, 0, newSize);
+    } else {
         recipeStore.readAll(0, newSize, recipeStore.sortDirection);
         recipeStore.readAll(0, newSize, recipeStore.sortDirection);
+    }
 });
 });
 
 
 const goToPage = (page) => {
 const goToPage = (page) => {
+    // Comprueba si hay alguna consulta
+    if (searchQuery.value) {
+        recipeStore.search(searchQuery.value, page, recipeStore.pageSize);
+    } else {
         recipeStore.readAll(page, recipeStore.pageSize, recipeStore.sortDirection);
         recipeStore.readAll(page, recipeStore.pageSize, recipeStore.sortDirection);
+    }
+};
+
+// Función para la búsqueda
+const handleSearch = () => {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+        if (searchQuery.value === '') {
+            // Si el campo de búsqueda está vacío, carga todas las recetas
+            recipeStore.readAll(0, recipeStore.pageSize, recipeStore.sortDirection);
+        } else {
+            // Si hay un valor, realiza la búsqueda
+            recipeStore.search(searchQuery.value, 0, recipeStore.pageSize);
+        }
+    }, 500); // 500ms de retraso
 };
 };
 </script>
 </script>
 
 
@@ -118,7 +154,7 @@ const goToPage = (page) => {
     color: white;
     color: white;
 }
 }
 
 
-.form-select:focus {
+.form-select:focus, .form-control:focus {
     border-color: #793E6C;
     border-color: #793E6C;
     box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25); 
     box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25); 
 }
 }