73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<template>
|
|
<Section variant="plain" paddingY="md">
|
|
<Stack gap="6">
|
|
<PageHeader
|
|
:title="t('profileAddresses.header.title')"
|
|
:actions="[{ label: t('profileAddresses.actions.add'), icon: 'lucide:plus', to: localePath('/clientarea/addresses/new') }]"
|
|
/>
|
|
|
|
<Card v-if="isLoading" padding="lg">
|
|
<Stack align="center" gap="3">
|
|
<Spinner />
|
|
<Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<template v-else-if="items.length">
|
|
<NuxtLink :to="localePath('/clientarea/addresses/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
|
|
<ClientOnly>
|
|
<MapboxGlobe
|
|
map-id="addresses-map"
|
|
:locations="itemsWithCoords"
|
|
:height="192"
|
|
/>
|
|
</ClientOnly>
|
|
</NuxtLink>
|
|
|
|
<Grid :cols="1" :md="2" :gap="4">
|
|
<NuxtLink v-for="addr in items" :key="addr.uuid" :to="localePath(`/clientarea/addresses/${addr.uuid}`)" class="block">
|
|
<Card padding="small" interactive>
|
|
<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>
|
|
</Grid>
|
|
</template>
|
|
|
|
<EmptyState
|
|
v-else
|
|
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>
|
|
</Section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: ['auth-oidc']
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
const {
|
|
items,
|
|
isLoading,
|
|
itemsWithCoords,
|
|
isoToEmoji,
|
|
init
|
|
} = useTeamAddresses()
|
|
|
|
await init()
|
|
</script>
|