feat(clientarea): modernize orders and addresses pages with new map layout
All checks were successful
Build Docker Image / build (push) Successful in 6m13s
All checks were successful
Build Docker Image / build (push) Successful in 6m13s
- Create ClientAreaMapPage component for client area pages with glass effect - Update orders page to use new ClientAreaMapPage with filter dropdown - Update addresses page to use new ClientAreaMapPage with add button - Remove Profile and Team tabs from MainNavigation (already in user menu)
This commit is contained in:
Ruslan Bakiev
@@ -1,66 +1,57 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="displayItems"
|
||||
:map-items="itemsWithCoords"
|
||||
<ClientAreaMapPage
|
||||
:items="items"
|
||||
:loading="isLoading"
|
||||
with-map
|
||||
map-id="addresses-map"
|
||||
point-color="#10b981"
|
||||
:selected-id="selectedAddressId"
|
||||
:hovered-id="hoveredAddressId"
|
||||
:total-count="items.length"
|
||||
:title="t('cabinetNav.addresses')"
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectAddress"
|
||||
@update:hovered-id="hoveredAddressId = $event"
|
||||
@update:search-query="searchQuery = $event"
|
||||
>
|
||||
<template #searchBar="{ displayedCount, totalCount }">
|
||||
<CatalogSearchBar
|
||||
v-model:search-query="searchQuery"
|
||||
:active-filters="[]"
|
||||
:displayed-count="displayedCount"
|
||||
:total-count="totalCount"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<NuxtLink :to="localePath('/clientarea/addresses/new')">
|
||||
<Button variant="outline" class="w-full">
|
||||
<Icon name="lucide:plus" size="16" class="mr-2" />
|
||||
<button class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20">
|
||||
<Icon name="lucide:plus" size="14" class="mr-1" />
|
||||
{{ t('profileAddresses.actions.add') }}
|
||||
</Button>
|
||||
</button>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<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 class="bg-white/10 rounded-lg p-4 hover:bg-white/20 transition-colors">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-2xl">{{ isoToEmoji(item.countryCode) }}</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-semibold truncate">{{ item.name }}</div>
|
||||
<div class="text-sm text-white/60 line-clamp-2">{{ item.address }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<EmptyState
|
||||
icon="📍"
|
||||
:title="t('profileAddresses.empty.title')"
|
||||
:description="t('profileAddresses.empty.description')"
|
||||
:action-label="t('profileAddresses.empty.cta')"
|
||||
:action-to="localePath('/clientarea/addresses/new')"
|
||||
action-icon="lucide:plus"
|
||||
/>
|
||||
<div class="text-center py-8">
|
||||
<div class="text-4xl mb-2">📍</div>
|
||||
<div class="font-semibold mb-1">{{ t('profileAddresses.empty.title') }}</div>
|
||||
<div class="text-sm text-white/60 mb-4">{{ t('profileAddresses.empty.description') }}</div>
|
||||
<NuxtLink :to="localePath('/clientarea/addresses/new')">
|
||||
<button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
|
||||
<Icon name="lucide:plus" size="14" class="mr-1" />
|
||||
{{ t('profileAddresses.empty.cta') }}
|
||||
</button>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</ClientAreaMapPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav',
|
||||
middleware: ['auth-oidc']
|
||||
@@ -76,51 +67,12 @@ const {
|
||||
init
|
||||
} = useTeamAddresses()
|
||||
|
||||
const selectedAddressId = ref<string>()
|
||||
const hoveredAddressId = ref<string>()
|
||||
|
||||
// Search bar
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Search with map checkbox
|
||||
const searchWithMap = ref(false)
|
||||
const currentBounds = ref<MapBounds | null>(null)
|
||||
|
||||
// Map items
|
||||
const itemsWithCoords = computed(() => {
|
||||
return items.value.filter(addr =>
|
||||
addr.latitude != null &&
|
||||
addr.longitude != null &&
|
||||
!isNaN(Number(addr.latitude)) &&
|
||||
!isNaN(Number(addr.longitude))
|
||||
).map(addr => ({
|
||||
uuid: addr.uuid,
|
||||
name: addr.name,
|
||||
latitude: Number(addr.latitude),
|
||||
longitude: Number(addr.longitude)
|
||||
}))
|
||||
})
|
||||
|
||||
// Filtered items when searchWithMap is enabled
|
||||
const displayItems = computed(() => {
|
||||
if (!searchWithMap.value || !currentBounds.value) return items.value
|
||||
return items.value.filter(item => {
|
||||
if (item.latitude == null || item.longitude == null) return false
|
||||
const { west, east, north, south } = currentBounds.value!
|
||||
const lng = Number(item.longitude)
|
||||
const lat = Number(item.latitude)
|
||||
return lng >= west && lng <= east && lat >= south && lat <= north
|
||||
})
|
||||
})
|
||||
|
||||
// Search handler
|
||||
const onSearch = () => {
|
||||
// TODO: Implement search
|
||||
}
|
||||
|
||||
const onSelectAddress = (item: { uuid?: string | null }) => {
|
||||
if (item.uuid) {
|
||||
selectedAddressId.value = item.uuid
|
||||
navigateTo(localePath(`/clientarea/addresses/${item.uuid}`))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,109 +1,88 @@
|
||||
<template>
|
||||
<CatalogPage
|
||||
:items="displayItems"
|
||||
:map-items="mapPoints"
|
||||
<ClientAreaMapPage
|
||||
:items="listItems"
|
||||
:loading="isLoading"
|
||||
with-map
|
||||
map-id="orders-map"
|
||||
point-color="#6366f1"
|
||||
:selected-id="selectedOrderId"
|
||||
:hovered-id="hoveredOrderId"
|
||||
:total-count="filteredItems.length"
|
||||
:title="t('cabinetNav.orders')"
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectOrder"
|
||||
@update:hovered-id="hoveredOrderId = $event"
|
||||
@update:search-query="searchQuery = $event"
|
||||
>
|
||||
<template #searchBar="{ displayedCount, totalCount }">
|
||||
<CatalogSearchBar
|
||||
v-model:search-query="searchQuery"
|
||||
:active-filters="activeFilterBadges"
|
||||
:displayed-count="displayedCount"
|
||||
:total-count="totalCount"
|
||||
@remove-filter="onRemoveFilter"
|
||||
@search="onSearch"
|
||||
>
|
||||
<template #filters>
|
||||
<div class="p-2 space-y-3">
|
||||
<div>
|
||||
<div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('ordersList.filters.status') }}</div>
|
||||
<ul class="menu menu-compact">
|
||||
<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>
|
||||
</template>
|
||||
</CatalogSearchBar>
|
||||
<template #header>
|
||||
<!-- Filter dropdown -->
|
||||
<div class="dropdown dropdown-end">
|
||||
<label tabindex="0" class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
|
||||
<Icon name="lucide:filter" size="14" />
|
||||
{{ selectedFilterLabel }}
|
||||
</label>
|
||||
<ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-base-200 rounded-box w-52 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>
|
||||
</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 class="bg-white/10 rounded-lg p-4 hover:bg-white/20 transition-colors">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div>
|
||||
<div class="text-xs text-white/60">{{ t('ordersList.card.order_label') }}</div>
|
||||
<div class="font-semibold">#{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="badge badge-outline text-xs text-white/80 border-white/30">
|
||||
{{ getOrderStartDate(item) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-white/10 my-2" />
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 text-sm">
|
||||
<div>
|
||||
<div class="text-xs text-white/60">{{ t('ordersList.card.route') }}</div>
|
||||
<div class="truncate">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-white/60">{{ t('ordersList.card.status') }}</div>
|
||||
<div class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
|
||||
{{ getStatusText(item.status) }}
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 v-if="item.orderLines?.[0]" class="mt-2 text-sm">
|
||||
<div class="text-xs text-white/60">{{ t('ordersList.card.product') }}</div>
|
||||
<div>
|
||||
{{ item.orderLines[0].productName }}
|
||||
<span v-if="item.orderLines.length > 1" class="badge badge-ghost badge-xs ml-1">
|
||||
+{{ item.orderLines.length - 1 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<EmptyState
|
||||
icon="📦"
|
||||
:title="t('orders.no_orders')"
|
||||
:description="t('orders.no_orders_desc')"
|
||||
:action-label="t('orders.create_new')"
|
||||
:action-to="localePath('/clientarea')"
|
||||
action-icon="lucide:plus"
|
||||
/>
|
||||
<div class="text-center py-8">
|
||||
<div class="text-4xl mb-2">📦</div>
|
||||
<div class="font-semibold mb-1">{{ t('orders.no_orders') }}</div>
|
||||
<div class="text-sm text-white/60">{{ t('orders.no_orders_desc') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</ClientAreaMapPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
||||
import type { GetTeamOrdersQueryResult } from '~/composables/graphql/team/orders-generated'
|
||||
|
||||
type TeamOrder = NonNullable<NonNullable<GetTeamOrdersQueryResult['getTeamOrders']>[number]>
|
||||
type TeamOrderStage = NonNullable<NonNullable<TeamOrder['stages']>[number]>
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav',
|
||||
@@ -123,19 +102,18 @@ const {
|
||||
getStatusText
|
||||
} = useTeamOrders()
|
||||
|
||||
const selectedOrderId = ref<string>()
|
||||
const hoveredOrderId = ref<string>()
|
||||
|
||||
// Search bar
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Search with map checkbox
|
||||
const searchWithMap = ref(false)
|
||||
const currentBounds = ref<MapBounds | 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')
|
||||
})
|
||||
|
||||
// List items - one per order
|
||||
const listItems = computed(() => {
|
||||
return filteredItems.value
|
||||
let items = filteredItems.value
|
||||
.filter(order => order.uuid)
|
||||
.map(order => ({
|
||||
...order,
|
||||
@@ -145,79 +123,22 @@ const listItems = computed(() => {
|
||||
longitude: order.sourceLongitude,
|
||||
country: order.sourceLocationName
|
||||
}))
|
||||
})
|
||||
|
||||
// Map points - two per order (source + destination)
|
||||
interface MapPoint {
|
||||
uuid: string
|
||||
name: string
|
||||
latitude: number
|
||||
longitude: number
|
||||
}
|
||||
|
||||
const mapPoints = computed(() => {
|
||||
const result: MapPoint[] = []
|
||||
filteredItems.value.forEach(order => {
|
||||
// Source point
|
||||
if (order.sourceLatitude && order.sourceLongitude) {
|
||||
result.push({
|
||||
uuid: `${order.uuid}-source`,
|
||||
name: `📦 ${order.sourceLocationName}`,
|
||||
latitude: order.sourceLatitude,
|
||||
longitude: order.sourceLongitude
|
||||
})
|
||||
}
|
||||
// Destination point - get from last stage
|
||||
const lastStage = order.stages?.[order.stages.length - 1]
|
||||
if (lastStage?.destinationLatitude && lastStage?.destinationLongitude) {
|
||||
result.push({
|
||||
uuid: `${order.uuid}-dest`,
|
||||
name: `🏁 ${order.destinationLocationName}`,
|
||||
latitude: lastStage.destinationLatitude,
|
||||
longitude: lastStage.destinationLongitude
|
||||
})
|
||||
}
|
||||
})
|
||||
return result
|
||||
})
|
||||
|
||||
// Filtered items when searchWithMap is enabled
|
||||
const displayItems = computed(() => {
|
||||
if (!searchWithMap.value || !currentBounds.value) return listItems.value
|
||||
return listItems.value.filter(item => {
|
||||
if (item.latitude == null || item.longitude == null) return false
|
||||
const { west, east, north, south } = currentBounds.value!
|
||||
const lng = Number(item.longitude)
|
||||
const lat = Number(item.latitude)
|
||||
return lng >= west && lng <= east && lat >= south && lat <= north
|
||||
})
|
||||
})
|
||||
|
||||
// Active filter badges
|
||||
const activeFilterBadges = computed(() => {
|
||||
const badges: { id: string; label: string }[] = []
|
||||
if (selectedFilter.value && selectedFilter.value !== 'all') {
|
||||
const filter = filters.value.find(f => f.id === selectedFilter.value)
|
||||
if (filter) badges.push({ id: `status:${filter.id}`, label: filter.label })
|
||||
// Apply search filter
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
items = items.filter(item =>
|
||||
item.name?.toLowerCase().includes(query) ||
|
||||
item.sourceLocationName?.toLowerCase().includes(query) ||
|
||||
item.destinationLocationName?.toLowerCase().includes(query)
|
||||
)
|
||||
}
|
||||
return badges
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
// Remove filter badge
|
||||
const onRemoveFilter = (id: string) => {
|
||||
if (id.startsWith('status:')) {
|
||||
selectedFilter.value = 'all'
|
||||
}
|
||||
}
|
||||
|
||||
// Search handler
|
||||
const onSearch = () => {
|
||||
// TODO: Implement search
|
||||
}
|
||||
|
||||
const onSelectOrder = (item: { uuid?: string | null }) => {
|
||||
if (item.uuid) {
|
||||
selectedOrderId.value = item.uuid
|
||||
navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
|
||||
}
|
||||
}
|
||||
@@ -229,34 +150,14 @@ const getOrderStartDate = (order: TeamOrder) => {
|
||||
return formatDate(order.createdAt)
|
||||
}
|
||||
|
||||
const getOrderEndDate = (order: TeamOrder) => {
|
||||
let latestDate: Date | null = null
|
||||
order.stages?.forEach((stage) => {
|
||||
if (!stage) return
|
||||
stage.trips?.forEach((trip) => {
|
||||
if (!trip) return
|
||||
const endDate = trip.actualUnloadingDate || trip.plannedUnloadingDate
|
||||
if (endDate) {
|
||||
const date = new Date(endDate)
|
||||
if (!latestDate || date > latestDate) {
|
||||
latestDate = date
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
if (latestDate) return formatDate((latestDate as Date).toISOString())
|
||||
if (order.createdAt) {
|
||||
const fallbackDate = new Date(order.createdAt)
|
||||
fallbackDate.setMonth(fallbackDate.getMonth() + 1)
|
||||
return formatDate(fallbackDate.toISOString())
|
||||
const getStatusBadgeClass = (status?: string) => {
|
||||
const variant = getStatusVariant(status)
|
||||
switch (variant) {
|
||||
case 'success': return 'badge-success'
|
||||
case 'warning': return 'badge-warning'
|
||||
case 'error': return 'badge-error'
|
||||
default: return 'badge-ghost'
|
||||
}
|
||||
return t('ordersDetail.labels.dates_undefined')
|
||||
}
|
||||
|
||||
const getCompletedStages = (order: TeamOrder) => {
|
||||
if (!order.stages?.length) return 0
|
||||
// Note: StageType doesn't have a status field, count all stages for now
|
||||
return order.stages.filter((stage): stage is TeamOrderStage => stage !== null).length
|
||||
}
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
@@ -266,8 +167,7 @@ const formatDate = (date: string) => {
|
||||
if (isNaN(dateObj.getTime())) return t('ordersDetail.labels.dates_undefined')
|
||||
return new Intl.DateTimeFormat('ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
month: 'short'
|
||||
}).format(dateObj)
|
||||
} catch {
|
||||
return t('ordersDetail.labels.dates_undefined')
|
||||
|
||||
Reference in New Issue
Block a user