Add article facets endpoint and integrate into frontend

web/frontend/src/views/Articles.vue

@@ -75,8 +75,9 @@
                 class="input text-sm w-full"
               >
                 <option value="">Todas las plataformas</option>
-                <option value="wallapop">Wallapop</option>
-                <option value="vinted">Vinted</option>
+                <option v-for="platform in facets.platforms" :key="platform" :value="platform">
+                  {{ platform === 'wallapop' ? 'Wallapop' : platform === 'vinted' ? 'Vinted' : platform }}
+                </option>
               </select>
             </div>
             
@@ -256,35 +257,20 @@ const searchTimeout = ref(null);
 const POLL_INTERVAL = 30000; // 30 segundos
 const SEARCH_DEBOUNCE = 500; // 500ms de debounce para búsqueda
 
-// Obtener listas de usuarios y workers únicos de los artículos
+// Facets obtenidos del backend
+const facets = ref({
+  platforms: [],
+  usernames: [],
+  workers: []
+});
+
+// Usar facets del backend en lugar de calcular desde artículos cargados
 const availableUsernames = computed(() => {
-  const usernames = new Set();
-  allArticles.value.forEach(article => {
-    if (article.username) {
-      usernames.add(article.username);
-    }
-  });
-  searchResults.value.forEach(article => {
-    if (article.username) {
-      usernames.add(article.username);
-    }
-  });
-  return Array.from(usernames).sort();
+  return facets.value.usernames || [];
 });
 
 const availableWorkers = computed(() => {
-  const workers = new Set();
-  allArticles.value.forEach(article => {
-    if (article.worker_name) {
-      workers.add(article.worker_name);
-    }
-  });
-  searchResults.value.forEach(article => {
-    if (article.worker_name) {
-      workers.add(article.worker_name);
-    }
-  });
-  return Array.from(workers).sort();
+  return facets.value.workers || [];
 });
 
 // Artículos que se muestran (búsqueda o lista normal)
@@ -315,6 +301,19 @@ function clearAllFilters() {
   loadArticles();
 }
 
+async function loadFacets() {
+  try {
+    const data = await api.getArticleFacets();
+    facets.value = {
+      platforms: data.platforms || [],
+      usernames: data.usernames || [],
+      workers: data.workers || []
+    };
+  } catch (error) {
+    console.error('Error cargando facets:', error);
+  }
+}
+
 
 
 async function loadArticles(reset = true, silent = false) {
@@ -371,6 +370,7 @@ function handleAuthChange() {
     selectedUsername.value = '';
   }
   if (currentUser.value) {
+    loadFacets(); // Recargar facets cuando cambie el usuario
     loadArticles();
   }
 }
@@ -382,6 +382,7 @@ function loadMore() {
 function handleWSMessage(event) {
   const data = event.detail;
   if (data.type === 'articles_updated') {
+    loadFacets(); // Actualizar facets cuando se actualicen los artículos
     loadArticles();
   }
 }
@@ -447,6 +448,7 @@ onMounted(() => {
   if (!isAdmin.value && selectedUsername.value) {
     selectedUsername.value = '';
   }
+  loadFacets(); // Cargar facets primero
   loadArticles();
   window.addEventListener('ws-message', handleWSMessage);
   window.addEventListener('auth-logout', handleAuthChange);
@@ -455,6 +457,7 @@ onMounted(() => {
   // Iniciar autopoll para actualizar automáticamente
   autoPollInterval.value = setInterval(() => {
     loadArticles(true, true); // Reset silencioso cada 30 segundos
+    loadFacets(); // Actualizar facets también
   }, POLL_INTERVAL);
 });