Add navigation badges to offers and hubs catalog pages
All checks were successful
Build Docker Image / build (push) Successful in 3m52s

- /catalog/offers/[productId] - badge "Товар: Name"
- /catalog/offers/[productId]/[hubId] - badges "Товар", "Хаб"
- /catalog/hubs/[id] - badge "Хаб: Name"
- /catalog/hubs/[id]/[productId] - badges "Хаб", "Товар"

Removed breadcrumb components, replaced with search bar badges
This commit is contained in:
Ruslan Bakiev
2026-01-19 11:33:36 +07:00
parent 5b715ef46f
commit da29a354ff
4 changed files with 128 additions and 22 deletions

View File

@@ -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 -->
<CatalogBreadcrumbs :hub-id="hubId" :hub-name="hub?.name" />
<!-- Header -->
<div>
<Heading :level="1">{{ hub?.name }}</Heading>
@@ -78,6 +77,28 @@ const products = ref<Array<{ uuid: string; name: string }>>([])
const hubId = computed(() => route.params.id as string)
// Navigation filters for search bar badges
const navigationFilters = computed(() => {
const filters: Array<{ id: string; label: string; key: string }> = []
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/hubs'))
}
}
// Search
const searchQuery = ref('')