From 346dcc3dc08f8baa5adb6f83d03498f4ac305459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20S=C3=A1nchez=20Pizarro?= <omar.sanchez@pistacero.net>
Date: Tue, 20 Jan 2026 18:20:26 +0100
Subject: [PATCH] Enhance Articles.vue with improved search and filter
 functionality. Added search input, active filter chips, and clear filters
 button. Refactored layout for better user experience.

---
 web/frontend/src/views/Articles.vue | 232 ++++++++++++++++++++++------
 1 file changed, 182 insertions(+), 50 deletions(-)

diff --git a/web/frontend/src/views/Articles.vue b/web/frontend/src/views/Articles.vue
index 378657a..3a6829d 100644
--- a/web/frontend/src/views/Articles.vue
+++ b/web/frontend/src/views/Articles.vue
@@ -10,60 +10,163 @@
             <span class="font-medium text-gray-700 dark:text-gray-300 ml-1">({{ currentUser }})</span>
           </p>
         </div>
-        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:space-x-4 flex-wrap">
-          <select
-            v-model="selectedPlatform"
-            @change="loadArticles"
-            class="input text-sm sm:text-base"
-            style="width: 100%; min-width: 150px;"
-          >
-            <option value="">Todas las plataformas</option>
-            <option value="wallapop">Wallapop</option>
-            <option value="vinted">Vinted</option>
-          </select>
-          <select
-            v-if="isAdmin"
-            v-model="selectedUsername"
-            @change="loadArticles"
-            class="input text-sm sm:text-base"
-            style="width: 100%; min-width: 150px;"
-          >
-            <option value="">Todos los usuarios</option>
-            <option v-for="username in availableUsernames" :key="username" :value="username">
-              {{ username }}
-            </option>
-          </select>
-          <select
-            v-model="selectedWorker"
-            @change="loadArticles"
-            class="input text-sm sm:text-base"
-            style="width: 100%; min-width: 150px;"
-          >
-            <option value="">Todos los workers</option>
-            <option v-for="worker in availableWorkers" :key="worker" :value="worker">
-              {{ worker }}
-            </option>
-          </select>
-          <button @click="loadArticles" class="btn btn-primary whitespace-nowrap">
-            Actualizar
-          </button>
+      </div>
+      
+      <!-- Búsqueda y Filtros -->
+      <div class="card p-4 mb-4">
+        <!-- Campo de búsqueda -->
+        <div class="mb-4">
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
+            <MagnifyingGlassIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+            Búsqueda
+          </label>
+          <div class="relative">
+            <input
+              v-model="searchQuery"
+              type="text"
+              placeholder="Buscar artículos por título, descripción, precio, localidad..."
+              class="input pr-10 pl-10"
+              @input="searchQuery = $event.target.value"
+            />
+            <MagnifyingGlassIcon class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+            <span v-if="searching" class="absolute right-3 top-1/2 transform -translate-y-1/2">
+              <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-primary-600"></div>
+            </span>
+            <button
+              v-else-if="searchQuery"
+              @click="searchQuery = ''"
+              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+              title="Limpiar búsqueda"
+            >
+              <XMarkIcon class="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+        
+        <!-- Separador -->
+        <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mb-4">
+          <div class="flex items-center justify-between mb-3">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
+              <FunnelIcon class="w-5 h-5 text-primary-600" />
+              Filtros
+              <span v-if="hasActiveFilters" class="ml-2 px-2 py-0.5 bg-primary-600 text-white rounded-full text-xs font-semibold">
+                {{ activeFiltersCount }}
+              </span>
+            </h2>
+            <button 
+              v-if="hasActiveFilters"
+              @click="clearAllFilters"
+              class="btn btn-secondary text-sm"
+            >
+              <XMarkIcon class="w-4 h-4 mr-1" />
+              Limpiar todo
+            </button>
+          </div>
+          
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            <div class="flex flex-col">
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
+                <ServerIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                Plataforma
+              </label>
+              <select
+                v-model="selectedPlatform"
+                @change="loadArticles"
+                class="input text-sm w-full"
+              >
+                <option value="">Todas las plataformas</option>
+                <option value="wallapop">Wallapop</option>
+                <option value="vinted">Vinted</option>
+              </select>
+            </div>
+            
+            <div v-if="isAdmin" class="flex flex-col">
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
+                <UserIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                Usuario
+              </label>
+              <select
+                v-model="selectedUsername"
+                @change="loadArticles"
+                class="input text-sm w-full"
+              >
+                <option value="">Todos los usuarios</option>
+                <option v-for="username in availableUsernames" :key="username" :value="username">
+                  {{ username }}
+                </option>
+              </select>
+            </div>
+            
+            <div class="flex flex-col">
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
+                <BriefcaseIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                Worker
+              </label>
+              <select
+                v-model="selectedWorker"
+                @change="loadArticles"
+                class="input text-sm w-full"
+              >
+                <option value="">Todos los workers</option>
+                <option v-for="worker in availableWorkers" :key="worker" :value="worker">
+                  {{ worker }}
+                </option>
+              </select>
+            </div>
+          </div>
+          
+          <div class="flex items-center gap-2 mt-4">
+            <button @click="loadArticles" class="btn btn-primary whitespace-nowrap">
+              <ArrowPathIcon class="w-4 h-4 mr-1" />
+              Actualizar
+            </button>
+          </div>
         </div>
       </div>
       
-      <!-- Campo de búsqueda -->
-      <div class="relative">
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Buscar artículos por título, descripción, precio, localidad..."
-          class="input pr-10"
-          @input="searchQuery = $event.target.value"
-        />
-        <span v-if="searching" class="absolute right-3 top-1/2 transform -translate-y-1/2">
-          <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-primary-600"></div>
+      <!-- Filtros activos (chips) -->
+      <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 mt-3 mb-4">
+        <span
+          v-if="selectedPlatform"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium"
+        >
+          <ServerIcon class="w-3.5 h-3.5" />
+          {{ selectedPlatform === 'wallapop' ? 'Wallapop' : 'Vinted' }}
+          <button
+            @click="selectedPlatform = ''; loadArticles()"
+            class="ml-1 hover:text-primary-900 dark:hover:text-primary-100"
+            title="Eliminar filtro"
+          >
+            <XMarkIcon class="w-3.5 h-3.5" />
+          </button>
         </span>
-        <span v-else-if="searchQuery" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-gray-600" @click="searchQuery = ''">
-          ✕
+        <span
+          v-if="selectedUsername"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium"
+        >
+          <UserIcon class="w-3.5 h-3.5" />
+          {{ selectedUsername }}
+          <button
+            @click="selectedUsername = ''; loadArticles()"
+            class="ml-1 hover:text-primary-900 dark:hover:text-primary-100"
+            title="Eliminar filtro"
+          >
+            <XMarkIcon class="w-3.5 h-3.5" />
+          </button>
+        </span>
+        <span
+          v-if="selectedWorker"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium"
+        >
+          <BriefcaseIcon class="w-3.5 h-3.5" />
+          {{ selectedWorker }}
+          <button
+            @click="selectedWorker = ''; loadArticles()"
+            class="ml-1 hover:text-primary-900 dark:hover:text-primary-100"
+            title="Eliminar filtro"
+          >
+            <XMarkIcon class="w-3.5 h-3.5" />
+          </button>
         </span>
       </div>
     </div>
@@ -124,6 +227,15 @@ import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import api from '../services/api';
 import authService from '../services/auth';
 import ArticleCard from '../components/ArticleCard.vue';
+import {
+  FunnelIcon,
+  XMarkIcon,
+  ServerIcon,
+  UserIcon,
+  BriefcaseIcon,
+  ArrowPathIcon,
+  MagnifyingGlassIcon
+} from '@heroicons/vue/24/outline';
 
 const currentUser = ref(authService.getUsername() || null);
 const isAdmin = ref(false);
@@ -183,6 +295,26 @@ const filteredArticles = computed(() => {
   return allArticles.value;
 });
 
+// Computed para filtros activos
+const hasActiveFilters = computed(() => {
+  return !!(selectedPlatform.value || selectedUsername.value || selectedWorker.value);
+});
+
+const activeFiltersCount = computed(() => {
+  let count = 0;
+  if (selectedPlatform.value) count++;
+  if (selectedUsername.value) count++;
+  if (selectedWorker.value) count++;
+  return count;
+});
+
+function clearAllFilters() {
+  selectedPlatform.value = '';
+  selectedUsername.value = '';
+  selectedWorker.value = '';
+  loadArticles();
+}
+
 
 
 async function loadArticles(reset = true, silent = false) {