feat(catalog): implement step-by-step navigation for offers and suppliers
All checks were successful
Build Docker Image / build (push) Successful in 4m49s
All checks were successful
Build Docker Image / build (push) Successful in 4m49s
- Transform offers/index.vue to show products list with sparkline charts - Create nested routes for offers: /offers → /offers/[productId] → /offers/[productId]/[hubId] - Create nested routes for suppliers: /suppliers → /suppliers/[supplierId] → /suppliers/[supplierId]/[productId] → /suppliers/[supplierId]/[productId]/[hubId] - Add OffersBreadcrumbs and SuppliersBreadcrumbs components for navigation - Update HubCard to accept custom linkTo prop - Key difference: Suppliers calculation uses FindRoutes (single source), Offers uses FindProductRoutes (all sources)
This commit is contained in:
Ruslan Bakiev
301
app/pages/catalog/offers/[productId]/[hubId].vue
Normal file
301
app/pages/catalog/offers/[productId]/[hubId].vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<Stack gap="0">
|
||||
<!-- Loading -->
|
||||
<Section v-if="isLoading" variant="plain" paddingY="lg">
|
||||
<Stack align="center" justify="center" gap="4">
|
||||
<Spinner />
|
||||
<Text tone="muted">{{ t('catalogProductHubs.states.loading') }}</Text>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<!-- Error / Not Found -->
|
||||
<Section v-else-if="!hub || !product" variant="plain" paddingY="lg">
|
||||
<Card padding="lg">
|
||||
<Stack align="center" gap="4">
|
||||
<IconCircle tone="primary">
|
||||
<Icon name="lucide:package-x" size="24" />
|
||||
</IconCircle>
|
||||
<Heading :level="2">{{ t('catalogProductHubs.calculation.not_found.title') }}</Heading>
|
||||
<Text tone="muted">{{ t('catalogProductHubs.calculation.not_found.subtitle') }}</Text>
|
||||
<Button @click="navigateTo(localePath(`/catalog/offers/${productId}`))">
|
||||
{{ t('catalogProductHubs.actions.back_to_hubs') }}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<!-- Content -->
|
||||
<template v-else>
|
||||
<CatalogPage
|
||||
:items="sources"
|
||||
:loading="isLoadingRoutes"
|
||||
:with-map="true"
|
||||
map-id="offers-product-hub-sources-map"
|
||||
point-color="#10b981"
|
||||
v-model:selected-id="selectedSourceUuid"
|
||||
>
|
||||
<template #header>
|
||||
<Stack gap="3">
|
||||
<!-- Breadcrumbs -->
|
||||
<OffersBreadcrumbs
|
||||
:product-id="productId"
|
||||
:product-name="product.name"
|
||||
:hub-id="hubId"
|
||||
:hub-name="hub.name"
|
||||
/>
|
||||
|
||||
<!-- Product info -->
|
||||
<div>
|
||||
<Heading :level="1">{{ product.name }}</Heading>
|
||||
<Text tone="muted" size="sm">{{ t('catalogProductHubs.calculation.destination') }}: {{ hub.name }}, {{ hub.country }}</Text>
|
||||
</div>
|
||||
|
||||
<!-- Price chart -->
|
||||
<Card padding="md">
|
||||
<Stack gap="2">
|
||||
<Text weight="semibold" size="sm">{{ t('catalogProductHubs.chart.title') }}</Text>
|
||||
<div class="h-48">
|
||||
<ClientOnly>
|
||||
<apexchart
|
||||
type="area"
|
||||
height="180"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</template>
|
||||
|
||||
<template #card="{ item }">
|
||||
<OfferResultCard
|
||||
:location-name="getOfferData(item.uuid)?.locationName"
|
||||
:product-name="product.name"
|
||||
:price-per-unit="getOfferData(item.uuid)?.pricePerUnit"
|
||||
:currency="getOfferData(item.uuid)?.currency"
|
||||
:unit="getOfferData(item.uuid)?.unit"
|
||||
:stages="item.stages"
|
||||
:start-name="item.name"
|
||||
:end-name="hub?.name"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<Stack align="center" gap="2">
|
||||
<Icon name="lucide:truck" size="32" class="text-base-content/40" />
|
||||
<Text tone="muted">{{ t('catalogProductHubs.calculation.empty') }}</Text>
|
||||
</Stack>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
</Stack>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetNodeConnectionsDocument, FindProductRoutesDocument } from '~/composables/graphql/public/geo-generated'
|
||||
import { GetAvailableProductsDocument, GetOfferDocument } from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
const { execute } = useGraphQL()
|
||||
|
||||
const isLoading = ref(true)
|
||||
const isLoadingRoutes = ref(false)
|
||||
const hub = ref<any>(null)
|
||||
const product = ref<{ uuid: string; name: string } | null>(null)
|
||||
const selectedSourceUuid = ref('')
|
||||
const rawSources = ref<any[]>([])
|
||||
const offersData = ref<Map<string, any>>(new Map())
|
||||
|
||||
const productId = computed(() => route.params.productId as string)
|
||||
const hubId = computed(() => route.params.hubId as string)
|
||||
|
||||
// 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: 30 }, (_, i) => {
|
||||
const variation = Math.sin(seed + i * 0.3) * 30 + Math.cos(seed * 0.2 + i) * 15
|
||||
return Math.round(basePrice + variation)
|
||||
})
|
||||
}
|
||||
|
||||
// Chart configuration
|
||||
const priceHistory = computed(() => getMockPriceHistory(productId.value))
|
||||
|
||||
const trend = computed(() => {
|
||||
if (priceHistory.value.length < 2) return 0
|
||||
const first = priceHistory.value[0]
|
||||
const last = priceHistory.value[priceHistory.value.length - 1]
|
||||
if (!first || first === 0) return 0
|
||||
return Math.round(((last - first) / first) * 100)
|
||||
})
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
chart: {
|
||||
type: 'area',
|
||||
toolbar: { show: false },
|
||||
animations: { enabled: true }
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.1
|
||||
}
|
||||
},
|
||||
colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
categories: priceHistory.value.map((_, i) => `${i + 1}`),
|
||||
labels: { show: false }
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: (val: number) => `$${val}`
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: (val: number) => `$${val}`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#e5e7eb',
|
||||
strokeDashArray: 4
|
||||
}
|
||||
}))
|
||||
|
||||
const chartSeries = computed(() => [{
|
||||
name: t('catalogProductHubs.chart.price'),
|
||||
data: priceHistory.value
|
||||
}])
|
||||
|
||||
// Transform sources for CatalogPage
|
||||
const sources = computed(() => {
|
||||
return rawSources.value.map(source => ({
|
||||
uuid: source.sourceUuid || '',
|
||||
name: source.sourceName || '',
|
||||
latitude: source.sourceLat,
|
||||
longitude: source.sourceLon,
|
||||
distanceKm: source.distanceKm,
|
||||
durationSeconds: source.routes?.[0]?.totalTimeSeconds,
|
||||
stages: (source.routes?.[0]?.stages || []).map((stage: any) => ({
|
||||
transportType: stage?.transportType,
|
||||
distanceKm: stage?.distanceKm
|
||||
}))
|
||||
}))
|
||||
})
|
||||
|
||||
// Get offer data for card
|
||||
const getOfferData = (uuid: string) => {
|
||||
return offersData.value.get(uuid)
|
||||
}
|
||||
|
||||
// Load offer details for prices
|
||||
const loadOfferDetails = async () => {
|
||||
if (rawSources.value.length === 0) {
|
||||
offersData.value.clear()
|
||||
return
|
||||
}
|
||||
|
||||
const newOffersData = new Map<string, any>()
|
||||
await Promise.all(rawSources.value.map(async (source) => {
|
||||
try {
|
||||
const data = await execute(GetOfferDocument, { uuid: source.sourceUuid }, 'public', 'exchange')
|
||||
if (data?.getOffer) {
|
||||
newOffersData.set(source.sourceUuid, data.getOffer)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading offer:', source.sourceUuid, error)
|
||||
}
|
||||
}))
|
||||
offersData.value = newOffersData
|
||||
}
|
||||
|
||||
// Load routes
|
||||
const loadRoutes = async () => {
|
||||
if (!productId.value || !hubId.value) {
|
||||
rawSources.value = []
|
||||
offersData.value.clear()
|
||||
return
|
||||
}
|
||||
|
||||
isLoadingRoutes.value = true
|
||||
selectedSourceUuid.value = ''
|
||||
|
||||
try {
|
||||
const data = await execute(
|
||||
FindProductRoutesDocument,
|
||||
{
|
||||
productUuid: productId.value,
|
||||
toUuid: hubId.value,
|
||||
limitSources: 12,
|
||||
limitRoutes: 1
|
||||
},
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
rawSources.value = (data?.findProductRoutes || []).filter(Boolean)
|
||||
await loadOfferDetails()
|
||||
} catch (error) {
|
||||
console.error('Error loading routes:', error)
|
||||
rawSources.value = []
|
||||
} finally {
|
||||
isLoadingRoutes.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Initial load
|
||||
try {
|
||||
const [{ data: hubData }, { data: productsData }] = await Promise.all([
|
||||
useServerQuery('hub-info', GetNodeConnectionsDocument, { uuid: hubId.value }, 'public', 'geo'),
|
||||
useServerQuery('available-products', GetAvailableProductsDocument, {}, 'public', 'exchange')
|
||||
])
|
||||
|
||||
hub.value = hubData.value?.nodeConnections?.hub || null
|
||||
|
||||
const products = (productsData.value?.getAvailableProducts || [])
|
||||
.filter((p): p is { uuid: string; name: string } => p !== null && !!p.uuid && !!p.name)
|
||||
|
||||
product.value = products.find(p => p.uuid === productId.value) || null
|
||||
|
||||
// Load routes after initial data
|
||||
if (product.value && hub.value) {
|
||||
await loadRoutes()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
// SEO
|
||||
useHead(() => ({
|
||||
title: product.value?.name && hub.value?.name
|
||||
? `${product.value.name} - ${hub.value.name}`
|
||||
: t('catalogProductHubs.meta.title'),
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: t('catalogProductHubs.calculation.meta.description', {
|
||||
product: product.value?.name || '',
|
||||
hub: hub.value?.name || '',
|
||||
offers: sources.value.length
|
||||
})
|
||||
}
|
||||
]
|
||||
}))
|
||||
</script>
|
||||
163
app/pages/catalog/offers/[productId]/index.vue
Normal file
163
app/pages/catalog/offers/[productId]/index.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<Stack gap="0">
|
||||
<!-- Loading -->
|
||||
<Section v-if="isLoading" variant="plain" paddingY="lg">
|
||||
<Stack align="center" justify="center" gap="4">
|
||||
<Spinner />
|
||||
<Text tone="muted">{{ t('catalogProductHubs.states.loading') }}</Text>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<!-- Product Not Found -->
|
||||
<Section v-else-if="!product" variant="plain" paddingY="lg">
|
||||
<Card padding="lg">
|
||||
<Stack align="center" gap="4">
|
||||
<IconCircle tone="primary">
|
||||
<Icon name="lucide:package-x" size="24" />
|
||||
</IconCircle>
|
||||
<Heading :level="2">{{ t('catalogProductHubs.not_found.title') }}</Heading>
|
||||
<Text tone="muted">{{ t('catalogProductHubs.not_found.subtitle') }}</Text>
|
||||
<Button @click="navigateTo(localePath('/catalog/offers'))">
|
||||
{{ t('catalogProductHubs.actions.back_to_products') }}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<!-- Content -->
|
||||
<Section v-else variant="plain" paddingY="lg">
|
||||
<Stack gap="4">
|
||||
<!-- Breadcrumbs -->
|
||||
<OffersBreadcrumbs :product-id="productId" :product-name="product.name" />
|
||||
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<Heading :level="1">{{ product.name }}</Heading>
|
||||
<Text tone="muted" size="sm">{{ t('catalogProductHubs.header.subtitle', { count: hubs.length }) }}</Text>
|
||||
</div>
|
||||
|
||||
<!-- Price chart -->
|
||||
<Card padding="md">
|
||||
<div class="h-48">
|
||||
<ClientOnly>
|
||||
<apexchart
|
||||
type="area"
|
||||
height="180"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Hubs grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<HubCard
|
||||
v-for="hub in hubs"
|
||||
:key="hub.uuid"
|
||||
:hub="hub"
|
||||
:link-to="localePath(`/catalog/offers/${productId}/${hub.uuid}`)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<Stack v-if="hubs.length === 0" align="center" gap="2">
|
||||
<Icon name="lucide:map-pin-off" size="32" class="text-base-content/40" />
|
||||
<Text tone="muted">{{ t('catalogProductHubs.empty.no_hubs') }}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Section>
|
||||
</Stack>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetAvailableProductsDocument } from '~/composables/graphql/public/exchange-generated'
|
||||
import { GetNodesDocument } from '~/composables/graphql/public/geo-generated'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isLoading = ref(true)
|
||||
const product = ref<{ uuid: string; name: string } | null>(null)
|
||||
const hubs = ref<Array<{ uuid: string; name: string; country?: string; countryCode?: string }>>([])
|
||||
|
||||
const productId = computed(() => route.params.productId as string)
|
||||
|
||||
// Mock price history generator
|
||||
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: 30 }, (_, i) => {
|
||||
const variation = Math.sin(seed + i * 0.3) * 20 + Math.cos(seed * 0.2 + i) * 15
|
||||
return Math.round(basePrice + variation)
|
||||
})
|
||||
}
|
||||
|
||||
const priceHistory = computed(() => product.value ? getMockPriceHistory(product.value.uuid) : [])
|
||||
|
||||
// Chart configuration
|
||||
const chartOptions = computed(() => ({
|
||||
chart: {
|
||||
type: 'area',
|
||||
sparkline: { enabled: false },
|
||||
toolbar: { show: false },
|
||||
animations: { enabled: false }
|
||||
},
|
||||
stroke: { curve: 'smooth', width: 2 },
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
|
||||
},
|
||||
colors: ['#3b82f6'],
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false }
|
||||
},
|
||||
yaxis: { labels: { show: true } },
|
||||
grid: { show: true, borderColor: '#e5e7eb', strokeDashArray: 4 },
|
||||
tooltip: { enabled: true }
|
||||
}))
|
||||
|
||||
const chartSeries = computed(() => [{
|
||||
name: t('catalogProductHubs.chart.price'),
|
||||
data: priceHistory.value
|
||||
}])
|
||||
|
||||
// Initial load
|
||||
try {
|
||||
const [{ data: productsData }, { data: hubsData }] = await Promise.all([
|
||||
useServerQuery('product-info', GetAvailableProductsDocument, {}, 'public', 'exchange'),
|
||||
useServerQuery('all-hubs', GetNodesDocument, { limit: 100 }, 'public', 'geo')
|
||||
])
|
||||
|
||||
const foundProduct = (productsData.value?.getAvailableProducts || [])
|
||||
.find(p => p?.uuid === productId.value)
|
||||
|
||||
if (foundProduct) {
|
||||
product.value = { uuid: foundProduct.uuid!, name: foundProduct.name || '' }
|
||||
}
|
||||
|
||||
hubs.value = (hubsData.value?.nodes || [])
|
||||
.filter((h): h is { uuid: string; name: string; country?: string; countryCode?: string } =>
|
||||
h !== null && !!h.uuid && !!h.name
|
||||
)
|
||||
.map(h => ({ uuid: h.uuid!, name: h.name!, country: h.country || undefined, countryCode: h.countryCode || undefined }))
|
||||
} catch (error) {
|
||||
console.error('Error loading product hubs:', error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
// SEO
|
||||
useHead(() => ({
|
||||
title: product.value?.name
|
||||
? t('catalogProductHubs.meta.title_with_name', { name: product.value.name })
|
||||
: t('catalogProductHubs.meta.title')
|
||||
}))
|
||||
</script>
|
||||
Reference in New Issue
Block a user