From 0a79b90d1c44535d8c4bc772ffbde58a20d3c2de Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 19 Jan 2026 11:09:58 +0700
Subject: [PATCH] Replace breadcrumbs with key-value badges in search bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add key property to FilterOption interface in CatalogSearchBar
- Display badges in "Key: Value" format (e.g., "Поставщик: Name")
- Remove SuppliersBreadcrumbs from supplier catalog pages
- Add navigationFilters computed with supplier/product/hub badges
- Add handleRemoveFilter to navigate back when badge is clicked
---
 app/components/catalog/CatalogSearchBar.vue   |  9 ++-
 .../[supplierId]/[productId]/[hubId].vue      | 60 +++++++++++++++----
 .../[supplierId]/[productId]/index.vue        | 42 ++++++++++---
 .../catalog/suppliers/[supplierId]/index.vue  | 27 ++++++++-
 4 files changed, 116 insertions(+), 22 deletions(-)

diff --git a/app/components/catalog/CatalogSearchBar.vue b/app/components/catalog/CatalogSearchBar.vue
index 9ebcc40..cb203ec 100644
--- a/app/components/catalog/CatalogSearchBar.vue
+++ b/app/components/catalog/CatalogSearchBar.vue
@@ -15,7 +15,13 @@
           class="badge badge-sm badge-primary gap-1 cursor-pointer hover:badge-error transition-colors"
           @click="$emit('remove-filter', filter.id)"
         >
-          {{ filter.label }}
+          <template v-if="filter.key">
+            <span class="opacity-70">{{ filter.key }}:</span>
+            <span>{{ filter.label }}</span>
+          </template>
+          <template v-else>
+            {{ filter.label }}
+          </template>
           <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
           </svg>
@@ -96,6 +102,7 @@
 interface FilterOption {
   id: string
   label: string
+  key?: string // Optional key for "Key: Value" format badges
 }
 
 interface SortOption {
diff --git a/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue b/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
index b5d5699..3b3a74d 100644
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
@@ -6,6 +6,14 @@
     map-id="supplier-route-map"
     point-color="#10b981"
   >
+    <template #searchBar>
+      <CatalogSearchBar
+        :active-filters="navigationFilters"
+        :show-counter="false"
+        @remove-filter="handleRemoveFilter"
+      />
+    </template>
+
     <template #header>
       <!-- Not Found -->
       <Card v-if="!isLoading && (!supplier || !product || !hub)" padding="lg">
@@ -23,16 +31,6 @@
 
       <!-- Content Header -->
       <Stack v-else gap="4">
-        <!-- Breadcrumbs -->
-        <SuppliersBreadcrumbs
-          :supplier-id="supplierId"
-          :supplier-name="supplier?.name"
-          :product-id="productId"
-          :product-name="product?.name"
-          :hub-id="hubId"
-          :hub-name="hub?.name"
-        />
-
         <!-- Header -->
         <div>
           <Heading :level="1">{{ product?.name }}</Heading>
@@ -130,6 +128,48 @@ const supplierId = computed(() => routeRef.params.supplierId as string)
 const productId = computed(() => routeRef.params.productId as string)
 const hubId = computed(() => routeRef.params.hubId as string)
 
+// Navigation filters for search bar badges
+const navigationFilters = computed(() => {
+  const filters: Array<{ id: string; label: string; key: string }> = []
+
+  if (supplier.value?.name) {
+    filters.push({
+      id: 'supplier',
+      key: 'Поставщик',
+      label: supplier.value.name
+    })
+  }
+
+  if (product.value?.name) {
+    filters.push({
+      id: 'product',
+      key: 'Товар',
+      label: product.value.name
+    })
+  }
+
+  if (hub.value?.name) {
+    filters.push({
+      id: 'hub',
+      key: 'Хаб',
+      label: hub.value.name
+    })
+  }
+
+  return filters
+})
+
+// Handle removing navigation filter (navigate back)
+const handleRemoveFilter = (filterId: string) => {
+  if (filterId === 'hub') {
+    navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}`))
+  } else if (filterId === 'product') {
+    navigateTo(localePath(`/catalog/suppliers/${supplierId.value}`))
+  } else if (filterId === 'supplier') {
+    navigateTo(localePath('/catalog/suppliers'))
+  }
+}
+
 // Map items - show source and destination
 const routePoints = computed(() => {
   const points: Array<{ uuid: string; name: string; latitude: number; longitude: number }> = []
diff --git a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
index 2f3d409..f7f768a 100644
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
@@ -13,8 +13,10 @@
     <template #searchBar="{ displayedCount, totalCount }">
       <CatalogSearchBar
         v-model:search-query="searchQuery"
+        :active-filters="navigationFilters"
         :displayed-count="displayedCount"
         :total-count="totalCount"
+        @remove-filter="handleRemoveFilter"
       />
     </template>
 
@@ -35,14 +37,6 @@
 
       <!-- Content Header -->
       <Stack v-else gap="4">
-        <!-- Breadcrumbs -->
-        <SuppliersBreadcrumbs
-          :supplier-id="supplierId"
-          :supplier-name="supplier?.name"
-          :product-id="productId"
-          :product-name="product?.name"
-        />
-
         <!-- Header -->
         <div>
           <Heading :level="1">{{ product?.name }}</Heading>
@@ -116,6 +110,38 @@ const hoveredHubId = ref<string>()
 const supplierId = computed(() => routeRef.params.supplierId as string)
 const productId = computed(() => routeRef.params.productId as string)
 
+// Navigation filters for search bar badges
+const navigationFilters = computed(() => {
+  const filters: Array<{ id: string; label: string; key: string }> = []
+
+  if (supplier.value?.name) {
+    filters.push({
+      id: 'supplier',
+      key: 'Поставщик',
+      label: supplier.value.name
+    })
+  }
+
+  if (product.value?.name) {
+    filters.push({
+      id: 'product',
+      key: 'Товар',
+      label: product.value.name
+    })
+  }
+
+  return filters
+})
+
+// Handle removing navigation filter (navigate back)
+const handleRemoveFilter = (filterId: string) => {
+  if (filterId === 'product') {
+    navigateTo(localePath(`/catalog/suppliers/${supplierId.value}`))
+  } else if (filterId === 'supplier') {
+    navigateTo(localePath('/catalog/suppliers'))
+  }
+}
+
 // Search
 const searchQuery = ref('')
 
diff --git a/app/pages/catalog/suppliers/[supplierId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/index.vue
index 6998272..d954487 100644
--- a/app/pages/catalog/suppliers/[supplierId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/index.vue
@@ -11,8 +11,10 @@
     <template #searchBar="{ displayedCount, totalCount }">
       <CatalogSearchBar
         v-model:search-query="searchQuery"
+        :active-filters="navigationFilters"
         :displayed-count="displayedCount"
         :total-count="totalCount"
+        @remove-filter="handleRemoveFilter"
       />
     </template>
 
@@ -33,9 +35,6 @@
 
       <!-- Content Header -->
       <Stack v-else gap="4">
-        <!-- Breadcrumbs -->
-        <SuppliersBreadcrumbs :supplier-id="supplierId" :supplier-name="supplier?.name" />
-
         <!-- Header with supplier info -->
         <div class="flex items-start gap-4">
           <!-- Logo -->
@@ -100,6 +99,28 @@ const offers = ref<any[]>([])
 
 const supplierId = computed(() => route.params.supplierId as string)
 
+// Navigation filters for search bar badges
+const navigationFilters = computed(() => {
+  const filters: Array<{ id: string; label: string; key: string }> = []
+
+  if (supplier.value?.name) {
+    filters.push({
+      id: 'supplier',
+      key: 'Поставщик',
+      label: supplier.value.name
+    })
+  }
+
+  return filters
+})
+
+// Handle removing navigation filter (navigate back)
+const handleRemoveFilter = (filterId: string) => {
+  if (filterId === 'supplier') {
+    navigateTo(localePath('/catalog/suppliers'))
+  }
+}
+
 // Search
 const searchQuery = ref('')