2dbe600d8a
All checks were successful
Build Docker Image / build (push) Successful in 4m3s
- Add strictScalars: true to codegen.ts with proper scalar mappings (Date, Decimal, JSONString, JSON, UUID, BigInt → string/Record) - Replace all ref<any[]> with proper GraphQL-derived types - Add type guards for null filtering in arrays - Fix bugs exposed by typing (locationLatitude vs latitude, etc.) - Add interfaces for external components (MapboxSearchBox) This enables end-to-end type safety from GraphQL schema to frontend.
88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<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, index) in filteredItems"
|
|
:key="order.uuid ?? index"
|
|
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: { uuid?: string | null }) => {
|
|
if (order.uuid) {
|
|
selectedOrderId.value = order.uuid
|
|
mapRef.value?.flyTo(order.uuid)
|
|
}
|
|
}
|
|
|
|
const onMapSelectOrder = (uuid: string) => {
|
|
selectedOrderId.value = uuid
|
|
}
|
|
</script>
|