72 lines
2.0 KiB
Vue
72 lines
2.0 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">
|
|
<OfferResultCard
|
|
v-for="(offer, index) in offers"
|
|
:key="offer.uuid ?? index"
|
|
:location-name="offer.locationName"
|
|
:product-name="offer.title || undefined"
|
|
:stages="[]"
|
|
/>
|
|
</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>
|