Initial commit from monorepo
This commit is contained in:
Ruslan Bakiev
88
app/pages/clientarea/addresses/index.vue
Normal file
88
app/pages/clientarea/addresses/index.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<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>
|
||||
75
app/pages/clientarea/addresses/map.vue
Normal file
75
app/pages/clientarea/addresses/map.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<NuxtLayout name="map">
|
||||
<template #sidebar>
|
||||
<CatalogMapSidebar
|
||||
:title="t('profileAddresses.header.title')"
|
||||
:back-link="localePath('/clientarea/addresses')"
|
||||
:back-label="t('catalogMap.actions.list_view')"
|
||||
:items-count="items.length"
|
||||
:loading="isLoading"
|
||||
:empty-text="t('profileAddresses.empty.title')"
|
||||
>
|
||||
<template #cards>
|
||||
<Card
|
||||
v-for="addr in items"
|
||||
:key="addr.uuid"
|
||||
padding="small"
|
||||
interactive
|
||||
:class="{ 'ring-2 ring-primary': selectedItemId === addr.uuid }"
|
||||
@click="selectItem(addr)"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
|
||||
<span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
|
||||
</div>
|
||||
<Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
</CatalogMapSidebar>
|
||||
</template>
|
||||
|
||||
<CatalogMap
|
||||
ref="mapRef"
|
||||
map-id="addresses-fullscreen-map"
|
||||
:items="itemsWithCoords"
|
||||
point-color="#3b82f6"
|
||||
@select-item="onMapSelectItem"
|
||||
/>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
middleware: ['auth-oidc']
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
const {
|
||||
items,
|
||||
isLoading,
|
||||
itemsWithCoords,
|
||||
isoToEmoji,
|
||||
init
|
||||
} = useTeamAddresses()
|
||||
|
||||
await init()
|
||||
|
||||
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
|
||||
const selectedItemId = ref<string | null>(null)
|
||||
|
||||
const selectItem = (item: any) => {
|
||||
selectedItemId.value = item.uuid
|
||||
if (item.latitude && item.longitude) {
|
||||
mapRef.value?.flyTo(item.latitude, item.longitude, 8)
|
||||
}
|
||||
}
|
||||
|
||||
const onMapSelectItem = (uuid: string) => {
|
||||
selectedItemId.value = uuid
|
||||
}
|
||||
</script>
|
||||
247
app/pages/clientarea/addresses/new.vue
Normal file
247
app/pages/clientarea/addresses/new.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<Stack gap="6">
|
||||
<PageHeader :title="t('profileAddresses.form.title')" />
|
||||
|
||||
<Stack gap="4">
|
||||
<Input
|
||||
v-model="newAddress.name"
|
||||
:label="t('profileAddresses.form.name.label')"
|
||||
:placeholder="t('profileAddresses.form.name.placeholder')"
|
||||
/>
|
||||
|
||||
<!-- Address search with Mapbox -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('profileAddresses.form.address.label') }}</span>
|
||||
</label>
|
||||
<div ref="searchBoxContainer" class="w-full" />
|
||||
<input
|
||||
v-if="newAddress.address"
|
||||
type="hidden"
|
||||
:value="newAddress.address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Mapbox map for selecting coordinates -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('profileAddresses.form.mapLabel') }}</span>
|
||||
</label>
|
||||
<div class="h-80 rounded-lg overflow-hidden border border-base-300">
|
||||
<MapboxMap
|
||||
ref="mapComponentRef"
|
||||
:map-id="'address-picker'"
|
||||
style="width: 100%; height: 100%"
|
||||
:options="{
|
||||
style: 'mapbox://styles/mapbox/streets-v12',
|
||||
center: [newAddress.longitude || 37.6173, newAddress.latitude || 55.7558],
|
||||
zoom: 10
|
||||
}"
|
||||
@mb-click="onMapClick"
|
||||
@mb-created="onMapCreated"
|
||||
>
|
||||
<MapboxDefaultMarker
|
||||
v-if="newAddress.latitude && newAddress.longitude"
|
||||
:marker-id="'selected-location'"
|
||||
:lnglat="[newAddress.longitude, newAddress.latitude]"
|
||||
color="#3b82f6"
|
||||
/>
|
||||
</MapboxMap>
|
||||
</div>
|
||||
<label class="label" v-if="newAddress.latitude && newAddress.longitude">
|
||||
<span class="label-text-alt text-success">
|
||||
{{ newAddress.latitude.toFixed(6) }}, {{ newAddress.longitude.toFixed(6) }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Stack direction="row" gap="3">
|
||||
<Button @click="createAddress" :disabled="isCreating || !newAddress.latitude">
|
||||
{{ isCreating ? t('profileAddresses.form.saving') : t('profileAddresses.form.save') }}
|
||||
</Button>
|
||||
<Button variant="outline" :as="NuxtLink" :to="localePath('/clientarea/addresses')">
|
||||
{{ t('common.cancel') }}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NuxtLink } from '#components'
|
||||
import type { MapMouseEvent, Map as MapboxMapType } from 'mapbox-gl'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['auth-oidc']
|
||||
})
|
||||
|
||||
const { mutate } = useGraphQL()
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const isCreating = ref(false)
|
||||
const searchBoxContainer = ref<HTMLElement | null>(null)
|
||||
const mapInstance = ref<MapboxMapType | null>(null)
|
||||
const searchBoxRef = ref<any>(null)
|
||||
|
||||
const newAddress = reactive({
|
||||
name: '',
|
||||
address: '',
|
||||
latitude: null as number | null,
|
||||
longitude: null as number | null,
|
||||
countryCode: null as string | null
|
||||
})
|
||||
|
||||
const onMapCreated = (map: MapboxMapType) => {
|
||||
mapInstance.value = map
|
||||
}
|
||||
|
||||
// Reverse geocode: get address by coordinates (local language)
|
||||
const reverseGeocode = async (lat: number, lng: number): Promise<{ address: string | null; countryCode: string | null }> => {
|
||||
try {
|
||||
const token = config.public.mapboxAccessToken
|
||||
const response = await fetch(
|
||||
`https://api.mapbox.com/geocoding/v5/mapbox.places/${lng},${lat}.json?access_token=${token}`
|
||||
)
|
||||
const data = await response.json()
|
||||
const feature = data.features?.[0]
|
||||
if (!feature) return { address: null, countryCode: null }
|
||||
|
||||
// Extract country code from context
|
||||
const countryContext = feature.context?.find((c: any) => c.id?.startsWith('country.'))
|
||||
const countryCode = countryContext?.short_code?.toUpperCase() || null
|
||||
|
||||
return { address: feature.place_name, countryCode }
|
||||
} catch {
|
||||
return { address: null, countryCode: null }
|
||||
}
|
||||
}
|
||||
|
||||
const onMapClick = async (event: MapMouseEvent) => {
|
||||
const lat = event.lngLat.lat
|
||||
const lng = event.lngLat.lng
|
||||
|
||||
newAddress.latitude = lat
|
||||
newAddress.longitude = lng
|
||||
|
||||
// Reverse geocode: load address by coordinates
|
||||
const result = await reverseGeocode(lat, lng)
|
||||
if (result.address) {
|
||||
newAddress.address = result.address
|
||||
newAddress.countryCode = result.countryCode
|
||||
// Update SearchBox input
|
||||
if (searchBoxRef.value) {
|
||||
searchBoxRef.value.value = result.address
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize Mapbox SearchBox
|
||||
onMounted(async () => {
|
||||
if (!searchBoxContainer.value) return
|
||||
|
||||
const { MapboxSearchBox } = await import('@mapbox/search-js-web')
|
||||
|
||||
const searchBox = new MapboxSearchBox()
|
||||
searchBox.accessToken = config.public.mapboxAccessToken as string
|
||||
searchBox.options = {
|
||||
// Without language: uses local country language
|
||||
}
|
||||
searchBox.placeholder = t('profileAddresses.form.address.placeholder')
|
||||
|
||||
searchBox.addEventListener('retrieve', (event: any) => {
|
||||
const feature = event.detail.features?.[0]
|
||||
if (feature) {
|
||||
const [lng, lat] = feature.geometry.coordinates
|
||||
newAddress.address = feature.properties.full_address || feature.properties.name
|
||||
newAddress.latitude = lat
|
||||
newAddress.longitude = lng
|
||||
|
||||
// Extract country code from context
|
||||
const countryContext = feature.properties.context?.country
|
||||
newAddress.countryCode = countryContext?.country_code?.toUpperCase() || null
|
||||
|
||||
// Fly to selected location
|
||||
if (mapInstance.value) {
|
||||
mapInstance.value.flyTo({
|
||||
center: [lng, lat],
|
||||
zoom: 15
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
searchBoxRef.value = searchBox
|
||||
searchBoxContainer.value.appendChild(searchBox as unknown as Node)
|
||||
})
|
||||
|
||||
const createAddress = async () => {
|
||||
if (!newAddress.name || !newAddress.address || !newAddress.latitude) return
|
||||
|
||||
isCreating.value = true
|
||||
try {
|
||||
const { CreateTeamAddressDocument } = await import('~/composables/graphql/team/teams-generated')
|
||||
const result = await mutate(CreateTeamAddressDocument, {
|
||||
input: {
|
||||
name: newAddress.name,
|
||||
address: newAddress.address,
|
||||
latitude: newAddress.latitude,
|
||||
longitude: newAddress.longitude,
|
||||
countryCode: newAddress.countryCode,
|
||||
isDefault: false
|
||||
}
|
||||
}, 'team', 'teams')
|
||||
|
||||
if (result.createTeamAddress?.success) {
|
||||
// Address is created asynchronously via workflow
|
||||
// Redirect to list; address will appear after sync
|
||||
navigateTo(localePath('/clientarea/addresses'))
|
||||
} else {
|
||||
console.error('Failed to create address:', result.createTeamAddress?.message)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to create address', e)
|
||||
} finally {
|
||||
isCreating.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Mapbox SearchBox styling */
|
||||
mapbox-search-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
mapbox-search-box::part(input) {
|
||||
height: 3rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid oklch(var(--bc) / 0.2);
|
||||
border-radius: var(--rounded-btn, 0.5rem);
|
||||
background-color: oklch(var(--b1));
|
||||
color: oklch(var(--bc));
|
||||
}
|
||||
|
||||
mapbox-search-box::part(input):focus {
|
||||
outline: 2px solid oklch(var(--p));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
mapbox-search-box::part(results-list) {
|
||||
background-color: oklch(var(--b1));
|
||||
border: 1px solid oklch(var(--bc) / 0.2);
|
||||
border-radius: var(--rounded-btn, 0.5rem);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
mapbox-search-box::part(result-item) {
|
||||
padding: 0.75rem 1rem;
|
||||
color: oklch(var(--bc));
|
||||
}
|
||||
|
||||
mapbox-search-box::part(result-item):hover {
|
||||
background-color: oklch(var(--b2));
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user