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

feat(catalog): add map to all catalog pages
All checks were successful
Build Docker Image / build (push) Successful in 4m47s
Details

Browse Source 
All catalog pages now use CatalogPage component with map on the right side:
- /catalog/hubs/[id] - shows hub on map
- /catalog/offers - shows empty map (products have no coords)
- /catalog/offers/[productId] - shows hubs where product can be delivered
- /catalog/suppliers/[supplierId] - shows supplier location
- /catalog/suppliers/[supplierId]/[productId] - shows hubs for supplier's product
- /catalog/suppliers/[supplierId]/[productId]/[hubId] - shows source and destination
This commit is contained in:
Ruslan Bakiev
2026-01-16 02:00:31 +07:00
parent 181dc4ea6b
commit 45ec9923e3
6 changed files with 343 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/pages/catalog/hubs/[id]/index.vue
View File

@@ -1,16 +1,15 @@
<template> <template>
<Stack gap="0"> <CatalogPage
<!-- Loading --> :items="products"
<Section v-if="isLoading" variant="plain" paddingY="lg"> :map-items="mapItems"
<Stack align="center" justify="center" gap="4"> :loading="isLoading"
<Spinner /> with-map
<Text tone="muted">{{ t('catalogHub.states.loading') }}</Text> map-id="hub-products-map"
</Stack> point-color="#10b981"
</Section> >
<template #header>
<!-- Error / Not Found --> <!-- Not Found -->
<Section v-else-if="!hub" variant="plain" paddingY="lg"> <Card v-if="!isLoading && !hub" padding="lg">
<Card padding="lg">
<Stack align="center" gap="4"> <Stack align="center" gap="4">
<IconCircle tone="primary"> <IconCircle tone="primary">
<Icon name="lucide:map-pin" size="24" /> <Icon name="lucide:map-pin" size="24" />
@@ -22,39 +21,35 @@
</Button> </Button>
</Stack> </Stack>
</Card> </Card>
</Section>
<!-- Content --> <!-- Content Header -->
<Section v-else variant="plain" paddingY="lg"> <Stack v-else gap="4">
<Stack gap="4">
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
<CatalogBreadcrumbs :hub-id="hubId" :hub-name="hub.name" /> <CatalogBreadcrumbs :hub-id="hubId" :hub-name="hub?.name" />
<!-- Header --> <!-- Header -->
<div> <div>
<Heading :level="1">{{ hub.name }}</Heading> <Heading :level="1">{{ hub?.name }}</Heading>
<Text tone="muted" size="sm">{{ hub.country }}</Text> <Text tone="muted" size="sm">{{ hub?.country }}</Text>
</div> </div>
</Stack>
</template>
<!-- Products grid --> <template #card="{ item }">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
<HubProductCard <HubProductCard
v-for="product in products" :name="item.name"
:key="product.uuid" :price-history="getMockPriceHistory(item.uuid)"
:name="product.name" @select="goToProduct(item.uuid)"
:price-history="getMockPriceHistory(product.uuid)"
@select="goToProduct(product.uuid)"
/> />
</div> </template>
<!-- Empty state --> <template #empty>
<Stack v-if="products.length === 0" align="center" gap="2"> <Stack align="center" gap="2">
<Icon name="lucide:package-x" size="32" class="text-base-content/40" /> <Icon name="lucide:package-x" size="32" class="text-base-content/40" />
<Text tone="muted">{{ t('catalogHub.products.empty') }}</Text> <Text tone="muted">{{ t('catalogHub.products.empty') }}</Text>
</Stack> </Stack>
</Stack> </template>
</Section> </CatalogPage>
</Stack>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -75,6 +70,18 @@ const products = ref<Array<{ uuid: string; name: string }>>([])
const hubId = computed(() => route.params.id as string) const hubId = computed(() => route.params.id as string)
// Map items - show the hub itself
const mapItems = computed(() => {
if (!hub.value?.latitude || !hub.value?.longitude) return []
return [{
uuid: hub.value.uuid || hubId.value,
name: hub.value.name || '',
latitude: Number(hub.value.latitude),
longitude: Number(hub.value.longitude),
country: hub.value.country
}]
})
// Navigate to product page // Navigate to product page
const goToProduct = (productId: string) => { const goToProduct = (productId: string) => {
navigateTo(localePath(`/catalog/hubs/${hubId.value}/${productId}`)) navigateTo(localePath(`/catalog/hubs/${hubId.value}/${productId}`))

76
app/pages/catalog/offers/[productId]/index.vue
View File

@@ -1,16 +1,17 @@
<template> <template>
<Stack gap="0"> <CatalogPage
<!-- Loading --> :items="hubs"
<Section v-if="isLoading" variant="plain" paddingY="lg"> :loading="isLoading"
<Stack align="center" justify="center" gap="4"> with-map
<Spinner /> map-id="offers-product-hubs-map"
<Text tone="muted">{{ t('catalogProductHubs.states.loading') }}</Text> point-color="#10b981"
</Stack> :hovered-id="hoveredHubId"
</Section> @update:hovered-id="hoveredHubId = $event"
@select="onSelectHub"
>
<template #header>
<!-- Product Not Found --> <!-- Product Not Found -->
<Section v-else-if="!product" variant="plain" paddingY="lg"> <Card v-if="!isLoading && !product" padding="lg">
<Card padding="lg">
<Stack align="center" gap="4"> <Stack align="center" gap="4">
<IconCircle tone="primary"> <IconCircle tone="primary">
<Icon name="lucide:package-x" size="24" /> <Icon name="lucide:package-x" size="24" />
@@ -22,17 +23,15 @@
</Button> </Button>
</Stack> </Stack>
</Card> </Card>
</Section>
<!-- Content --> <!-- Content Header -->
<Section v-else variant="plain" paddingY="lg"> <Stack v-else gap="4">
<Stack gap="4">
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
<OffersBreadcrumbs :product-id="productId" :product-name="product.name" /> <OffersBreadcrumbs :product-id="productId" :product-name="product?.name" />
<!-- Header --> <!-- Header -->
<div> <div>
<Heading :level="1">{{ product.name }}</Heading> <Heading :level="1">{{ product?.name }}</Heading>
<Text tone="muted" size="sm">{{ t('catalogProductHubs.header.subtitle', { count: hubs.length }) }}</Text> <Text tone="muted" size="sm">{{ t('catalogProductHubs.header.subtitle', { count: hubs.length }) }}</Text>
</div> </div>
@@ -49,25 +48,23 @@
</ClientOnly> </ClientOnly>
</div> </div>
</Card> </Card>
</Stack>
</template>
<!-- Hubs grid --> <template #card="{ item }">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<HubCard <HubCard
v-for="hub in hubs" :hub="item"
:key="hub.uuid" :link-to="localePath(`/catalog/offers/${productId}/${item.uuid}`)"
:hub="hub"
:link-to="localePath(`/catalog/offers/${productId}/${hub.uuid}`)"
/> />
</div> </template>
<!-- Empty state --> <template #empty>
<Stack v-if="hubs.length === 0" align="center" gap="2"> <Stack align="center" gap="2">
<Icon name="lucide:map-pin-off" size="32" class="text-base-content/40" /> <Icon name="lucide:map-pin-off" size="32" class="text-base-content/40" />
<Text tone="muted">{{ t('catalogProductHubs.empty.no_hubs') }}</Text> <Text tone="muted">{{ t('catalogProductHubs.empty.no_hubs') }}</Text>
</Stack> </Stack>
</Stack> </template>
</Section> </CatalogPage>
</Stack>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -84,10 +81,16 @@ const { t } = useI18n()
const isLoading = ref(true) const isLoading = ref(true)
const product = ref<{ uuid: string; name: string } | null>(null) const product = ref<{ uuid: string; name: string } | null>(null)
const hubs = ref<Array<{ uuid: string; name: string; country?: string; countryCode?: string }>>([]) const hubs = ref<Array<{ uuid: string; name: string; latitude?: number; longitude?: number; country?: string; countryCode?: string }>>([])
const hoveredHubId = ref<string>()
const productId = computed(() => route.params.productId as string) const productId = computed(() => route.params.productId as string)
// Handle hub selection
const onSelectHub = (hub: any) => {
navigateTo(localePath(`/catalog/offers/${productId.value}/${hub.uuid}`))
}
// Mock price history generator // Mock price history generator
const getMockPriceHistory = (uuid: string): number[] => { const getMockPriceHistory = (uuid: string): number[] => {
const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
@@ -145,10 +148,15 @@ try {
// Get only hubs where this product can be delivered // Get only hubs where this product can be delivered
hubs.value = (hubsData.value?.findHubsForProduct || []) hubs.value = (hubsData.value?.findHubsForProduct || [])
.filter((h): h is { uuid: string; name: string; country?: string; countryCode?: string } => .filter((h): h is NonNullable<typeof h> => h !== null && !!h.uuid && !!h.name)
h !== null && !!h.uuid && !!h.name .map(h => ({
) uuid: h.uuid!,
.map(h => ({ uuid: h.uuid!, name: h.name!, country: h.country || undefined, countryCode: h.countryCode || undefined })) name: h.name!,
latitude: h.latitude ?? undefined,
longitude: h.longitude ?? undefined,
country: h.country || undefined,
countryCode: h.countryCode || undefined
}))
} catch (error) { } catch (error) {
console.error('Error loading product hubs:', error) console.error('Error loading product hubs:', error)
} finally { } finally {

48
app/pages/catalog/offers/index.vue
View File

@@ -1,16 +1,14 @@
<template> <template>
<Stack gap="0"> <CatalogPage
<!-- Loading --> :items="products"
<Section v-if="isLoading" variant="plain" paddingY="lg"> :loading="isLoading"
<Stack align="center" justify="center" gap="4"> with-map
<Spinner /> map-id="offers-products-map"
<Text tone="muted">{{ t('catalogProducts.states.loading') }}</Text> point-color="#3b82f6"
</Stack> >
</Section> <template #header>
<!-- Empty --> <!-- Empty -->
<Section v-else-if="products.length === 0" variant="plain" paddingY="lg"> <Card v-if="!isLoading && products.length === 0" padding="lg">
<Card padding="lg">
<Stack align="center" gap="4"> <Stack align="center" gap="4">
<IconCircle tone="primary"> <IconCircle tone="primary">
<Icon name="lucide:package" size="24" /> <Icon name="lucide:package" size="24" />
@@ -19,30 +17,26 @@
<Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text> <Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
</Stack> </Stack>
</Card> </Card>
</Section>
<!-- Content -->
<Section v-else variant="plain" paddingY="lg">
<Stack gap="4">
<!-- Header --> <!-- Header -->
<div> <div v-else>
<Heading :level="1">{{ t('catalogProducts.header.title') }}</Heading> <Heading :level="1">{{ t('catalogProducts.header.title') }}</Heading>
<Text tone="muted" size="sm">{{ t('catalogProducts.header.subtitle', { count: products.length }) }}</Text> <Text tone="muted" size="sm">{{ t('catalogProducts.header.subtitle', { count: products.length }) }}</Text>
</div> </div>
</template>
<!-- Products grid --> <template #card="{ item }">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
<HubProductCard <HubProductCard
v-for="product in products" :name="item.name || ''"
:key="product.uuid" :price-history="getMockPriceHistory(item.uuid)"
:name="product.name || ''" @select="goToProduct(item.uuid)"
:price-history="getMockPriceHistory(product.uuid)"
@select="goToProduct(product.uuid)"
/> />
</div> </template>
</Stack>
</Section> <template #empty>
</Stack> <Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
</template>
</CatalogPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

104
app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
View File

@@ -1,16 +1,14 @@
<template> <template>
<Stack gap="0"> <CatalogPage
<!-- Loading --> :items="routePoints"
<Section v-if="isLoading" variant="plain" paddingY="lg"> :loading="isLoading"
<Stack align="center" justify="center" gap="4"> with-map
<Spinner /> map-id="supplier-route-map"
<Text tone="muted">{{ t('catalogSupplierCalculation.states.loading') }}</Text> point-color="#10b981"
</Stack> >
</Section> <template #header>
<!-- Not Found --> <!-- Not Found -->
<Section v-else-if="!supplier || !product || !hub" variant="plain" paddingY="lg"> <Card v-if="!isLoading && (!supplier || !product || !hub)" padding="lg">
<Card padding="lg">
<Stack align="center" gap="4"> <Stack align="center" gap="4">
<IconCircle tone="primary"> <IconCircle tone="primary">
<Icon name="lucide:package-x" size="24" /> <Icon name="lucide:package-x" size="24" />
@@ -22,33 +20,31 @@
</Button> </Button>
</Stack> </Stack>
</Card> </Card>
</Section>
<!-- Content --> <!-- Content Header -->
<Section v-else variant="plain" paddingY="lg"> <Stack v-else gap="4">
<Stack gap="4">
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
<SuppliersBreadcrumbs <SuppliersBreadcrumbs
:supplier-id="supplierId" :supplier-id="supplierId"
:supplier-name="supplier.name" :supplier-name="supplier?.name"
:product-id="productId" :product-id="productId"
:product-name="product.name" :product-name="product?.name"
:hub-id="hubId" :hub-id="hubId"
:hub-name="hub.name" :hub-name="hub?.name"
/> />
<!-- Header --> <!-- Header -->
<div> <div>
<Heading :level="1">{{ product.name }}</Heading> <Heading :level="1">{{ product?.name }}</Heading>
<div class="flex flex-col gap-1 mt-1"> <div class="flex flex-col gap-1 mt-1">
<Text tone="muted" size="sm"> <Text tone="muted" size="sm">
{{ t('catalogSupplierCalculation.header.supplier') }}: {{ supplier.name }} {{ t('catalogSupplierCalculation.header.supplier') }}: {{ supplier?.name }}
</Text> </Text>
<Text tone="muted" size="sm"> <Text tone="muted" size="sm">
{{ t('catalogSupplierCalculation.header.from') }}: {{ sourceLocation?.name || t('common.values.not_available') }} {{ t('catalogSupplierCalculation.header.from') }}: {{ sourceLocation?.name || t('common.values.not_available') }}
</Text> </Text>
<Text tone="muted" size="sm"> <Text tone="muted" size="sm">
{{ t('catalogSupplierCalculation.header.to') }}: {{ hub.name }}, {{ hub.country }} {{ t('catalogSupplierCalculation.header.to') }}: {{ hub?.name }}, {{ hub?.country }}
</Text> </Text>
</div> </div>
</div> </div>
@@ -69,7 +65,10 @@
</div> </div>
</Stack> </Stack>
</Card> </Card>
</Stack>
</template>
<template #card="{ item }">
<!-- Route Loading --> <!-- Route Loading -->
<Section v-if="isLoadingRoute" variant="plain"> <Section v-if="isLoadingRoute" variant="plain">
<Stack align="center" gap="2"> <Stack align="center" gap="2">
@@ -79,21 +78,20 @@
</Section> </Section>
<!-- Route Result --> <!-- Route Result -->
<template v-else-if="route"> <Card v-else-if="routeData" padding="md">
<Card padding="md">
<Stack gap="3"> <Stack gap="3">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<Text weight="semibold">{{ t('catalogSupplierCalculation.route.title') }}</Text> <Text weight="semibold">{{ t('catalogSupplierCalculation.route.title') }}</Text>
<div class="flex gap-2"> <div class="flex gap-2">
<span class="badge badge-primary">{{ formatDistance(route.totalDistanceKm) }}</span> <span class="badge badge-primary">{{ formatDistance(routeData.totalDistanceKm) }}</span>
<span class="badge badge-neutral">{{ formatDuration(route.totalTimeSeconds) }}</span> <span class="badge badge-neutral">{{ formatDuration(routeData.totalTimeSeconds) }}</span>
</div> </div>
</div> </div>
<!-- Route stages --> <!-- Route stages -->
<div class="space-y-2"> <div class="space-y-2">
<div <div
v-for="(stage, index) in route.stages" v-for="(stage, index) in routeData.stages"
:key="index" :key="index"
class="flex items-center gap-3 p-2 bg-base-200 rounded-lg" class="flex items-center gap-3 p-2 bg-base-200 rounded-lg"
> >
@@ -111,7 +109,6 @@
</div> </div>
</Stack> </Stack>
</Card> </Card>
</template>
<!-- No Route --> <!-- No Route -->
<Card v-else padding="md"> <Card v-else padding="md">
@@ -120,9 +117,12 @@
<Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text> <Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
</Stack> </Stack>
</Card> </Card>
</Stack> </template>
</Section>
</Stack> <template #empty>
<Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
</template>
</CatalogPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -138,7 +138,7 @@ definePageMeta({
layout: 'topnav' layout: 'topnav'
}) })
const route = useRoute() const routeRef = useRoute()
const localePath = useLocalePath() const localePath = useLocalePath()
const { t } = useI18n() const { t } = useI18n()
const { execute } = useGraphQL() const { execute } = useGraphQL()
@@ -148,12 +148,39 @@ const isLoadingRoute = ref(false)
const supplier = ref<any>(null) const supplier = ref<any>(null)
const product = ref<{ uuid: string; name: string } | null>(null) const product = ref<{ uuid: string; name: string } | null>(null)
const hub = ref<any>(null) const hub = ref<any>(null)
const sourceLocation = ref<{ uuid: string; name: string } | null>(null) const sourceLocation = ref<{ uuid: string; name: string; latitude?: number; longitude?: number } | null>(null)
const routeData = ref<any>(null) const routeData = ref<any>(null)
const supplierId = computed(() => route.params.supplierId as string) const supplierId = computed(() => routeRef.params.supplierId as string)
const productId = computed(() => route.params.productId as string) const productId = computed(() => routeRef.params.productId as string)
const hubId = computed(() => route.params.hubId as string) const hubId = computed(() => routeRef.params.hubId as string)
// 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
})
// Format distance // Format distance
const formatDistance = (km?: number | null) => { const formatDistance = (km?: number | null) => {
@@ -331,7 +358,12 @@ try {
if (line) { if (line) {
product.value = { uuid: line.productUuid, name: line.productName } product.value = { uuid: line.productUuid, name: line.productName }
if (offer.locationUuid && offer.locationName) { if (offer.locationUuid && offer.locationName) {
sourceLocation.value = { uuid: offer.locationUuid, name: offer.locationName } sourceLocation.value = {
uuid: offer.locationUuid,
name: offer.locationName,
latitude: offer.locationLat,
longitude: offer.locationLon
}
} }
break break
} }

96
app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
View File

@@ -1,16 +1,17 @@
<template> <template>
<Stack gap="0"> <CatalogPage
<!-- Loading --> :items="hubs"
<Section v-if="isLoading" variant="plain" paddingY="lg"> :loading="isLoading"
<Stack align="center" justify="center" gap="4"> with-map
<Spinner /> map-id="supplier-product-hubs-map"
<Text tone="muted">{{ t('catalogSupplierProductHubs.states.loading') }}</Text> point-color="#10b981"
</Stack> :hovered-id="hoveredHubId"
</Section> @update:hovered-id="hoveredHubId = $event"
@select="onSelectHub"
>
<template #header>
<!-- Not Found --> <!-- Not Found -->
<Section v-else-if="!supplier || !product" variant="plain" paddingY="lg"> <Card v-if="!isLoading && (!supplier || !product)" padding="lg">
<Card padding="lg">
<Stack align="center" gap="4"> <Stack align="center" gap="4">
<IconCircle tone="primary"> <IconCircle tone="primary">
<Icon name="lucide:package-x" size="24" /> <Icon name="lucide:package-x" size="24" />
@@ -22,24 +23,22 @@
</Button> </Button>
</Stack> </Stack>
</Card> </Card>
</Section>
<!-- Content --> <!-- Content Header -->
<Section v-else variant="plain" paddingY="lg"> <Stack v-else gap="4">
<Stack gap="4">
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
<SuppliersBreadcrumbs <SuppliersBreadcrumbs
:supplier-id="supplierId" :supplier-id="supplierId"
:supplier-name="supplier.name" :supplier-name="supplier?.name"
:product-id="productId" :product-id="productId"
:product-name="product.name" :product-name="product?.name"
/> />
<!-- Header --> <!-- Header -->
<div> <div>
<Heading :level="1">{{ product.name }}</Heading> <Heading :level="1">{{ product?.name }}</Heading>
<Text tone="muted" size="sm"> <Text tone="muted" size="sm">
{{ t('catalogSupplierProductHubs.header.from_supplier', { supplier: supplier.name }) }} {{ t('catalogSupplierProductHubs.header.from_supplier', { supplier: supplier?.name }) }}
</Text> </Text>
<Text tone="muted" size="sm" v-if="sourceLocation"> <Text tone="muted" size="sm" v-if="sourceLocation">
{{ t('catalogSupplierProductHubs.header.source_location', { location: sourceLocation.name }) }} {{ t('catalogSupplierProductHubs.header.source_location', { location: sourceLocation.name }) }}
@@ -60,29 +59,27 @@
</div> </div>
</Card> </Card>
<!-- Hubs Section --> <!-- Hubs Section Title -->
<div> <Text weight="semibold" size="lg">
<Text weight="semibold" size="lg" class="mb-3">
{{ t('catalogSupplierProductHubs.header.hubs_title', { count: hubs.length }) }} {{ t('catalogSupplierProductHubs.header.hubs_title', { count: hubs.length }) }}
</Text> </Text>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> </Stack>
<HubCard </template>
v-for="hub in hubs"
:key="hub.uuid"
:hub="hub"
:link-to="localePath(`/catalog/suppliers/${supplierId}/${productId}/${hub.uuid}`)"
/>
</div>
</div>
<!-- Empty state --> <template #card="{ item }">
<Stack v-if="hubs.length === 0" align="center" gap="2"> <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" /> <Icon name="lucide:map-pin-off" size="32" class="text-base-content/40" />
<Text tone="muted">{{ t('catalogSupplierProductHubs.empty.no_hubs') }}</Text> <Text tone="muted">{{ t('catalogSupplierProductHubs.empty.no_hubs') }}</Text>
</Stack> </Stack>
</Stack> </template>
</Section> </CatalogPage>
</Stack>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -98,7 +95,7 @@ definePageMeta({
layout: 'topnav' layout: 'topnav'
}) })
const route = useRoute() const routeRef = useRoute()
const localePath = useLocalePath() const localePath = useLocalePath()
const { t } = useI18n() const { t } = useI18n()
@@ -106,10 +103,16 @@ const isLoading = ref(true)
const supplier = ref<any>(null) const supplier = ref<any>(null)
const product = ref<{ uuid: string; name: string } | null>(null) const product = ref<{ uuid: string; name: string } | null>(null)
const sourceLocation = ref<{ uuid: string; name: string } | null>(null) const sourceLocation = ref<{ uuid: string; name: string } | null>(null)
const hubs = ref<Array<{ uuid: string; name: string; country?: string; countryCode?: string }>>([]) const hubs = ref<Array<{ uuid: string; name: string; latitude?: number; longitude?: number; country?: string; countryCode?: string }>>([])
const hoveredHubId = ref<string>()
const supplierId = computed(() => route.params.supplierId as string) const supplierId = computed(() => routeRef.params.supplierId as string)
const productId = computed(() => route.params.productId as string) const productId = computed(() => routeRef.params.productId as string)
// Handle hub selection
const onSelectHub = (hub: any) => {
navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}/${hub.uuid}`))
}
// Mock price history generator // Mock price history generator
const getMockPriceHistory = (uuid: string): number[] => { const getMockPriceHistory = (uuid: string): number[] => {
@@ -227,10 +230,15 @@ try {
) )
hubs.value = (hubsData.value?.findSupplierProductHubs || []) hubs.value = (hubsData.value?.findSupplierProductHubs || [])
.filter((h): h is { uuid: string; name: string; country?: string; countryCode?: string } => .filter((h): h is NonNullable<typeof h> => h !== null && !!h.uuid && !!h.name)
h !== null && !!h.uuid && !!h.name .map(h => ({
) uuid: h.uuid!,
.map(h => ({ uuid: h.uuid!, name: h.name!, country: h.country || undefined, countryCode: h.countryCode || undefined })) name: h.name!,
latitude: h.latitude ?? undefined,
longitude: h.longitude ?? undefined,
country: h.country || undefined,
countryCode: h.countryCode || undefined
}))
} }
} catch (error) { } catch (error) {
console.error('Error loading data:', error) console.error('Error loading data:', error)

85
app/pages/catalog/suppliers/[supplierId]/index.vue
View File

@@ -1,16 +1,15 @@
<template> <template>
<Stack gap="0"> <CatalogPage
<!-- Loading --> :items="products"
<Section v-if="isLoading" variant="plain" paddingY="lg"> :map-items="mapItems"
<Stack align="center" justify="center" gap="4"> :loading="isLoading"
<Spinner /> with-map
<Text tone="muted">{{ t('catalogSupplierProducts.states.loading') }}</Text> map-id="supplier-products-map"
</Stack> point-color="#3b82f6"
</Section> >
<template #header>
<!-- Supplier Not Found --> <!-- Supplier Not Found -->
<Section v-else-if="!supplier" variant="plain" paddingY="lg"> <Card v-if="!isLoading && !supplier" padding="lg">
<Card padding="lg">
<Stack align="center" gap="4"> <Stack align="center" gap="4">
<IconCircle tone="primary"> <IconCircle tone="primary">
<Icon name="lucide:building-2" size="24" /> <Icon name="lucide:building-2" size="24" />
@@ -22,56 +21,52 @@
</Button> </Button>
</Stack> </Stack>
</Card> </Card>
</Section>
<!-- Content --> <!-- Content Header -->
<Section v-else variant="plain" paddingY="lg"> <Stack v-else gap="4">
<Stack gap="4">
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
<SuppliersBreadcrumbs :supplier-id="supplierId" :supplier-name="supplier.name" /> <SuppliersBreadcrumbs :supplier-id="supplierId" :supplier-name="supplier?.name" />
<!-- Header with supplier info --> <!-- Header with supplier info -->
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<!-- Logo --> <!-- Logo -->
<div v-if="supplier.logo" class="w-16 h-16 shrink-0"> <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"> <img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded-lg">
</div> </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"> <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) }} {{ supplier?.name?.charAt(0) }}
</div> </div>
<div> <div>
<Heading :level="1">{{ supplier.name }}</Heading> <Heading :level="1">{{ supplier?.name }}</Heading>
<Text tone="muted" size="sm">{{ supplier.country }}</Text> <Text tone="muted" size="sm">{{ supplier?.country }}</Text>
<div class="flex gap-2 mt-1"> <div class="flex gap-2 mt-1">
<span v-if="supplier.isVerified" class="badge badge-success badge-sm"> <span v-if="supplier?.isVerified" class="badge badge-success badge-sm">
{{ t('catalogSupplier.badges.verified') }} {{ t('catalogSupplier.badges.verified') }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<!-- Products Section --> <!-- Products Section Title -->
<div> <Text weight="semibold" size="lg">{{ t('catalogSupplierProducts.header.products_title', { count: products.length }) }}</Text>
<Text weight="semibold" size="lg" class="mb-3">{{ t('catalogSupplierProducts.header.products_title', { count: products.length }) }}</Text> </Stack>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> </template>
<HubProductCard
v-for="product in products"
:key="product.uuid"
:name="product.name"
:price-history="getMockPriceHistory(product.uuid)"
@select="goToProduct(product.uuid)"
/>
</div>
</div>
<!-- Empty state --> <template #card="{ item }">
<Stack v-if="products.length === 0" align="center" gap="2"> <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" /> <Icon name="lucide:package-x" size="32" class="text-base-content/40" />
<Text tone="muted">{{ t('catalogSupplierProducts.empty.no_products') }}</Text> <Text tone="muted">{{ t('catalogSupplierProducts.empty.no_products') }}</Text>
</Stack> </Stack>
</Stack> </template>
</Section> </CatalogPage>
</Stack>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -96,6 +91,18 @@ const offers = ref<any[]>([])
const supplierId = computed(() => route.params.supplierId as string) const supplierId = computed(() => route.params.supplierId as string)
// 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 // Extract unique products from offers
const products = computed(() => { const products = computed(() => {
const productsMap = new Map<string, { uuid: string; name: string; locationUuid?: string }>() const productsMap = new Map<string, { uuid: string; name: string; locationUuid?: string }>()