fix(ai): use LangServe message format (type instead of role)
All checks were successful
Build Docker Image / build (push) Successful in 4m3s
All checks were successful
Build Docker Image / build (push) Successful in 4m3s
This commit is contained in:
332
app/pages/clientarea/addresses/[uuid].vue
Normal file
332
app/pages/clientarea/addresses/[uuid].vue
Normal file
@@ -0,0 +1,332 @@
|
|||||||
|
<template>
|
||||||
|
<Stack gap="6">
|
||||||
|
<PageHeader :title="t('profileAddresses.form.title_edit')" />
|
||||||
|
|
||||||
|
<Card v-if="isLoadingAddress" padding="lg">
|
||||||
|
<Stack align="center" gap="3">
|
||||||
|
<Spinner />
|
||||||
|
<Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Stack v-else-if="addressData" gap="4">
|
||||||
|
<Input
|
||||||
|
v-model="addressData.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="addressData.address"
|
||||||
|
type="hidden"
|
||||||
|
:value="addressData.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-edit'"
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
:options="{
|
||||||
|
style: 'mapbox://styles/mapbox/streets-v12',
|
||||||
|
center: [addressData.longitude || 37.6173, addressData.latitude || 55.7558],
|
||||||
|
zoom: 12
|
||||||
|
}"
|
||||||
|
@mb-click="onMapClick"
|
||||||
|
@mb-created="onMapCreated"
|
||||||
|
>
|
||||||
|
<MapboxDefaultMarker
|
||||||
|
v-if="addressData.latitude && addressData.longitude"
|
||||||
|
:marker-id="'selected-location'"
|
||||||
|
:lnglat="[addressData.longitude, addressData.latitude]"
|
||||||
|
color="#3b82f6"
|
||||||
|
/>
|
||||||
|
</MapboxMap>
|
||||||
|
</div>
|
||||||
|
<label class="label" v-if="addressData.latitude && addressData.longitude">
|
||||||
|
<span class="label-text-alt text-success">
|
||||||
|
{{ addressData.latitude.toFixed(6) }}, {{ addressData.longitude.toFixed(6) }}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Stack direction="row" gap="3">
|
||||||
|
<Button @click="updateAddress" :disabled="isSaving || !addressData.latitude">
|
||||||
|
{{ isSaving ? t('profileAddresses.form.updating') : t('profileAddresses.form.update') }}
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" :as="NuxtLink" :to="localePath('/clientarea/addresses')">
|
||||||
|
{{ t('common.cancel') }}
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<!-- Delete button -->
|
||||||
|
<div class="pt-4 border-t border-base-300">
|
||||||
|
<Button variant="ghost" class="text-error" @click="handleDelete" :disabled="isDeleting">
|
||||||
|
<Icon name="lucide:trash-2" size="16" class="mr-2" />
|
||||||
|
{{ isDeleting ? t('profileAddresses.actions.deleting') : t('profileAddresses.actions.delete') }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<EmptyState
|
||||||
|
v-else
|
||||||
|
icon="lucide:alert-circle"
|
||||||
|
:title="t('profileAddresses.error.not_found')"
|
||||||
|
:action-label="t('profileAddresses.error.back_to_list')"
|
||||||
|
:action-to="localePath('/clientarea/addresses')"
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { NuxtLink } from '#components'
|
||||||
|
import type { MapMouseEvent, Map as MapboxMapType } from 'mapbox-gl'
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
middleware: ['auth-oidc']
|
||||||
|
})
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const { execute, mutate } = useGraphQL()
|
||||||
|
const { t } = useI18n()
|
||||||
|
const localePath = useLocalePath()
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
|
||||||
|
const uuid = computed(() => route.params.uuid as string)
|
||||||
|
|
||||||
|
const isLoadingAddress = ref(true)
|
||||||
|
const isSaving = ref(false)
|
||||||
|
const isDeleting = ref(false)
|
||||||
|
const searchBoxContainer = ref<HTMLElement | null>(null)
|
||||||
|
const mapInstance = ref<MapboxMapType | null>(null)
|
||||||
|
const searchBoxRef = ref<any>(null)
|
||||||
|
|
||||||
|
const addressData = ref<{
|
||||||
|
uuid: string
|
||||||
|
name: string
|
||||||
|
address: string
|
||||||
|
latitude: number | null
|
||||||
|
longitude: number | null
|
||||||
|
countryCode: string | null
|
||||||
|
} | null>(null)
|
||||||
|
|
||||||
|
// Load address data
|
||||||
|
const loadAddress = async () => {
|
||||||
|
isLoadingAddress.value = true
|
||||||
|
try {
|
||||||
|
const { GetTeamAddressesDocument } = await import('~/composables/graphql/team/teams-generated')
|
||||||
|
const data = await execute(GetTeamAddressesDocument, {}, 'team', 'teams')
|
||||||
|
const addresses = data?.teamAddresses || []
|
||||||
|
const found = addresses.find((a: any) => a.uuid === uuid.value)
|
||||||
|
|
||||||
|
if (found) {
|
||||||
|
addressData.value = {
|
||||||
|
uuid: found.uuid,
|
||||||
|
name: found.name || '',
|
||||||
|
address: found.address || '',
|
||||||
|
latitude: found.latitude,
|
||||||
|
longitude: found.longitude,
|
||||||
|
countryCode: found.countryCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load address', e)
|
||||||
|
} finally {
|
||||||
|
isLoadingAddress.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await loadAddress()
|
||||||
|
|
||||||
|
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) => {
|
||||||
|
if (!addressData.value) return
|
||||||
|
|
||||||
|
const lat = event.lngLat.lat
|
||||||
|
const lng = event.lngLat.lng
|
||||||
|
|
||||||
|
addressData.value.latitude = lat
|
||||||
|
addressData.value.longitude = lng
|
||||||
|
|
||||||
|
// Reverse geocode: load address by coordinates
|
||||||
|
const result = await reverseGeocode(lat, lng)
|
||||||
|
if (result.address) {
|
||||||
|
addressData.value.address = result.address
|
||||||
|
addressData.value.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')
|
||||||
|
|
||||||
|
// Pre-fill with existing address
|
||||||
|
if (addressData.value?.address) {
|
||||||
|
searchBox.value = addressData.value.address
|
||||||
|
}
|
||||||
|
|
||||||
|
searchBox.addEventListener('retrieve', (event: any) => {
|
||||||
|
if (!addressData.value) return
|
||||||
|
|
||||||
|
const feature = event.detail.features?.[0]
|
||||||
|
if (feature) {
|
||||||
|
const [lng, lat] = feature.geometry.coordinates
|
||||||
|
addressData.value.address = feature.properties.full_address || feature.properties.name
|
||||||
|
addressData.value.latitude = lat
|
||||||
|
addressData.value.longitude = lng
|
||||||
|
|
||||||
|
// Extract country code from context
|
||||||
|
const countryContext = feature.properties.context?.country
|
||||||
|
addressData.value.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 updateAddress = async () => {
|
||||||
|
if (!addressData.value || !addressData.value.name || !addressData.value.address || !addressData.value.latitude) return
|
||||||
|
|
||||||
|
isSaving.value = true
|
||||||
|
try {
|
||||||
|
const { UpdateTeamAddressDocument } = await import('~/composables/graphql/team/teams-generated')
|
||||||
|
const result = await mutate(UpdateTeamAddressDocument, {
|
||||||
|
input: {
|
||||||
|
uuid: addressData.value.uuid,
|
||||||
|
name: addressData.value.name,
|
||||||
|
address: addressData.value.address,
|
||||||
|
latitude: addressData.value.latitude,
|
||||||
|
longitude: addressData.value.longitude,
|
||||||
|
countryCode: addressData.value.countryCode
|
||||||
|
}
|
||||||
|
}, 'team', 'teams')
|
||||||
|
|
||||||
|
if (result.updateTeamAddress?.success) {
|
||||||
|
navigateTo(localePath('/clientarea/addresses'))
|
||||||
|
} else {
|
||||||
|
console.error('Failed to update address:', result.updateTeamAddress?.message)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to update address', e)
|
||||||
|
} finally {
|
||||||
|
isSaving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
if (!addressData.value) return
|
||||||
|
if (!confirm(t('profileAddresses.actions.confirm_delete'))) return
|
||||||
|
|
||||||
|
isDeleting.value = true
|
||||||
|
try {
|
||||||
|
const { DeleteTeamAddressDocument } = await import('~/composables/graphql/team/teams-generated')
|
||||||
|
const result = await mutate(DeleteTeamAddressDocument, { uuid: addressData.value.uuid }, 'team', 'teams')
|
||||||
|
|
||||||
|
if (result.deleteTeamAddress?.success) {
|
||||||
|
navigateTo(localePath('/clientarea/addresses'))
|
||||||
|
} else {
|
||||||
|
console.error('Failed to delete address:', result.deleteTeamAddress?.message)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to delete address', e)
|
||||||
|
} finally {
|
||||||
|
isDeleting.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>
|
||||||
@@ -25,32 +25,17 @@
|
|||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<Grid :cols="1" :md="2" :gap="4">
|
<Grid :cols="1" :md="2" :gap="4">
|
||||||
<Card v-for="addr in items" :key="addr.uuid" padding="small" interactive>
|
<NuxtLink v-for="addr in items" :key="addr.uuid" :to="localePath(`/clientarea/addresses/${addr.uuid}`)" class="block">
|
||||||
<div class="flex flex-col gap-1">
|
<Card padding="small" interactive>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex flex-col gap-1">
|
||||||
<Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
|
<Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
|
||||||
<div class="dropdown dropdown-end">
|
<Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
|
||||||
<label tabindex="0" class="btn btn-ghost btn-xs btn-circle">
|
<div class="flex items-center mt-1">
|
||||||
<Icon name="lucide:more-vertical" size="16" />
|
<span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
</Card>
|
||||||
<Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
|
</NuxtLink>
|
||||||
|
|
||||||
<div class="flex items-center justify-between mt-1">
|
|
||||||
<span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -79,7 +64,6 @@ const {
|
|||||||
items,
|
items,
|
||||||
isLoading,
|
isLoading,
|
||||||
itemsWithCoords,
|
itemsWithCoords,
|
||||||
deleteAddress,
|
|
||||||
isoToEmoji,
|
isoToEmoji,
|
||||||
init
|
init
|
||||||
} = useTeamAddresses()
|
} = useTeamAddresses()
|
||||||
|
|||||||
@@ -87,7 +87,7 @@ const handleSend = async () => {
|
|||||||
const body = {
|
const body = {
|
||||||
input: {
|
input: {
|
||||||
messages: chat.value.map((m) => ({
|
messages: chat.value.map((m) => ({
|
||||||
role: m.role === 'assistant' ? 'assistant' : 'user',
|
type: m.role === 'assistant' ? 'ai' : 'human',
|
||||||
content: m.content
|
content: m.content
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|||||||
15
graphql/operations/team/teams/UpdateTeamAddress.graphql
Normal file
15
graphql/operations/team/teams/UpdateTeamAddress.graphql
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
mutation UpdateTeamAddress($input: UpdateTeamAddressInput!) {
|
||||||
|
updateTeamAddress(input: $input) {
|
||||||
|
success
|
||||||
|
message
|
||||||
|
address {
|
||||||
|
uuid
|
||||||
|
name
|
||||||
|
address
|
||||||
|
latitude
|
||||||
|
longitude
|
||||||
|
countryCode
|
||||||
|
isDefault
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -6,10 +6,12 @@
|
|||||||
"actions": {
|
"actions": {
|
||||||
"add": "Add address",
|
"add": "Add address",
|
||||||
"confirm_delete": "Delete this address?",
|
"confirm_delete": "Delete this address?",
|
||||||
"delete": "Delete"
|
"delete": "Delete",
|
||||||
|
"deleting": "Deleting..."
|
||||||
},
|
},
|
||||||
"form": {
|
"form": {
|
||||||
"title": "New address",
|
"title": "New address",
|
||||||
|
"title_edit": "Edit address",
|
||||||
"name": {
|
"name": {
|
||||||
"label": "Name",
|
"label": "Name",
|
||||||
"placeholder": "e.g. Office, Warehouse, Production"
|
"placeholder": "e.g. Office, Warehouse, Production"
|
||||||
@@ -28,6 +30,8 @@
|
|||||||
},
|
},
|
||||||
"save": "Save",
|
"save": "Save",
|
||||||
"saving": "Saving...",
|
"saving": "Saving...",
|
||||||
|
"update": "Update",
|
||||||
|
"updating": "Updating...",
|
||||||
"mapLabel": "Select a point on the map"
|
"mapLabel": "Select a point on the map"
|
||||||
},
|
},
|
||||||
"states": {
|
"states": {
|
||||||
@@ -41,6 +45,10 @@
|
|||||||
"cta": "Add first address",
|
"cta": "Add first address",
|
||||||
"title": "No addresses"
|
"title": "No addresses"
|
||||||
},
|
},
|
||||||
|
"error": {
|
||||||
|
"not_found": "Address not found",
|
||||||
|
"back_to_list": "Back to addresses"
|
||||||
|
},
|
||||||
"status": {}
|
"status": {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,10 +6,12 @@
|
|||||||
"actions": {
|
"actions": {
|
||||||
"add": "Добавить адрес",
|
"add": "Добавить адрес",
|
||||||
"delete": "Удалить",
|
"delete": "Удалить",
|
||||||
|
"deleting": "Удаление...",
|
||||||
"confirm_delete": "Удалить этот адрес?"
|
"confirm_delete": "Удалить этот адрес?"
|
||||||
},
|
},
|
||||||
"form": {
|
"form": {
|
||||||
"title": "Новый адрес",
|
"title": "Новый адрес",
|
||||||
|
"title_edit": "Редактирование адреса",
|
||||||
"mapLabel": "Выберите точку на карте",
|
"mapLabel": "Выберите точку на карте",
|
||||||
"name": {
|
"name": {
|
||||||
"label": "Название",
|
"label": "Название",
|
||||||
@@ -28,7 +30,9 @@
|
|||||||
"placeholder": "37.6173"
|
"placeholder": "37.6173"
|
||||||
},
|
},
|
||||||
"save": "Сохранить",
|
"save": "Сохранить",
|
||||||
"saving": "Сохранение..."
|
"saving": "Сохранение...",
|
||||||
|
"update": "Обновить",
|
||||||
|
"updating": "Обновление..."
|
||||||
},
|
},
|
||||||
"states": {
|
"states": {
|
||||||
"loading": "Загружаем адреса..."
|
"loading": "Загружаем адреса..."
|
||||||
@@ -41,6 +45,10 @@
|
|||||||
"description": "У вас пока нет сохранённых адресов",
|
"description": "У вас пока нет сохранённых адресов",
|
||||||
"cta": "Добавить первый адрес"
|
"cta": "Добавить первый адрес"
|
||||||
},
|
},
|
||||||
|
"error": {
|
||||||
|
"not_found": "Адрес не найден",
|
||||||
|
"back_to_list": "Назад к адресам"
|
||||||
|
},
|
||||||
"status": {}
|
"status": {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user