63e8d47b79
All checks were successful
Build Docker Image / build (push) Successful in 6m13s
- Create ClientAreaMapPage component for client area pages with glass effect - Update orders page to use new ClientAreaMapPage with filter dropdown - Update addresses page to use new ClientAreaMapPage with add button - Remove Profile and Team tabs from MainNavigation (already in user menu)
81 lines
2.4 KiB
Vue
81 lines
2.4 KiB
Vue
<template>
|
|
<ClientAreaMapPage
|
|
:items="items"
|
|
:loading="isLoading"
|
|
map-id="addresses-map"
|
|
point-color="#10b981"
|
|
:hovered-id="hoveredAddressId"
|
|
:total-count="items.length"
|
|
:title="t('cabinetNav.addresses')"
|
|
:search-query="searchQuery"
|
|
@select="onSelectAddress"
|
|
@update:hovered-id="hoveredAddressId = $event"
|
|
@update:search-query="searchQuery = $event"
|
|
>
|
|
<template #header>
|
|
<NuxtLink :to="localePath('/clientarea/addresses/new')">
|
|
<button class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20">
|
|
<Icon name="lucide:plus" size="14" class="mr-1" />
|
|
{{ t('profileAddresses.actions.add') }}
|
|
</button>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<template #card="{ item }">
|
|
<NuxtLink :to="localePath(`/clientarea/addresses/${item.uuid}`)" class="block">
|
|
<div class="bg-white/10 rounded-lg p-4 hover:bg-white/20 transition-colors">
|
|
<div class="flex items-start gap-3">
|
|
<span class="text-2xl">{{ isoToEmoji(item.countryCode) }}</span>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="font-semibold truncate">{{ item.name }}</div>
|
|
<div class="text-sm text-white/60 line-clamp-2">{{ item.address }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<template #empty>
|
|
<div class="text-center py-8">
|
|
<div class="text-4xl mb-2">📍</div>
|
|
<div class="font-semibold mb-1">{{ t('profileAddresses.empty.title') }}</div>
|
|
<div class="text-sm text-white/60 mb-4">{{ t('profileAddresses.empty.description') }}</div>
|
|
<NuxtLink :to="localePath('/clientarea/addresses/new')">
|
|
<button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
|
|
<Icon name="lucide:plus" size="14" class="mr-1" />
|
|
{{ t('profileAddresses.empty.cta') }}
|
|
</button>
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
</ClientAreaMapPage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'topnav',
|
|
middleware: ['auth-oidc']
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
const {
|
|
items,
|
|
isLoading,
|
|
isoToEmoji,
|
|
init
|
|
} = useTeamAddresses()
|
|
|
|
const hoveredAddressId = ref<string>()
|
|
const searchQuery = ref('')
|
|
|
|
const onSelectAddress = (item: { uuid?: string | null }) => {
|
|
if (item.uuid) {
|
|
navigateTo(localePath(`/clientarea/addresses/${item.uuid}`))
|
|
}
|
|
}
|
|
|
|
await init()
|
|
</script>
|