Files
webapp/app/components/catalog/CatalogOffersSection.vue
Ruslan Bakiev 08d7e0ade9
All checks were successful
Build Docker Image / build (push) Successful in 3m23s
Implement unified catalog search with token-based filtering
- 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
2026-01-22 10:57:30 +07:00

70 lines
1.9 KiB
Vue

<template>
<Section variant="plain" paddingY="md">
<Stack gap="4">
<Stack direction="row" align="center" justify="between">
<Heading :level="2">{{ t('catalogOffersSection.header.title') }}</Heading>
<NuxtLink
:to="localePath('/catalog?select=product')"
class="btn btn-sm btn-ghost"
>
<span>{{ t('catalogOffersSection.actions.view_all') }}</span>
<Icon name="lucide:arrow-right" size="16" />
</NuxtLink>
</Stack>
<Grid :cols="1" :md="2" :lg="3" :gap="4">
<OfferCard
v-for="offer in offers"
:key="offer.uuid"
:offer="offer"
/>
</Grid>
<Stack v-if="totalOffers > 0" direction="row" align="center" justify="between">
<Text tone="muted">
{{ t('common.pagination.showing', { shown: offers.length, total: totalOffers }) }}
</Text>
<Button v-if="canLoadMore" variant="outline" @click="loadMore">
{{ t('common.actions.load_more') }}
</Button>
</Stack>
<Stack v-if="offers.length === 0" align="center" gap="2">
<Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
</Stack>
</Stack>
</Section>
</template>
<script setup lang="ts">
interface OfferLine {
uuid?: string | null
productName?: string | null
}
interface Offer {
uuid?: string | null
title?: string | null
locationName?: string | null
status?: string | null
validUntil?: string | null
lines?: (OfferLine | null)[] | null
}
const props = defineProps<{
offers: Offer[]
total?: number
canLoadMore?: boolean
onLoadMore?: () => void
}>()
const localePath = useLocalePath()
const { t } = useI18n()
const totalOffers = computed(() => props.total ?? props.offers.length)
const canLoadMore = computed(() => props.canLoadMore ?? false)
const loadMore = () => {
props.onLoadMore?.()
}
</script>