1a0305011f
All checks were successful
Build Docker Image / build (push) Successful in 4m20s
- Use ListMapLayout for two-column list+map view - Orders: show source locations on map - Addresses: show address locations on map - Remove preview map links (map is now inline) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<template>
|
|
<div class="flex flex-col flex-1 min-h-0">
|
|
<!-- Loading state -->
|
|
<div v-if="isLoading" class="flex-1 flex items-center justify-center">
|
|
<Card padding="lg">
|
|
<Stack align="center" justify="center" gap="3">
|
|
<Spinner />
|
|
<Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- ListMapLayout -->
|
|
<ListMapLayout
|
|
v-else-if="items.length"
|
|
:items="itemsForMap"
|
|
:selected-item-id="selectedAddressId"
|
|
map-id="addresses-map"
|
|
point-color="#10b981"
|
|
@select-item="onSelectAddress"
|
|
>
|
|
<template #list>
|
|
<Stack gap="4">
|
|
<!-- Add new address button -->
|
|
<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>
|
|
|
|
<!-- Address cards -->
|
|
<Stack gap="3">
|
|
<NuxtLink
|
|
v-for="addr in items"
|
|
:key="addr.uuid"
|
|
:to="localePath(`/clientarea/addresses/${addr.uuid}`)"
|
|
class="block"
|
|
>
|
|
<Card
|
|
padding="sm"
|
|
interactive
|
|
:class="{ 'ring-2 ring-primary': addr.uuid === selectedAddressId }"
|
|
@click.prevent="onSelectAddress(addr.uuid)"
|
|
>
|
|
<div class="flex flex-col gap-1">
|
|
<Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
|
|
<Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
|
|
<div class="flex items-center mt-1">
|
|
<span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</NuxtLink>
|
|
</Stack>
|
|
|
|
<Stack v-if="items.length === 0" align="center" gap="2">
|
|
<Text tone="muted">{{ t('profileAddresses.empty.title') }}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</template>
|
|
</ListMapLayout>
|
|
|
|
<!-- Empty state -->
|
|
<div v-else class="flex-1 flex items-center justify-center">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'topnav',
|
|
middleware: ['auth-oidc']
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
const {
|
|
items,
|
|
isLoading,
|
|
isoToEmoji,
|
|
init
|
|
} = useTeamAddresses()
|
|
|
|
const selectedAddressId = ref<string>()
|
|
|
|
// Map items for ListMapLayout
|
|
const itemsForMap = computed(() => {
|
|
return items.value.map(addr => ({
|
|
uuid: addr.uuid,
|
|
name: addr.name,
|
|
latitude: addr.latitude,
|
|
longitude: addr.longitude,
|
|
country: addr.countryCode
|
|
}))
|
|
})
|
|
|
|
const onSelectAddress = (uuid: string) => {
|
|
selectedAddressId.value = uuid
|
|
}
|
|
|
|
await init()
|
|
</script>
|