optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign SupplierCard and ProductCard, unify components
All checks were successful
Build Docker Image / build (push) Successful in 4m0s
Details

Browse Source 
- SupplierCard: horizontal layout with logo left, verified badge before name, chips at bottom
- ProductCard: add optional sparkline background, trend indicator, and price display
- Replace HubProductCard usage with ProductCard in hub detail page
- Remove HubProductCard.vue and PriceSparkline.vue (unified into ProductCard)
This commit is contained in:
Ruslan Bakiev
2026-01-27 10:49:58 +07:00
parent 20e0e73c58
commit 7bd4aa37bd
5 changed files with 134 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/components/catalog/SupplierCard.vue
View File

@@ -9,35 +9,45 @@
<Card
padding="small"
:interactive="linkable || selectable"
class="relative"
:class="[
isSelected && 'ring-2 ring-primary ring-offset-2'
]"
>
<!-- Verified badge top-right -->
<span v-if="supplier.isVerified" class="absolute -top-2 -right-2 badge badge-neutral badge-sm">
{{ t('catalogSupplier.badges.verified') }}
</span>
<div class="flex flex-col gap-1">
<!-- Logo -->
<div v-if="supplier.logo" class="w-12 h-12 mb-1">
<img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded">
<div class="flex flex-col gap-3">
<!-- Top row: Logo + Info -->
<div class="flex gap-3 items-start">
<!-- Logo -->
<div v-if="supplier.logo" class="w-12 h-12 shrink-0">
<img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded">
</div>
<div v-else class="w-12 h-12 shrink-0 bg-primary/10 text-primary font-bold rounded flex items-center justify-center text-lg">
{{ supplier.name?.charAt(0) }}
</div>
<!-- Info -->
<div class="min-w-0 flex-1">
<!-- Name with verified badge -->
<div class="flex items-center gap-1.5">
<span v-if="supplier.isVerified" class="text-primary text-sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
</svg>
</span>
<Text size="base" weight="semibold" class="truncate">{{ supplier.name }}</Text>
</div>
<!-- Country -->
<Text tone="muted" size="sm">
{{ countryFlag }} {{ supplier.country || t('catalogMap.labels.country_unknown') }}
</Text>
</div>
</div>
<div v-else class="w-12 h-12 bg-primary/10 text-primary font-bold rounded flex items-center justify-center text-lg mb-1">
{{ supplier.name?.charAt(0) }}
</div>
<!-- Title -->
<Text size="base" weight="semibold" class="truncate">{{ supplier.name }}</Text>
<!-- Badges -->
<!-- Bottom row: Badges/Chips -->
<div class="flex flex-wrap gap-1">
<span class="badge badge-neutral badge-dash text-xs">
<span v-if="reliabilityLabel" class="badge badge-neutral badge-sm">
{{ reliabilityLabel }}
</span>
</div>
<!-- Country below -->
<Text tone="muted" size="sm">
{{ countryFlag }} {{ supplier.country || t('catalogMap.labels.country_unknown') }}
</Text>
</div>
</Card>
</component>