Initial commit from monorepo
This commit is contained in:
Ruslan Bakiev
243
app/pages/clientarea/orders/[id].vue
Normal file
243
app/pages/clientarea/orders/[id].vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<Section variant="plain">
|
||||
<Stack gap="8">
|
||||
<template v-if="hasOrderError">
|
||||
<div class="text-sm text-error">
|
||||
{{ orderError }}
|
||||
</div>
|
||||
<Button @click="loadOrder">{{ t('ordersDetail.errors.retry') }}</Button>
|
||||
</template>
|
||||
|
||||
<div v-else-if="isLoadingOrder" class="text-sm text-base-content/60">
|
||||
{{ t('ordersDetail.states.loading') }}
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<Card padding="lg" class="border border-base-300">
|
||||
<RouteSummaryHeader :title="orderTitle" :meta="orderMeta" />
|
||||
</Card>
|
||||
|
||||
<Card v-if="orderRoutesForMap.length" padding="lg" class="border border-base-300">
|
||||
<Stack gap="4">
|
||||
<RouteStagesList
|
||||
:stages="orderStageItems"
|
||||
:empty-text="t('ordersDetail.sections.stages.empty')"
|
||||
/>
|
||||
|
||||
<div class="divider my-0"></div>
|
||||
|
||||
<RequestRoutesMap :routes="orderRoutesForMap" :height="260" />
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<div class="space-y-3">
|
||||
<Heading :level="3" weight="semibold">{{ t('ordersDetail.sections.timeline.title') }}</Heading>
|
||||
<GanttTimeline
|
||||
v-if="order?.stages"
|
||||
:stages="order.stages"
|
||||
:showLoading="showLoading"
|
||||
:showUnloading="showUnloading"
|
||||
/>
|
||||
<Text v-else tone="muted">{{ t('ordersDetail.sections.timeline.empty') }}</Text>
|
||||
</div>
|
||||
</template>
|
||||
</Stack>
|
||||
</Section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetOrderDocument } from '~/composables/graphql/team/orders-generated'
|
||||
import type { RouteStageItem } from '~/components/RouteStagesList.vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['auth-oidc']
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
|
||||
const order = ref<any>(null)
|
||||
const isLoadingOrder = ref(true)
|
||||
const hasOrderError = ref(false)
|
||||
const orderError = ref('')
|
||||
const showLoading = ref(true)
|
||||
const showUnloading = ref(true)
|
||||
|
||||
const orderTitle = computed(() => {
|
||||
const source = order.value?.sourceLocationName || t('ordersDetail.labels.source_unknown')
|
||||
const destination = order.value?.destinationLocationName || t('ordersDetail.labels.destination_unknown')
|
||||
return `${source} → ${destination}`
|
||||
})
|
||||
|
||||
const orderMeta = computed(() => {
|
||||
const meta: string[] = []
|
||||
const orderName = order.value?.name || (route.params.id as string)
|
||||
if (orderName) meta.push(`#${orderName}`)
|
||||
|
||||
const line = order.value?.orderLines?.[0]
|
||||
if (line?.quantity) {
|
||||
meta.push(`${line.quantity} ${line.unit || t('ordersDetail.labels.unit_tons')}`)
|
||||
}
|
||||
if (line?.productName) {
|
||||
meta.push(line.productName)
|
||||
}
|
||||
if (order.value?.totalAmount) {
|
||||
meta.push(formatPrice(order.value.totalAmount, order.value?.currency))
|
||||
}
|
||||
|
||||
const durationDays = getOrderDuration()
|
||||
if (durationDays) {
|
||||
meta.push(`${durationDays} ${t('ordersDetail.labels.delivery_days')}`)
|
||||
}
|
||||
|
||||
return meta
|
||||
})
|
||||
|
||||
const orderRoutesForMap = computed(() => {
|
||||
const stages = (order.value?.stages || [])
|
||||
.filter(Boolean)
|
||||
.map((stage: any) => {
|
||||
if (stage.stageType === 'transport') {
|
||||
if (!stage.sourceLatitude || !stage.sourceLongitude || !stage.destinationLatitude || !stage.destinationLongitude) return null
|
||||
return {
|
||||
fromLat: stage.sourceLatitude,
|
||||
fromLon: stage.sourceLongitude,
|
||||
fromName: stage.sourceLocationName,
|
||||
toLat: stage.destinationLatitude,
|
||||
toLon: stage.destinationLongitude,
|
||||
toName: stage.destinationLocationName,
|
||||
transportType: stage.transportType
|
||||
}
|
||||
}
|
||||
return null
|
||||
})
|
||||
.filter(Boolean)
|
||||
|
||||
if (!stages.length) return []
|
||||
return [{ stages }]
|
||||
})
|
||||
|
||||
const orderStageItems = computed<RouteStageItem[]>(() => {
|
||||
return (order.value?.stages || []).map((stage: any) => {
|
||||
const isTransport = stage.stageType === 'transport'
|
||||
const from = isTransport ? stage.sourceLocationName : stage.locationName
|
||||
const to = isTransport ? stage.destinationLocationName : stage.locationName
|
||||
|
||||
const meta: string[] = []
|
||||
const dateRange = getStageDateRange(stage)
|
||||
if (dateRange) {
|
||||
meta.push(dateRange)
|
||||
}
|
||||
|
||||
const companies = getCompaniesSummary(stage)
|
||||
companies.forEach((company: any) => {
|
||||
meta.push(
|
||||
`${company.name} · ${company.totalWeight || 0}${t('ordersDetail.labels.weight_unit')} · ${company.tripsCount || 0} ${t('ordersDetail.labels.trips')}`
|
||||
)
|
||||
})
|
||||
|
||||
return {
|
||||
key: stage.uuid,
|
||||
from,
|
||||
to,
|
||||
label: stage.name,
|
||||
meta
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const loadOrder = async () => {
|
||||
try {
|
||||
isLoadingOrder.value = true
|
||||
hasOrderError.value = false
|
||||
const orderUuid = route.params.id as string
|
||||
const { data, error: orderErrorResp } = await useServerQuery('order-detail', GetOrderDocument, { orderUuid }, 'team', 'orders')
|
||||
if (orderErrorResp.value) throw orderErrorResp.value
|
||||
order.value = data.value?.getOrder
|
||||
} catch (err: any) {
|
||||
hasOrderError.value = true
|
||||
orderError.value = err.message || t('ordersDetail.errors.load_failed')
|
||||
} finally {
|
||||
isLoadingOrder.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatPrice = (price: number, currency?: string | null) => {
|
||||
if (!price) return t('ordersDetail.labels.price_zero')
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: currency || 'RUB',
|
||||
minimumFractionDigits: 0
|
||||
}).format(price)
|
||||
}
|
||||
|
||||
const getCompaniesSummary = (stage: any) => {
|
||||
const companies = []
|
||||
if (stage.stageType === 'service' && stage.selectedCompany) {
|
||||
companies.push({
|
||||
name: stage.selectedCompany.name,
|
||||
totalWeight: 0,
|
||||
tripsCount: 0,
|
||||
company: stage.selectedCompany
|
||||
})
|
||||
return companies
|
||||
}
|
||||
|
||||
if (stage.stageType === 'transport' && stage.trips?.length) {
|
||||
const companiesMap = new Map()
|
||||
stage.trips.forEach((trip: any) => {
|
||||
const companyName = trip.company?.name || t('ordersDetail.labels.company_unknown')
|
||||
const weight = trip.plannedWeight || 0
|
||||
if (companiesMap.has(companyName)) {
|
||||
const existing = companiesMap.get(companyName)
|
||||
existing.totalWeight += weight
|
||||
existing.tripsCount += 1
|
||||
} else {
|
||||
companiesMap.set(companyName, {
|
||||
name: companyName,
|
||||
totalWeight: weight,
|
||||
tripsCount: 1,
|
||||
company: trip.company
|
||||
})
|
||||
}
|
||||
})
|
||||
return Array.from(companiesMap.values())
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
const getOrderDuration = () => {
|
||||
if (!order.value?.stages?.length) return 0
|
||||
let minDate: Date | null = null
|
||||
let maxDate: Date | null = null
|
||||
order.value.stages.forEach((stage: any) => {
|
||||
stage.trips?.forEach((trip: any) => {
|
||||
const startDate = new Date(trip.plannedLoadingDate || trip.actualLoadingDate)
|
||||
const endDate = new Date(trip.plannedUnloadingDate || trip.actualUnloadingDate)
|
||||
if (!minDate || startDate < minDate) minDate = startDate
|
||||
if (!maxDate || endDate > maxDate) maxDate = endDate
|
||||
})
|
||||
})
|
||||
if (!minDate || !maxDate) return 0
|
||||
const diffTime = Math.abs(maxDate.getTime() - minDate.getTime())
|
||||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||
}
|
||||
|
||||
const getStageDateRange = (stage: any) => {
|
||||
if (!stage.trips?.length) return t('ordersDetail.labels.dates_undefined')
|
||||
let minDate: Date | null = null
|
||||
let maxDate: Date | null = null
|
||||
stage.trips.forEach((trip: any) => {
|
||||
const startDate = new Date(trip.plannedLoadingDate || trip.actualLoadingDate)
|
||||
const endDate = new Date(trip.plannedUnloadingDate || trip.actualUnloadingDate)
|
||||
if (!minDate || startDate < minDate) minDate = startDate
|
||||
if (!maxDate || endDate > maxDate) maxDate = endDate
|
||||
})
|
||||
if (!minDate || !maxDate) return t('ordersDetail.labels.dates_undefined')
|
||||
const formatDate = (date: Date) => date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
|
||||
if (minDate.toDateString() === maxDate.toDateString()) return formatDate(minDate)
|
||||
return `${formatDate(minDate)} - ${formatDate(maxDate)}`
|
||||
}
|
||||
|
||||
await loadOrder()
|
||||
</script>
|
||||
174
app/pages/clientarea/orders/index.vue
Normal file
174
app/pages/clientarea/orders/index.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<Section variant="plain" paddingY="md">
|
||||
<Stack gap="6">
|
||||
<PageHeader
|
||||
:title="$t('dashboard.orders')"
|
||||
:actions="[{ label: t('ordersList.actions.new_calc'), icon: 'lucide:plus', to: localePath('/clientarea') }]"
|
||||
/>
|
||||
|
||||
<Alert v-if="hasError" 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>
|
||||
|
||||
<Stack v-else-if="isLoading" align="center" justify="center" gap="3">
|
||||
<Spinner />
|
||||
<Text tone="muted">{{ t('ordersList.states.loading') }}</Text>
|
||||
</Stack>
|
||||
|
||||
<template v-else>
|
||||
<template v-if="items.length">
|
||||
<NuxtLink :to="localePath('/clientarea/orders/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
|
||||
<ClientOnly>
|
||||
<OrdersRoutesPreview :routes="routesForMap" :height="192" />
|
||||
</ClientOnly>
|
||||
</NuxtLink>
|
||||
|
||||
<CatalogFilters :filters="filters" v-model="selectedFilter" />
|
||||
|
||||
<Stack gap="4">
|
||||
<Card v-for="order in filteredItems" :key="order.uuid" padding="lg" class="cursor-pointer" @click="openOrder(order)">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<EmptyState
|
||||
v-else
|
||||
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"
|
||||
/>
|
||||
</template>
|
||||
</Stack>
|
||||
</Section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: ['auth-oidc']
|
||||
})
|
||||
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
|
||||
const {
|
||||
items,
|
||||
filteredItems,
|
||||
isLoading,
|
||||
filters,
|
||||
selectedFilter,
|
||||
routesForMap,
|
||||
load,
|
||||
init,
|
||||
getStatusVariant,
|
||||
getStatusText
|
||||
} = useTeamOrders()
|
||||
|
||||
const hasError = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
try {
|
||||
await init()
|
||||
} catch (err: any) {
|
||||
hasError.value = true
|
||||
error.value = err.message || t('ordersDetail.errors.load_failed')
|
||||
}
|
||||
|
||||
const openOrder = (order: any) => {
|
||||
navigateTo(localePath(`/clientarea/orders/${order.uuid}`))
|
||||
}
|
||||
|
||||
const getOrderStartDate = (order: any) => {
|
||||
if (!order.createdAt) return t('ordersDetail.labels.dates_undefined')
|
||||
return formatDate(order.createdAt)
|
||||
}
|
||||
|
||||
const getOrderEndDate = (order: any) => {
|
||||
let latestDate: Date | null = null
|
||||
order.stages?.forEach((stage: any) => {
|
||||
stage.trips?.forEach((trip: any) => {
|
||||
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())
|
||||
}
|
||||
return t('ordersDetail.labels.dates_undefined')
|
||||
}
|
||||
|
||||
const getCompletedStages = (order: any) => {
|
||||
if (!order.stages?.length) return 0
|
||||
return order.stages.filter((stage: any) => stage.status === 'completed').length
|
||||
}
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
if (!date) return t('ordersDetail.labels.dates_undefined')
|
||||
try {
|
||||
const dateObj = typeof date === 'string' ? new Date(date) : date
|
||||
if (isNaN(dateObj.getTime())) return t('ordersDetail.labels.dates_undefined')
|
||||
return new Intl.DateTimeFormat('ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
}).format(dateObj)
|
||||
} catch {
|
||||
return t('ordersDetail.labels.dates_undefined')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
85
app/pages/clientarea/orders/map.vue
Normal file
85
app/pages/clientarea/orders/map.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<NuxtLayout name="map">
|
||||
<template #sidebar>
|
||||
<CatalogMapSidebar
|
||||
:title="t('dashboard.orders')"
|
||||
:back-link="localePath('/clientarea/orders')"
|
||||
:back-label="t('catalogMap.actions.list_view')"
|
||||
:items-count="filteredItems.length"
|
||||
:filters="filters"
|
||||
:selected-filter="selectedFilter"
|
||||
:loading="isLoading"
|
||||
:empty-text="t('orders.no_orders')"
|
||||
@update:selected-filter="selectedFilter = $event"
|
||||
>
|
||||
<template #cards>
|
||||
<Card
|
||||
v-for="order in filteredItems"
|
||||
:key="order.uuid"
|
||||
padding="small"
|
||||
interactive
|
||||
:class="{ 'ring-2 ring-primary': selectedOrderId === order.uuid }"
|
||||
@click="selectOrder(order)"
|
||||
>
|
||||
<Stack gap="2">
|
||||
<Stack direction="row" justify="between" align="center">
|
||||
<Text weight="semibold">#{{ order.name }}</Text>
|
||||
<Badge :variant="getStatusVariant(order.status)" size="sm">
|
||||
{{ getStatusText(order.status) }}
|
||||
</Badge>
|
||||
</Stack>
|
||||
<Text tone="muted" size="sm" class="truncate">
|
||||
{{ order.sourceLocationName }} → {{ order.destinationLocationName }}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
</template>
|
||||
</CatalogMapSidebar>
|
||||
</template>
|
||||
|
||||
<ClientOnly>
|
||||
<OrdersRoutesMap
|
||||
ref="mapRef"
|
||||
:routes="routesForMap"
|
||||
:selected-order-id="selectedOrderId"
|
||||
@select-order="onMapSelectOrder"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
middleware: ['auth-oidc']
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
const router = useRouter()
|
||||
|
||||
const {
|
||||
filteredItems,
|
||||
isLoading,
|
||||
filters,
|
||||
selectedFilter,
|
||||
routesForMap,
|
||||
init,
|
||||
getStatusVariant,
|
||||
getStatusText
|
||||
} = useTeamOrders()
|
||||
|
||||
await init()
|
||||
|
||||
const mapRef = ref<{ flyTo: (orderId: string) => void } | null>(null)
|
||||
const selectedOrderId = ref<string | null>(null)
|
||||
|
||||
const selectOrder = (order: any) => {
|
||||
selectedOrderId.value = order.uuid
|
||||
mapRef.value?.flyTo(order.uuid)
|
||||
}
|
||||
|
||||
const onMapSelectOrder = (uuid: string) => {
|
||||
selectedOrderId.value = uuid
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user