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

Improve nearest hubs layout and show distance
All checks were successful
Build Docker Image / build (push) Successful in 4m49s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-05 19:24:03 +07:00
parent 0f0b1db394
commit 71a27a4ab9
3 changed files with 58 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/catalog/HubCard.vue
View File

@@ -23,8 +23,8 @@
<Text tone="muted" size="sm">
{{ countryFlag }} {{ hub.country || t('catalogMap.labels.country_unknown') }}
</Text>
<span v-if="hub.distance" class="badge badge-neutral badge-dash text-xs">
{{ hub.distance }}
<span v-if="distanceLabel" class="badge badge-neutral badge-dash text-xs">
{{ distanceLabel }}
</span>
</div>
<!-- Transport icons bottom -->
@@ -48,6 +48,7 @@ interface Hub {
country?: string | null
countryCode?: string | null
distance?: string
distanceKm?: number | null
transportTypes?: (string | null)[] | null
}
@@ -82,4 +83,9 @@ const countryFlag = computed(() => {
})
const hasTransport = (type: string) => props.hub.transportTypes?.some(t => t === type)
const distanceLabel = computed(() => {
if (props.hub.distance) return props.hub.distance
if (props.hub.distanceKm != null) return `${Math.round(props.hub.distanceKm)} km`
return ''
})
</script>

56
app/components/catalog/InfoPanel.vue
View File

@@ -190,14 +190,41 @@
<div v-if="!loadingHubs && relatedHubs.length === 0" class="text-white/50 text-sm py-2">
{{ $t('catalog.info.noHubs') }}
</div>
<div v-else-if="!loadingHubs" class="flex flex-col gap-2">
<HubCard
v-for="(hub, index) in relatedHubs"
:key="hub.uuid ?? index"
:hub="hub"
selectable
@select="onHubSelect(hub)"
/>
<div v-else-if="!loadingHubs" class="space-y-2">
<div v-if="nearestRailHub || nearestSeaHub" class="grid grid-cols-2 gap-2">
<Card v-if="nearestRailHub" padding="small" class="border border-white/10 bg-white/5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
<Icon name="lucide:train-front" size="16" class="text-white/80" />
</div>
<div class="text-sm text-white/80">Ближайший ЖД хаб</div>
</div>
<div class="text-xs text-white/60">{{ formatDistance(nearestRailHub.distanceKm) }}</div>
</div>
</Card>
<Card v-if="nearestSeaHub" padding="small" class="border border-white/10 bg-white/5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
<Icon name="lucide:ship" size="16" class="text-white/80" />
</div>
<div class="text-sm text-white/80">Ближайший морской хаб</div>
</div>
<div class="text-xs text-white/60">{{ formatDistance(nearestSeaHub.distanceKm) }}</div>
</div>
</Card>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<HubCard
v-for="(hub, index) in relatedHubs"
:key="hub.uuid ?? index"
:hub="hub"
selectable
@select="onHubSelect(hub)"
/>
</div>
</div>
</section>
@@ -311,6 +338,19 @@ const formatPrice = (price: number | string) => {
return new Intl.NumberFormat('ru-RU').format(num)
}
const formatDistance = (km?: number | null) => {
if (!km && km !== 0) return ''
return `${Math.round(km).toLocaleString('ru-RU')} км`
}
const nearestRailHub = computed(() => {
return relatedHubs.value.find(h => h.transportTypes?.includes('rail'))
})
const nearestSeaHub = computed(() => {
return relatedHubs.value.find(h => h.transportTypes?.includes('sea'))
})
// Mock KYC teaser data (will be replaced with real data later)
const kycTeaser = computed(() => {
if (props.entityType !== 'supplier') return null