100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
<template>
|
|
<CatalogPage
|
|
:items="filteredProducts"
|
|
:loading="isLoading"
|
|
:total-count="products.length"
|
|
with-map
|
|
use-server-clustering
|
|
cluster-node-type="offer"
|
|
map-id="offers-products-map"
|
|
point-color="#22c55e"
|
|
:hovered-id="hoveredProductId"
|
|
@update:hovered-id="hoveredProductId = $event"
|
|
>
|
|
<template #searchBar>
|
|
<CatalogSearchBar
|
|
v-model:search-query="searchQuery"
|
|
:show-counter="false"
|
|
/>
|
|
</template>
|
|
|
|
<template #header>
|
|
<!-- Empty -->
|
|
<Card v-if="!isLoading && products.length === 0" padding="lg">
|
|
<Stack align="center" gap="4">
|
|
<IconCircle tone="primary">
|
|
<Icon name="lucide:package" size="24" />
|
|
</IconCircle>
|
|
<Heading :level="2">{{ t('catalogProducts.empty.title') }}</Heading>
|
|
<Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<!-- Header -->
|
|
<div v-else>
|
|
<Heading :level="1">{{ t('catalogProducts.header.title') }}</Heading>
|
|
<Text tone="muted" size="sm">{{ t('catalogProducts.header.subtitle', { count: products.length }) }}</Text>
|
|
</div>
|
|
</template>
|
|
|
|
<template #card="{ item }">
|
|
<HubProductCard
|
|
:name="item.name || ''"
|
|
:price-history="getMockPriceHistory(item.uuid)"
|
|
@select="goToProduct(item.uuid)"
|
|
/>
|
|
</template>
|
|
|
|
<template #empty>
|
|
<Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
|
|
</template>
|
|
</CatalogPage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'topnav'
|
|
})
|
|
|
|
const localePath = useLocalePath()
|
|
const { t } = useI18n()
|
|
|
|
const { items: products, isLoading, init } = useCatalogProducts()
|
|
|
|
// Hovered product for map sync
|
|
const hoveredProductId = ref<string>()
|
|
|
|
// Search
|
|
const searchQuery = ref('')
|
|
|
|
const filteredProducts = computed(() => {
|
|
if (!searchQuery.value.trim()) return products.value
|
|
const q = searchQuery.value.toLowerCase()
|
|
return products.value.filter(item =>
|
|
item.name?.toLowerCase().includes(q)
|
|
)
|
|
})
|
|
|
|
// Navigate to product detail
|
|
const goToProduct = (productId: string) => {
|
|
navigateTo(localePath(`/catalog/offers/${productId}`))
|
|
}
|
|
|
|
// Mock price history generator (seeded by uuid for consistent results)
|
|
const getMockPriceHistory = (uuid: string): number[] => {
|
|
const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
|
|
const basePrice = 100 + (seed % 200)
|
|
return Array.from({ length: 7 }, (_, i) => {
|
|
const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
|
|
return Math.round(basePrice + variation)
|
|
})
|
|
}
|
|
|
|
// Initialize
|
|
await init()
|
|
|
|
useHead(() => ({
|
|
title: t('catalogProducts.header.title')
|
|
}))
|
|
</script>
|