45ec9923e3
All checks were successful
Build Docker Image / build (push) Successful in 4m47s
All catalog pages now use CatalogPage component with map on the right side: - /catalog/hubs/[id] - shows hub on map - /catalog/offers - shows empty map (products have no coords) - /catalog/offers/[productId] - shows hubs where product can be delivered - /catalog/suppliers/[supplierId] - shows supplier location - /catalog/suppliers/[supplierId]/[productId] - shows hubs for supplier's product - /catalog/suppliers/[supplierId]/[productId]/[hubId] - shows source and destination
74 lines
2.0 KiB
Vue
74 lines
2.0 KiB
Vue
<template>
|
|
<CatalogPage
|
|
:items="products"
|
|
:loading="isLoading"
|
|
with-map
|
|
map-id="offers-products-map"
|
|
point-color="#3b82f6"
|
|
>
|
|
<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()
|
|
|
|
// 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>
|