From d9d05a4c210b2330938b2fcb54c6998d02e6d884 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Fri, 16 Jan 2026 02:19:41 +0700
Subject: [PATCH] feat(catalog): add search to all catalog pages

Add CatalogSearchBar component with filtering to:
- /catalog/offers - search by product name
- /catalog/offers/[productId] - search by hub name/country
- /catalog/hubs/[id] - search by product name
- /catalog/suppliers/[supplierId] - search by product name
- /catalog/suppliers/[supplierId]/[productId] - search by hub name/country
---
 app/pages/catalog/hubs/[id]/index.vue         | 22 +++++++++++++++++-
 .../catalog/offers/[productId]/index.vue      | 23 ++++++++++++++++++-
 app/pages/catalog/offers/index.vue            | 22 +++++++++++++++++-
 .../[supplierId]/[productId]/index.vue        | 23 ++++++++++++++++++-
 .../catalog/suppliers/[supplierId]/index.vue  | 22 +++++++++++++++++-
 5 files changed, 107 insertions(+), 5 deletions(-)

diff --git a/app/pages/catalog/hubs/[id]/index.vue b/app/pages/catalog/hubs/[id]/index.vue
index b745f64..bdf2e39 100644
--- a/app/pages/catalog/hubs/[id]/index.vue
+++ b/app/pages/catalog/hubs/[id]/index.vue
@@ -1,12 +1,21 @@
 <template>
   <CatalogPage
-    :items="products"
+    :items="filteredProducts"
     :map-items="mapItems"
     :loading="isLoading"
+    :total-count="products.length"
     with-map
     map-id="hub-products-map"
     point-color="#10b981"
   >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+      />
+    </template>
+
     <template #header>
       <!-- Not Found -->
       <Card v-if="!isLoading && !hub" padding="lg">
@@ -70,6 +79,17 @@ const products = ref<Array<{ uuid: string; name: string }>>([])
 
 const hubId = computed(() => route.params.id as string)
 
+// Search
+const searchQuery = ref('')
+
+const filteredProducts = computed(() => {
+  if (!searchQuery.value.trim()) return products.value
+  const q = searchQuery.value.toLowerCase()
+  return products.value.filter(item =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+
 // Map items - show the hub itself
 const mapItems = computed(() => {
   if (!hub.value?.latitude || !hub.value?.longitude) return []
diff --git a/app/pages/catalog/offers/[productId]/index.vue b/app/pages/catalog/offers/[productId]/index.vue
index 429897a..79f3807 100644
--- a/app/pages/catalog/offers/[productId]/index.vue
+++ b/app/pages/catalog/offers/[productId]/index.vue
@@ -1,7 +1,8 @@
 <template>
   <CatalogPage
-    :items="hubs"
+    :items="filteredHubs"
     :loading="isLoading"
+    :total-count="hubs.length"
     with-map
     map-id="offers-product-hubs-map"
     point-color="#10b981"
@@ -9,6 +10,14 @@
     @update:hovered-id="hoveredHubId = $event"
     @select="onSelectHub"
   >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+      />
+    </template>
+
     <template #header>
       <!-- Product Not Found -->
       <Card v-if="!isLoading && !product" padding="lg">
@@ -86,6 +95,18 @@ const hoveredHubId = ref<string>()
 
 const productId = computed(() => route.params.productId as string)
 
+// Search
+const searchQuery = ref('')
+
+const filteredHubs = computed(() => {
+  if (!searchQuery.value.trim()) return hubs.value
+  const q = searchQuery.value.toLowerCase()
+  return hubs.value.filter(hub =>
+    hub.name?.toLowerCase().includes(q) ||
+    hub.country?.toLowerCase().includes(q)
+  )
+})
+
 // Handle hub selection
 const onSelectHub = (hub: any) => {
   navigateTo(localePath(`/catalog/offers/${productId.value}/${hub.uuid}`))
diff --git a/app/pages/catalog/offers/index.vue b/app/pages/catalog/offers/index.vue
index 2dcae86..6bc5c52 100644
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -1,11 +1,20 @@
 <template>
   <CatalogPage
-    :items="products"
+    :items="filteredProducts"
     :loading="isLoading"
+    :total-count="products.length"
     with-map
     map-id="offers-products-map"
     point-color="#3b82f6"
   >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+      />
+    </template>
+
     <template #header>
       <!-- Empty -->
       <Card v-if="!isLoading && products.length === 0" padding="lg">
@@ -49,6 +58,17 @@ const { t } = useI18n()
 
 const { items: products, isLoading, init } = useCatalogProducts()
 
+// Search
+const searchQuery = ref('')
+
+const filteredProducts = computed(() => {
+  if (!searchQuery.value.trim()) return products.value
+  const q = searchQuery.value.toLowerCase()
+  return products.value.filter(item =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+
 // Navigate to product detail
 const goToProduct = (productId: string) => {
   navigateTo(localePath(`/catalog/offers/${productId}`))
diff --git a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
index bfdd47c..7fd1415 100644
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
@@ -1,7 +1,8 @@
 <template>
   <CatalogPage
-    :items="hubs"
+    :items="filteredHubs"
     :loading="isLoading"
+    :total-count="hubs.length"
     with-map
     map-id="supplier-product-hubs-map"
     point-color="#10b981"
@@ -9,6 +10,14 @@
     @update:hovered-id="hoveredHubId = $event"
     @select="onSelectHub"
   >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+      />
+    </template>
+
     <template #header>
       <!-- Not Found -->
       <Card v-if="!isLoading && (!supplier || !product)" padding="lg">
@@ -109,6 +118,18 @@ const hoveredHubId = ref<string>()
 const supplierId = computed(() => routeRef.params.supplierId as string)
 const productId = computed(() => routeRef.params.productId as string)
 
+// Search
+const searchQuery = ref('')
+
+const filteredHubs = computed(() => {
+  if (!searchQuery.value.trim()) return hubs.value
+  const q = searchQuery.value.toLowerCase()
+  return hubs.value.filter(hub =>
+    hub.name?.toLowerCase().includes(q) ||
+    hub.country?.toLowerCase().includes(q)
+  )
+})
+
 // Handle hub selection
 const onSelectHub = (hub: any) => {
   navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}/${hub.uuid}`))
diff --git a/app/pages/catalog/suppliers/[supplierId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/index.vue
index ef48f98..4b92f50 100644
--- a/app/pages/catalog/suppliers/[supplierId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/index.vue
@@ -1,12 +1,21 @@
 <template>
   <CatalogPage
-    :items="products"
+    :items="filteredProducts"
     :map-items="mapItems"
     :loading="isLoading"
+    :total-count="products.length"
     with-map
     map-id="supplier-products-map"
     point-color="#3b82f6"
   >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+      />
+    </template>
+
     <template #header>
       <!-- Supplier Not Found -->
       <Card v-if="!isLoading && !supplier" padding="lg">
@@ -91,6 +100,17 @@ const offers = ref<any[]>([])
 
 const supplierId = computed(() => route.params.supplierId as string)
 
+// Search
+const searchQuery = ref('')
+
+const filteredProducts = computed(() => {
+  if (!searchQuery.value.trim()) return products.value
+  const q = searchQuery.value.toLowerCase()
+  return products.value.filter(item =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+
 // Map items - show supplier location
 const mapItems = computed(() => {
   if (!supplier.value?.latitude || !supplier.value?.longitude) return []