89 lines
2.8 KiB
Vue
89 lines
2.8 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">
|
|
<Card v-for="addr in items" :key="addr.uuid" padding="small" interactive>
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center justify-between">
|
|
<Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
|
|
<div class="dropdown dropdown-end">
|
|
<label tabindex="0" class="btn btn-ghost btn-xs btn-circle">
|
|
<Icon name="lucide:more-vertical" size="16" />
|
|
</label>
|
|
<ul tabindex="0" class="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-40">
|
|
<li>
|
|
<a class="text-error" @click="deleteAddress(addr.uuid)">
|
|
<Icon name="lucide:trash-2" size="16" />
|
|
{{ t('profileAddresses.actions.delete') }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
|
|
|
|
<div class="flex items-center justify-between mt-1">
|
|
<span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</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,
|
|
deleteAddress,
|
|
isoToEmoji,
|
|
init
|
|
} = useTeamAddresses()
|
|
|
|
await init()
|
|
</script>
|