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

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()
})