Add CatalogSearchBar component with filter badges
All checks were successful
Build Docker Image / build (push) Successful in 5m8s

- Create CatalogSearchBar.vue with search input, filter badges (× to remove), filter dropdown, counter, sort dropdown
- Integrate searchBar slot into CatalogPage with displayedCount and totalCount
- Update hubs page to use CatalogSearchBar with transport type and country filters
- Add translations for search bar in common.json
- Add transport/country filter labels in catalogHubsSection.json
This commit is contained in:
Ruslan Bakiev
2026-01-14 12:31:38 +07:00
parent a493d2cf01
commit 134b8a5eb4
7 changed files with 256 additions and 8 deletions

View File

@@ -12,6 +12,11 @@
<!-- Content -->
<template v-else>
<!-- Search bar slot (full width, above split) -->
<div v-if="$slots.searchBar" class="py-3">
<slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
</div>
<!-- With Map: Split Layout -->
<template v-if="withMap">
<!-- Desktop: side-by-side -->
@@ -197,13 +202,15 @@ const props = withDefaults(defineProps<{
selectedId?: string
hoveredId?: string
hasSubNav?: boolean
totalCount?: number // Total count for search bar counter (can differ from items.length with pagination)
}>(), {
loading: false,
withMap: true,
useServerClustering: false,
mapId: 'catalog-map',
pointColor: '#3b82f6',
hasSubNav: true
hasSubNav: true,
totalCount: 0
})
// Map positioning - unified height for all pages with map