feat(UserManagement): añadido buscador y funcionalidad para buscar usuarios

src/views/UserManagement.vue

@@ -23,6 +23,9 @@
                                     entradas
                                     entradas
                                 </label>
                                 </label>
                             </div>
                             </div>
+                            <div class="d-flex" style="width: 330px;">
+                                <input class="form-control me-2" type="search" placeholder="Buscar por nombre o email..." aria-label="Search" v-model="searchQuery" @input="handleSearch"/>
+                            </div>
                         </div>
                         </div>
 
 
                         <div v-if="errorMsg" class="alert alert-danger" role="alert">
                         <div v-if="errorMsg" class="alert alert-danger" role="alert">
@@ -134,10 +137,12 @@ const errorMsg = ref(null);
 const userToChangeId = ref(null);
 const userToChangeId = ref(null);
 const modalMessage = ref('');
 const modalMessage = ref('');
 let modalInstance = null;
 let modalInstance = null;
-
 const actionType = ref('');
 const actionType = ref('');
 const roleToChangeTo = ref('');
 const roleToChangeTo = ref('');
 
 
+// Variable para la búsqueda
+const searchQuery = ref('');
+
 onMounted(async () => {
 onMounted(async () => {
     errorMsg.value = null;
     errorMsg.value = null;
     try {
     try {
@@ -150,7 +155,11 @@ onMounted(async () => {
 
 
 // Cambip de página
 // Cambip de página
 const goToPage = (page) => {
 const goToPage = (page) => {
+    if (searchQuery.value) {
+        userStore.search(searchQuery.value, page, userStore.pageSize);
+    } else {
         userStore.readAll(page, userStore.pageSize, userStore.sortBy, userStore.sortDirection);
         userStore.readAll(page, userStore.pageSize, userStore.sortBy, userStore.sortDirection);
+    }
 };
 };
 
 
 // Cambio de ordenación
 // Cambio de ordenación
@@ -247,6 +256,19 @@ const handleConfirmation = async () => {
         }
         }
     }
     }
 };
 };
+
+// Función para la búsqueda
+let searchTimeout = null;
+const handleSearch = () => {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+        if (searchQuery.value === '') {
+            userStore.readAll(0, userStore.pageSize, userStore.sortBy, userStore.sortDirection);
+        } else {
+            userStore.search(searchQuery.value, 0, userStore.pageSize);
+        }
+    }, 500); // Pequeño retraso para evitar peticiones constantes
+};
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
@@ -301,4 +323,9 @@ const handleConfirmation = async () => {
 .pagination-custom .page-item.disabled .page-link {
 .pagination-custom .page-item.disabled .page-link {
     color: #bbb;
     color: #bbb;
 }
 }
+
+.form-control:focus {
+    border-color: #793E6C;
+    box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25); 
+}
 </style>
 </style>
\ No newline at end of file