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

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

111
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>
<CatalogPage
:items="itemsForMap"
:loading="isLoading"
map-id="addresses-map"
point-color="#10b981"
:selected-id="selectedAddressId"
v-model:hovered-id="hoveredAddressId"
@select="onSelectAddress"
>
<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>
<!-- ListMapLayout -->
<ListMapLayout
v-else-if="items.length"
:items="itemsForMap"
:selected-item-id="selectedAddressId"
:hovered-item-id="hoveredAddressId"
map-id="addresses-map"
point-color="#10b981"
@select-item="onSelectAddress"
>
<template #list>
<Stack gap="4">
<!-- Add new address button -->
<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 #card="{ item }">
<NuxtLink
:to="localePath(`/clientarea/addresses/${item.uuid}`)"
class="block"
>
<Card padding="sm" interactive>
<div class="flex flex-col gap-1">
<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(item.countryCode) }}</span>
</div>
</div>
</Card>
</NuxtLink>
</template>
<!-- Address cards -->
<Stack gap="3">
<NuxtLink
v-for="addr in items"
:key="addr.uuid"
:to="localePath(`/clientarea/addresses/${addr.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"
>
<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>
<div class="flex items-center mt-1">
<span class="text-lg">{{ isoToEmoji(addr.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()

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

@@ -1,104 +1,64 @@
<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>
<CatalogPage
:items="itemsForMap"
:loading="isLoading"
map-id="orders-map"
point-color="#6366f1"
:selected-id="selectedOrderId"
v-model:hovered-id="hoveredOrderId"
@select="onSelectOrder"
>
<template #filters>
<CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
</template>
<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">#{{ item.name }}</Heading>
</Stack>
<div class="badge badge-outline">
{{ getOrderStartDate(item) }} → {{ getOrderEndDate(item) }}
</div>
</Stack>
<div class="divider my-0"></div>
<Grid :cols="1" :md="3" :gap="3">
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
<Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
<Text>
{{ 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">
{{ 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(item.status)">
{{ getStatusText(item.status) }}
</Badge>
<Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
</Stack>
</Grid>
</Stack>
</Card>
</div>
</template>
<!-- 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"
:items="itemsForMap"
:selected-item-id="selectedOrderId"
:hovered-item-id="hoveredOrderId"
map-id="orders-map"
point-color="#6366f1"
@select-item="onSelectOrder"
>
<template #list>
<Stack gap="4">
<CatalogFilters :filters="filters" v-model="selectedFilter" />
<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"
>
<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>
</Stack>
<div class="badge badge-outline">
{{ getOrderStartDate(order) }} → {{ getOrderEndDate(order) }}
</div>
</Stack>
<div class="divider my-0"></div>
<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>
</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>
</template>
</Text>
<Text tone="muted" size="sm">
{{ order.orderLines?.[0]?.quantity || 0 }} {{ order.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>
<Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(order), total: order.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')