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

feat(ui): unify logistics-style side panel flow

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-21 10:46:35 +07:00
parent d3183bf6ad
commit 54aac790ee
8 changed files with 544 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
app/pages/catalog/destination.vue
View File

@@ -1,87 +1,83 @@
<template>
<div class="fixed inset-0 flex flex-col">
<!-- Fullscreen Map -->
<div class="absolute inset-0">
<ClientOnly>
<CatalogMap
ref="mapRef"
map-id="step-hub-map"
:items="hubMapItems"
:use-server-clustering="false"
point-color="#22c55e"
entity-type="hub"
@select-item="onMapSelect"
@bounds-change="onBoundsChange"
/>
</ClientOnly>
</div>
<div class="fixed inset-0">
<ClientOnly>
<CatalogMap
map-id="step-hub-map"
:items="hubMapItems"
:use-server-clustering="false"
point-color="#22c55e"
entity-type="hub"
:fit-padding-left="460"
@select-item="onMapSelect"
/>
</ClientOnly>
<!-- Bottom sheet card -->
<div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
<article
class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
style="max-height: 60vh"
>
<!-- Header -->
<div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
<div class="flex justify-center mb-4">
<div class="w-10 h-1 bg-base-300 rounded-full" />
</div>
<MapSidePanel
:title="t('catalog.steps.selectDestination')"
:initial-collapsed="false"
width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
>
<div class="space-y-3">
<p class="text-xs font-bold uppercase tracking-wider text-[#8a7761]">{{ $t('catalog.step', { n: 2 }) }}</p>
<div class="mb-1">
<p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 2 }) }}</p>
<h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectDestination') }}</h2>
</div>
<!-- Search input -->
<label class="input input-bordered w-full mt-3 rounded-full flex items-center gap-2">
<Icon name="lucide:search" size="16" class="text-base-content/40" />
<input
v-model="searchQuery"
type="text"
:placeholder="$t('catalog.search.searchHubs')"
class="grow bg-transparent"
/>
</label>
<div v-if="productName" class="inline-flex items-center gap-2 rounded-full border border-[#ded3c2] bg-white px-3 py-1.5 text-xs font-medium text-[#6f6353]">
<Icon name="lucide:package" size="14" />
<span class="truncate">{{ productName }}</span>
</div>
<!-- Hub list -->
<div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
<div v-if="isLoading" class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-md" />
</div>
<label class="input w-full rounded-full bg-white border-[#dccfbf] flex items-center gap-2">
<Icon name="lucide:search" size="16" class="text-[#8a7761]" />
<input
v-model="searchQuery"
type="text"
:placeholder="$t('catalog.search.searchHubs')"
class="grow bg-transparent"
>
</label>
</div>
<div v-else-if="filteredHubs.length === 0" class="text-center py-8 text-base-content/50">
<Icon name="lucide:warehouse" size="32" class="mb-2" />
<p>{{ $t('catalog.empty.noHubs') }}</p>
</div>
<div v-else class="flex flex-col gap-2">
<button
v-for="hub in filteredHubs"
:key="hub.uuid"
class="flex items-center gap-4 rounded-2xl p-4 text-left transition-all hover:bg-base-200/60 active:scale-[0.98] group"
@click="selectHub(hub)"
>
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-green-400 to-green-600 shadow-lg">
<Icon name="lucide:warehouse" size="20" class="text-white" />
</div>
<div class="flex-1 min-w-0">
<span class="text-base font-bold text-base-content block truncate">{{ hub.name || hub.uuid }}</span>
<span v-if="hub.country" class="text-sm text-base-content/50">{{ hub.country }}</span>
</div>
<Icon name="lucide:chevron-right" size="18" class="text-base-content/30 group-hover:text-base-content/60 transition-colors" />
</button>
</div>
<div class="mt-4 flex flex-col gap-2">
<div v-if="isLoading" class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-md" />
</div>
</article>
</div>
<div v-else-if="filteredHubs.length === 0" class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
<Icon name="lucide:warehouse" size="30" class="mx-auto mb-2" />
<p>{{ $t('catalog.empty.noHubs') }}</p>
</div>
<button
v-for="hub in filteredHubs"
v-else
:key="hub.uuid"
class="flex items-center gap-4 rounded-2xl border border-[#e4d9ca] bg-white p-4 text-left transition-colors hover:bg-[#f8f3ec]"
@click="selectHub(hub)"
>
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-green-400 to-green-600 shadow-lg">
<Icon name="lucide:warehouse" size="20" class="text-white" />
</div>
<div class="min-w-0 flex-1">
<span class="block truncate text-base font-bold text-[#2f2418]">{{ hub.name || hub.uuid }}</span>
<span v-if="hub.country" class="text-sm text-[#7a6d5d]">{{ hub.country }}</span>
</div>
<Icon name="lucide:chevron-right" size="18" class="text-[#8a7761]" />
</button>
</div>
<template #footer>
<button
class="btn btn-sm rounded-full border-[#d7c9b7] bg-white text-[#2f2418] hover:bg-[#f7f1e8]"
@click="goBack"
>
<Icon name="lucide:arrow-left" size="14" />
{{ $t('common.back') }}
</button>
</template>
</MapSidePanel>
</div>
</template>
<script setup lang="ts">
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
definePageMeta({ layout: 'topnav' })
const { t } = useI18n()
@@ -89,24 +85,18 @@ const router = useRouter()
const localePath = useLocalePath()
const route = useRoute()
const mapRef = ref(null)
const searchQuery = ref('')
// Get product from query
const productUuid = computed(() => route.query.product as string | undefined)
// Load hubs (filtered by product if available)
const productName = computed(() => route.query.productName as string | undefined)
const { items: hubs, isLoading, init: initHubs, setProductFilter } = useCatalogHubs()
const onBoundsChange = (_bounds: MapBounds) => {
// No clustering needed — showing hub items directly
}
// Hub items for map
const hubMapItems = computed(() =>
hubs.value
.filter(h => h.latitude != null && h.longitude != null)
.filter(h => h.latitude != null && h.longitude != null && h.uuid)
.map(h => ({
uuid: h.uuid || '',
uuid: h.uuid!,
name: h.name || '',
latitude: Number(h.latitude),
longitude: Number(h.longitude),
@@ -114,13 +104,11 @@ const hubMapItems = computed(() =>
}))
)
// Map click → select hub
const onMapSelect = (uuid: string) => {
const hub = hubs.value.find(h => h.uuid === uuid)
if (hub) selectHub(hub)
}
// Filter hubs by search
const filteredHubs = computed(() => {
if (!searchQuery.value.trim()) return hubs.value
const q = searchQuery.value.toLowerCase().trim()
@@ -130,13 +118,14 @@ const filteredHubs = computed(() => {
)
})
// Select hub → navigate to quantity step
const selectHub = (hub: { uuid?: string | null; name?: string | null }) => {
if (!hub.uuid) return
const query: Record<string, string> = {
...route.query as Record<string, string>,
hub: hub.uuid,
}
if (hub.name) query.hubName = hub.name
router.push({
@@ -145,7 +134,13 @@ const selectHub = (hub: { uuid?: string | null; name?: string | null }) => {
})
}
// Init
const goBack = () => {
router.push({
path: localePath('/catalog/product'),
query: route.query,
})
}
onMounted(() => {
if (productUuid.value) {
setProductFilter(productUuid.value)

139
app/pages/catalog/product.vue
View File

@@ -1,83 +1,65 @@
<template>
<div class="fixed inset-0 flex flex-col">
<!-- Fullscreen Map -->
<div class="absolute inset-0">
<ClientOnly>
<CatalogMap
ref="mapRef"
map-id="step-product-map"
:items="[]"
:clustered-points="clusteredNodes"
:use-server-clustering="true"
point-color="#f97316"
entity-type="offer"
@select-item="onMapSelect"
@bounds-change="onBoundsChange"
/>
</ClientOnly>
</div>
<div class="fixed inset-0">
<ClientOnly>
<CatalogMap
map-id="step-product-map"
:items="[]"
:clustered-points="clusteredNodes"
:use-server-clustering="true"
point-color="#f97316"
entity-type="offer"
:fit-padding-left="460"
@bounds-change="onBoundsChange"
/>
</ClientOnly>
<!-- Bottom sheet card -->
<div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
<article
class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
style="max-height: 60vh"
>
<!-- Header -->
<div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
<!-- Drag handle -->
<div class="flex justify-center mb-4">
<div class="w-10 h-1 bg-base-300 rounded-full" />
</div>
<MapSidePanel
:title="t('catalog.steps.selectProduct')"
:initial-collapsed="false"
width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
>
<div class="space-y-3">
<p class="text-xs font-bold uppercase tracking-wider text-[#8a7761]">{{ $t('catalog.step', { n: 1 }) }}</p>
<div class="mb-1">
<p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 1 }) }}</p>
<h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectProduct') }}</h2>
</div>
<label class="input w-full rounded-full bg-white border-[#dccfbf] flex items-center gap-2">
<Icon name="lucide:search" size="16" class="text-[#8a7761]" />
<input
v-model="searchQuery"
type="text"
:placeholder="$t('catalog.search.searchProducts')"
class="grow bg-transparent"
>
</label>
</div>
<!-- Search input -->
<label class="input input-bordered w-full mt-3 rounded-full flex items-center gap-2">
<Icon name="lucide:search" size="16" class="text-base-content/40" />
<input
v-model="searchQuery"
type="text"
:placeholder="$t('catalog.search.searchProducts')"
class="grow bg-transparent"
/>
</label>
<div class="mt-4 flex flex-col gap-2">
<div v-if="isLoading" class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-md" />
</div>
<!-- Product list -->
<div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
<div v-if="isLoading" class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-md" />
</div>
<div v-else-if="filteredProducts.length === 0" class="text-center py-8 text-base-content/50">
<Icon name="lucide:package-x" size="32" class="mb-2" />
<p>{{ $t('catalog.empty.noProducts') }}</p>
</div>
<div v-else class="flex flex-col gap-2">
<button
v-for="product in filteredProducts"
:key="product.uuid"
class="flex items-center gap-4 rounded-2xl p-4 text-left transition-all hover:bg-base-200/60 active:scale-[0.98] group"
@click="selectProduct(product)"
>
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 shadow-lg">
<Icon name="lucide:package" size="20" class="text-white" />
</div>
<div class="flex-1 min-w-0">
<span class="text-base font-bold text-base-content block truncate">{{ product.name || product.uuid }}</span>
<span v-if="product.offersCount" class="text-sm text-base-content/50">{{ product.offersCount }} {{ $t('catalog.offers') }}</span>
</div>
<Icon name="lucide:chevron-right" size="18" class="text-base-content/30 group-hover:text-base-content/60 transition-colors" />
</button>
</div>
<div v-else-if="filteredProducts.length === 0" class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
<Icon name="lucide:package-x" size="30" class="mx-auto mb-2" />
<p>{{ $t('catalog.empty.noProducts') }}</p>
</div>
</article>
</div>
<button
v-for="product in filteredProducts"
v-else
:key="product.uuid"
class="flex items-center gap-4 rounded-2xl border border-[#e4d9ca] bg-white p-4 text-left transition-colors hover:bg-[#f8f3ec]"
@click="selectProduct(product)"
>
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 shadow-lg">
<Icon name="lucide:package" size="20" class="text-white" />
</div>
<div class="min-w-0 flex-1">
<span class="block truncate text-base font-bold text-[#2f2418]">{{ product.name || product.uuid }}</span>
<span v-if="product.offersCount" class="text-sm text-[#7a6d5d]">{{ product.offersCount }} {{ $t('catalog.offers') }}</span>
</div>
<Icon name="lucide:chevron-right" size="18" class="text-[#8a7761]" />
</button>
</div>
</MapSidePanel>
</div>
</template>
@@ -91,24 +73,15 @@ const router = useRouter()
const localePath = useLocalePath()
const route = useRoute()
const mapRef = ref(null)
const searchQuery = ref('')
// Load products
const { items: products, isLoading, init: initProducts } = useCatalogProducts()
// Clustering for map background
const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, ref('offer'))
const onBoundsChange = (bounds: MapBounds) => {
fetchClusters(bounds)
}
const onMapSelect = (uuid: string) => {
// Map click — ignore for product step
}
// Filter products by search
const filteredProducts = computed(() => {
if (!searchQuery.value.trim()) return products.value
const q = searchQuery.value.toLowerCase().trim()
@@ -118,7 +91,6 @@ const filteredProducts = computed(() => {
)
})
// Select product → navigate to hub step
const selectProduct = (product: { uuid: string; name?: string | null }) => {
const query: Record<string, string> = {
...route.query as Record<string, string>,
@@ -132,7 +104,6 @@ const selectProduct = (product: { uuid: string; name?: string | null }) => {
})
}
// Init
onMounted(() => {
initProducts()
})

139
app/pages/catalog/quantity.vue
View File

@@ -1,66 +1,72 @@
<template>
<div class="fixed inset-0 flex flex-col">
<!-- Fullscreen Map -->
<div class="absolute inset-0">
<ClientOnly>
<CatalogMap
ref="mapRef"
map-id="step-quantity-map"
:items="mapPoints"
:use-server-clustering="false"
point-color="#22c55e"
entity-type="hub"
:related-points="relatedPoints"
:info-loading="false"
@bounds-change="() => {}"
/>
</ClientOnly>
</div>
<div class="fixed inset-0">
<ClientOnly>
<CatalogMap
map-id="step-quantity-map"
:items="mapPoints"
:use-server-clustering="false"
point-color="#22c55e"
entity-type="hub"
:related-points="relatedPoints"
:info-loading="false"
:fit-padding-left="460"
/>
</ClientOnly>
<!-- Bottom sheet card -->
<div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
<article
class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
style="max-height: 60vh"
>
<div class="shrink-0 p-5 md:px-7 md:pt-7">
<div class="flex justify-center mb-4">
<div class="w-10 h-1 bg-base-300 rounded-full" />
<MapSidePanel
:title="t('catalog.steps.setQuantity')"
:initial-collapsed="false"
width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
>
<div class="space-y-4">
<p class="text-xs font-bold uppercase tracking-wider text-[#8a7761]">{{ $t('catalog.step', { n: 3 }) }}</p>
<div class="flex flex-wrap gap-2">
<div v-if="productName" class="inline-flex items-center gap-2 rounded-full border border-[#ded3c2] bg-white px-3 py-1.5 text-xs font-medium text-[#6f6353]">
<Icon name="lucide:package" size="14" />
<span class="truncate">{{ productName }}</span>
</div>
<p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 3 }) }}</p>
<h2 class="text-2xl font-black tracking-tight text-base-content mb-4">{{ $t('catalog.steps.setQuantity') }}</h2>
<!-- Quantity input -->
<div class="form-control w-full max-w-xs">
<label class="label">
<span class="label-text font-bold">{{ $t('catalog.filters.quantity') }}</span>
</label>
<label class="input input-bordered rounded-xl flex items-center gap-2">
<input
v-model="qty"
type="number"
min="0"
step="0.1"
placeholder="100"
class="grow bg-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>
<span class="text-base-content/50 text-sm">{{ $t('units.t') }}</span>
</label>
<div v-if="hubName" class="inline-flex items-center gap-2 rounded-full border border-[#ded3c2] bg-white px-3 py-1.5 text-xs font-medium text-[#6f6353]">
<Icon name="lucide:warehouse" size="14" />
<span class="truncate">{{ hubName }}</span>
</div>
<!-- Search button -->
<button
class="btn btn-primary w-full mt-6 rounded-full text-base font-bold"
:disabled="!canSearch"
@click="goSearch"
>
<Icon name="lucide:search" size="18" />
{{ $t('catalog.quote.findOffers') }}
</button>
</div>
</article>
</div>
<div class="space-y-2">
<label class="text-sm font-semibold text-[#4a3b2a]">{{ $t('catalog.filters.quantity') }}</label>
<label class="input w-full rounded-2xl bg-white border-[#dccfbf] flex items-center gap-2">
<input
v-model="qty"
type="number"
min="0"
step="0.1"
placeholder="100"
class="grow bg-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
>
<span class="text-[#8a7761] text-sm">{{ $t('units.t') }}</span>
</label>
</div>
<button
class="btn w-full rounded-full border-0 bg-[#10223b] text-white hover:bg-[#1b3552]"
:disabled="!canSearch"
@click="goSearch"
>
<Icon name="lucide:search" size="18" />
{{ $t('catalog.quote.findOffers') }}
</button>
</div>
<template #footer>
<button
class="btn btn-sm rounded-full border-[#d7c9b7] bg-white text-[#2f2418] hover:bg-[#f7f1e8]"
@click="goBack"
>
<Icon name="lucide:arrow-left" size="14" />
{{ $t('common.back') }}
</button>
</template>
</MapSidePanel>
</div>
</template>
@@ -75,22 +81,23 @@ const localePath = useLocalePath()
const route = useRoute()
const { execute } = useGraphQL()
const mapRef = ref(null)
const qty = ref('100')
const qty = ref(typeof route.query.qty === 'string' ? route.query.qty : '100')
const productUuid = computed(() => route.query.product as string | undefined)
const productName = computed(() => route.query.productName as string | undefined)
const hubUuid = computed(() => route.query.hub as string | undefined)
const hubName = computed(() => route.query.hubName as string | undefined)
const canSearch = computed(() => !!(productUuid.value && hubUuid.value))
const canSearch = computed(() => !!(productUuid.value && hubUuid.value && Number(qty.value) > 0))
// Load hub coordinates for map
const hubPoint = ref<{ uuid: string; name: string; latitude: number; longitude: number } | null>(null)
const loadHubPoint = async () => {
if (!hubUuid.value) return
const data = await execute(GetNodeDocument, { uuid: hubUuid.value }, 'public', 'geo')
const node = data?.node
if (node?.latitude != null && node?.longitude != null) {
hubPoint.value = {
uuid: node.uuid,
@@ -118,6 +125,7 @@ const goSearch = () => {
const query: Record<string, string> = {
...route.query as Record<string, string>,
}
if (qty.value) query.qty = qty.value
router.push({
@@ -126,6 +134,13 @@ const goSearch = () => {
})
}
const goBack = () => {
router.push({
path: localePath('/catalog/destination'),
query: route.query,
})
}
onMounted(() => {
loadHubPoint()
})

212
app/pages/catalog/results.vue
View File

@@ -1,106 +1,84 @@
<template>
<div class="fixed inset-0 flex flex-col">
<!-- Fullscreen Map -->
<div class="absolute inset-0">
<ClientOnly>
<CatalogMap
ref="mapRef"
map-id="step-results-map"
:items="[]"
:use-server-clustering="false"
point-color="#f97316"
entity-type="offer"
:related-points="relatedPoints"
:info-loading="offersLoading"
@select-item="onMapSelect"
@bounds-change="() => {}"
/>
</ClientOnly>
</div>
<div class="fixed inset-0">
<ClientOnly>
<CatalogMap
map-id="step-results-map"
:items="mapItems"
:use-server-clustering="false"
point-color="#f97316"
entity-type="offer"
:related-points="relatedPoints"
:info-loading="offersLoading"
:fit-padding-left="460"
@select-item="onMapSelect"
/>
</ClientOnly>
<!-- Bottom sheet card -->
<div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
<article
class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
style="max-height: 60vh"
>
<!-- Header -->
<div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
<div class="flex justify-center mb-4">
<div class="w-10 h-1 bg-base-300 rounded-full" />
</div>
<MapSidePanel
:title="t('catalog.headers.offers')"
:initial-collapsed="false"
width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
>
<div class="space-y-3">
<p class="text-xs font-bold uppercase tracking-wider text-[#8a7761]">{{ $t('catalog.steps.results') }}</p>
<div class="flex items-center justify-between mb-1">
<div>
<p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.steps.results') }}</p>
<h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.headers.offers') }}</h2>
</div>
<span v-if="!offersLoading" class="badge badge-neutral">{{ offers.length }}</span>
</div>
<div class="flex flex-wrap items-center gap-2">
<span v-if="productName" class="inline-flex items-center gap-1.5 rounded-full border border-[#ded3c2] bg-white px-3 py-1 text-xs font-medium text-[#6f6353]">
<Icon name="lucide:package" size="12" />
{{ productName }}
</span>
<span v-if="hubName" class="inline-flex items-center gap-1.5 rounded-full border border-[#ded3c2] bg-white px-3 py-1 text-xs font-medium text-[#6f6353]">
<Icon name="lucide:warehouse" size="12" />
{{ hubName }}
</span>
<span v-if="qty" class="inline-flex items-center gap-1.5 rounded-full border border-[#ded3c2] bg-white px-3 py-1 text-xs font-medium text-[#6f6353]">
{{ qty }} {{ $t('units.t') }}
</span>
<span v-if="!offersLoading" class="badge badge-neutral ml-auto">{{ offers.length }}</span>
</div>
</div>
<!-- Selected filters summary -->
<div class="flex flex-wrap items-center gap-2 mt-2">
<span v-if="productName" class="badge badge-warning gap-1">
<Icon name="lucide:package" size="12" />
{{ productName }}
</span>
<Icon name="lucide:arrow-right" size="14" class="text-base-content/30" />
<span v-if="hubName" class="badge badge-success gap-1">
<Icon name="lucide:warehouse" size="12" />
{{ hubName }}
</span>
<span v-if="qty" class="badge badge-info gap-1">
{{ qty }} {{ $t('units.t') }}
</span>
</div>
<div class="mt-4 flex flex-col gap-3">
<div v-if="offersLoading" class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-md" />
</div>
<!-- Offers list -->
<div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
<div v-if="offersLoading" class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-md" />
</div>
<div v-else-if="offers.length === 0" class="text-center py-8 text-base-content/50">
<Icon name="lucide:search-x" size="32" class="mb-2" />
<p>{{ $t('catalog.empty.noOffers') }}</p>
<button class="btn btn-ghost btn-sm mt-3" @click="goBack">
<Icon name="lucide:arrow-left" size="16" />
{{ $t('common.back') }}
</button>
</div>
<div v-else class="flex flex-col gap-3">
<div
v-for="offer in offers"
:key="offer.uuid"
class="cursor-pointer"
@click="onSelectOffer(offer)"
>
<OfferResultCard
:supplier-name="offer.supplierName"
:location-name="offer.country || ''"
:product-name="offer.productName"
:price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
:quantity="offer.quantity"
:currency="offer.currency"
:unit="offer.unit"
:stages="getOfferStages(offer)"
:total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
/>
</div>
</div>
<div v-else-if="offers.length === 0" class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
<Icon name="lucide:search-x" size="30" class="mx-auto mb-2" />
<p>{{ $t('catalog.empty.noOffers') }}</p>
</div>
<!-- New search button -->
<div class="shrink-0 p-5 pt-0 md:px-7">
<button class="btn btn-outline btn-sm w-full rounded-full" @click="goBack">
<div v-else class="flex flex-col gap-3">
<button
v-for="offer in offers"
:key="offer.uuid"
class="text-left"
@click="onSelectOffer(offer)"
>
<OfferResultCard
:supplier-name="offer.supplierName"
:location-name="offer.country || ''"
:product-name="offer.productName"
:price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
:quantity="offer.quantity"
:currency="offer.currency"
:unit="offer.unit"
:stages="getOfferStages(offer)"
:total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
/>
</button>
</div>
</div>
<template #footer>
<div class="flex items-center gap-2">
<button class="btn btn-sm rounded-full border-[#d7c9b7] bg-white text-[#2f2418] hover:bg-[#f7f1e8]" @click="goBack">
<Icon name="lucide:refresh-cw" size="14" />
{{ $t('catalog.steps.newSearch') }}
</button>
</div>
</article>
</div>
</template>
</MapSidePanel>
</div>
</template>
@@ -117,24 +95,30 @@ const localePath = useLocalePath()
const route = useRoute()
const { execute } = useGraphQL()
const mapRef = ref(null)
const productUuid = computed(() => route.query.product as string | undefined)
const productName = computed(() => route.query.productName as string | undefined)
const hubUuid = computed(() => route.query.hub as string | undefined)
const hubName = computed(() => route.query.hubName as string | undefined)
const qty = computed(() => route.query.qty as string | undefined)
// Offers data
const offers = ref<NearestOffer[]>([])
const offersLoading = ref(false)
// Hub point for map
const hubPoint = ref<{ uuid: string; name: string; latitude: number; longitude: number } | null>(null)
// Related points for map (hub + offer locations)
const mapItems = computed(() =>
offers.value
.filter(o => o.uuid && o.latitude != null && o.longitude != null)
.map(o => ({
uuid: o.uuid,
name: o.productName || '',
latitude: Number(o.latitude),
longitude: Number(o.longitude),
}))
)
const relatedPoints = computed(() => {
const points: Array<{ uuid: string; name: string; latitude: number; longitude: number; type: 'hub' | 'supplier' | 'offer' }> = []
const points: Array<{ uuid: string; name: string; latitude: number; longitude: number; type: 'hub' | 'offer' }> = []
if (hubPoint.value) {
points.push({
@@ -147,7 +131,7 @@ const relatedPoints = computed(() => {
}
offers.value
.filter(o => o.latitude != null && o.longitude != null)
.filter(o => o.uuid && o.latitude != null && o.longitude != null)
.forEach(o => {
points.push({
uuid: o.uuid,
@@ -167,22 +151,23 @@ const onMapSelect = (uuid: string) => {
}
const onSelectOffer = (offer: NearestOffer) => {
const productUuid = offer.productUuid
if (offer.uuid && productUuid) {
router.push(localePath(`/catalog/offers/${productUuid}?offer=${offer.uuid}`))
const selectedProductUuid = offer.productUuid
if (offer.uuid && selectedProductUuid) {
router.push(localePath(`/catalog/offers/${selectedProductUuid}?offer=${offer.uuid}`))
}
}
const getOfferStages = (offer: NearestOffer) => {
const r = offer.routes?.[0]
if (!r?.stages) return []
return r.stages
.filter((s): s is NonNullable<typeof s> => s !== null)
.map(s => ({
transportType: s.transportType,
distanceKm: s.distanceKm,
travelTimeSeconds: s.travelTimeSeconds,
fromName: s.fromName,
const firstRoute = offer.routes?.[0]
if (!firstRoute?.stages) return []
return firstRoute.stages
.filter((stage): stage is NonNullable<typeof stage> => stage !== null)
.map(stage => ({
transportType: stage.transportType,
distanceKm: stage.distanceKm,
travelTimeSeconds: stage.travelTimeSeconds,
fromName: stage.fromName,
}))
}
@@ -192,14 +177,14 @@ const goBack = () => {
})
}
// Search for offers
const searchOffers = async () => {
if (!productUuid.value || !hubUuid.value) return
offersLoading.value = true
try {
// Load hub coordinates
const hubData = await execute(GetNodeDocument, { uuid: hubUuid.value }, 'public', 'geo')
const hub = hubData?.node
if (!hub?.latitude || !hub?.longitude) {
offers.value = []
return
@@ -212,7 +197,6 @@ const searchOffers = async () => {
longitude: Number(hub.longitude),
}
// Search nearest offers
const data = await execute(
NearestOffersDocument,
{
@@ -226,7 +210,7 @@ const searchOffers = async () => {
'geo'
)
offers.value = (data?.nearestOffers || []).filter((o): o is NearestOffer => o !== null)
offers.value = (data?.nearestOffers || []).filter((offer): offer is NearestOffer => offer !== null)
} finally {
offersLoading.value = false
}

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

@@ -1,111 +1,92 @@
<template>
<div>
<CatalogPage
:items="mapPoints"
:loading="isLoading"
:use-server-clustering="false"
map-id="orders-map"
point-color="#6366f1"
:hovered-id="hoveredOrderId"
:show-panel="!selectedOrderId"
panel-width="w-96"
:hide-view-toggle="true"
@select="onMapSelect"
@update:hovered-id="hoveredOrderId = $event"
>
<template #panel>
<!-- Panel header -->
<div class="p-4 border-b border-base-300 flex-shrink-0">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center">
<Icon name="lucide:package" size="16" class="text-indigo-400" />
</div>
<div>
<span class="font-semibold text-sm">{{ t('cabinetNav.orders') }}</span>
<div class="text-xs text-base-content/50">{{ filteredItems.length }} {{ t('orders.total', 'total') }}</div>
</div>
</div>
</div>
<div class="fixed inset-0">
<ClientOnly>
<CatalogMap
map-id="orders-map"
:items="mapPoints"
:use-server-clustering="false"
point-color="#6366f1"
entity-type="offer"
:hovered-item-id="hoveredOrderId"
:fit-padding-left="460"
@select-item="onMapSelect"
/>
</ClientOnly>
<!-- Search -->
<div class="relative mb-3">
<MapSidePanel
:title="t('cabinetNav.orders')"
:initial-collapsed="false"
width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
>
<div class="space-y-3">
<div class="relative">
<input
v-model="searchQuery"
type="text"
:placeholder="t('common.search')"
class="input input-sm w-full bg-base-200 border-base-300 text-base-content placeholder:text-base-content/50"
/>
<Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/50" />
class="input input-sm w-full bg-white border-[#dccfbf] text-[#2f2418] placeholder:text-[#8a7761]"
>
<Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-[#8a7761]" />
</div>
<!-- Filter dropdown -->
<div class="dropdown dropdown-end w-full">
<label tabindex="0" class="btn btn-sm w-full bg-base-200 border-base-300 text-base-content hover:bg-base-200 justify-between">
<label tabindex="0" class="btn btn-sm w-full bg-white border-[#dccfbf] text-[#2f2418] hover:bg-[#f9f4ed] justify-between">
<span>{{ selectedFilterLabel }}</span>
<Icon name="lucide:chevron-down" size="14" />
</label>
<ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-base-200 rounded-box w-full mt-2">
<ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-white rounded-box w-full mt-2">
<li v-for="filter in filters" :key="filter.id">
<a
:class="{ 'active': selectedFilter === filter.id }"
@click="selectedFilter = filter.id"
>{{ filter.label }}</a>
<a :class="{ active: selectedFilter === filter.id }" @click="selectedFilter = filter.id">{{ filter.label }}</a>
</li>
</ul>
</div>
</div>
<!-- Orders list -->
<div class="flex-1 overflow-y-auto p-3 space-y-2">
<div class="mt-4 flex flex-col gap-2">
<template v-if="displayItems.length > 0">
<div
<button
v-for="item in displayItems"
:key="item.uuid"
class="bg-base-200 rounded-lg p-3 hover:bg-base-200 transition-colors cursor-pointer"
:class="{ 'ring-2 ring-indigo-500': selectedOrderId === item.uuid }"
class="rounded-2xl border border-[#e4d9ca] bg-white p-3 text-left transition-colors hover:bg-[#f8f3ec]"
:class="selectedOrderId === item.uuid ? 'ring-2 ring-[#2f2416]' : ''"
@click="selectedOrderId = item.uuid"
@mouseenter="hoveredOrderId = item.uuid"
@mouseleave="hoveredOrderId = undefined"
>
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-sm">#{{ item.name }}</span>
<div class="mb-2 flex items-center justify-between gap-2">
<span class="truncate font-semibold text-sm text-[#2f2418]">#{{ item.name }}</span>
<span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
{{ getStatusText(item.status) }}
</span>
</div>
<div class="text-xs text-base-content/70 space-y-1">
<div class="space-y-1 text-xs text-[#6f6353]">
<div class="flex items-center gap-2">
<Icon name="lucide:map-pin" size="12" class="text-base-content/40" />
<Icon name="lucide:map-pin" size="12" />
<span class="truncate">{{ item.sourceLocationName }}</span>
</div>
<div class="flex items-center gap-2">
<Icon name="lucide:navigation" size="12" class="text-base-content/40" />
<Icon name="lucide:navigation" size="12" />
<span class="truncate">{{ item.destinationLocationName }}</span>
</div>
</div>
<div class="text-xs text-base-content/50 mt-2">
{{ getOrderDate(item) }}
</div>
</div>
</template>
<template v-else>
<div class="text-center py-8">
<div class="text-3xl mb-2">📦</div>
<div class="font-semibold text-sm mb-1">{{ t('orders.no_orders') }}</div>
<div class="text-xs text-base-content/60">{{ t('orders.no_orders_desc') }}</div>
</div>
<div class="mt-2 text-xs text-[#95836d]">{{ getOrderDate(item) }}</div>
</button>
</template>
<div v-else class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
<div class="text-2xl">📦</div>
<div class="mt-2 text-sm font-semibold">{{ t('orders.no_orders') }}</div>
<div class="mt-1 text-xs">{{ t('orders.no_orders_desc') }}</div>
</div>
</div>
<!-- Footer -->
<div class="p-3 border-t border-base-300 flex-shrink-0">
<span class="text-xs text-base-content/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
</div>
</template>
</CatalogPage>
<template #footer>
<span class="text-xs text-[#7c6d5a]">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
</template>
</MapSidePanel>
<!-- Order Detail Bottom Sheet -->
<OrderDetailBottomSheet
:is-open="!!selectedOrderId"
:order-uuid="selectedOrderId"
@@ -128,7 +109,6 @@ const { t } = useI18n()
const {
filteredItems,
isLoading,
filters,
selectedFilter,
init,
@@ -140,13 +120,11 @@ const hoveredOrderId = ref<string>()
const searchQuery = ref('')
const selectedOrderId = ref<string | null>(null)
// Selected filter label
const selectedFilterLabel = computed(() => {
const filter = filters.value.find(f => f.id === selectedFilter.value)
return filter?.label || t('ordersList.filters.status')
})
// Map points - source locations
const mapPoints = computed(() => {
return filteredItems.value
.filter(order => order.uuid && order.sourceLatitude && order.sourceLongitude)
@@ -158,7 +136,6 @@ const mapPoints = computed(() => {
}))
})
// Display items with search filter
const displayItems = computed(() => {
let items = filteredItems.value.filter(order => order.uuid)
@@ -174,9 +151,9 @@ const displayItems = computed(() => {
return items
})
const onMapSelect = (item: { uuid?: string | null }) => {
if (item.uuid) {
selectedOrderId.value = item.uuid
const onMapSelect = (uuid: string) => {
if (uuid) {
selectedOrderId.value = uuid
}
}