Rewrite team/profile/orders pages with bottom sheet (not side panel)
All checks were successful
Build Docker Image / build (push) Successful in 4m9s
All checks were successful
Build Docker Image / build (push) Successful in 4m9s
- All three pages now use CatalogPage + bottom sheet from bottom (70vh) - Glass style: bg-black/40 backdrop-blur-xl rounded-t-2xl - Drag handle at top - Two-column grid layout for team/profile - Orders list with search and filter - Map visible in background
This commit is contained in:
Ruslan Bakiev
@@ -1,92 +1,119 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="mapPoints"
|
||||
:loading="isLoading"
|
||||
:use-server-clustering="false"
|
||||
map-id="orders-map"
|
||||
point-color="#6366f1"
|
||||
:hovered-id="hoveredOrderId"
|
||||
:show-panel="true"
|
||||
panel-width="w-1/2"
|
||||
:hide-view-toggle="true"
|
||||
@select="onMapSelect"
|
||||
@update:hovered-id="hoveredOrderId = $event"
|
||||
>
|
||||
<template #panel>
|
||||
<!-- Panel header -->
|
||||
<div class="p-4 border-b border-white/10 flex-shrink-0">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="font-semibold">{{ t('cabinetNav.orders') }}</span>
|
||||
<div>
|
||||
<CatalogPage
|
||||
:items="mapPoints"
|
||||
:loading="isLoading"
|
||||
:use-server-clustering="false"
|
||||
map-id="orders-map"
|
||||
point-color="#6366f1"
|
||||
:hovered-id="hoveredOrderId"
|
||||
:show-panel="false"
|
||||
:hide-view-toggle="true"
|
||||
@select="onMapSelect"
|
||||
@update:hovered-id="hoveredOrderId = $event"
|
||||
/>
|
||||
|
||||
<!-- Bottom Sheet -->
|
||||
<div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
|
||||
<!-- Glass sheet -->
|
||||
<div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
|
||||
<!-- Drag handle -->
|
||||
<div class="flex justify-center py-2">
|
||||
<div class="w-12 h-1.5 bg-white/30 rounded-full" />
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative mb-3">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
:placeholder="t('common.search')"
|
||||
class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
|
||||
/>
|
||||
<Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
|
||||
</div>
|
||||
|
||||
<!-- Filter dropdown -->
|
||||
<div class="dropdown dropdown-end w-full">
|
||||
<label tabindex="0" class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20 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">
|
||||
<li v-for="filter in filters" :key="filter.id">
|
||||
<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">
|
||||
<template v-if="displayItems.length > 0">
|
||||
<div
|
||||
v-for="item in displayItems"
|
||||
:key="item.uuid"
|
||||
class="bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-colors cursor-pointer"
|
||||
@mouseenter="hoveredOrderId = item.uuid"
|
||||
@mouseleave="hoveredOrderId = undefined"
|
||||
@click="onSelectOrder(item)"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="font-semibold text-sm">#{{ item.name }}</span>
|
||||
<span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
|
||||
{{ getStatusText(item.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs text-white/60 truncate">
|
||||
{{ item.sourceLocationName }} → {{ item.destinationLocationName }}
|
||||
</div>
|
||||
<div class="text-xs text-white/50 mt-1">
|
||||
{{ getOrderDate(item) }}
|
||||
<!-- Header -->
|
||||
<div class="px-6 pb-4 border-b border-white/10">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-indigo-500/20 flex items-center justify-center">
|
||||
<Icon name="lucide:package" size="20" class="text-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-white">{{ t('cabinetNav.orders') }}</div>
|
||||
<div class="text-xs text-white/50">{{ filteredItems.length }} {{ t('orders.total', 'total') }}</div>
|
||||
</div>
|
||||
</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-white/60">{{ t('orders.no_orders_desc') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="p-3 border-t border-white/10 flex-shrink-0">
|
||||
<span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
|
||||
<!-- Search -->
|
||||
<div class="relative mb-3">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
:placeholder="t('common.search')"
|
||||
class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
|
||||
/>
|
||||
<Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
|
||||
</div>
|
||||
|
||||
<!-- Filter dropdown -->
|
||||
<div class="dropdown dropdown-end w-full">
|
||||
<label tabindex="0" class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20 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">
|
||||
<li v-for="filter in filters" :key="filter.id">
|
||||
<a
|
||||
:class="{ 'active': selectedFilter === filter.id }"
|
||||
@click="selectedFilter = filter.id"
|
||||
>{{ filter.label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable content -->
|
||||
<div class="overflow-y-auto h-[calc(70vh-180px)] px-6 py-4">
|
||||
<template v-if="displayItems.length > 0">
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="item in displayItems"
|
||||
:key="item.uuid"
|
||||
class="bg-white/5 rounded-xl p-4 border border-white/10 hover:bg-white/10 transition-colors cursor-pointer"
|
||||
@mouseenter="hoveredOrderId = item.uuid"
|
||||
@mouseleave="hoveredOrderId = undefined"
|
||||
@click="onSelectOrder(item)"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-semibold text-white">#{{ item.name }}</span>
|
||||
<span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
|
||||
{{ getStatusText(item.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm text-white/70 mb-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="lucide:map-pin" size="14" class="text-white/40" />
|
||||
{{ item.sourceLocationName }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<Icon name="lucide:navigation" size="14" class="text-white/40" />
|
||||
{{ item.destinationLocationName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-white/50 mt-2">
|
||||
{{ getOrderDate(item) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="text-center py-12">
|
||||
<div class="text-4xl mb-3">📦</div>
|
||||
<div class="font-semibold text-white mb-1">{{ t('orders.no_orders') }}</div>
|
||||
<div class="text-sm text-white/60">{{ t('orders.no_orders_desc') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-6 py-3 border-t border-white/10">
|
||||
<span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
Reference in New Issue
Block a user