From c152a5b14c1da90265de2d79b437d1c56aa53c96 Mon Sep 17 00:00:00 2001 From: Ruslan Bakiev <572431+veikab@users.noreply.github.com> Date: Tue, 27 Jan 2026 11:48:46 +0700 Subject: [PATCH] Update catalog cards - logo right in supplier, sparkline in product - SupplierCard: Move logo to right side, text on left - ProductCard: Generate mock priceHistory from uuid, add product icon --- app/components/catalog/ProductCard.vue | 89 +++++++++++++++++-------- app/components/catalog/SupplierCard.vue | 20 +++--- 2 files changed, 71 insertions(+), 38 deletions(-) diff --git a/app/components/catalog/ProductCard.vue b/app/components/catalog/ProductCard.vue index 1dcb63a..aeeac63 100644 --- a/app/components/catalog/ProductCard.vue +++ b/app/components/catalog/ProductCard.vue @@ -15,7 +15,7 @@ ]" > -
+
-
- {{ product.name }} - - {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}% - -
+
+ +
+ +
-
- - {{ product.offersCount }} {{ t('catalog.offers', product.offersCount) }} - - - {{ formattedPrice }} - -
+ +
+
+ {{ product.name }} + + {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}% + +
- - {{ product.description }} - +
+ + {{ product.offersCount }} {{ t('catalog.offers', product.offersCount) }} + + + {{ formattedPrice }} + +
+ + + {{ product.description }} + +
+
@@ -87,11 +97,34 @@ const { t } = useI18n() const linkable = computed(() => !props.selectable && !!props.product.uuid) +// Generate mock price history based on uuid for consistency +const effectivePriceHistory = computed(() => { + if (props.priceHistory && props.priceHistory.length > 0) { + return props.priceHistory + } + if (!props.product.uuid) return [] + const seed = props.product.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) + }) +}) + +// Effective price - use provided or last from history +const effectivePrice = computed(() => { + if (props.currentPrice) return props.currentPrice + if (effectivePriceHistory.value.length > 0) { + return effectivePriceHistory.value[effectivePriceHistory.value.length - 1] + } + return null +}) + // Price formatting const formattedPrice = computed(() => { - if (!props.currentPrice) return '' + if (!effectivePrice.value) return '' const symbol = getCurrencySymbol(props.currency) - return `${symbol}${props.currentPrice.toLocaleString()}` + return `${symbol}${effectivePrice.value.toLocaleString()}` }) const getCurrencySymbol = (currency?: string | null) => { @@ -106,9 +139,9 @@ const getCurrencySymbol = (currency?: string | null) => { // Calculate trend from price history const trend = computed(() => { - if (!props.priceHistory || props.priceHistory.length < 2) return 0 - const first = props.priceHistory[0] - const last = props.priceHistory[props.priceHistory.length - 1] + if (effectivePriceHistory.value.length < 2) return 0 + const first = effectivePriceHistory.value[0] + const last = effectivePriceHistory.value[effectivePriceHistory.value.length - 1] if (!first || first === 0 || !last) return 0 return Math.round(((last - first) / first) * 100) }) @@ -140,6 +173,6 @@ const chartOptions = computed(() => ({ const chartSeries = computed(() => [{ name: 'Price', - data: props.priceHistory && props.priceHistory.length > 0 ? props.priceHistory : [0] + data: effectivePriceHistory.value.length > 0 ? effectivePriceHistory.value : [0] }]) diff --git a/app/components/catalog/SupplierCard.vue b/app/components/catalog/SupplierCard.vue index 31ba939..ce84dc8 100644 --- a/app/components/catalog/SupplierCard.vue +++ b/app/components/catalog/SupplierCard.vue @@ -14,17 +14,9 @@ ]" >
- +
- -
- -
-
- {{ supplier.name?.charAt(0) }} -
- - +
@@ -40,6 +32,14 @@ {{ countryFlag }} {{ supplier.country || t('catalogMap.labels.country_unknown') }}
+ + +
+ +
+
+ {{ supplier.name?.charAt(0) }} +