optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: use topnav layout + CatalogPage component
All checks were successful
Build Docker Image / build (push) Successful in 4m11s
Details

Browse Source 
- Remove catalog.vue layout and useCatalogLayout.ts (broken provide/inject)
- All catalog/clientarea list pages now use topnav layout
- Pages use CatalogPage component for SearchBar + Map functionality
- Clean architecture: layout handles nav, component handles features
This commit is contained in:
Ruslan Bakiev
2026-01-15 11:18:57 +07:00
parent 7ea96a97b3
commit 03485b77a5
8 changed files with 401 additions and 1092 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/composables/useCatalogLayout.ts
View File

@@ -1,71 +0,0 @@
import type { Ref, ComputedRef, Component, VNode } from 'vue'
export interface CatalogFilter {
id: string
label: string
}
export interface CatalogMapItem {
uuid: string
name?: string
latitude: number
longitude: number
[key: string]: any
}
export interface CatalogHoveredItem {
latitude: number
longitude: number
}
export interface SubNavItem {
label: string
path: string
}
export interface CatalogLayoutData {
// SubNavigation (optional - if provided, overrides default catalog nav)
subNavItems?: SubNavItem[]
// SearchBar
searchQuery: Ref<string>
activeFilters: ComputedRef<CatalogFilter[]> | Ref<CatalogFilter[]>
displayedCount: ComputedRef<number> | Ref<number>
totalCount: ComputedRef<number> | Ref<number>
onSearch: () => void
onRemoveFilter: (id: string) => void
// Filter slot - can be a component, render function, or VNode
filterComponent?: Component | (() => VNode | VNode[])
// Header slot - optional component to render above the list (e.g. "Add" button)
headerComponent?: Component | (() => VNode | VNode[])
// Map
mapItems: ComputedRef<CatalogMapItem[]> | Ref<CatalogMapItem[]>
mapId: string
pointColor: string
hoveredItemId: Ref<string | undefined>
hoveredItem: ComputedRef<CatalogHoveredItem | null> | Ref<CatalogHoveredItem | null>
onMapSelect: (uuid: string) => void
onBoundsChange?: (bounds: any) => void
searchWithMap: Ref<boolean>
// Clustering (optional)
useServerClustering?: boolean
clusteredNodes?: ComputedRef<any[]> | Ref<any[]>
}
const CATALOG_LAYOUT_KEY = Symbol('catalogLayout')
/**
* Provide catalog layout data from page to layout
*/
export const provideCatalogLayout = (data: CatalogLayoutData) => {
provide(CATALOG_LAYOUT_KEY, data)
}
/**
* Inject catalog layout data in layout from page
*/
export const useCatalogLayoutData = (): CatalogLayoutData | undefined => {
return inject<CatalogLayoutData>(CATALOG_LAYOUT_KEY)
}

338
app/layouts/catalog.vue
View File

@@ -1,338 +0,0 @@
<template>
<div class="min-h-screen bg-base-300">
<!-- Layer 1+2: MainNavigation + SubNavigation (slides up on scroll) -->
<div
class="fixed left-0 right-0 z-50"
:style="{ top: `${headerOffset}px` }"
>
<MainNavigation
class="bg-base-200"
:session-checked="sessionChecked"
:logged-in="isLoggedIn"
:user-avatar-svg="userAvatarSvg"
:user-name="userName"
:user-initials="userInitials"
:theme="theme"
:user-data="userData"
:is-seller="isSeller"
@toggle-theme="toggleTheme"
@sign-out="onClickSignOut"
@sign-in="signIn()"
@switch-team="switchToTeam"
/>
<!-- SubNavigation -->
<div class="h-[54px] bg-base-200 border-b border-base-300 flex items-center">
<div class="flex items-center gap-1 px-4 lg:px-6">
<NuxtLink
v-for="item in subNavItems"
:key="item.path"
:to="localePath(item.path)"
class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-300"
:class="{ 'text-primary bg-primary/10': isSubNavActive(item.path) }"
>
{{ item.label }}
</NuxtLink>
</div>
</div>
</div>
<!-- Layer 3: SearchBar (fixed, slides to top:0) -->
<div
class="fixed left-0 right-0 z-40 h-14 bg-base-100 border-b border-base-300 flex items-center"
:style="{ top: `${searchBarTop}px` }"
>
<!-- Chevron button inside SearchBar -->
<button
class="btn btn-ghost btn-xs btn-circle ml-4 flex-shrink-0"
@click="isCollapsed ? expand() : collapse()"
>
<Icon :name="isCollapsed ? 'lucide:chevron-down' : 'lucide:chevron-up'" size="16" />
</button>
<!-- SearchBar from page via inject -->
<div class="flex-1 min-w-0 px-4 lg:px-6 py-2">
<CatalogSearchBar
v-if="catalogData"
v-model:search-query="catalogData.searchQuery.value"
:active-filters="toValue(catalogData.activeFilters)"
:displayed-count="toValue(catalogData.displayedCount)"
:total-count="toValue(catalogData.totalCount)"
@remove-filter="catalogData.onRemoveFilter"
@search="catalogData.onSearch"
>
<template v-if="catalogData.filterComponent" #filters>
<component :is="catalogData.filterComponent" />
</template>
</CatalogSearchBar>
</div>
</div>
<!-- Layer 4: Map (fixed, right side, to bottom) -->
<div
class="fixed right-0 bottom-0 w-3/5 z-20 hidden lg:block"
:style="{ top: `${mapTop}px` }"
>
<div v-if="catalogData" class="h-full w-full relative">
<!-- Search with map checkbox -->
<label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
<input type="checkbox" v-model="catalogData.searchWithMap.value" class="checkbox checkbox-sm" />
<span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
</label>
<ClientOnly>
<CatalogMap
ref="mapRef"
:map-id="catalogData.mapId"
:items="catalogData.useServerClustering ? [] : toValue(catalogData.mapItems)"
:clustered-points="catalogData.useServerClustering ? toValue(catalogData.clusteredNodes || []) : []"
:use-server-clustering="catalogData.useServerClustering || false"
:point-color="catalogData.pointColor"
:hovered-item-id="catalogData.hoveredItemId.value"
:hovered-item="toValue(catalogData.hoveredItem)"
@select-item="catalogData.onMapSelect"
@bounds-change="catalogData.onBoundsChange"
/>
</ClientOnly>
</div>
</div>
<!-- Content area (left side, with dynamic padding for fixed header) -->
<div
class="lg:w-2/5 min-h-screen"
:style="{ paddingTop: `${contentPaddingTop}px` }"
>
<div class="px-4 lg:px-6 py-4">
<slot />
</div>
</div>
<!-- Mobile: Full width content + bottom toggle for map -->
<div class="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
<div class="btn-group shadow-lg">
<button
class="btn btn-sm"
:class="{ 'btn-active': mobileView === 'list' }"
@click="mobileView = 'list'"
>
{{ $t('common.list') }}
</button>
<button
class="btn btn-sm"
:class="{ 'btn-active': mobileView === 'map' }"
@click="mobileView = 'map'"
>
{{ $t('common.map') }}
</button>
</div>
</div>
<!-- Mobile map view -->
<div
v-if="mobileView === 'map' && catalogData"
class="lg:hidden fixed inset-0 z-20"
:style="{ top: `${mapTop}px` }"
>
<div class="h-full w-full relative">
<!-- Search with map checkbox -->
<label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
<input type="checkbox" v-model="catalogData.searchWithMap.value" class="checkbox checkbox-sm" />
<span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
</label>
<ClientOnly>
<CatalogMap
:map-id="`${catalogData.mapId}-mobile`"
:items="catalogData.useServerClustering ? [] : toValue(catalogData.mapItems)"
:clustered-points="catalogData.useServerClustering ? toValue(catalogData.clusteredNodes || []) : []"
:use-server-clustering="catalogData.useServerClustering || false"
:point-color="catalogData.pointColor"
:hovered-item-id="catalogData.hoveredItemId.value"
:hovered-item="toValue(catalogData.hoveredItem)"
@select-item="catalogData.onMapSelect"
@bounds-change="catalogData.onBoundsChange"
/>
</ClientOnly>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { toValue } from 'vue'
import { useCatalogLayoutData } from '~/composables/useCatalogLayout'
const runtimeConfig = useRuntimeConfig()
const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
const route = useRoute()
const localePath = useLocalePath()
const { t } = useI18n()
// Inject catalog data from page
const catalogData = useCatalogLayoutData()
// Map ref for external flyTo access
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
// Smooth collapsible header
// MainNav: 64px (h-16)
// SubNav: 40px (py-2 + links)
// Total header = 104px, SearchBar = 48px
const {
headerOffset,
searchBarTop,
mapTop,
contentPaddingTop,
isCollapsed,
expand,
collapse
} = useScrollCollapse(118, 56)
// Mobile view toggle
const mobileView = ref<'list' | 'map'>('list')
// Theme state
const theme = useState<'default' | 'night'>('theme', () => 'default')
// User data state (shared across layouts)
const userData = useState<{
id?: string
firstName?: string
lastName?: string
avatarId?: string
activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: any }
activeTeamId?: string
teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
} | null>('me', () => null)
const sessionChecked = ref(false)
const userAvatarSvg = useState('user-avatar-svg', () => '')
const lastAvatarSeed = useState('user-avatar-seed', () => '')
const isSeller = computed(() => {
return userData.value?.activeTeam?.teamType === 'SELLER'
})
const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)
const userName = computed(() => {
return userData.value?.firstName || 'User'
})
const userInitials = computed(() => {
const first = userData.value?.firstName?.charAt(0) || ''
const last = userData.value?.lastName?.charAt(0) || ''
if (first || last) return (first + last).toUpperCase()
return '?'
})
// SubNavigation items - use page-provided items or default to catalog section
const defaultSubNavItems = [
{ label: t('cabinetNav.offers'), path: '/catalog/offers' },
{ label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
{ label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
]
const subNavItems = computed(() => {
return catalogData?.subNavItems || defaultSubNavItems
})
const isSubNavActive = (path: string) => {
return route.path === localePath(path) || route.path.startsWith(localePath(path) + '/')
}
// Provide collapsed state to children
provide('headerCollapsed', isCollapsed)
// Avatar generation
const generateUserAvatar = async (seed: string) => {
if (!seed) return
try {
const response = await fetch(`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9`)
if (response.ok) {
userAvatarSvg.value = await response.text()
lastAvatarSeed.value = seed
}
} catch (error) {
console.error('Error generating avatar:', error)
}
}
const { setActiveTeam } = useActiveTeam()
const { mutate } = useGraphQL()
const locationStore = useLocationStore()
const syncUserUi = async () => {
if (!userData.value) {
locationStore.clear()
return
}
if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
}
const seed = userData.value.avatarId || userData.value.id || userData.value.firstName || 'default'
if (!userAvatarSvg.value || lastAvatarSeed.value !== seed) {
userAvatarSvg.value = ''
await generateUserAvatar(seed)
}
locationStore.setFromUserData(userData.value.activeTeam?.selectedLocation)
}
watch(userData, () => {
void syncUserUi()
}, { immediate: true })
// Check session
await fetchSession().catch(() => {})
sessionChecked.value = true
const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string }) => {
if (!team?.id) return
try {
const { SwitchTeamDocument } = await import('~/composables/graphql/user/teams-generated')
const result = await mutate(SwitchTeamDocument, { teamId: team.id }, 'user', 'teams')
if (result.switchTeam?.user && userData.value) {
userData.value.activeTeam = team as typeof userData.value.activeTeam
userData.value.activeTeamId = team.id
if (team.logtoOrgId) {
setActiveTeam(team.id, team.logtoOrgId)
}
}
} catch (err) {
console.error('Failed to switch team:', err)
}
}
const onClickSignOut = () => {
signOut(siteUrl)
}
const applyTheme = (value: 'default' | 'night') => {
if (import.meta.client) {
if (value === 'default') {
document.documentElement.removeAttribute('data-theme')
} else {
document.documentElement.setAttribute('data-theme', value)
}
localStorage.setItem('theme', value)
}
}
onMounted(() => {
const stored = import.meta.client ? localStorage.getItem('theme') : null
if (stored === 'night' || stored === 'default') {
theme.value = stored
}
applyTheme(theme.value)
})
watch(theme, (value) => applyTheme(value))
const toggleTheme = () => {
theme.value = theme.value === 'night' ? 'default' : 'night'
}
</script>

203
app/pages/catalog/hubs/index.vue
View File

@@ -1,57 +1,90 @@
<template>
<div>
<!-- List content -->
<div v-if="isLoading" class="flex items-center justify-center py-8">
<Card padding="lg">
<Stack align="center" justify="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
</Stack>
</Card>
</div>
<template v-else>
<Stack gap="3">
<div
v-for="item in displayItems"
:key="item.uuid"
:class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedHubId }"
@click="onSelectHub(item)"
@mouseenter="hoveredHubId = item.uuid"
@mouseleave="hoveredHubId = undefined"
<CatalogPage
:items="displayItems"
:map-items="itemsWithCoords"
:loading="isLoading"
with-map
use-server-clustering
map-id="hubs-map"
point-color="#10b981"
:selected-id="selectedHubId"
:hovered-id="hoveredHubId"
:total-count="total"
@select="onSelectHub"
@update:hovered-id="hoveredHubId = $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 v-for="country in getCountryForHub(item)" :key="country.name">
<Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
<template #filters>
<div class="p-2 space-y-3">
<!-- Transport filter -->
<div>
<div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.transport') }}</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 class="divider my-0"></div>
<!-- Country filter -->
<div>
<div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.country') }}</div>
<ul class="menu menu-compact max-h-48 overflow-y-auto">
<li v-for="filter in countryFilters" :key="filter.id">
<a
:class="{ 'active': selectedCountry === filter.id }"
@click="selectedCountry = filter.id"
>{{ filter.label }}</a>
</li>
</ul>
</div>
</div>
</template>
<HubCard :hub="item" />
</div>
</Stack>
</CatalogSearchBar>
</template>
<PaginationLoadMore
v-if="displayItems.length > 0"
:shown="displayItems.length"
:total="total"
:can-load-more="canLoadMore"
:loading="isLoadingMore"
hide-counter
@load-more="loadMore"
class="mt-4"
/>
<template #card="{ item }">
<template v-for="country in getCountryForHub(item)" :key="country.name">
<Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
</template>
<HubCard :hub="item" />
</template>
<Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
<template #pagination>
<PaginationLoadMore
v-if="displayItems.length > 0"
:shown="displayItems.length"
:total="total"
:can-load-more="canLoadMore"
:loading="isLoadingMore"
hide-counter
@load-more="loadMore"
class="mt-4"
/>
</template>
<template #empty>
<Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
</Stack>
</template>
</div>
</template>
</CatalogPage>
</template>
<script setup lang="ts">
import { h, defineComponent } from 'vue'
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
import { provideCatalogLayout } from '~/composables/useCatalogLayout'
definePageMeta({
layout: 'catalog'
layout: 'topnav'
})
const { t } = useI18n()
@@ -78,21 +111,10 @@ const hoveredHubId = ref<string>()
// Search bar
const searchQuery = ref('')
// Server-side clustering
const useServerClustering = true
const { clusteredNodes, fetchClusters } = useClusteredNodes()
// Search with map checkbox
const searchWithMap = ref(false)
const currentBounds = ref<MapBounds | null>(null)
const onBoundsChange = (bounds: MapBounds) => {
currentBounds.value = bounds
if (useServerClustering) {
fetchClusters(bounds)
}
}
// Filter items with valid coordinates for map
const itemsWithCoords = computed(() =>
items.value.filter(item =>
@@ -121,14 +143,6 @@ const displayItems = computed(() => {
})
})
// Hovered item with coordinates for map highlight
const hoveredItem = computed(() => {
if (!hoveredHubId.value) return null
const item = items.value.find(i => i.uuid === hoveredHubId.value)
if (!item?.latitude || !item?.longitude) return null
return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
})
// Active filter badges (non-default filters shown as badges)
const activeFilterBadges = computed(() => {
const badges: { id: string; label: string }[] = []
@@ -161,14 +175,6 @@ const onSelectHub = (hub: any) => {
selectedHubId.value = hub.uuid
}
// Handle selection from map
const onMapSelect = (uuid: string) => {
const hub = items.value.find(i => i.uuid === uuid)
if (hub) {
selectedHubId.value = uuid
}
}
// Helper to get country for hub
const getCountryForHub = (hub: any) => {
return itemsByCountry.value.filter(c => c.hubs.some(h => h.uuid === hub.uuid))
@@ -182,65 +188,6 @@ const isFirstInCountry = (hub: any) => {
return false
}
// Filter component for the layout
const HubsFilterComponent = defineComponent({
setup() {
return () => h('div', { class: 'p-2 space-y-3' }, [
// Transport filter
h('div', {}, [
h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogHubsSection.filters.transport')),
h('ul', { class: 'menu menu-compact' },
filters.value.map(filter =>
h('li', { key: filter.id },
h('a', {
class: selectedFilter.value === filter.id ? 'active' : '',
onClick: () => { selectedFilter.value = filter.id }
}, filter.label)
)
)
)
]),
// Divider
h('div', { class: 'divider my-0' }),
// Country filter
h('div', {}, [
h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogHubsSection.filters.country')),
h('ul', { class: 'menu menu-compact max-h-48 overflow-y-auto' },
countryFilters.value.map(filter =>
h('li', { key: filter.id },
h('a', {
class: selectedCountry.value === filter.id ? 'active' : '',
onClick: () => { selectedCountry.value = filter.id }
}, filter.label)
)
)
)
])
])
}
})
// Provide data to layout
provideCatalogLayout({
searchQuery,
activeFilters: activeFilterBadges,
displayedCount: computed(() => displayItems.value.length),
totalCount: computed(() => total.value),
onSearch,
onRemoveFilter,
filterComponent: HubsFilterComponent,
mapItems: itemsWithCoords,
mapId: 'hubs-map',
pointColor: '#10b981',
hoveredItemId: hoveredHubId,
hoveredItem,
onMapSelect,
onBoundsChange,
searchWithMap,
useServerClustering,
clusteredNodes
})
await init()
useHead(() => ({

140
app/pages/catalog/offers/index.vue
View File

@@ -1,29 +1,49 @@
<template>
<div>
<!-- List content -->
<div v-if="isLoading || productsLoading" class="flex items-center justify-center py-8">
<Card padding="lg">
<Stack align="center" justify="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
</Stack>
</Card>
</div>
<CatalogPage
:items="displayItems"
:map-items="itemsWithCoords"
:loading="isLoading || productsLoading"
with-map
map-id="offers-map"
point-color="#f59e0b"
:selected-id="selectedOfferId"
:hovered-id="hoveredOfferId"
:total-count="total"
@select="onSelectOffer"
@update:hovered-id="hoveredOfferId = $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('catalogOffersSection.filters.product') }}</div>
<ul class="menu menu-compact max-h-48 overflow-y-auto">
<li v-for="filter in productFilters" :key="filter.id">
<a
:class="{ 'active': (selectedProductUuid === filter.id || (!selectedProductUuid && filter.id === 'all')) }"
@click="onProductFilterChange(filter.id)"
>{{ filter.label }}</a>
</li>
</ul>
</div>
</div>
</template>
</CatalogSearchBar>
</template>
<template v-else>
<Stack gap="3">
<div
v-for="item in displayItems"
:key="item.uuid"
:class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedOfferId }"
@click="onSelectOffer(item)"
@mouseenter="hoveredOfferId = item.uuid"
@mouseleave="hoveredOfferId = undefined"
>
<OfferCard :offer="item" />
</div>
</Stack>
<template #card="{ item }">
<OfferCard :offer="item" />
</template>
<template #pagination>
<PaginationLoadMore
v-if="displayItems.length > 0"
:shown="displayItems.length"
@@ -34,21 +54,19 @@
@load-more="loadMore"
class="mt-4"
/>
<Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
<Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
</Stack>
</template>
</div>
<template #empty>
<Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
</template>
</CatalogPage>
</template>
<script setup lang="ts">
import { h, defineComponent } from 'vue'
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
import { provideCatalogLayout } from '~/composables/useCatalogLayout'
definePageMeta({
layout: 'catalog'
layout: 'topnav'
})
const { t } = useI18n()
@@ -84,10 +102,6 @@ const searchQuery = ref('')
const searchWithMap = ref(false)
const currentBounds = ref<MapBounds | null>(null)
const onBoundsChange = (bounds: MapBounds) => {
currentBounds.value = bounds
}
// Map items with correct coordinate field names
const itemsWithCoords = computed(() =>
items.value.filter(item =>
@@ -115,14 +129,6 @@ const displayItems = computed(() => {
})
})
// Hovered item with coordinates for map highlight
const hoveredItem = computed(() => {
if (!hoveredOfferId.value) return null
const item = items.value.find(i => i.uuid === hoveredOfferId.value)
if (!item?.locationLatitude || !item?.locationLongitude) return null
return { latitude: Number(item.locationLatitude), longitude: Number(item.locationLongitude) }
})
// Product filter options
const productFilters = computed(() => {
const all = [{ id: 'all', label: t('catalogOffersSection.filters.all_products') }]
@@ -164,54 +170,6 @@ const onSelectOffer = (offer: any) => {
selectedOfferId.value = offer.uuid
}
// Handle selection from map
const onMapSelect = (uuid: string) => {
const offer = items.value.find(i => i.uuid === uuid)
if (offer) {
selectedOfferId.value = uuid
}
}
// Filter component for the layout
const OffersFilterComponent = defineComponent({
setup() {
return () => h('div', { class: 'p-2 space-y-3' }, [
h('div', {}, [
h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogOffersSection.filters.product')),
h('ul', { class: 'menu menu-compact max-h-48 overflow-y-auto' },
productFilters.value.map(filter =>
h('li', { key: filter.id },
h('a', {
class: (selectedProductUuid.value === filter.id || (!selectedProductUuid.value && filter.id === 'all')) ? 'active' : '',
onClick: () => onProductFilterChange(filter.id)
}, filter.label)
)
)
)
])
])
}
})
// Provide data to layout
provideCatalogLayout({
searchQuery,
activeFilters: activeFilterBadges,
displayedCount: computed(() => displayItems.value.length),
totalCount: computed(() => total.value),
onSearch,
onRemoveFilter,
filterComponent: OffersFilterComponent,
mapItems: itemsWithCoords,
mapId: 'offers-map',
pointColor: '#f59e0b',
hoveredItemId: hoveredOfferId,
hoveredItem,
onMapSelect,
onBoundsChange,
searchWithMap
})
// Initialize
await Promise.all([initProducts(), initOffers()])

105
app/pages/catalog/suppliers/index.vue
View File

@@ -1,29 +1,32 @@
<template>
<div>
<!-- List content -->
<div v-if="isLoading" class="flex items-center justify-center py-8">
<Card padding="lg">
<Stack align="center" justify="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
</Stack>
</Card>
</div>
<CatalogPage
:items="displayItems"
:map-items="itemsWithCoords"
:loading="isLoading"
with-map
map-id="suppliers-map"
point-color="#3b82f6"
:selected-id="selectedSupplierId"
:hovered-id="hoveredSupplierId"
:total-count="total"
@select="onSelectSupplier"
@update:hovered-id="hoveredSupplierId = $event"
>
<template #searchBar="{ displayedCount, totalCount }">
<CatalogSearchBar
v-model:search-query="searchQuery"
:active-filters="[]"
:displayed-count="displayedCount"
:total-count="totalCount"
@search="onSearch"
/>
</template>
<template v-else>
<Stack gap="3">
<div
v-for="item in displayItems"
:key="item.uuid || item.teamUuid"
:class="{ 'ring-2 ring-primary rounded-lg': (item.uuid || item.teamUuid) === selectedSupplierId }"
@click="onSelectSupplier(item)"
@mouseenter="hoveredSupplierId = item.uuid || item.teamUuid"
@mouseleave="hoveredSupplierId = undefined"
>
<SupplierCard :supplier="item" />
</div>
</Stack>
<template #card="{ item }">
<SupplierCard :supplier="item" />
</template>
<template #pagination>
<PaginationLoadMore
v-if="displayItems.length > 0"
:shown="displayItems.length"
@@ -34,20 +37,19 @@
@load-more="loadMore"
class="mt-4"
/>
<Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
<Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
</Stack>
</template>
</div>
<template #empty>
<Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
</template>
</CatalogPage>
</template>
<script setup lang="ts">
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
import { provideCatalogLayout } from '~/composables/useCatalogLayout'
definePageMeta({
layout: 'catalog'
layout: 'topnav'
})
const { t } = useI18n()
@@ -73,10 +75,6 @@ const searchQuery = ref('')
const searchWithMap = ref(false)
const currentBounds = ref<MapBounds | null>(null)
const onBoundsChange = (bounds: MapBounds) => {
currentBounds.value = bounds
}
// Filter items with valid coordinates for map
const itemsWithCoords = computed(() =>
items.value.filter(item =>
@@ -104,54 +102,15 @@ const displayItems = computed(() => {
})
})
// Hovered item with coordinates for map highlight
const hoveredItem = computed(() => {
if (!hoveredSupplierId.value) return null
const item = items.value.find(i => (i.uuid || i.teamUuid) === hoveredSupplierId.value)
if (!item?.latitude || !item?.longitude) return null
return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
})
// Search handler (for future use)
const onSearch = () => {
// TODO: Implement search
}
// No filters for suppliers
const onRemoveFilter = (_id: string) => {
// No filters to remove
}
const onSelectSupplier = (supplier: any) => {
selectedSupplierId.value = supplier.uuid || supplier.teamUuid
}
// Handle selection from map
const onMapSelect = (uuid: string) => {
const supplier = items.value.find(i => (i.uuid || i.teamUuid) === uuid)
if (supplier) {
selectedSupplierId.value = uuid
}
}
// Provide data to layout (no filter component for suppliers)
provideCatalogLayout({
searchQuery,
activeFilters: ref([]),
displayedCount: computed(() => displayItems.value.length),
totalCount: computed(() => total.value),
onSearch,
onRemoveFilter,
mapItems: itemsWithCoords,
mapId: 'suppliers-map',
pointColor: '#3b82f6',
hoveredItemId: hoveredSupplierId,
hoveredItem,
onMapSelect,
onBoundsChange,
searchWithMap
})
await init()
useHead(() => ({

149
app/pages/clientarea/addresses/index.vue
View File

@@ -1,69 +1,68 @@
<template>
<div>
<!-- Add button -->
<div class="mb-4">
<CatalogPage
:items="displayItems"
:map-items="itemsWithCoords"
:loading="isLoading"
with-map
map-id="addresses-map"
point-color="#10b981"
:selected-id="selectedAddressId"
:hovered-id="hoveredAddressId"
:total-count="items.length"
@select="onSelectAddress"
@update:hovered-id="hoveredAddressId = $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" />
{{ t('profileAddresses.actions.add') }}
</Button>
</NuxtLink>
</div>
<!-- List content -->
<div v-if="isLoading" class="flex items-center justify-center py-8">
<Card padding="lg">
<Stack align="center" justify="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
</Stack>
</Card>
</div>
<template v-else>
<Stack gap="3">
<div
v-for="item in displayItems"
:key="item.uuid"
:class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedAddressId }"
@click="onSelectAddress(item)"
@mouseenter="hoveredAddressId = item.uuid"
@mouseleave="hoveredAddressId = undefined"
>
<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>
</div>
</Card>
</NuxtLink>
</div>
</Stack>
<Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
<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"
/>
</Stack>
</template>
</div>
<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>
</div>
</Card>
</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"
/>
</template>
</CatalogPage>
</template>
<script setup lang="ts">
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
import { provideCatalogLayout } from '~/composables/useCatalogLayout'
definePageMeta({
layout: 'catalog',
layout: 'topnav',
middleware: ['auth-oidc']
})
@@ -87,10 +86,6 @@ const searchQuery = ref('')
const searchWithMap = ref(false)
const currentBounds = ref<MapBounds | null>(null)
const onBoundsChange = (bounds: MapBounds) => {
currentBounds.value = bounds
}
// Map items
const itemsWithCoords = computed(() => {
return items.value.filter(addr =>
@@ -118,56 +113,14 @@ const displayItems = computed(() => {
})
})
// Hovered item with coordinates for map highlight
const hoveredItem = computed(() => {
if (!hoveredAddressId.value) return null
const item = items.value.find(i => i.uuid === hoveredAddressId.value)
if (!item?.latitude || !item?.longitude) return null
return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
})
// Search handler
const onSearch = () => {
// TODO: Implement search
}
// No filters
const onRemoveFilter = (_id: string) => {}
const onSelectAddress = (item: any) => {
selectedAddressId.value = item.uuid
}
// Handle selection from map
const onMapSelect = (uuid: string) => {
const address = items.value.find(i => i.uuid === uuid)
if (address) {
selectedAddressId.value = uuid
}
}
// Provide data to layout
provideCatalogLayout({
// Custom subnav for clientarea
subNavItems: [
{ label: t('cabinetNav.orders'), path: '/clientarea/orders' },
{ label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
],
searchQuery,
activeFilters: ref([]),
displayedCount: computed(() => displayItems.value.length),
totalCount: computed(() => items.value.length),
onSearch,
onRemoveFilter,
mapItems: itemsWithCoords,
mapId: 'addresses-map',
pointColor: '#10b981',
hoveredItemId: hoveredAddressId,
hoveredItem,
onMapSelect,
onBoundsChange,
searchWithMap
})
await init()
</script>

245
app/pages/clientarea/offers/index.vue
View File

@@ -1,81 +1,101 @@
<template>
<div>
<!-- Add button -->
<div class="mb-4">
<CatalogPage
:items="displayItems"
:map-items="itemsWithCoords"
:loading="isLoading"
with-map
map-id="seller-offers-map"
point-color="#f59e0b"
:selected-id="selectedOfferId"
:hovered-id="hoveredOfferId"
:total-count="totalOffers"
@select="onSelectOffer"
@update:hovered-id="hoveredOfferId = $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('clientOffersList.filters.status_label') }}</div>
<ul class="menu menu-compact">
<li v-for="filter in statusFilters" :key="filter.id">
<a
:class="{ 'active': selectedStatus === filter.id }"
@click="selectedStatus = filter.id"
>{{ filter.label }}</a>
</li>
</ul>
</div>
</div>
</template>
</CatalogSearchBar>
</template>
<template #header>
<!-- Error state -->
<Alert v-if="hasError" variant="error" class="mb-4">
<Stack gap="2">
<Heading :level="4" weight="semibold">{{ t('clientOffersList.error.title') }}</Heading>
<Text tone="muted">{{ error }}</Text>
<Button @click="loadOffers">{{ t('clientOffersList.error.retry') }}</Button>
</Stack>
</Alert>
<!-- Add button -->
<NuxtLink :to="localePath('/clientarea/offers/new')">
<Button class="w-full">
<Icon name="lucide:plus" size="16" class="mr-2" />
{{ t('clientOffersList.actions.add') }}
</Button>
</NuxtLink>
</div>
</template>
<!-- Error state -->
<Alert v-if="hasError" variant="error" class="mb-4">
<Stack gap="2">
<Heading :level="4" weight="semibold">{{ t('clientOffersList.error.title') }}</Heading>
<Text tone="muted">{{ error }}</Text>
<Button @click="loadOffers">{{ t('clientOffersList.error.retry') }}</Button>
</Stack>
</Alert>
<!-- List content -->
<div v-else-if="isLoading" class="flex items-center justify-center py-8">
<template #card="{ item }">
<Card padding="lg">
<Stack align="center" justify="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('clientOffersList.states.loading') }}</Text>
<Stack gap="3">
<Stack direction="row" justify="between" align="center">
<Heading :level="3">{{ item.productName || t('clientOffersList.labels.untitled') }}</Heading>
<Badge :variant="getStatusVariant(item.status)">
{{ getStatusText(item.status) }}
</Badge>
</Stack>
<Text v-if="item.categoryName" tone="muted">{{ item.categoryName }}</Text>
<Grid :cols="1" :md="4" :gap="3">
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('clientOffersList.labels.quantity') }}</Text>
<Text weight="semibold">{{ item.quantity }} {{ item.unit || t('search.units.tons_short') }}</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('clientOffersList.labels.price') }}</Text>
<Text weight="semibold">{{ formatPrice(item.pricePerUnit, item.currency) }}</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('clientOffersList.labels.location') }}</Text>
<Text>{{ item.locationName || t('clientOffersList.labels.not_specified') }}</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('clientOffersList.labels.valid_until') }}</Text>
<Text>{{ formatDate(item.validUntil) }}</Text>
</Stack>
</Grid>
</Stack>
</Card>
</div>
<template v-else>
<Stack gap="3">
<div
v-for="offer in displayItems"
:key="offer.uuid"
:class="{ 'ring-2 ring-primary rounded-lg': offer.uuid === selectedOfferId }"
@click="onSelectOffer(offer)"
@mouseenter="hoveredOfferId = offer.uuid"
@mouseleave="hoveredOfferId = undefined"
>
<Card padding="lg">
<Stack gap="3">
<Stack direction="row" justify="between" align="center">
<Heading :level="3">{{ offer.productName || t('clientOffersList.labels.untitled') }}</Heading>
<Badge :variant="getStatusVariant(offer.status)">
{{ getStatusText(offer.status) }}
</Badge>
</Stack>
<Text v-if="offer.categoryName" tone="muted">{{ offer.categoryName }}</Text>
<Grid :cols="1" :md="4" :gap="3">
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('clientOffersList.labels.quantity') }}</Text>
<Text weight="semibold">{{ offer.quantity }} {{ offer.unit || t('search.units.tons_short') }}</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('clientOffersList.labels.price') }}</Text>
<Text weight="semibold">{{ formatPrice(offer.pricePerUnit, offer.currency) }}</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('clientOffersList.labels.location') }}</Text>
<Text>{{ offer.locationName || t('clientOffersList.labels.not_specified') }}</Text>
</Stack>
<Stack gap="1">
<Text size="sm" tone="muted">{{ t('clientOffersList.labels.valid_until') }}</Text>
<Text>{{ formatDate(offer.validUntil) }}</Text>
</Stack>
</Grid>
</Stack>
</Card>
</div>
</Stack>
</template>
<template #pagination>
<PaginationLoadMore
v-if="offers.length > 0"
:shown="offers.length"
@@ -85,29 +105,27 @@
@load-more="loadMore"
class="mt-4"
/>
<Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
<EmptyState
icon="🏷️"
:title="t('clientOffersList.empty.title')"
:description="t('clientOffersList.empty.subtitle')"
:action-label="t('clientOffersList.actions.addOffer')"
:action-to="localePath('/clientarea/offers/new')"
action-icon="lucide:plus"
/>
</Stack>
</template>
</div>
<template #empty>
<EmptyState
icon="🏷️"
:title="t('clientOffersList.empty.title')"
:description="t('clientOffersList.empty.subtitle')"
:action-label="t('clientOffersList.actions.addOffer')"
:action-to="localePath('/clientarea/offers/new')"
action-icon="lucide:plus"
/>
</template>
</CatalogPage>
</template>
<script setup lang="ts">
import { h, defineComponent } from 'vue'
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
import { provideCatalogLayout } from '~/composables/useCatalogLayout'
import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
definePageMeta({
layout: 'catalog',
layout: 'topnav',
middleware: ['auth-oidc']
})
@@ -131,10 +149,6 @@ const searchQuery = ref('')
const searchWithMap = ref(false)
const currentBounds = ref<MapBounds | null>(null)
const onBoundsChange = (bounds: MapBounds) => {
currentBounds.value = bounds
}
const {
data: offersData,
pending: offersPending,
@@ -187,14 +201,6 @@ const displayItems = computed(() => {
})
})
// Hovered item with coordinates for map highlight
const hoveredItem = computed(() => {
if (!hoveredOfferId.value) return null
const item = offers.value.find(i => i.uuid === hoveredOfferId.value)
if (!item?.locationLatitude || !item?.locationLongitude) return null
return { latitude: Number(item.locationLatitude), longitude: Number(item.locationLongitude) }
})
// Active filter badges (status filter)
const selectedStatus = ref<string>('all')
const statusFilters = computed(() => [
@@ -230,59 +236,6 @@ const onSelectOffer = (offer: any) => {
navigateTo(localePath(`/clientarea/offers/${offer.uuid}`))
}
// Handle selection from map
const onMapSelect = (uuid: string) => {
const offer = offers.value.find(i => i.uuid === uuid)
if (offer) {
selectedOfferId.value = uuid
navigateTo(localePath(`/clientarea/offers/${uuid}`))
}
}
// Filter component for the layout
const SellerOffersFilterComponent = defineComponent({
setup() {
return () => h('div', { class: 'p-2 space-y-3' }, [
h('div', {}, [
h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('clientOffersList.filters.status_label')),
h('ul', { class: 'menu menu-compact' },
statusFilters.value.map(filter =>
h('li', { key: filter.id },
h('a', {
class: selectedStatus.value === filter.id ? 'active' : '',
onClick: () => { selectedStatus.value = filter.id }
}, filter.label)
)
)
)
])
])
}
})
// Provide data to layout
provideCatalogLayout({
// Custom subnav for seller clientarea
subNavItems: [
{ label: t('cabinetNav.myOffers'), path: '/clientarea/offers' },
],
searchQuery,
activeFilters: activeFilterBadges,
displayedCount: computed(() => displayItems.value.length),
totalCount: computed(() => totalOffers.value),
onSearch,
onRemoveFilter,
filterComponent: SellerOffersFilterComponent,
mapItems: itemsWithCoords,
mapId: 'seller-offers-map',
pointColor: '#f59e0b',
hoveredItemId: hoveredOfferId,
hoveredItem,
onMapSelect,
onBoundsChange,
searchWithMap
})
const getStatusVariant = (status: string) => {
const variants: Record<string, string> = {
active: 'success',

242
app/pages/clientarea/orders/index.vue
View File

@@ -1,92 +1,108 @@
<template>
<div>
<!-- List content -->
<div v-if="isLoading" class="flex items-center justify-center py-8">
<Card padding="lg">
<Stack align="center" justify="center" gap="3">
<Spinner />
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
<CatalogPage
:items="displayItems"
:map-items="mapPoints"
:loading="isLoading"
with-map
map-id="orders-map"
point-color="#6366f1"
:selected-id="selectedOrderId"
:hovered-id="hoveredOrderId"
:total-count="filteredItems.length"
@select="onSelectOrder"
@update:hovered-id="hoveredOrderId = $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>
<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>
</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">{{ 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>
<template v-else>
<Stack gap="3">
<div
v-for="item in displayItems"
:key="item.uuid"
:class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedOrderId }"
@click="onSelectOrder(item)"
@mouseenter="hoveredOrderId = item.uuid"
@mouseleave="hoveredOrderId = undefined"
>
<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>
</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">{{ 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>
</Stack>
<Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
<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"
/>
</Stack>
</template>
</div>
<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"
/>
</template>
</CatalogPage>
</template>
<script setup lang="ts">
import { h, defineComponent } from 'vue'
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
import { provideCatalogLayout } from '~/composables/useCatalogLayout'
definePageMeta({
layout: 'catalog',
layout: 'topnav',
middleware: ['auth-oidc']
})
@@ -113,10 +129,6 @@ const searchQuery = ref('')
const searchWithMap = ref(false)
const currentBounds = ref<MapBounds | null>(null)
const onBoundsChange = (bounds: MapBounds) => {
currentBounds.value = bounds
}
// List items - one per order
const listItems = computed(() => {
return filteredItems.value.map(order => ({
@@ -168,14 +180,6 @@ const displayItems = computed(() => {
})
})
// Hovered item with coordinates for map highlight
const hoveredItem = computed(() => {
if (!hoveredOrderId.value) return null
const item = listItems.value.find(i => i.uuid === hoveredOrderId.value)
if (!item?.latitude || !item?.longitude) return null
return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
})
// Active filter badges
const activeFilterBadges = computed(() => {
const badges: { id: string; label: string }[] = []
@@ -203,62 +207,6 @@ const onSelectOrder = (item: any) => {
navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
}
// Handle selection from map
const onMapSelect = (uuid: string) => {
// Map points have -source or -dest suffix
const orderUuid = uuid.replace(/-source$|-dest$/, '')
const order = listItems.value.find(i => i.uuid === orderUuid)
if (order) {
selectedOrderId.value = orderUuid
navigateTo(localePath(`/clientarea/orders/${orderUuid}`))
}
}
// Filter component for the layout
const OrdersFilterComponent = defineComponent({
setup() {
return () => h('div', { class: 'p-2 space-y-3' }, [
h('div', {}, [
h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('ordersList.filters.status')),
h('ul', { class: 'menu menu-compact' },
filters.value.map(filter =>
h('li', { key: filter.id },
h('a', {
class: selectedFilter.value === filter.id ? 'active' : '',
onClick: () => { selectedFilter.value = filter.id }
}, filter.label)
)
)
)
])
])
}
})
// Provide data to layout
provideCatalogLayout({
// Custom subnav for clientarea
subNavItems: [
{ label: t('cabinetNav.orders'), path: '/clientarea/orders' },
{ label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
],
searchQuery,
activeFilters: activeFilterBadges,
displayedCount: computed(() => displayItems.value.length),
totalCount: computed(() => filteredItems.value.length),
onSearch,
onRemoveFilter,
filterComponent: OrdersFilterComponent,
mapItems: mapPoints,
mapId: 'orders-map',
pointColor: '#6366f1',
hoveredItemId: hoveredOrderId,
hoveredItem,
onMapSelect,
onBoundsChange,
searchWithMap
})
await init()
const getOrderStartDate = (order: any) => {