Implement unified catalog search with token-based filtering
All checks were successful
Build Docker Image / build (push) Successful in 3m23s
All checks were successful
Build Docker Image / build (push) Successful in 3m23s
- Add useCatalogSearch composable for managing unified search state - Add UnifiedSearchBar component with token chips for filters - Add CatalogHero component for empty/landing state - Create grid components for each display mode: - CatalogGridProducts, CatalogGridSuppliers, CatalogGridHubs - CatalogGridHubsForProduct, CatalogGridProductsFromSupplier - CatalogGridProductsInHub, CatalogGridOffers - Add unified catalog page at /catalog with query params - Remove SubNavigation from catalog section (kept for other sections) - Update all links to use new unified catalog paths - Delete old nested catalog pages (offers/suppliers/hubs flows) - Add i18n translations for catalog section
This commit is contained in:
Ruslan Bakiev
@@ -1,309 +0,0 @@
|
||||
<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('catalogHub.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('catalogHub.product_not_found.title') }}</Heading>
|
||||
<Text tone="muted">{{ t('catalogHub.product_not_found.subtitle') }}</Text>
|
||||
<Button @click="navigateTo(localePath(`/catalog/hubs/${hubId}`))">
|
||||
{{ t('catalogHub.actions.back_to_hub') }}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<!-- Content -->
|
||||
<template v-else>
|
||||
<CatalogPage
|
||||
:items="sources"
|
||||
:loading="isLoadingRoutes"
|
||||
:with-map="true"
|
||||
map-id="hub-product-sources-map"
|
||||
point-color="#10b981"
|
||||
v-model:selected-id="selectedSourceUuid"
|
||||
:hovered-id="hoveredSourceUuid"
|
||||
@update:hovered-id="hoveredSourceUuid = $event"
|
||||
>
|
||||
<template #searchBar>
|
||||
<CatalogSearchBar
|
||||
:active-filters="navigationFilters"
|
||||
:show-counter="false"
|
||||
@remove-filter="handleRemoveFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
|
||||
<Stack v-else gap="4">
|
||||
<Text v-if="sources.length > 0" tone="muted">Выберите источник</Text>
|
||||
<Card padding="md">
|
||||
<div class="h-48">
|
||||
<ClientOnly>
|
||||
<apexchart
|
||||
type="area"
|
||||
height="180"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</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('catalogHub.sources.empty') }}</Text>
|
||||
</Stack>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
</Stack>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetNodeConnectionsDocument, GetOffersByHubDocument } 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 hoveredSourceUuid = ref<string>()
|
||||
const rawSources = ref<any[]>([])
|
||||
const offersData = ref<Map<string, any>>(new Map())
|
||||
|
||||
const hubId = computed(() => route.params.id as string)
|
||||
const productId = computed(() => route.params.productId as string)
|
||||
|
||||
// Navigation filters for search bar badges
|
||||
const navigationFilters = computed(() => {
|
||||
const filters: Array<{ id: string; label: string; key: string }> = []
|
||||
|
||||
if (hub.value?.name) {
|
||||
filters.push({
|
||||
id: 'hub',
|
||||
key: 'Хаб',
|
||||
label: hub.value.name
|
||||
})
|
||||
}
|
||||
|
||||
if (product.value?.name) {
|
||||
filters.push({
|
||||
id: 'product',
|
||||
key: 'Товар',
|
||||
label: product.value.name
|
||||
})
|
||||
}
|
||||
|
||||
return filters
|
||||
})
|
||||
|
||||
// Handle removing navigation filter (navigate back)
|
||||
const handleRemoveFilter = (filterId: string) => {
|
||||
if (filterId === 'product') {
|
||||
navigateTo(localePath(`/catalog/hubs/${hubId.value}`))
|
||||
} else if (filterId === 'hub') {
|
||||
navigateTo(localePath('/catalog/hubs'))
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
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 offers with routes to this hub
|
||||
const loadRoutes = async () => {
|
||||
if (!productId.value || !hubId.value) {
|
||||
rawSources.value = []
|
||||
offersData.value.clear()
|
||||
return
|
||||
}
|
||||
|
||||
isLoadingRoutes.value = true
|
||||
selectedSourceUuid.value = ''
|
||||
|
||||
try {
|
||||
const data = await execute(
|
||||
GetOffersByHubDocument,
|
||||
{
|
||||
hubUuid: hubId.value,
|
||||
productUuid: productId.value,
|
||||
limit: 12
|
||||
},
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
rawSources.value = (data?.offersByHub || []).filter(Boolean)
|
||||
await loadOfferDetails()
|
||||
} catch (error) {
|
||||
console.error('Error loading offers:', error)
|
||||
rawSources.value = []
|
||||
} finally {
|
||||
isLoadingRoutes.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Initial load
|
||||
try {
|
||||
const [{ data: connectionsData }, { data: productsData }] = await Promise.all([
|
||||
useServerQuery('hub-connections', GetNodeConnectionsDocument, { uuid: hubId.value }, 'public', 'geo'),
|
||||
useServerQuery('available-products', GetAvailableProductsDocument, {}, 'public', 'exchange')
|
||||
])
|
||||
|
||||
hub.value = connectionsData.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) {
|
||||
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('catalogHub.meta.title'),
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: t('catalogHub.product.meta.description', {
|
||||
product: product.value?.name || '',
|
||||
hub: hub.value?.name || '',
|
||||
offers: sources.value.length
|
||||
})
|
||||
}
|
||||
]
|
||||
}))
|
||||
</script>
|
||||
@@ -78,7 +78,7 @@ const navigationFilters = computed(() => {
|
||||
// Handle removing navigation filter (navigate back)
|
||||
const handleRemoveFilter = (filterId: string) => {
|
||||
if (filterId === 'hub') {
|
||||
navigateTo(localePath('/catalog/hubs'))
|
||||
navigateTo(localePath('/catalog?select=hub'))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,9 +105,9 @@ const mapItems = computed(() => {
|
||||
}]
|
||||
})
|
||||
|
||||
// Navigate to product page
|
||||
// Navigate to unified catalog with hub + product = offers
|
||||
const goToProduct = (productId: string) => {
|
||||
navigateTo(localePath(`/catalog/hubs/${hubId.value}/${productId}`))
|
||||
navigateTo(localePath(`/catalog?hub=${hubId.value}&product=${productId}`))
|
||||
}
|
||||
|
||||
// Mock price history generator (seeded by uuid for consistent results)
|
||||
|
||||
@@ -1,184 +0,0 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="displayItems"
|
||||
:map-items="itemsWithCoords"
|
||||
:loading="isLoading"
|
||||
:grid-columns="3"
|
||||
with-map
|
||||
use-server-clustering
|
||||
map-id="hubs-map"
|
||||
point-color="#10b981"
|
||||
:total-count="total"
|
||||
:hovered-id="hoveredId"
|
||||
@select="onSelectHub"
|
||||
@update:hovered-id="hoveredId = $event"
|
||||
>
|
||||
<template #searchBar="{ displayedCount, totalCount }">
|
||||
<CatalogSearchBar
|
||||
v-model:search-query="searchQuery"
|
||||
:active-filters="activeFilterBadges"
|
||||
:displayed-count="displayedCount"
|
||||
:total-count="totalCount"
|
||||
@remove-filter="onRemoveFilter"
|
||||
@search="onSearch"
|
||||
>
|
||||
<template #filters>
|
||||
<div class="p-2 space-y-3">
|
||||
<!-- Transport filter -->
|
||||
<div>
|
||||
<div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.transport') }}</div>
|
||||
<ul class="menu menu-compact">
|
||||
<li v-for="filter in filters" :key="filter.id">
|
||||
<a
|
||||
:class="{ 'active': selectedFilter === filter.id }"
|
||||
@click="selectedFilter = filter.id"
|
||||
>{{ filter.label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="divider my-0"></div>
|
||||
<!-- Country filter -->
|
||||
<div>
|
||||
<div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.country') }}</div>
|
||||
<ul class="menu menu-compact max-h-48 overflow-y-auto">
|
||||
<li v-for="filter in countryFilters" :key="filter.id">
|
||||
<a
|
||||
:class="{ 'active': selectedCountry === filter.id }"
|
||||
@click="selectedCountry = filter.id"
|
||||
>{{ filter.label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CatalogSearchBar>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="!isLoading" tone="muted">Выберите хаб</Text>
|
||||
</template>
|
||||
|
||||
<template #card="{ item }">
|
||||
<HubCard :hub="item" />
|
||||
</template>
|
||||
|
||||
<template #pagination>
|
||||
<PaginationLoadMore
|
||||
v-if="displayItems.length > 0"
|
||||
:shown="displayItems.length"
|
||||
:total="total"
|
||||
:can-load-more="canLoadMore"
|
||||
:loading="isLoadingMore"
|
||||
hide-counter
|
||||
@load-more="loadMore"
|
||||
class="mt-4"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
const {
|
||||
items,
|
||||
total,
|
||||
selectedFilter,
|
||||
selectedCountry,
|
||||
filters,
|
||||
countryFilters,
|
||||
isLoading,
|
||||
isLoadingMore,
|
||||
canLoadMore,
|
||||
loadMore,
|
||||
init
|
||||
} = useCatalogHubs()
|
||||
|
||||
// Hover state
|
||||
const hoveredId = ref<string>()
|
||||
|
||||
// Search bar
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Search with map checkbox
|
||||
const searchWithMap = ref(false)
|
||||
const currentBounds = ref<MapBounds | null>(null)
|
||||
|
||||
// Filter items with valid coordinates for map
|
||||
const itemsWithCoords = computed(() =>
|
||||
items.value.filter(item =>
|
||||
item.latitude != null &&
|
||||
item.longitude != null &&
|
||||
!isNaN(Number(item.latitude)) &&
|
||||
!isNaN(Number(item.longitude))
|
||||
).map(item => ({
|
||||
uuid: item.uuid,
|
||||
name: item.name || '',
|
||||
latitude: Number(item.latitude),
|
||||
longitude: Number(item.longitude),
|
||||
country: item.country
|
||||
}))
|
||||
)
|
||||
|
||||
// Filtered items when searchWithMap is enabled
|
||||
const displayItems = computed(() => {
|
||||
if (!searchWithMap.value || !currentBounds.value) return items.value
|
||||
return items.value.filter(item => {
|
||||
if (item.latitude == null || item.longitude == null) return false
|
||||
const { west, east, north, south } = currentBounds.value!
|
||||
const lng = Number(item.longitude)
|
||||
const lat = Number(item.latitude)
|
||||
return lng >= west && lng <= east && lat >= south && lat <= north
|
||||
})
|
||||
})
|
||||
|
||||
// Active filter badges (non-default filters shown as badges)
|
||||
const activeFilterBadges = computed(() => {
|
||||
const badges: { id: string; label: string }[] = []
|
||||
if (selectedFilter.value !== 'all') {
|
||||
const filter = filters.value.find(f => f.id === selectedFilter.value)
|
||||
if (filter) badges.push({ id: `transport:${filter.id}`, label: filter.label })
|
||||
}
|
||||
if (selectedCountry.value !== 'all') {
|
||||
const filter = countryFilters.value.find(f => f.id === selectedCountry.value)
|
||||
if (filter) badges.push({ id: `country:${filter.id}`, label: filter.label })
|
||||
}
|
||||
return badges
|
||||
})
|
||||
|
||||
// Remove filter badge
|
||||
const onRemoveFilter = (id: string) => {
|
||||
if (id.startsWith('transport:')) {
|
||||
selectedFilter.value = 'all'
|
||||
} else if (id.startsWith('country:')) {
|
||||
selectedCountry.value = 'all'
|
||||
}
|
||||
}
|
||||
|
||||
// Search handler (for future use)
|
||||
const onSearch = () => {
|
||||
// TODO: Implement search by hub name
|
||||
}
|
||||
|
||||
// Handle hub selection from map
|
||||
const onSelectHub = (hub: any) => {
|
||||
navigateTo(localePath(`/catalog/hubs/${hub.uuid}`))
|
||||
}
|
||||
|
||||
await init()
|
||||
|
||||
useHead(() => ({
|
||||
title: t('catalogHubsSection.header.title')
|
||||
}))
|
||||
</script>
|
||||
145
app/pages/catalog/index.vue
Normal file
145
app/pages/catalog/index.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Unified Search Bar -->
|
||||
<div class="sticky top-0 z-20 px-3 lg:px-6 py-3 bg-base-300">
|
||||
<UnifiedSearchBar
|
||||
:active-tokens="activeTokens"
|
||||
:available-chips="availableChips"
|
||||
:select-mode="selectMode"
|
||||
:search-query="searchQuery"
|
||||
@start-select="startSelect"
|
||||
@cancel-select="cancelSelect"
|
||||
@edit-token="editFilter"
|
||||
@remove-token="removeFilter"
|
||||
@update:search-query="searchQuery = $event"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Content -->
|
||||
<div class="flex-1 px-3 lg:px-6 py-4">
|
||||
<!-- Hero (empty state) -->
|
||||
<template v-if="displayMode === 'hero'">
|
||||
<CatalogHero @start-select="startSelect" />
|
||||
</template>
|
||||
|
||||
<!-- Products Grid -->
|
||||
<template v-else-if="displayMode === 'grid-products'">
|
||||
<CatalogGridProducts
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectProduct"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Suppliers Grid -->
|
||||
<template v-else-if="displayMode === 'grid-suppliers'">
|
||||
<CatalogGridSuppliers
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectSupplier"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Hubs Grid -->
|
||||
<template v-else-if="displayMode === 'grid-hubs'">
|
||||
<CatalogGridHubs
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectHub"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Hubs for selected product -->
|
||||
<template v-else-if="displayMode === 'grid-hubs-for-product'">
|
||||
<CatalogGridHubsForProduct
|
||||
:product-id="productId!"
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectHub"
|
||||
@product-loaded="setLabel('product', productId!, $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Products from supplier -->
|
||||
<template v-else-if="displayMode === 'grid-products-from-supplier'">
|
||||
<CatalogGridProductsFromSupplier
|
||||
:supplier-id="supplierId!"
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectProduct"
|
||||
@supplier-loaded="setLabel('supplier', supplierId!, $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Products in hub -->
|
||||
<template v-else-if="displayMode === 'grid-products-in-hub'">
|
||||
<CatalogGridProductsInHub
|
||||
:hub-id="hubId!"
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectProduct"
|
||||
@hub-loaded="setLabel('hub', hubId!, $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Offers -->
|
||||
<template v-else-if="displayMode === 'grid-offers'">
|
||||
<CatalogGridOffers
|
||||
:product-id="productId"
|
||||
:supplier-id="supplierId"
|
||||
:hub-id="hubId"
|
||||
:search-query="searchQuery"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const {
|
||||
selectMode,
|
||||
displayMode,
|
||||
productId,
|
||||
supplierId,
|
||||
hubId,
|
||||
searchQuery,
|
||||
activeTokens,
|
||||
availableChips,
|
||||
startSelect,
|
||||
cancelSelect,
|
||||
selectItem,
|
||||
removeFilter,
|
||||
editFilter,
|
||||
setLabel
|
||||
} = useCatalogSearch()
|
||||
|
||||
// Selection handlers
|
||||
const onSelectProduct = (product: { uuid: string; name: string }) => {
|
||||
selectItem('product', product.uuid, product.name)
|
||||
}
|
||||
|
||||
const onSelectSupplier = (supplier: { uuid: string; name: string }) => {
|
||||
selectItem('supplier', supplier.uuid, supplier.name)
|
||||
}
|
||||
|
||||
const onSelectHub = (hub: { uuid: string; name: string }) => {
|
||||
selectItem('hub', hub.uuid, hub.name)
|
||||
}
|
||||
|
||||
// SEO
|
||||
useHead(() => {
|
||||
let title = t('catalog.hero.title')
|
||||
|
||||
if (displayMode.value === 'grid-products') {
|
||||
title = t('catalog.headers.selectProduct')
|
||||
} else if (displayMode.value === 'grid-suppliers') {
|
||||
title = t('catalog.headers.selectSupplier')
|
||||
} else if (displayMode.value === 'grid-hubs') {
|
||||
title = t('catalog.headers.selectHub')
|
||||
} else if (displayMode.value === 'grid-offers') {
|
||||
title = t('catalog.headers.offers')
|
||||
}
|
||||
|
||||
return { title }
|
||||
})
|
||||
</script>
|
||||
@@ -1,356 +0,0 @@
|
||||
<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"
|
||||
:hovered-id="hoveredSourceUuid"
|
||||
@update:hovered-id="hoveredSourceUuid = $event"
|
||||
>
|
||||
<template #searchBar>
|
||||
<CatalogSearchBar
|
||||
:active-filters="navigationFilters"
|
||||
:show-counter="false"
|
||||
@remove-filter="handleRemoveFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
|
||||
<Stack v-else gap="4">
|
||||
<Text v-if="sources.length > 0" tone="muted">Выберите источник</Text>
|
||||
<Card padding="md">
|
||||
<div class="h-48">
|
||||
<ClientOnly>
|
||||
<apexchart
|
||||
type="area"
|
||||
height="180"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</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"
|
||||
:kyc-profile-uuid="getOfferData(item.uuid)?.kycProfileUuid"
|
||||
@select="navigateTo(localePath(`/catalog/offers/detail/${item.uuid}`))"
|
||||
/>
|
||||
</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, GetOffersByHubDocument } from '~/composables/graphql/public/geo-generated'
|
||||
import { GetAvailableProductsDocument, GetOfferDocument, GetSupplierProfileByTeamDocument } 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 hoveredSourceUuid = ref<string>()
|
||||
const rawSources = ref<any[]>([])
|
||||
const offersData = ref<Map<string, any>>(new Map())
|
||||
const suppliersData = ref<Map<string, any>>(new Map())
|
||||
|
||||
const productId = computed(() => route.params.productId as string)
|
||||
const hubId = computed(() => route.params.hubId as string)
|
||||
const quantity = computed(() => route.query.quantity as string | undefined)
|
||||
|
||||
// Navigation filters for search bar badges
|
||||
const navigationFilters = computed(() => {
|
||||
const filters: Array<{ id: string; label: string; key: string }> = []
|
||||
|
||||
if (product.value?.name) {
|
||||
filters.push({
|
||||
id: 'product',
|
||||
key: 'Товар',
|
||||
label: product.value.name
|
||||
})
|
||||
}
|
||||
|
||||
if (hub.value?.name) {
|
||||
filters.push({
|
||||
id: 'hub',
|
||||
key: 'Хаб',
|
||||
label: hub.value.name
|
||||
})
|
||||
}
|
||||
|
||||
if (quantity.value) {
|
||||
filters.push({
|
||||
id: 'quantity',
|
||||
key: 'Кол-во',
|
||||
label: `${quantity.value} т`
|
||||
})
|
||||
}
|
||||
|
||||
return filters
|
||||
})
|
||||
|
||||
// Handle removing navigation filter (navigate back)
|
||||
const handleRemoveFilter = (filterId: string) => {
|
||||
if (filterId === 'hub') {
|
||||
navigateTo(localePath(`/catalog/offers/${productId.value}`))
|
||||
} else if (filterId === 'product') {
|
||||
navigateTo(localePath('/catalog/offers'))
|
||||
} else if (filterId === 'quantity') {
|
||||
// Remove quantity from query, stay on same page
|
||||
navigateTo({ path: route.path, query: {} })
|
||||
}
|
||||
}
|
||||
|
||||
// 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 and supplier info
|
||||
const loadOfferDetails = async () => {
|
||||
if (rawSources.value.length === 0) {
|
||||
offersData.value.clear()
|
||||
suppliersData.value.clear()
|
||||
return
|
||||
}
|
||||
|
||||
const newOffersData = new Map<string, any>()
|
||||
const newSuppliersData = new Map<string, any>()
|
||||
const teamUuidsToLoad = new Set<string>()
|
||||
|
||||
// First, load all offers
|
||||
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)
|
||||
if (data.getOffer.teamUuid) {
|
||||
teamUuidsToLoad.add(data.getOffer.teamUuid)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading offer:', source.sourceUuid, error)
|
||||
}
|
||||
}))
|
||||
|
||||
// Then, load supplier profiles for KYC
|
||||
await Promise.all([...teamUuidsToLoad].map(async (teamUuid) => {
|
||||
try {
|
||||
const data = await execute(GetSupplierProfileByTeamDocument, { teamUuid }, 'public', 'exchange')
|
||||
if (data?.getSupplierProfileByTeam) {
|
||||
newSuppliersData.set(teamUuid, data.getSupplierProfileByTeam)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading supplier:', teamUuid, error)
|
||||
}
|
||||
}))
|
||||
|
||||
// Merge kycProfileUuid into offer data
|
||||
newOffersData.forEach((offer, offerUuid) => {
|
||||
if (offer.teamUuid) {
|
||||
const supplier = newSuppliersData.get(offer.teamUuid)
|
||||
if (supplier?.kycProfileUuid) {
|
||||
offer.kycProfileUuid = supplier.kycProfileUuid
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
offersData.value = newOffersData
|
||||
suppliersData.value = newSuppliersData
|
||||
}
|
||||
|
||||
// Load offers with routes to this hub
|
||||
const loadRoutes = async () => {
|
||||
if (!productId.value || !hubId.value) {
|
||||
rawSources.value = []
|
||||
offersData.value.clear()
|
||||
return
|
||||
}
|
||||
|
||||
isLoadingRoutes.value = true
|
||||
selectedSourceUuid.value = ''
|
||||
|
||||
try {
|
||||
const data = await execute(
|
||||
GetOffersByHubDocument,
|
||||
{
|
||||
hubUuid: hubId.value,
|
||||
productUuid: productId.value,
|
||||
limit: 12
|
||||
},
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
rawSources.value = (data?.offersByHub || []).filter(Boolean)
|
||||
await loadOfferDetails()
|
||||
} catch (error) {
|
||||
console.error('Error loading offers:', 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>
|
||||
@@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="filteredHubs"
|
||||
:loading="isLoading"
|
||||
:total-count="hubs.length"
|
||||
:grid-columns="3"
|
||||
with-map
|
||||
use-server-clustering
|
||||
cluster-node-type="logistics"
|
||||
map-id="offers-product-hubs-map"
|
||||
point-color="#10b981"
|
||||
:hovered-id="hoveredId"
|
||||
@select="onSelectHub"
|
||||
@update:hovered-id="hoveredId = $event"
|
||||
>
|
||||
<template #searchBar="{ displayedCount, totalCount }">
|
||||
<CatalogSearchBar
|
||||
v-model:search-query="searchQuery"
|
||||
:active-filters="navigationFilters"
|
||||
:displayed-count="displayedCount"
|
||||
:total-count="totalCount"
|
||||
@remove-filter="handleRemoveFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="!isLoading && !product" tone="muted">Товар не найден</Text>
|
||||
<Text v-else-if="!isLoading" tone="muted">Выберите хаб</Text>
|
||||
</template>
|
||||
|
||||
<template #card="{ item }">
|
||||
<HubCard
|
||||
:hub="item"
|
||||
:link-to="localePath(`/catalog/offers/${productId}/${item.uuid}`)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<Stack 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>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetOffersByProductDocument, GetHubsNearOfferDocument } from '~/composables/graphql/public/geo-generated'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isLoading = ref(true)
|
||||
const hoveredId = ref<string>()
|
||||
const product = ref<{ uuid: string; name: string } | null>(null)
|
||||
const hubs = ref<Array<{ uuid: string; name: string; latitude?: number; longitude?: number; country?: string; countryCode?: string }>>([])
|
||||
|
||||
const productId = computed(() => route.params.productId as string)
|
||||
|
||||
// Navigation filters for search bar badges
|
||||
const navigationFilters = computed(() => {
|
||||
const filters: Array<{ id: string; label: string; key: string }> = []
|
||||
|
||||
if (product.value?.name) {
|
||||
filters.push({
|
||||
id: 'product',
|
||||
key: 'Товар',
|
||||
label: product.value.name
|
||||
})
|
||||
}
|
||||
|
||||
return filters
|
||||
})
|
||||
|
||||
// Handle removing navigation filter (navigate back)
|
||||
const handleRemoveFilter = (filterId: string) => {
|
||||
if (filterId === 'product') {
|
||||
navigateTo(localePath('/catalog/offers'))
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
const searchQuery = ref('')
|
||||
|
||||
const filteredHubs = computed(() => {
|
||||
if (!searchQuery.value.trim()) return hubs.value
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
return hubs.value.filter(hub =>
|
||||
hub.name?.toLowerCase().includes(q) ||
|
||||
hub.country?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
|
||||
// Handle hub selection
|
||||
const onSelectHub = (hub: any) => {
|
||||
navigateTo(localePath(`/catalog/offers/${productId.value}/${hub.uuid}`))
|
||||
}
|
||||
|
||||
// Initial load
|
||||
try {
|
||||
// Get offers for this product from geo
|
||||
const { data: offersData } = await useServerQuery(
|
||||
'offers-for-product',
|
||||
GetOffersByProductDocument,
|
||||
{ productUuid: productId.value },
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
|
||||
const offers = offersData.value?.offersByProduct || []
|
||||
|
||||
if (offers.length > 0) {
|
||||
const firstOffer = offers[0]
|
||||
product.value = {
|
||||
uuid: productId.value,
|
||||
name: firstOffer?.productName || ''
|
||||
}
|
||||
|
||||
// Get hubs near the first offer's location
|
||||
if (firstOffer?.uuid) {
|
||||
const { data: hubsData } = await useServerQuery(
|
||||
'hubs-near-offer',
|
||||
GetHubsNearOfferDocument,
|
||||
{ offerUuid: firstOffer.uuid, limit: 12 },
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
|
||||
hubs.value = (hubsData.value?.hubsNearOffer || [])
|
||||
.filter((h): h is NonNullable<typeof h> => h !== null && !!h.uuid && !!h.name)
|
||||
.map(h => ({
|
||||
uuid: h.uuid!,
|
||||
name: h.name!,
|
||||
latitude: h.latitude ?? undefined,
|
||||
longitude: h.longitude ?? undefined,
|
||||
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>
|
||||
@@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="filteredProducts"
|
||||
:loading="isLoading"
|
||||
:total-count="products.length"
|
||||
:grid-columns="3"
|
||||
with-map
|
||||
use-server-clustering
|
||||
cluster-node-type="offer"
|
||||
map-id="offers-products-map"
|
||||
point-color="#22c55e"
|
||||
:hovered-id="hoveredId"
|
||||
@update:hovered-id="hoveredId = $event"
|
||||
>
|
||||
<template #searchBar>
|
||||
<CatalogSearchBar
|
||||
v-model:search-query="searchQuery"
|
||||
:show-counter="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="!isLoading" tone="muted">Выберите товар</Text>
|
||||
</template>
|
||||
|
||||
<template #card="{ item }">
|
||||
<HubProductCard
|
||||
:name="item.name || ''"
|
||||
:price-history="getMockPriceHistory(item.uuid)"
|
||||
@select="goToProduct(item.uuid)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
|
||||
const { items: products, isLoading, init } = useCatalogProducts()
|
||||
|
||||
// Hover state
|
||||
const hoveredId = ref<string>()
|
||||
|
||||
// Search
|
||||
const searchQuery = ref('')
|
||||
|
||||
const filteredProducts = computed(() => {
|
||||
if (!searchQuery.value.trim()) return products.value
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
return products.value.filter(item =>
|
||||
item.name?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
|
||||
// Navigate to product detail
|
||||
const goToProduct = (productId: string) => {
|
||||
navigateTo(localePath(`/catalog/offers/${productId}`))
|
||||
}
|
||||
|
||||
// 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: 7 }, (_, i) => {
|
||||
const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
|
||||
return Math.round(basePrice + variation)
|
||||
})
|
||||
}
|
||||
|
||||
// Initialize
|
||||
await init()
|
||||
|
||||
useHead(() => ({
|
||||
title: t('catalogProducts.header.title')
|
||||
}))
|
||||
</script>
|
||||
@@ -147,7 +147,7 @@
|
||||
:key="supplier.uuid"
|
||||
padding="md"
|
||||
interactive
|
||||
@click="navigateTo(localePath(`/catalog/suppliers/${supplier.uuid}`))"
|
||||
@click="navigateTo(localePath(`/catalog?supplier=${supplier.uuid}`))"
|
||||
>
|
||||
<Stack direction="row" align="center" gap="3">
|
||||
<IconCircle tone="primary">
|
||||
|
||||
@@ -1,450 +0,0 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="routePoints"
|
||||
:loading="isLoading"
|
||||
with-map
|
||||
map-id="supplier-route-map"
|
||||
point-color="#10b981"
|
||||
:hovered-id="hoveredPointUuid"
|
||||
@update:hovered-id="hoveredPointUuid = $event"
|
||||
>
|
||||
<template #searchBar>
|
||||
<CatalogSearchBar
|
||||
:active-filters="navigationFilters"
|
||||
:show-counter="false"
|
||||
@remove-filter="handleRemoveFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="!isLoading && (!supplier || !product || !hub)" tone="muted">Данные не найдены</Text>
|
||||
<Stack v-else-if="!isLoading" gap="4">
|
||||
<!-- Offer Info Card -->
|
||||
<Card padding="md">
|
||||
<Stack gap="3">
|
||||
<!-- Price -->
|
||||
<div class="flex items-center justify-between">
|
||||
<Text weight="semibold" size="lg">{{ product?.name }}</Text>
|
||||
<Text v-if="offerData?.pricePerUnit" weight="bold" class="text-primary text-xl">
|
||||
{{ formatPrice(offerData.pricePerUnit, offerData.currency, offerData.unit) }}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<!-- Supplier Info -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div v-if="supplier?.logoUrl" class="w-10 h-10 rounded-full overflow-hidden bg-base-200">
|
||||
<img :src="supplier.logoUrl" :alt="supplier.name" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div v-else class="w-10 h-10 rounded-full bg-base-200 flex items-center justify-center">
|
||||
<Icon name="lucide:building-2" size="20" class="text-base-content/40" />
|
||||
</div>
|
||||
<div>
|
||||
<Text weight="medium">{{ supplier?.name }}</Text>
|
||||
<Text v-if="supplier?.country" tone="muted" size="sm">{{ supplier.country }}</Text>
|
||||
</div>
|
||||
<div v-if="supplier?.isVerified" class="badge badge-success badge-sm ml-auto">Верифицирован</div>
|
||||
</div>
|
||||
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<!-- KYC Profile Card (full company info) -->
|
||||
<KycProfileCard v-if="supplier?.kycProfileUuid" :kyc-profile-uuid="supplier.kycProfileUuid" />
|
||||
|
||||
<!-- 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 #card="{ item }">
|
||||
<!-- Route Loading -->
|
||||
<Section v-if="isLoadingRoute" variant="plain">
|
||||
<Stack align="center" gap="2">
|
||||
<Spinner />
|
||||
<Text tone="muted">{{ t('catalogSupplierCalculation.states.calculating_route') }}</Text>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<!-- Route Result -->
|
||||
<OfferResultCard
|
||||
v-else-if="routeData"
|
||||
:location-name="sourceLocation?.name"
|
||||
:product-name="product?.name"
|
||||
:price-per-unit="offerData?.pricePerUnit"
|
||||
:currency="offerData?.currency"
|
||||
:unit="offerData?.unit"
|
||||
:stages="routeStages"
|
||||
:start-name="sourceLocation?.name"
|
||||
:end-name="hub?.name"
|
||||
/>
|
||||
|
||||
<!-- No Route -->
|
||||
<Card v-else padding="md">
|
||||
<Stack align="center" gap="2">
|
||||
<Icon name="lucide:route-off" size="32" class="text-base-content/40" />
|
||||
<Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetNodeConnectionsDocument, GetOffersBySupplierProductDocument, GetOfferToHubDocument } from '~/composables/graphql/public/geo-generated'
|
||||
import {
|
||||
GetSupplierProfileDocument,
|
||||
GetSupplierProfilesDocument,
|
||||
} from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const routeRef = useRoute()
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
const { execute } = useGraphQL()
|
||||
|
||||
const isLoading = ref(true)
|
||||
const isLoadingRoute = ref(false)
|
||||
const supplier = ref<any>(null)
|
||||
const product = ref<{ uuid: string; name: string } | null>(null)
|
||||
const hub = ref<any>(null)
|
||||
const sourceLocation = ref<{ uuid: string; name: string; latitude?: number; longitude?: number } | null>(null)
|
||||
const routeData = ref<any>(null)
|
||||
const hoveredPointUuid = ref<string>()
|
||||
const offerData = ref<any>(null) // Full offer data with price
|
||||
|
||||
const supplierId = computed(() => routeRef.params.supplierId as string)
|
||||
const productId = computed(() => routeRef.params.productId as string)
|
||||
const hubId = computed(() => routeRef.params.hubId as string)
|
||||
|
||||
// Navigation filters for search bar badges
|
||||
const navigationFilters = computed(() => {
|
||||
const filters: Array<{ id: string; label: string; key: string }> = []
|
||||
|
||||
if (supplier.value?.name) {
|
||||
filters.push({
|
||||
id: 'supplier',
|
||||
key: 'Поставщик',
|
||||
label: supplier.value.name
|
||||
})
|
||||
}
|
||||
|
||||
if (product.value?.name) {
|
||||
filters.push({
|
||||
id: 'product',
|
||||
key: 'Товар',
|
||||
label: product.value.name
|
||||
})
|
||||
}
|
||||
|
||||
if (hub.value?.name) {
|
||||
filters.push({
|
||||
id: 'hub',
|
||||
key: 'Хаб',
|
||||
label: hub.value.name
|
||||
})
|
||||
}
|
||||
|
||||
return filters
|
||||
})
|
||||
|
||||
// Handle removing navigation filter (navigate back)
|
||||
const handleRemoveFilter = (filterId: string) => {
|
||||
if (filterId === 'hub') {
|
||||
navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}`))
|
||||
} else if (filterId === 'product') {
|
||||
navigateTo(localePath(`/catalog/suppliers/${supplierId.value}`))
|
||||
} else if (filterId === 'supplier') {
|
||||
navigateTo(localePath('/catalog/suppliers'))
|
||||
}
|
||||
}
|
||||
|
||||
// Map items - show source and destination
|
||||
const routePoints = computed(() => {
|
||||
const points: Array<{ uuid: string; name: string; latitude: number; longitude: number }> = []
|
||||
|
||||
// Source location
|
||||
if (sourceLocation.value?.latitude && sourceLocation.value?.longitude) {
|
||||
points.push({
|
||||
uuid: sourceLocation.value.uuid,
|
||||
name: sourceLocation.value.name,
|
||||
latitude: Number(sourceLocation.value.latitude),
|
||||
longitude: Number(sourceLocation.value.longitude)
|
||||
})
|
||||
}
|
||||
|
||||
// Destination hub
|
||||
if (hub.value?.latitude && hub.value?.longitude) {
|
||||
points.push({
|
||||
uuid: hub.value.uuid || hubId.value,
|
||||
name: hub.value.name || '',
|
||||
latitude: Number(hub.value.latitude),
|
||||
longitude: Number(hub.value.longitude)
|
||||
})
|
||||
}
|
||||
|
||||
return points
|
||||
})
|
||||
|
||||
// Route stages for OfferResultCard
|
||||
const routeStages = computed(() => {
|
||||
if (!routeData.value?.stages) return []
|
||||
return routeData.value.stages.map((stage: any) => ({
|
||||
transportType: stage?.transportType,
|
||||
distanceKm: stage?.distanceKm
|
||||
}))
|
||||
})
|
||||
|
||||
// Format price
|
||||
const formatPrice = (price?: number | null, currency?: string | null, unit?: string | null) => {
|
||||
if (!price) return ''
|
||||
const currSymbol = getCurrencySymbol(currency)
|
||||
const unitName = getUnitName(unit)
|
||||
return `${currSymbol}${price.toLocaleString()}/${unitName}`
|
||||
}
|
||||
|
||||
const getCurrencySymbol = (currency?: string | null) => {
|
||||
switch (currency?.toUpperCase()) {
|
||||
case 'USD': return '$'
|
||||
case 'EUR': return '€'
|
||||
case 'RUB': return '₽'
|
||||
case 'CNY': return '¥'
|
||||
default: return '$'
|
||||
}
|
||||
}
|
||||
|
||||
const getUnitName = (unit?: string | null) => {
|
||||
switch (unit?.toLowerCase()) {
|
||||
case 'т':
|
||||
case 'ton':
|
||||
case 'tonne':
|
||||
return 'т'
|
||||
case 'кг':
|
||||
case 'kg':
|
||||
return 'кг'
|
||||
default:
|
||||
return 'т'
|
||||
}
|
||||
}
|
||||
|
||||
// Format distance
|
||||
const formatDistance = (km?: number | null) => {
|
||||
if (!km) return t('common.values.not_available')
|
||||
return `${Math.round(km)} km`
|
||||
}
|
||||
|
||||
// Format duration
|
||||
const formatDuration = (seconds?: number | null) => {
|
||||
if (!seconds) return t('common.values.not_available')
|
||||
const hours = Math.floor(seconds / 3600)
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days > 0) return `${days}d ${hours % 24}h`
|
||||
return `${hours}h`
|
||||
}
|
||||
|
||||
// Get transport icon
|
||||
const getTransportIcon = (type?: string | null) => {
|
||||
switch (type?.toLowerCase()) {
|
||||
case 'auto':
|
||||
case 'road':
|
||||
return 'lucide:truck'
|
||||
case 'rail':
|
||||
case 'train':
|
||||
return 'lucide:train'
|
||||
case 'sea':
|
||||
case 'ship':
|
||||
return 'lucide:ship'
|
||||
case 'air':
|
||||
case 'plane':
|
||||
return 'lucide:plane'
|
||||
default:
|
||||
return 'lucide:route'
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
const loadRoute = async (offerUuid: string) => {
|
||||
if (!offerUuid || !hubId.value) {
|
||||
routeData.value = null
|
||||
return
|
||||
}
|
||||
|
||||
isLoadingRoute.value = true
|
||||
try {
|
||||
const data = await execute(
|
||||
GetOfferToHubDocument,
|
||||
{
|
||||
offerUuid,
|
||||
hubUuid: hubId.value
|
||||
},
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
routeData.value = data?.offerToHub?.routes?.[0] || null
|
||||
} catch (error) {
|
||||
console.error('Error loading route:', error)
|
||||
routeData.value = null
|
||||
} finally {
|
||||
isLoadingRoute.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Load data
|
||||
try {
|
||||
// Get hub info
|
||||
const { data: hubData } = await useServerQuery(
|
||||
'hub-info',
|
||||
GetNodeConnectionsDocument,
|
||||
{ uuid: hubId.value },
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
hub.value = hubData.value?.nodeConnections?.hub || null
|
||||
|
||||
// Get supplier profile from exchange
|
||||
const { data: supplierData } = await useServerQuery(
|
||||
'supplier-profile',
|
||||
GetSupplierProfileDocument,
|
||||
{ uuid: supplierId.value },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
supplier.value = supplierData.value?.getSupplierProfile || null
|
||||
|
||||
if (!supplier.value) {
|
||||
const { data: suppliersList } = await useServerQuery(
|
||||
'suppliers-fallback',
|
||||
GetSupplierProfilesDocument,
|
||||
{},
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
supplier.value = (suppliersList.value?.getSupplierProfiles || [])
|
||||
.find((s: any) => s?.teamUuid === supplierId.value || s?.uuid === supplierId.value) || null
|
||||
}
|
||||
|
||||
// Get offers for this supplier+product from geo
|
||||
if (supplier.value) {
|
||||
const supplierUuidForGeo = supplier.value?.uuid || supplierId.value
|
||||
|
||||
const { data: offersData } = await useServerQuery(
|
||||
'supplier-product-offers',
|
||||
GetOffersBySupplierProductDocument,
|
||||
{ supplierUuid: supplierUuidForGeo, productUuid: productId.value },
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
|
||||
const offers = offersData.value?.offersBySupplierProduct || []
|
||||
|
||||
// Use first offer for product info and source location
|
||||
if (offers.length > 0) {
|
||||
const firstOffer = offers[0]
|
||||
// Store full offer data (including price)
|
||||
offerData.value = firstOffer
|
||||
|
||||
if (firstOffer?.productUuid && firstOffer?.productName) {
|
||||
product.value = { uuid: firstOffer.productUuid, name: firstOffer.productName }
|
||||
}
|
||||
if (firstOffer?.latitude && firstOffer?.longitude) {
|
||||
sourceLocation.value = {
|
||||
uuid: firstOffer.uuid || '',
|
||||
name: firstOffer.country || 'Origin',
|
||||
latitude: firstOffer.latitude,
|
||||
longitude: firstOffer.longitude
|
||||
}
|
||||
}
|
||||
|
||||
// Load route using the offer UUID
|
||||
if (firstOffer?.uuid && hub.value) {
|
||||
await loadRoute(firstOffer.uuid)
|
||||
}
|
||||
}
|
||||
}
|
||||
} 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('catalogSupplierCalculation.meta.title'),
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: t('catalogSupplierCalculation.meta.description', {
|
||||
product: product.value?.name || '',
|
||||
supplier: supplier.value?.name || '',
|
||||
hub: hub.value?.name || ''
|
||||
})
|
||||
}
|
||||
]
|
||||
}))
|
||||
</script>
|
||||
@@ -1,257 +0,0 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="filteredHubs"
|
||||
:loading="isLoading"
|
||||
:total-count="hubs.length"
|
||||
with-map
|
||||
map-id="supplier-product-hubs-map"
|
||||
point-color="#10b981"
|
||||
:hovered-id="hoveredId"
|
||||
@select="onSelectHub"
|
||||
@update:hovered-id="hoveredId = $event"
|
||||
>
|
||||
<template #searchBar="{ displayedCount, totalCount }">
|
||||
<CatalogSearchBar
|
||||
v-model:search-query="searchQuery"
|
||||
:active-filters="navigationFilters"
|
||||
:displayed-count="displayedCount"
|
||||
:total-count="totalCount"
|
||||
@remove-filter="handleRemoveFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="!isLoading && (!supplier || !product)" tone="muted">Товар не найден</Text>
|
||||
<Stack v-else-if="!isLoading" gap="4">
|
||||
<Card padding="md">
|
||||
<div class="h-48">
|
||||
<ClientOnly>
|
||||
<apexchart
|
||||
type="area"
|
||||
height="180"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</Card>
|
||||
</Stack>
|
||||
</template>
|
||||
|
||||
<template #card="{ item }">
|
||||
<HubCard
|
||||
:hub="item"
|
||||
:link-to="localePath(`/catalog/suppliers/${supplierId}/${productId}/${item.uuid}`)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<Stack align="center" gap="2">
|
||||
<Icon name="lucide:map-pin-off" size="32" class="text-base-content/40" />
|
||||
<Text tone="muted">{{ t('catalogSupplierProductHubs.empty.no_hubs') }}</Text>
|
||||
</Stack>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetOffersBySupplierProductDocument, GetHubsNearOfferDocument } from '~/composables/graphql/public/geo-generated'
|
||||
import {
|
||||
GetSupplierProfileDocument,
|
||||
GetSupplierProfilesDocument,
|
||||
} from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const routeRef = useRoute()
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isLoading = ref(true)
|
||||
const hoveredId = ref<string>()
|
||||
const supplier = ref<any>(null)
|
||||
const product = ref<{ uuid: string; name: string } | null>(null)
|
||||
const sourceLocation = ref<{ uuid: string; name: string } | null>(null)
|
||||
const hubs = ref<Array<{ uuid: string; name: string; latitude?: number; longitude?: number; country?: string; countryCode?: string }>>([])
|
||||
|
||||
const supplierId = computed(() => routeRef.params.supplierId as string)
|
||||
const productId = computed(() => routeRef.params.productId as string)
|
||||
|
||||
// Navigation filters for search bar badges
|
||||
const navigationFilters = computed(() => {
|
||||
const filters: Array<{ id: string; label: string; key: string }> = []
|
||||
|
||||
if (supplier.value?.name) {
|
||||
filters.push({
|
||||
id: 'supplier',
|
||||
key: 'Поставщик',
|
||||
label: supplier.value.name
|
||||
})
|
||||
}
|
||||
|
||||
if (product.value?.name) {
|
||||
filters.push({
|
||||
id: 'product',
|
||||
key: 'Товар',
|
||||
label: product.value.name
|
||||
})
|
||||
}
|
||||
|
||||
return filters
|
||||
})
|
||||
|
||||
// Handle removing navigation filter (navigate back)
|
||||
const handleRemoveFilter = (filterId: string) => {
|
||||
if (filterId === 'product') {
|
||||
navigateTo(localePath(`/catalog/suppliers/${supplierId.value}`))
|
||||
} else if (filterId === 'supplier') {
|
||||
navigateTo(localePath('/catalog/suppliers'))
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
const searchQuery = ref('')
|
||||
|
||||
const filteredHubs = computed(() => {
|
||||
if (!searchQuery.value.trim()) return hubs.value
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
return hubs.value.filter(hub =>
|
||||
hub.name?.toLowerCase().includes(q) ||
|
||||
hub.country?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
|
||||
// Handle hub selection
|
||||
const onSelectHub = (hub: any) => {
|
||||
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
|
||||
try {
|
||||
// Get supplier profile from exchange
|
||||
const { data: supplierData } = await useServerQuery(
|
||||
'supplier-profile',
|
||||
GetSupplierProfileDocument,
|
||||
{ uuid: supplierId.value },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
supplier.value = supplierData.value?.getSupplierProfile || null
|
||||
|
||||
if (!supplier.value) {
|
||||
const { data: suppliersList } = await useServerQuery(
|
||||
'suppliers-fallback',
|
||||
GetSupplierProfilesDocument,
|
||||
{},
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
supplier.value = (suppliersList.value?.getSupplierProfiles || [])
|
||||
.find((s: any) => s?.teamUuid === supplierId.value || s?.uuid === supplierId.value) || null
|
||||
}
|
||||
|
||||
// Get offers for this supplier+product from geo
|
||||
if (supplier.value) {
|
||||
const supplierUuidForGeo = supplier.value?.uuid || supplierId.value
|
||||
|
||||
const { data: offersData } = await useServerQuery(
|
||||
'supplier-product-offers',
|
||||
GetOffersBySupplierProductDocument,
|
||||
{ supplierUuid: supplierUuidForGeo, productUuid: productId.value },
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
|
||||
const offers = offersData.value?.offersBySupplierProduct || []
|
||||
|
||||
// Set product info from first offer
|
||||
if (offers.length > 0) {
|
||||
const firstOffer = offers[0]
|
||||
if (firstOffer?.productUuid && firstOffer?.productName) {
|
||||
product.value = { uuid: firstOffer.productUuid, name: firstOffer.productName }
|
||||
}
|
||||
// Source location is the offer's location (first offer)
|
||||
if (firstOffer?.latitude && firstOffer?.longitude) {
|
||||
sourceLocation.value = {
|
||||
uuid: firstOffer.uuid || '',
|
||||
name: firstOffer.country || 'Origin'
|
||||
}
|
||||
}
|
||||
|
||||
// Get hubs near the first offer
|
||||
const { data: hubsData } = await useServerQuery(
|
||||
'hubs-near-offer',
|
||||
GetHubsNearOfferDocument,
|
||||
{ offerUuid: firstOffer.uuid, limit: 20 },
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
|
||||
hubs.value = (hubsData.value?.hubsNearOffer || [])
|
||||
.filter((h): h is NonNullable<typeof h> => h !== null && !!h.uuid && !!h.name)
|
||||
.map(h => ({
|
||||
uuid: h.uuid!,
|
||||
name: h.name!,
|
||||
latitude: h.latitude ?? undefined,
|
||||
longitude: h.longitude ?? undefined,
|
||||
country: h.country || undefined,
|
||||
countryCode: h.countryCode || undefined
|
||||
}))
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
// SEO
|
||||
useHead(() => ({
|
||||
title: product.value?.name && supplier.value?.name
|
||||
? `${product.value.name} - ${supplier.value.name}`
|
||||
: t('catalogSupplierProductHubs.meta.title')
|
||||
}))
|
||||
</script>
|
||||
@@ -1,215 +0,0 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="filteredProducts"
|
||||
:map-items="mapItems"
|
||||
:loading="isLoading"
|
||||
:total-count="products.length"
|
||||
:grid-columns="3"
|
||||
with-map
|
||||
map-id="supplier-products-map"
|
||||
point-color="#3b82f6"
|
||||
:hovered-id="hoveredId"
|
||||
@update:hovered-id="hoveredId = $event"
|
||||
>
|
||||
<template #searchBar="{ displayedCount, totalCount }">
|
||||
<CatalogSearchBar
|
||||
v-model:search-query="searchQuery"
|
||||
:active-filters="navigationFilters"
|
||||
:displayed-count="displayedCount"
|
||||
:total-count="totalCount"
|
||||
@remove-filter="handleRemoveFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="!isLoading && !supplier" tone="muted">Поставщик не найден</Text>
|
||||
<Text v-else-if="!isLoading" tone="muted">Выберите товар</Text>
|
||||
</template>
|
||||
|
||||
<template #card="{ item }">
|
||||
<HubProductCard
|
||||
:name="item.name"
|
||||
:price-history="getMockPriceHistory(item.uuid)"
|
||||
@select="goToProduct(item.uuid)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<Stack align="center" gap="2">
|
||||
<Icon name="lucide:package-x" size="32" class="text-base-content/40" />
|
||||
<Text tone="muted">{{ t('catalogSupplierProducts.empty.no_products') }}</Text>
|
||||
</Stack>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
GetSupplierProfileDocument,
|
||||
GetSupplierOffersDocument,
|
||||
GetSupplierProfilesDocument,
|
||||
GetOffersDocument,
|
||||
} from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isLoading = ref(true)
|
||||
const hoveredId = ref<string>()
|
||||
const supplier = ref<any>(null)
|
||||
const offers = ref<any[]>([])
|
||||
|
||||
const supplierId = computed(() => route.params.supplierId as string)
|
||||
|
||||
// Navigation filters for search bar badges
|
||||
const navigationFilters = computed(() => {
|
||||
const filters: Array<{ id: string; label: string; key: string }> = []
|
||||
|
||||
if (supplier.value?.name) {
|
||||
filters.push({
|
||||
id: 'supplier',
|
||||
key: 'Поставщик',
|
||||
label: supplier.value.name
|
||||
})
|
||||
}
|
||||
|
||||
return filters
|
||||
})
|
||||
|
||||
// Handle removing navigation filter (navigate back)
|
||||
const handleRemoveFilter = (filterId: string) => {
|
||||
if (filterId === 'supplier') {
|
||||
navigateTo(localePath('/catalog/suppliers'))
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
const searchQuery = ref('')
|
||||
|
||||
const filteredProducts = computed(() => {
|
||||
if (!searchQuery.value.trim()) return products.value
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
return products.value.filter(item =>
|
||||
item.name?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
|
||||
// Map items - show supplier location
|
||||
const mapItems = computed(() => {
|
||||
if (!supplier.value?.latitude || !supplier.value?.longitude) return []
|
||||
return [{
|
||||
uuid: supplier.value.uuid || supplier.value.teamUuid || supplierId.value,
|
||||
name: supplier.value.name || '',
|
||||
latitude: Number(supplier.value.latitude),
|
||||
longitude: Number(supplier.value.longitude),
|
||||
country: supplier.value.country
|
||||
}]
|
||||
})
|
||||
|
||||
// Extract unique products from offers
|
||||
const products = computed(() => {
|
||||
const productsMap = new Map<string, { uuid: string; name: string; locationUuid?: string }>()
|
||||
offers.value.forEach(offer => {
|
||||
if (offer.productUuid && offer.productName && !productsMap.has(offer.productUuid)) {
|
||||
productsMap.set(offer.productUuid, {
|
||||
uuid: offer.productUuid,
|
||||
name: offer.productName,
|
||||
locationUuid: offer.locationUuid
|
||||
})
|
||||
}
|
||||
})
|
||||
return Array.from(productsMap.values())
|
||||
})
|
||||
|
||||
// Navigate to product detail
|
||||
const goToProduct = (productId: string) => {
|
||||
navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId}`))
|
||||
}
|
||||
|
||||
// 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: 7 }, (_, i) => {
|
||||
const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
|
||||
return Math.round(basePrice + variation)
|
||||
})
|
||||
}
|
||||
|
||||
// Load data
|
||||
try {
|
||||
// Try to get supplier by UUID first
|
||||
const { data: supplierData } = await useServerQuery(
|
||||
'supplier-profile',
|
||||
GetSupplierProfileDocument,
|
||||
{ uuid: supplierId.value },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
supplier.value = supplierData.value?.getSupplierProfile || null
|
||||
|
||||
// Fallback to searching in all suppliers
|
||||
if (!supplier.value) {
|
||||
const { data: suppliersList } = await useServerQuery(
|
||||
'suppliers-fallback',
|
||||
GetSupplierProfilesDocument,
|
||||
{},
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
supplier.value = (suppliersList.value?.getSupplierProfiles || [])
|
||||
.find((s: any) => s?.teamUuid === supplierId.value || s?.uuid === supplierId.value) || null
|
||||
}
|
||||
|
||||
// Get supplier's offers
|
||||
if (supplier.value) {
|
||||
const teamIds = [
|
||||
supplier.value?.teamUuid,
|
||||
supplier.value?.uuid,
|
||||
supplierId.value
|
||||
].filter(Boolean)
|
||||
|
||||
if (teamIds.length) {
|
||||
const primaryId = teamIds[0] as string
|
||||
const { data: offersData } = await useServerQuery(
|
||||
'supplier-offers',
|
||||
GetSupplierOffersDocument,
|
||||
{ teamUuid: primaryId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
offers.value = offersData.value?.getOffers || []
|
||||
|
||||
// Fallback if no offers found
|
||||
if (!offers.value.length) {
|
||||
const { data: allOffersData } = await useServerQuery(
|
||||
'supplier-offers-fallback',
|
||||
GetOffersDocument,
|
||||
{},
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
const ids = new Set(teamIds)
|
||||
offers.value = (allOffersData.value?.getOffers || [])
|
||||
.filter((o: any) => o?.teamUuid && ids.has(o.teamUuid))
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading supplier products:', error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
// SEO
|
||||
useHead(() => ({
|
||||
title: supplier.value?.name
|
||||
? t('catalogSupplierProducts.meta.title_with_name', { name: supplier.value.name })
|
||||
: t('catalogSupplierProducts.meta.title')
|
||||
}))
|
||||
</script>
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="displayItems"
|
||||
:map-items="itemsWithCoords"
|
||||
:loading="isLoading"
|
||||
:grid-columns="3"
|
||||
with-map
|
||||
map-id="suppliers-map"
|
||||
point-color="#3b82f6"
|
||||
:total-count="total"
|
||||
:hovered-id="hoveredId"
|
||||
@select="onSelectSupplier"
|
||||
@update:hovered-id="hoveredId = $event"
|
||||
>
|
||||
<template #searchBar="{ displayedCount, totalCount }">
|
||||
<CatalogSearchBar
|
||||
v-model:search-query="searchQuery"
|
||||
:active-filters="[]"
|
||||
:displayed-count="displayedCount"
|
||||
:total-count="totalCount"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Text v-if="!isLoading" tone="muted">Выберите поставщика</Text>
|
||||
</template>
|
||||
|
||||
<template #card="{ item }">
|
||||
<SupplierCard :supplier="item" />
|
||||
</template>
|
||||
|
||||
<template #pagination>
|
||||
<PaginationLoadMore
|
||||
v-if="displayItems.length > 0"
|
||||
:shown="displayItems.length"
|
||||
:total="total"
|
||||
:can-load-more="canLoadMore"
|
||||
:loading="isLoadingMore"
|
||||
hide-counter
|
||||
@load-more="loadMore"
|
||||
class="mt-4"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
const {
|
||||
items,
|
||||
total,
|
||||
isLoading,
|
||||
isLoadingMore,
|
||||
canLoadMore,
|
||||
loadMore,
|
||||
init
|
||||
} = useCatalogSuppliers()
|
||||
|
||||
// Hover state
|
||||
const hoveredId = ref<string>()
|
||||
|
||||
// Search bar
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Search with map checkbox
|
||||
const searchWithMap = ref(false)
|
||||
const currentBounds = ref<MapBounds | null>(null)
|
||||
|
||||
// Filter items with valid coordinates for map
|
||||
const itemsWithCoords = computed(() =>
|
||||
items.value.filter(item =>
|
||||
item.latitude != null &&
|
||||
item.longitude != null &&
|
||||
!isNaN(Number(item.latitude)) &&
|
||||
!isNaN(Number(item.longitude))
|
||||
).map(item => ({
|
||||
uuid: item.uuid || item.teamUuid,
|
||||
name: item.name || '',
|
||||
latitude: Number(item.latitude),
|
||||
longitude: Number(item.longitude)
|
||||
}))
|
||||
)
|
||||
|
||||
// Filtered items when searchWithMap is enabled
|
||||
const displayItems = computed(() => {
|
||||
if (!searchWithMap.value || !currentBounds.value) return items.value
|
||||
return items.value.filter(item => {
|
||||
if (item.latitude == null || item.longitude == null) return false
|
||||
const { west, east, north, south } = currentBounds.value!
|
||||
const lng = Number(item.longitude)
|
||||
const lat = Number(item.latitude)
|
||||
return lng >= west && lng <= east && lat >= south && lat <= north
|
||||
})
|
||||
})
|
||||
|
||||
// Search handler (for future use)
|
||||
const onSearch = () => {
|
||||
// TODO: Implement search
|
||||
}
|
||||
|
||||
// Handle supplier selection from map
|
||||
const onSelectSupplier = (supplier: any) => {
|
||||
navigateTo(localePath(`/catalog/suppliers/${supplier.uuid || supplier.teamUuid}`))
|
||||
}
|
||||
|
||||
await init()
|
||||
|
||||
useHead(() => ({
|
||||
title: t('catalogSuppliersSection.header.title')
|
||||
}))
|
||||
</script>
|
||||
@@ -132,11 +132,14 @@ const isSelected = (type: 'address' | 'hub', uuid: string) => {
|
||||
|
||||
const goToRequestIfReady = () => {
|
||||
if (route.query.after === 'request' && searchStore.searchForm.productUuid && searchStore.searchForm.locationUuid) {
|
||||
const query: Record<string, string> = {}
|
||||
const query: Record<string, string> = {
|
||||
product: searchStore.searchForm.productUuid,
|
||||
hub: searchStore.searchForm.locationUuid
|
||||
}
|
||||
if (searchStore.searchForm.quantity) query.quantity = String(searchStore.searchForm.quantity)
|
||||
|
||||
router.push({
|
||||
path: `/catalog/offers/${searchStore.searchForm.productUuid}/${searchStore.searchForm.locationUuid}`,
|
||||
path: `/catalog`,
|
||||
query
|
||||
})
|
||||
return true
|
||||
|
||||
@@ -76,11 +76,14 @@ const selectItem = async (item: any) => {
|
||||
searchStore.setLocation(item.name)
|
||||
searchStore.setLocationUuid(item.uuid)
|
||||
if (route.query.after === 'request' && searchStore.searchForm.productUuid && searchStore.searchForm.locationUuid) {
|
||||
const query: Record<string, string> = {}
|
||||
const query: Record<string, string> = {
|
||||
product: searchStore.searchForm.productUuid,
|
||||
hub: searchStore.searchForm.locationUuid
|
||||
}
|
||||
if (searchStore.searchForm.quantity) query.quantity = String(searchStore.searchForm.quantity)
|
||||
|
||||
router.push({
|
||||
path: `/catalog/offers/${searchStore.searchForm.productUuid}/${searchStore.searchForm.locationUuid}`,
|
||||
path: `/catalog`,
|
||||
query
|
||||
})
|
||||
return
|
||||
|
||||
Reference in New Issue
Block a user