Add CatalogSearchBar component with filter badges
All checks were successful
Build Docker Image / build (push) Successful in 5m8s
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
159
app/components/catalog/CatalogSearchBar.vue
Normal file
159
app/components/catalog/CatalogSearchBar.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-3 w-full bg-base-100 border border-base-300 rounded-lg px-3 py-2">
|
||||
<!-- Search input with badges -->
|
||||
<div class="flex-1 flex items-center gap-2 min-w-0">
|
||||
<!-- Search icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/50 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
|
||||
<!-- Active filter badges -->
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span
|
||||
v-for="filter in activeFilters"
|
||||
:key="filter.id"
|
||||
class="badge badge-sm badge-primary gap-1 cursor-pointer hover:badge-error transition-colors"
|
||||
@click="$emit('remove-filter', filter.id)"
|
||||
>
|
||||
{{ filter.label }}
|
||||
<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>
|
||||
</span>
|
||||
|
||||
<!-- Search input -->
|
||||
<input
|
||||
type="text"
|
||||
:value="searchQuery"
|
||||
:placeholder="computedPlaceholder"
|
||||
class="flex-1 min-w-[120px] bg-transparent border-none outline-none text-sm placeholder-base-content/50"
|
||||
@input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
|
||||
@keydown.enter="$emit('search')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="h-6 w-px bg-base-300"></div>
|
||||
|
||||
<!-- Filter dropdown -->
|
||||
<div class="dropdown dropdown-end">
|
||||
<button tabindex="0" class="btn btn-ghost btn-sm gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
{{ computedFilterButtonLabel }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div tabindex="0" class="dropdown-content z-20 menu p-2 shadow bg-base-100 rounded-box w-56 mt-2">
|
||||
<slot name="filters">
|
||||
<li v-for="filter in availableFilters" :key="filter.id">
|
||||
<a
|
||||
:class="{ active: isFilterActive(filter.id) }"
|
||||
@click="toggleFilter(filter)"
|
||||
>
|
||||
{{ filter.label }}
|
||||
</a>
|
||||
</li>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Counter -->
|
||||
<div v-if="showCounter" class="text-sm text-base-content/70 whitespace-nowrap">
|
||||
<span class="font-semibold">{{ displayedCount }}</span>
|
||||
<span class="text-base-content/50"> / {{ totalCount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Sort dropdown -->
|
||||
<div v-if="sortOptions.length > 0" class="dropdown dropdown-end">
|
||||
<button tabindex="0" class="btn btn-ghost btn-sm gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
|
||||
</svg>
|
||||
{{ currentSortLabel }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul tabindex="0" class="dropdown-content z-20 menu p-2 shadow bg-base-100 rounded-box w-48 mt-2">
|
||||
<li v-for="option in sortOptions" :key="option.id">
|
||||
<a
|
||||
:class="{ active: sortValue === option.id }"
|
||||
@click="$emit('update:sortValue', option.id)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface FilterOption {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
interface SortOption {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
searchQuery?: string
|
||||
placeholder?: string
|
||||
activeFilters?: FilterOption[]
|
||||
availableFilters?: FilterOption[]
|
||||
filterButtonLabel?: string
|
||||
displayedCount?: number
|
||||
totalCount?: number
|
||||
showCounter?: boolean
|
||||
sortOptions?: SortOption[]
|
||||
sortValue?: string
|
||||
}>(), {
|
||||
searchQuery: '',
|
||||
placeholder: '',
|
||||
activeFilters: () => [],
|
||||
availableFilters: () => [],
|
||||
filterButtonLabel: '',
|
||||
displayedCount: 0,
|
||||
totalCount: 0,
|
||||
showCounter: true,
|
||||
sortOptions: () => [],
|
||||
sortValue: ''
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const computedPlaceholder = computed(() => props.placeholder || t('common.searchBar.placeholder'))
|
||||
const computedFilterButtonLabel = computed(() => props.filterButtonLabel || t('common.searchBar.filters'))
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:searchQuery': [value: string]
|
||||
'update:sortValue': [value: string]
|
||||
'remove-filter': [id: string]
|
||||
'add-filter': [filter: FilterOption]
|
||||
'search': []
|
||||
}>()
|
||||
|
||||
const isFilterActive = (id: string) => {
|
||||
return props.activeFilters.some(f => f.id === id)
|
||||
}
|
||||
|
||||
const toggleFilter = (filter: FilterOption) => {
|
||||
if (isFilterActive(filter.id)) {
|
||||
emit('remove-filter', filter.id)
|
||||
} else {
|
||||
emit('add-filter', filter)
|
||||
}
|
||||
}
|
||||
|
||||
const currentSortLabel = computed(() => {
|
||||
const option = props.sortOptions.find(o => o.id === props.sortValue)
|
||||
return option?.label || props.sortOptions[0]?.label || ''
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user