chore(catalog): simplify nested page headers, remove charts
Some checks failed
Build Docker Image / build (push) Has been cancelled
Some checks failed
Build Docker Image / build (push) Has been cancelled
- Remove chart components and unused price history code - Simplify headers to show only hint text - Keep navigation badges in search bar
This commit is contained in:
Ruslan Bakiev
@@ -43,30 +43,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #header>
|
<template #header>
|
||||||
<Stack gap="3">
|
<Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
|
||||||
<!-- Product info -->
|
|
||||||
<div>
|
|
||||||
<Heading :level="1">{{ product.name }}</Heading>
|
|
||||||
<Text tone="muted" size="sm">{{ hub.name }}, {{ hub.country }}</Text>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Price chart -->
|
|
||||||
<Card padding="md">
|
|
||||||
<Stack gap="2">
|
|
||||||
<Text weight="semibold" size="sm">{{ t('catalogHub.product.priceHistory') }}</Text>
|
|
||||||
<div class="h-48">
|
|
||||||
<ClientOnly>
|
|
||||||
<apexchart
|
|
||||||
type="area"
|
|
||||||
height="180"
|
|
||||||
:options="chartOptions"
|
|
||||||
:series="chartSeries"
|
|
||||||
/>
|
|
||||||
</ClientOnly>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #card="{ item }">
|
<template #card="{ item }">
|
||||||
@@ -149,72 +126,6 @@ const handleRemoveFilter = (filterId: 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('catalogHub.product.price'),
|
|
||||||
data: priceHistory.value
|
|
||||||
}])
|
|
||||||
|
|
||||||
// Transform sources for CatalogPage
|
// Transform sources for CatalogPage
|
||||||
const sources = computed(() => {
|
const sources = computed(() => {
|
||||||
return rawSources.value.map(source => ({
|
return rawSources.value.map(source => ({
|
||||||
|
|||||||
@@ -19,28 +19,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #header>
|
<template #header>
|
||||||
<!-- Not Found -->
|
<Text v-if="!isLoading && !hub" tone="muted">Хаб не найден</Text>
|
||||||
<Card v-if="!isLoading && !hub" padding="lg">
|
<Text v-else-if="!isLoading" tone="muted">Выберите товар</Text>
|
||||||
<Stack align="center" gap="4">
|
|
||||||
<IconCircle tone="primary">
|
|
||||||
<Icon name="lucide:map-pin" size="24" />
|
|
||||||
</IconCircle>
|
|
||||||
<Heading :level="2">{{ t('catalogHub.not_found.title') }}</Heading>
|
|
||||||
<Text tone="muted">{{ t('catalogHub.not_found.subtitle') }}</Text>
|
|
||||||
<Button @click="navigateTo(localePath('/catalog'))">
|
|
||||||
{{ t('catalogHub.actions.back_to_catalog') }}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<!-- Content Header -->
|
|
||||||
<Stack v-else gap="4">
|
|
||||||
<!-- Header -->
|
|
||||||
<div>
|
|
||||||
<Heading :level="1">{{ hub?.name }}</Heading>
|
|
||||||
<Text tone="muted" size="sm">{{ hub?.country }}</Text>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #card="{ item }">
|
<template #card="{ item }">
|
||||||
|
|||||||
@@ -43,30 +43,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #header>
|
<template #header>
|
||||||
<Stack gap="3">
|
<Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
|
||||||
<!-- 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>
|
||||||
|
|
||||||
<template #card="{ item }">
|
<template #card="{ item }">
|
||||||
@@ -149,72 +126,6 @@ const handleRemoveFilter = (filterId: 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
|
// Transform sources for CatalogPage
|
||||||
const sources = computed(() => {
|
const sources = computed(() => {
|
||||||
return rawSources.value.map(source => ({
|
return rawSources.value.map(source => ({
|
||||||
|
|||||||
@@ -23,42 +23,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #header>
|
<template #header>
|
||||||
<!-- Product Not Found -->
|
<Text v-if="!isLoading && !product" tone="muted">Товар не найден</Text>
|
||||||
<Card v-if="!isLoading && !product" padding="lg">
|
<Text v-else-if="!isLoading" tone="muted">Выберите хаб</Text>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Content Header -->
|
|
||||||
<Stack v-else gap="4">
|
|
||||||
<!-- 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>
|
|
||||||
</Stack>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #card="{ item }">
|
<template #card="{ item }">
|
||||||
@@ -134,47 +100,6 @@ const onSelectHub = (hub: any) => {
|
|||||||
navigateTo(localePath(`/catalog/offers/${productId.value}/${hub.uuid}`))
|
navigateTo(localePath(`/catalog/offers/${productId.value}/${hub.uuid}`))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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
|
// Initial load
|
||||||
try {
|
try {
|
||||||
// Get offers for this product from geo
|
// Get offers for this product from geo
|
||||||
|
|||||||
@@ -15,55 +15,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #header>
|
<template #header>
|
||||||
<!-- Not Found -->
|
<Text v-if="!isLoading && (!supplier || !product || !hub)" tone="muted">Данные не найдены</Text>
|
||||||
<Card v-if="!isLoading && (!supplier || !product || !hub)" padding="lg">
|
|
||||||
<Stack align="center" gap="4">
|
|
||||||
<IconCircle tone="primary">
|
|
||||||
<Icon name="lucide:package-x" size="24" />
|
|
||||||
</IconCircle>
|
|
||||||
<Heading :level="2">{{ t('catalogSupplierCalculation.not_found.title') }}</Heading>
|
|
||||||
<Text tone="muted">{{ t('catalogSupplierCalculation.not_found.subtitle') }}</Text>
|
|
||||||
<Button @click="navigateTo(localePath(`/catalog/suppliers/${supplierId}/${productId}`))">
|
|
||||||
{{ t('catalogSupplierCalculation.actions.back_to_hubs') }}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<!-- Content Header -->
|
|
||||||
<Stack v-else gap="4">
|
|
||||||
<!-- Header -->
|
|
||||||
<div>
|
|
||||||
<Heading :level="1">{{ product?.name }}</Heading>
|
|
||||||
<div class="flex flex-col gap-1 mt-1">
|
|
||||||
<Text tone="muted" size="sm">
|
|
||||||
{{ t('catalogSupplierCalculation.header.supplier') }}: {{ supplier?.name }}
|
|
||||||
</Text>
|
|
||||||
<Text tone="muted" size="sm">
|
|
||||||
{{ t('catalogSupplierCalculation.header.from') }}: {{ sourceLocation?.name || t('common.values.not_available') }}
|
|
||||||
</Text>
|
|
||||||
<Text tone="muted" size="sm">
|
|
||||||
{{ t('catalogSupplierCalculation.header.to') }}: {{ hub?.name }}, {{ hub?.country }}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Price chart -->
|
|
||||||
<Card padding="md">
|
|
||||||
<Stack gap="2">
|
|
||||||
<Text weight="semibold" size="sm">{{ t('catalogSupplierCalculation.chart.title') }}</Text>
|
|
||||||
<div class="h-48">
|
|
||||||
<ClientOnly>
|
|
||||||
<apexchart
|
|
||||||
type="area"
|
|
||||||
height="180"
|
|
||||||
:options="chartOptions"
|
|
||||||
:series="chartSeries"
|
|
||||||
/>
|
|
||||||
</ClientOnly>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #card="{ item }">
|
<template #card="{ item }">
|
||||||
@@ -241,53 +193,6 @@ const getTransportIcon = (type?: string | null) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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) * 30 + Math.cos(seed * 0.2 + i) * 15
|
|
||||||
return Math.round(basePrice + variation)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const priceHistory = computed(() => product.value ? getMockPriceHistory(product.value.uuid) : [])
|
|
||||||
|
|
||||||
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('catalogSupplierCalculation.chart.price'),
|
|
||||||
data: priceHistory.value
|
|
||||||
}])
|
|
||||||
|
|
||||||
// Load route using delivery to hub
|
// Load route using delivery to hub
|
||||||
const loadRoute = async (offerUuid: string) => {
|
const loadRoute = async (offerUuid: string) => {
|
||||||
if (!offerUuid || !hubId.value) {
|
if (!offerUuid || !hubId.value) {
|
||||||
|
|||||||
@@ -21,52 +21,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #header>
|
<template #header>
|
||||||
<!-- Not Found -->
|
<Text v-if="!isLoading && (!supplier || !product)" tone="muted">Товар не найден</Text>
|
||||||
<Card v-if="!isLoading && (!supplier || !product)" padding="lg">
|
<Text v-else-if="!isLoading" tone="muted">Выберите хаб</Text>
|
||||||
<Stack align="center" gap="4">
|
|
||||||
<IconCircle tone="primary">
|
|
||||||
<Icon name="lucide:package-x" size="24" />
|
|
||||||
</IconCircle>
|
|
||||||
<Heading :level="2">{{ t('catalogSupplierProductHubs.not_found.title') }}</Heading>
|
|
||||||
<Text tone="muted">{{ t('catalogSupplierProductHubs.not_found.subtitle') }}</Text>
|
|
||||||
<Button @click="navigateTo(localePath(`/catalog/suppliers/${supplierId}`))">
|
|
||||||
{{ t('catalogSupplierProductHubs.actions.back_to_supplier') }}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<!-- Content Header -->
|
|
||||||
<Stack v-else gap="4">
|
|
||||||
<!-- Header -->
|
|
||||||
<div>
|
|
||||||
<Heading :level="1">{{ product?.name }}</Heading>
|
|
||||||
<Text tone="muted" size="sm">
|
|
||||||
{{ t('catalogSupplierProductHubs.header.from_supplier', { supplier: supplier?.name }) }}
|
|
||||||
</Text>
|
|
||||||
<Text tone="muted" size="sm" v-if="sourceLocation">
|
|
||||||
{{ t('catalogSupplierProductHubs.header.source_location', { location: sourceLocation.name }) }}
|
|
||||||
</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 Section Title -->
|
|
||||||
<Text weight="semibold" size="lg">
|
|
||||||
{{ t('catalogSupplierProductHubs.header.hubs_title', { count: hubs.length }) }}
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #card="{ item }">
|
<template #card="{ item }">
|
||||||
@@ -159,47 +115,6 @@ const onSelectHub = (hub: any) => {
|
|||||||
navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}/${hub.uuid}`))
|
navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}/${hub.uuid}`))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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('catalogSupplierProductHubs.chart.price'),
|
|
||||||
data: priceHistory.value
|
|
||||||
}])
|
|
||||||
|
|
||||||
// Load data
|
// Load data
|
||||||
try {
|
try {
|
||||||
// Get supplier profile from exchange
|
// Get supplier profile from exchange
|
||||||
|
|||||||
@@ -19,45 +19,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #header>
|
<template #header>
|
||||||
<!-- Supplier Not Found -->
|
<Text v-if="!isLoading && !supplier" tone="muted">Поставщик не найден</Text>
|
||||||
<Card v-if="!isLoading && !supplier" padding="lg">
|
<Text v-else-if="!isLoading" tone="muted">Выберите товар</Text>
|
||||||
<Stack align="center" gap="4">
|
|
||||||
<IconCircle tone="primary">
|
|
||||||
<Icon name="lucide:building-2" size="24" />
|
|
||||||
</IconCircle>
|
|
||||||
<Heading :level="2">{{ t('catalogSupplierProducts.not_found.title') }}</Heading>
|
|
||||||
<Text tone="muted">{{ t('catalogSupplierProducts.not_found.subtitle') }}</Text>
|
|
||||||
<Button @click="navigateTo(localePath('/catalog/suppliers'))">
|
|
||||||
{{ t('catalogSupplierProducts.actions.back_to_suppliers') }}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<!-- Content Header -->
|
|
||||||
<Stack v-else gap="4">
|
|
||||||
<!-- Header with supplier info -->
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<!-- Logo -->
|
|
||||||
<div v-if="supplier?.logo" class="w-16 h-16 shrink-0">
|
|
||||||
<img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded-lg">
|
|
||||||
</div>
|
|
||||||
<div v-else class="w-16 h-16 bg-primary/10 text-primary font-bold rounded-lg flex items-center justify-center text-2xl shrink-0">
|
|
||||||
{{ supplier?.name?.charAt(0) }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Heading :level="1">{{ supplier?.name }}</Heading>
|
|
||||||
<Text tone="muted" size="sm">{{ supplier?.country }}</Text>
|
|
||||||
<div class="flex gap-2 mt-1">
|
|
||||||
<span v-if="supplier?.isVerified" class="badge badge-success badge-sm">
|
|
||||||
{{ t('catalogSupplier.badges.verified') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Products Section Title -->
|
|
||||||
<Text weight="semibold" size="lg">{{ t('catalogSupplierProducts.header.products_title', { count: products.length }) }}</Text>
|
|
||||||
</Stack>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #card="{ item }">
|
<template #card="{ item }">
|
||||||
|
|||||||
Reference in New Issue
Block a user