Fix catalog map navigation and hover interactions
All checks were successful
Build Docker Image / build (push) Successful in 3m44s
All checks were successful
Build Docker Image / build (push) Successful in 3m44s
- Add @select handler to hubs/index.vue and suppliers/index.vue for map click navigation - Add hoveredId props to final pages for point highlighting on card hover - Add "Выберите источник" hint on final pages with sources
This commit is contained in:
@@ -33,6 +33,8 @@
|
|||||||
map-id="hub-product-sources-map"
|
map-id="hub-product-sources-map"
|
||||||
point-color="#10b981"
|
point-color="#10b981"
|
||||||
v-model:selected-id="selectedSourceUuid"
|
v-model:selected-id="selectedSourceUuid"
|
||||||
|
:hovered-id="hoveredSourceUuid"
|
||||||
|
@update:hovered-id="hoveredSourceUuid = $event"
|
||||||
>
|
>
|
||||||
<template #searchBar>
|
<template #searchBar>
|
||||||
<CatalogSearchBar
|
<CatalogSearchBar
|
||||||
@@ -45,6 +47,7 @@
|
|||||||
<template #header>
|
<template #header>
|
||||||
<Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
|
<Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
|
||||||
<Stack v-else gap="4">
|
<Stack v-else gap="4">
|
||||||
|
<Text v-if="sources.length > 0" tone="muted">Выберите источник</Text>
|
||||||
<Card padding="md">
|
<Card padding="md">
|
||||||
<div class="h-48">
|
<div class="h-48">
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
@@ -102,6 +105,7 @@ const isLoadingRoutes = ref(false)
|
|||||||
const hub = ref<any>(null)
|
const hub = ref<any>(null)
|
||||||
const product = ref<{ uuid: string; name: string } | null>(null)
|
const product = ref<{ uuid: string; name: string } | null>(null)
|
||||||
const selectedSourceUuid = ref('')
|
const selectedSourceUuid = ref('')
|
||||||
|
const hoveredSourceUuid = ref<string>()
|
||||||
const rawSources = ref<any[]>([])
|
const rawSources = ref<any[]>([])
|
||||||
const offersData = ref<Map<string, any>>(new Map())
|
const offersData = ref<Map<string, any>>(new Map())
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
map-id="hubs-map"
|
map-id="hubs-map"
|
||||||
point-color="#10b981"
|
point-color="#10b981"
|
||||||
:total-count="total"
|
:total-count="total"
|
||||||
|
@select="onSelectHub"
|
||||||
>
|
>
|
||||||
<template #searchBar="{ displayedCount, totalCount }">
|
<template #searchBar="{ displayedCount, totalCount }">
|
||||||
<CatalogSearchBar
|
<CatalogSearchBar
|
||||||
@@ -85,6 +86,7 @@ definePageMeta({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
const localePath = useLocalePath()
|
||||||
|
|
||||||
const {
|
const {
|
||||||
items,
|
items,
|
||||||
@@ -163,6 +165,11 @@ const onSearch = () => {
|
|||||||
// TODO: Implement search by hub name
|
// TODO: Implement search by hub name
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Handle hub selection from map
|
||||||
|
const onSelectHub = (hub: any) => {
|
||||||
|
navigateTo(localePath(`/catalog/hubs/${hub.uuid}`))
|
||||||
|
}
|
||||||
|
|
||||||
await init()
|
await init()
|
||||||
|
|
||||||
useHead(() => ({
|
useHead(() => ({
|
||||||
|
|||||||
@@ -33,6 +33,8 @@
|
|||||||
map-id="offers-product-hub-sources-map"
|
map-id="offers-product-hub-sources-map"
|
||||||
point-color="#10b981"
|
point-color="#10b981"
|
||||||
v-model:selected-id="selectedSourceUuid"
|
v-model:selected-id="selectedSourceUuid"
|
||||||
|
:hovered-id="hoveredSourceUuid"
|
||||||
|
@update:hovered-id="hoveredSourceUuid = $event"
|
||||||
>
|
>
|
||||||
<template #searchBar>
|
<template #searchBar>
|
||||||
<CatalogSearchBar
|
<CatalogSearchBar
|
||||||
@@ -45,6 +47,7 @@
|
|||||||
<template #header>
|
<template #header>
|
||||||
<Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
|
<Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
|
||||||
<Stack v-else gap="4">
|
<Stack v-else gap="4">
|
||||||
|
<Text v-if="sources.length > 0" tone="muted">Выберите источник</Text>
|
||||||
<Card padding="md">
|
<Card padding="md">
|
||||||
<div class="h-48">
|
<div class="h-48">
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
@@ -102,6 +105,7 @@ const isLoadingRoutes = ref(false)
|
|||||||
const hub = ref<any>(null)
|
const hub = ref<any>(null)
|
||||||
const product = ref<{ uuid: string; name: string } | null>(null)
|
const product = ref<{ uuid: string; name: string } | null>(null)
|
||||||
const selectedSourceUuid = ref('')
|
const selectedSourceUuid = ref('')
|
||||||
|
const hoveredSourceUuid = ref<string>()
|
||||||
const rawSources = ref<any[]>([])
|
const rawSources = ref<any[]>([])
|
||||||
const offersData = ref<Map<string, any>>(new Map())
|
const offersData = ref<Map<string, any>>(new Map())
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,8 @@
|
|||||||
with-map
|
with-map
|
||||||
map-id="supplier-route-map"
|
map-id="supplier-route-map"
|
||||||
point-color="#10b981"
|
point-color="#10b981"
|
||||||
|
:hovered-id="hoveredPointUuid"
|
||||||
|
@update:hovered-id="hoveredPointUuid = $event"
|
||||||
>
|
>
|
||||||
<template #searchBar>
|
<template #searchBar>
|
||||||
<CatalogSearchBar
|
<CatalogSearchBar
|
||||||
@@ -89,6 +91,7 @@ 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; latitude?: number; longitude?: number } | 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 hoveredPointUuid = ref<string>()
|
||||||
|
|
||||||
const supplierId = computed(() => routeRef.params.supplierId as string)
|
const supplierId = computed(() => routeRef.params.supplierId as string)
|
||||||
const productId = computed(() => routeRef.params.productId as string)
|
const productId = computed(() => routeRef.params.productId as string)
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
map-id="suppliers-map"
|
map-id="suppliers-map"
|
||||||
point-color="#3b82f6"
|
point-color="#3b82f6"
|
||||||
:total-count="total"
|
:total-count="total"
|
||||||
|
@select="onSelectSupplier"
|
||||||
>
|
>
|
||||||
<template #searchBar="{ displayedCount, totalCount }">
|
<template #searchBar="{ displayedCount, totalCount }">
|
||||||
<CatalogSearchBar
|
<CatalogSearchBar
|
||||||
@@ -53,6 +54,7 @@ definePageMeta({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
const localePath = useLocalePath()
|
||||||
|
|
||||||
const {
|
const {
|
||||||
items,
|
items,
|
||||||
@@ -103,6 +105,11 @@ const onSearch = () => {
|
|||||||
// TODO: Implement search
|
// TODO: Implement search
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Handle supplier selection from map
|
||||||
|
const onSelectSupplier = (supplier: any) => {
|
||||||
|
navigateTo(localePath(`/catalog/suppliers/${supplier.uuid || supplier.teamUuid}`))
|
||||||
|
}
|
||||||
|
|
||||||
await init()
|
await init()
|
||||||
|
|
||||||
useHead(() => ({
|
useHead(() => ({
|
||||||
|
|||||||
Reference in New Issue
Block a user