Vue Lab - Search Bar implemented

Author: jsanzdev

4 - Frameworks/Ejercicios/VUE/vue-lab/todo-app/components/SearchBar.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="search-container">
+        <input
+            type="text"
+            v-model="searchQuery"
+            placeholder="Search todos..."
+            class="search-input"
+            @input="search"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useTodoStore } from '~/stores/todo-store'
+
+const store = useTodoStore()
+const searchQuery = ref('')
+
+const search = () => {
+    store.setSearchQuery(searchQuery.value)
+}
+</script>
+
+<style scoped>
+.search-container {
+    margin: 1rem 0;
+}
+
+.search-input {
+    width: 100%;
+    padding: 0.5rem;
+    font-size: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: #4CAF50;
+    box-shadow: 0 2px 4px rgba(76,175,80,0.2);
+}
+</style>

4 - Frameworks/Ejercicios/VUE/vue-lab/todo-app/pages/index.vue

@@ -2,6 +2,7 @@
     <div class="container">
         <h1>Todo App</h1>
         <TodoInput @add-todo="addTodo" />
+        <SearchBar />
         <TodoFilter />
         <TodoList :todos="store.filteredTodos" @toggle="toggleTodo" @delete="deleteTodo" />
     </div>

4 - Frameworks/Ejercicios/VUE/vue-lab/todo-app/stores/todo-store.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import type { Todo, FilterType } from "~/types/index";
 
 export const useTodoStore = defineStore(
@@ -8,15 +8,24 @@ export const useTodoStore = defineStore(
     const todos = ref<Todo[]>([]);
     const editingId = ref<number | null>(null);
     const filter = ref<FilterType>("all");
+    const searchQuery = ref("");
 
     const filteredTodos = computed(() => {
+      let filtered = todos.value;
+
+      if (searchQuery.value) {
+        filtered = filtered.filter((todo) =>
+          todo.title.toLowerCase().includes(searchQuery.value.toLowerCase())
+        );
+      }
+
       switch (filter.value) {
         case "active":
-          return todos.value.filter((todo) => !todo.completed);
+          return filtered.value.filter((todo) => !todo.completed);
         case "completed":
-          return todos.value.filter((todo) => todo.completed);
+          return filtered.value.filter((todo) => todo.completed);
         default:
-          return todos.value;
+          return filtered;
       }
     });
 
@@ -60,6 +69,10 @@ export const useTodoStore = defineStore(
       filter.value = newFilter;
     };
 
+    const setSearchQuery = (query: string) => {
+      searchQuery.value = query;
+    };
+
     return {
       todos,
       editingId,
@@ -72,6 +85,8 @@ export const useTodoStore = defineStore(
       filter,
       filteredTodos,
       setFilter,
+      searchQuery,
+      setSearchQuery,
     };
   },
   {