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

Unify CatalogPage: fixed map, hover support, delete ListMapLayout
All checks were successful
Build Docker Image / build (push) Successful in 4m31s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-08 11:15:54 +07:00
parent 4057bce4be
commit 8d1b7c6dc7
7 changed files with 148 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
app/components/layout/ListMapLayout.vue
View File

@@ -1,151 +0,0 @@
<template>
<div class="flex flex-col flex-1 min-h-0">
<!-- Desktop: side-by-side layout -->
<div class="hidden lg:flex flex-1 gap-4 min-h-0">
<!-- Left side: List (scrollable) -->
<div class="w-2/5 overflow-y-auto pr-2">
<slot name="list" />
</div>
<!-- Right side: Map (fixed position, full height) -->
<div class="w-3/5 relative">
<div class="fixed top-28 right-6 w-[calc(60%-3rem)] h-[calc(100vh-8rem)] rounded-lg overflow-hidden">
<ClientOnly>
<CatalogMap
ref="mapRef"
:map-id="mapId"
:items="itemsWithCoords"
:point-color="pointColor"
@select-item="onMapSelectItem"
/>
</ClientOnly>
</div>
</div>
</div>
<!-- Mobile: toggle between list and map -->
<div class="lg:hidden flex-1 flex flex-col min-h-0">
<!-- Content area -->
<div class="flex-1 overflow-y-auto" v-show="mobileView === 'list'">
<slot name="list" />
</div>
<div class="flex-1" v-show="mobileView === 'map'">
<ClientOnly>
<CatalogMap
ref="mobileMapRef"
:map-id="`${mapId}-mobile`"
:items="itemsWithCoords"
:point-color="pointColor"
@select-item="onMapSelectItem"
/>
</ClientOnly>
</div>
<!-- Mobile toggle buttons -->
<div class="fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
<div class="btn-group shadow-lg">
<button
class="btn btn-sm"
:class="{ 'btn-active': mobileView === 'list' }"
@click="mobileView = 'list'"
>
{{ $t('common.list') }}
</button>
<button
class="btn btn-sm"
:class="{ 'btn-active': mobileView === 'map' }"
@click="mobileView = 'map'"
>
{{ $t('common.map') }}
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
interface MapItem {
uuid: string
latitude?: number | null
longitude?: number | null
name?: string
country?: string
[key: string]: any
}
const props = withDefaults(defineProps<{
items: MapItem[]
selectedItemId?: string
hoveredItemId?: string
mapId: string
pointColor?: string
}>(), {
pointColor: '#3b82f6'
})
const emit = defineEmits<{
'select-item': [uuid: string]
'update:selectedItemId': [uuid: string]
}>()
// Filter items with valid coordinates
const itemsWithCoords = computed(() =>
props.items.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
}))
)
// Mobile view toggle
const mobileView = ref<'list' | 'map'>('list')
// Map refs
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
const mobileMapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
// Handle map item selection
const onMapSelectItem = (uuid: string) => {
emit('select-item', uuid)
emit('update:selectedItemId', uuid)
}
// Fly to a specific item
const flyTo = (lat: number, lng: number, zoom = 8) => {
mapRef.value?.flyTo(lat, lng, zoom)
mobileMapRef.value?.flyTo(lat, lng, zoom)
}
// Fly to item by uuid
const flyToItem = (uuid: string) => {
const item = itemsWithCoords.value.find(i => i.uuid === uuid)
if (item) {
flyTo(item.latitude, item.longitude, 8)
}
}
// Watch selectedItemId and fly to it
watch(() => props.selectedItemId, (uuid) => {
if (uuid) {
flyToItem(uuid)
}
})
// Watch hoveredItemId and fly to it on hover
watch(() => props.hoveredItemId, (uuid) => {
if (uuid) {
flyToItem(uuid)
}
})
// Expose methods for parent components
defineExpose({ flyTo, flyToItem })
</script>

26
app/components/page/CatalogPage.vue
View File

@@ -19,6 +19,7 @@
<!-- Left: List (scrollable) -->
<div class="w-2/5 overflow-y-auto pr-2">
<Stack gap="4">
<slot name="header" />
<slot name="filters" />
<Stack gap="3">
@@ -27,6 +28,8 @@
:key="item.uuid"
:class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
@click="onItemClick(item)"
@mouseenter="emit('update:hoveredId', item.uuid)"
@mouseleave="emit('update:hoveredId', undefined)"
>
<slot name="card" :item="item" />
</div>
@@ -42,8 +45,9 @@
</Stack>
</div>
<!-- Right: Map -->
<div class="w-3/5 rounded-lg overflow-hidden">
<!-- Right: Map (fixed position) -->
<div class="w-3/5 relative">
<div class="fixed top-28 right-6 w-[calc(60%-3rem)] h-[calc(100vh-8rem)] rounded-lg overflow-hidden">
<ClientOnly>
<CatalogMap
ref="mapRef"
@@ -55,11 +59,13 @@
</ClientOnly>
</div>
</div>
</div>
<!-- Mobile: toggle between list and map -->
<div class="lg:hidden flex-1 flex flex-col min-h-0">
<div class="flex-1 overflow-y-auto py-4" v-show="mobileView === 'list'">
<Stack gap="4">
<slot name="header" />
<slot name="filters" />
<Stack gap="3">
@@ -68,6 +74,8 @@
:key="item.uuid"
:class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
@click="onItemClick(item)"
@mouseenter="emit('update:hoveredId', item.uuid)"
@mouseleave="emit('update:hoveredId', undefined)"
>
<slot name="card" :item="item" />
</div>
@@ -120,6 +128,7 @@
<!-- Without Map: Simple List -->
<div v-else class="flex-1 overflow-y-auto py-4">
<Stack gap="4">
<slot name="header" />
<slot name="filters" />
<Stack gap="3">
@@ -162,6 +171,7 @@ const props = withDefaults(defineProps<{
mapId?: string
pointColor?: string
selectedId?: string
hoveredId?: string
}>(), {
loading: false,
withMap: true,
@@ -172,6 +182,7 @@ const props = withDefaults(defineProps<{
const emit = defineEmits<{
'select': [item: MapItem]
'update:selectedId': [uuid: string]
'update:hoveredId': [uuid: string | undefined]
}>()
// Filter items with valid coordinates for map
@@ -229,6 +240,17 @@ watch(() => props.selectedId, (uuid) => {
}
})
// Watch hoveredId and fly to it
watch(() => props.hoveredId, (uuid) => {
if (uuid && props.withMap) {
const item = itemsWithCoords.value.find(i => i.uuid === uuid)
if (item) {
mapRef.value?.flyTo(item.latitude, item.longitude, 8)
mobileMapRef.value?.flyTo(item.latitude, item.longitude, 8)
}
}
})
// Expose flyTo for external use
const flyTo = (lat: number, lng: number, zoom = 8) => {
mapRef.value?.flyTo(lat, lng, zoom)

4
app/pages/catalog/hubs/index.vue
View File

@@ -5,6 +5,7 @@
map-id="hubs-map"
point-color="#10b981"
:selected-id="selectedHubId"
v-model:hovered-id="hoveredHubId"
@select="onSelectHub"
>
<template #filters>
@@ -59,8 +60,9 @@ const {
init
} = useCatalogHubs()
// Selected hub for map highlighting
// Selected/hovered hub for map highlighting
const selectedHubId = ref<string>()
const hoveredHubId = ref<string>()
const onSelectHub = (hub: any) => {
selectedHubId.value = hub.uuid

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

@@ -5,6 +5,7 @@
map-id="offers-map"
point-color="#f59e0b"
:selected-id="selectedOfferId"
v-model:hovered-id="hoveredOfferId"
@select="onSelectOffer"
>
<template #filters>
@@ -78,8 +79,9 @@ const onProductFilterChange = (value: string) => {
setProductUuid(value === 'all' ? null : value)
}
// Selected offer for map highlighting
// Selected/hovered offer for map highlighting
const selectedOfferId = ref<string>()
const hoveredOfferId = ref<string>()
const onSelectOffer = (offer: any) => {
selectedOfferId.value = offer.uuid

4
app/pages/catalog/suppliers/index.vue
View File

@@ -5,6 +5,7 @@
map-id="suppliers-map"
point-color="#3b82f6"
:selected-id="selectedSupplierId"
v-model:hovered-id="hoveredSupplierId"
@select="onSelectSupplier"
>
<template #card="{ item }">
@@ -44,8 +45,9 @@ const {
init
} = useCatalogSuppliers()
// Selected supplier for map highlighting
// Selected/hovered supplier for map highlighting
const selectedSupplierId = ref<string>()
const hoveredSupplierId = ref<string>()
const onSelectSupplier = (supplier: any) => {
selectedSupplierId.value = supplier.uuid || supplier.teamUuid

71
app/pages/clientarea/addresses/index.vue
View File

@@ -1,71 +1,40 @@
<template>
<div class="flex flex-col flex-1 min-h-0">
<!-- Loading state -->
<div v-if="isLoading" class="flex-1 flex items-center justify-center">
<Card padding="lg">
<Stack align="center" justify="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
</Stack>
</Card>
</div>
<!-- ListMapLayout -->
<ListMapLayout
v-else-if="items.length"
<CatalogPage
:items="itemsForMap"
:selected-item-id="selectedAddressId"
:hovered-item-id="hoveredAddressId"
:loading="isLoading"
map-id="addresses-map"
point-color="#10b981"
@select-item="onSelectAddress"
:selected-id="selectedAddressId"
v-model:hovered-id="hoveredAddressId"
@select="onSelectAddress"
>
<template #list>
<Stack gap="4">
<!-- Add new address button -->
<template #header>
<NuxtLink :to="localePath('/clientarea/addresses/new')">
<Button variant="outline" class="w-full">
<Icon name="lucide:plus" size="16" class="mr-2" />
{{ t('profileAddresses.actions.add') }}
</Button>
</NuxtLink>
</template>
<!-- Address cards -->
<Stack gap="3">
<template #card="{ item }">
<NuxtLink
v-for="addr in items"
:key="addr.uuid"
:to="localePath(`/clientarea/addresses/${addr.uuid}`)"
:to="localePath(`/clientarea/addresses/${item.uuid}`)"
class="block"
>
<Card
padding="sm"
interactive
:class="{ 'ring-2 ring-primary': addr.uuid === selectedAddressId }"
@click.prevent="onSelectAddress(addr.uuid)"
@mouseenter="hoveredAddressId = addr.uuid"
@mouseleave="hoveredAddressId = undefined"
>
<Card padding="sm" interactive>
<div class="flex flex-col gap-1">
<Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
<Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
<Text size="base" weight="semibold" class="truncate">{{ item.name }}</Text>
<Text tone="muted" size="sm" class="line-clamp-2">{{ item.address }}</Text>
<div class="flex items-center mt-1">
<span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
<span class="text-lg">{{ isoToEmoji(item.countryCode) }}</span>
</div>
</div>
</Card>
</NuxtLink>
</Stack>
<Stack v-if="items.length === 0" align="center" gap="2">
<Text tone="muted">{{ t('profileAddresses.empty.title') }}</Text>
</Stack>
</Stack>
</template>
</ListMapLayout>
<!-- Empty state -->
<div v-else class="flex-1 flex items-center justify-center">
<template #empty>
<EmptyState
icon="📍"
:title="t('profileAddresses.empty.title')"
@@ -74,8 +43,8 @@
:action-to="localePath('/clientarea/addresses/new')"
action-icon="lucide:plus"
/>
</div>
</div>
</template>
</CatalogPage>
</template>
<script setup lang="ts">
@@ -97,19 +66,21 @@ const {
const selectedAddressId = ref<string>()
const hoveredAddressId = ref<string>()
// Map items for ListMapLayout
// Map items for CatalogPage
const itemsForMap = computed(() => {
return items.value.map(addr => ({
uuid: addr.uuid,
name: addr.name,
address: addr.address,
latitude: addr.latitude,
longitude: addr.longitude,
countryCode: addr.countryCode,
country: addr.countryCode
}))
})
const onSelectAddress = (uuid: string) => {
selectedAddressId.value = uuid
const onSelectAddress = (item: any) => {
selectedAddressId.value = item.uuid
}
await init()

106
app/pages/clientarea/orders/index.vue
View File

@@ -1,59 +1,27 @@
<template>
<div class="flex flex-col flex-1 min-h-0">
<!-- Loading state -->
<div v-if="isLoading" class="flex-1 flex items-center justify-center">
<Card padding="lg">
<Stack align="center" justify="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('ordersList.states.loading') }}</Text>
</Stack>
</Card>
</div>
<!-- Error state -->
<div v-else-if="hasError" class="flex-1 flex items-center justify-center">
<Alert variant="error">
<Stack gap="2">
<Heading :level="4" weight="semibold">{{ $t('common.error') }}</Heading>
<Text tone="muted">{{ error }}</Text>
<Button @click="load">{{ t('ordersList.errors.retry') }}</Button>
</Stack>
</Alert>
</div>
<!-- ListMapLayout -->
<ListMapLayout
v-else-if="items.length"
<CatalogPage
:items="itemsForMap"
:selected-item-id="selectedOrderId"
:hovered-item-id="hoveredOrderId"
:loading="isLoading"
map-id="orders-map"
point-color="#6366f1"
@select-item="onSelectOrder"
:selected-id="selectedOrderId"
v-model:hovered-id="hoveredOrderId"
@select="onSelectOrder"
>
<template #list>
<Stack gap="4">
<CatalogFilters :filters="filters" v-model="selectedFilter" />
<template #filters>
<CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
</template>
<Stack gap="4">
<Card
v-for="order in filteredItems"
:key="order.uuid"
padding="lg"
class="cursor-pointer"
:class="{ 'ring-2 ring-primary': order.uuid === selectedOrderId }"
@click="onSelectOrder(order.uuid)"
@mouseenter="hoveredOrderId = order.uuid"
@mouseleave="hoveredOrderId = undefined"
>
<template #card="{ item }">
<Card padding="lg" class="cursor-pointer">
<Stack gap="4">
<Stack direction="row" justify="between" align="center">
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('ordersList.card.order_label') }}</Text>
<Heading :level="3">#{{ order.name }}</Heading>
<Heading :level="3">#{{ item.name }}</Heading>
</Stack>
<div class="badge badge-outline">
{{ getOrderStartDate(order) }} → {{ getOrderEndDate(order) }}
{{ getOrderStartDate(item) }} → {{ getOrderEndDate(item) }}
</div>
</Stack>
@@ -62,43 +30,35 @@
<Grid :cols="1" :md="3" :gap="3">
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
<Text weight="semibold">{{ order.sourceLocationName }} → {{ order.destinationLocationName }}</Text>
<Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
<Text>
{{ order.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
<template v-if="order.orderLines?.length > 1">
<span class="badge badge-ghost ml-2">+{{ order.orderLines.length - 1 }}</span>
{{ item.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
<template v-if="item.orderLines?.length > 1">
<span class="badge badge-ghost ml-2">+{{ item.orderLines.length - 1 }}</span>
</template>
</Text>
<Text tone="muted" size="sm">
{{ order.orderLines?.[0]?.quantity || 0 }} {{ order.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
{{ item.orderLines?.[0]?.quantity || 0 }} {{ item.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('ordersList.card.status') }}</Text>
<Badge :variant="getStatusVariant(order.status)">
{{ getStatusText(order.status) }}
<Badge :variant="getStatusVariant(item.status)">
{{ getStatusText(item.status) }}
</Badge>
<Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(order), total: order.stages?.length || 0 }) }}</Text>
<Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
</Stack>
</Grid>
</Stack>
</Card>
</Stack>
<Stack v-if="filteredItems.length === 0" align="center" gap="2">
<Text tone="muted">{{ $t('orders.no_orders') }}</Text>
</Stack>
</Stack>
</template>
</ListMapLayout>
<!-- Empty state -->
<div v-else class="flex-1 flex items-center justify-center">
<template #empty>
<EmptyState
icon="📦"
:title="$t('orders.no_orders')"
@@ -107,8 +67,8 @@
:action-to="localePath('/clientarea')"
action-icon="lucide:plus"
/>
</div>
</div>
</template>
</CatalogPage>
</template>
<script setup lang="ts">
@@ -121,25 +81,22 @@ const localePath = useLocalePath()
const { t } = useI18n()
const {
items,
filteredItems,
isLoading,
filters,
selectedFilter,
load,
init,
getStatusVariant,
getStatusText
} = useTeamOrders()
const hasError = ref(false)
const error = ref('')
const selectedOrderId = ref<string>()
const hoveredOrderId = ref<string>()
// Map items for ListMapLayout (use source location coordinates)
// Map items for CatalogPage (use source location coordinates)
const itemsForMap = computed(() => {
return items.value.map(order => ({
return filteredItems.value.map(order => ({
...order,
uuid: order.uuid,
name: order.name || `#${order.uuid.slice(0, 8)}`,
latitude: order.sourceLatitude,
@@ -148,16 +105,11 @@ const itemsForMap = computed(() => {
}))
})
const onSelectOrder = (uuid: string) => {
selectedOrderId.value = uuid
const onSelectOrder = (item: any) => {
selectedOrderId.value = item.uuid
}
try {
await init()
} catch (err: any) {
hasError.value = true
error.value = err.message || t('ordersDetail.errors.load_failed')
}
await init()
const getOrderStartDate = (order: any) => {
if (!order.createdAt) return t('ordersDetail.labels.dates_undefined')