Implement unified catalog search with token-based filtering
All checks were successful
Build Docker Image / build (push) Successful in 3m23s
All checks were successful
Build Docker Image / build (push) Successful in 3m23s
- Add useCatalogSearch composable for managing unified search state - Add UnifiedSearchBar component with token chips for filters - Add CatalogHero component for empty/landing state - Create grid components for each display mode: - CatalogGridProducts, CatalogGridSuppliers, CatalogGridHubs - CatalogGridHubsForProduct, CatalogGridProductsFromSupplier - CatalogGridProductsInHub, CatalogGridOffers - Add unified catalog page at /catalog with query params - Remove SubNavigation from catalog section (kept for other sections) - Update all links to use new unified catalog paths - Delete old nested catalog pages (offers/suppliers/hubs flows) - Add i18n translations for catalog section
This commit is contained in:
58
app/components/catalog/CatalogGridHubs.vue
Normal file
58
app/components/catalog/CatalogGridHubs.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectHub') }}</Text>
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredItems.length === 0" class="text-center py-12">
|
||||
<Text tone="muted">{{ t('catalog.empty.noHubs') }}</Text>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<HubCard
|
||||
v-for="hub in filteredItems"
|
||||
:key="hub.uuid"
|
||||
:hub="hub"
|
||||
selectable
|
||||
@select="$emit('select', { uuid: hub.uuid, name: hub.name })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PaginationLoadMore
|
||||
v-if="filteredItems.length > 0 && canLoadMore"
|
||||
:shown="filteredItems.length"
|
||||
:total="total"
|
||||
:can-load-more="canLoadMore"
|
||||
:loading="isLoadingMore"
|
||||
hide-counter
|
||||
@load-more="loadMore"
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
searchQuery: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', hub: { uuid: string; name: string }): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { items, total, isLoading, isLoadingMore, canLoadMore, loadMore, init } = useCatalogHubs()
|
||||
|
||||
await init()
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.searchQuery.trim()) return items.value
|
||||
const q = props.searchQuery.toLowerCase()
|
||||
return items.value.filter((item: any) =>
|
||||
item.name?.toLowerCase().includes(q) ||
|
||||
item.country?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user