Simplify profile settings screens
This commit is contained in:
Ruslan Bakiev
@@ -1,138 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { useMutation, useQuery } from '@vue/apollo-composable';
|
||||
import {
|
||||
CreateMyDeliveryAddressDocument,
|
||||
DeleteMyDeliveryAddressDocument,
|
||||
MyDeliveryAddressesDocument,
|
||||
SetMyDefaultDeliveryAddressDocument,
|
||||
type MyDeliveryAddressesQuery,
|
||||
} from '~/composables/graphql/generated';
|
||||
|
||||
type AddressSuggestion = {
|
||||
value: string;
|
||||
unrestricted_value?: string;
|
||||
data?: {
|
||||
fias_id?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type DeliveryAddressItem = MyDeliveryAddressesQuery['myDeliveryAddresses'][number];
|
||||
|
||||
const addressFeedback = ref('');
|
||||
const addressFeedbackTone = ref<'success' | 'error'>('success');
|
||||
const route = useRoute();
|
||||
const addressFeedback = ref(route.query.created === '1' ? 'Адрес сохранён.' : '');
|
||||
const addressFeedbackTone = ref<'success' | 'error'>(route.query.created === '1' ? 'success' : 'error');
|
||||
|
||||
const deliveryAddressesQuery = useQuery(MyDeliveryAddressesDocument);
|
||||
const createAddressMutation = useMutation(CreateMyDeliveryAddressDocument, { throws: 'never' });
|
||||
const setDefaultAddressMutation = useMutation(SetMyDefaultDeliveryAddressDocument, { throws: 'never' });
|
||||
const deleteAddressMutation = useMutation(DeleteMyDeliveryAddressDocument, { throws: 'never' });
|
||||
|
||||
const addressForm = reactive({
|
||||
label: '',
|
||||
address: '',
|
||||
unrestrictedValue: '',
|
||||
fiasId: '',
|
||||
});
|
||||
const addressSearch = ref('');
|
||||
const addressSuggestions = ref<AddressSuggestion[]>([]);
|
||||
const addressLoading = ref(false);
|
||||
const addressOpen = ref(false);
|
||||
const addressSearchTimer = ref<ReturnType<typeof setTimeout> | null>(null);
|
||||
const addressBusyId = ref<string | null>(null);
|
||||
const addressDropdownRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const deliveryAddresses = computed<DeliveryAddressItem[]>(() => deliveryAddressesQuery.result.value?.myDeliveryAddresses ?? []);
|
||||
|
||||
function clearAddressTimer() {
|
||||
if (!addressSearchTimer.value) {
|
||||
return;
|
||||
}
|
||||
clearTimeout(addressSearchTimer.value);
|
||||
addressSearchTimer.value = null;
|
||||
}
|
||||
|
||||
async function fetchAddressSuggestions() {
|
||||
const query = addressSearch.value.trim();
|
||||
if (query.length < 2) {
|
||||
addressSuggestions.value = [];
|
||||
addressOpen.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
addressLoading.value = true;
|
||||
await $fetch<{ suggestions: AddressSuggestion[] }>('/api/dadata/address', {
|
||||
method: 'POST',
|
||||
body: { query },
|
||||
})
|
||||
.then((response) => {
|
||||
addressSuggestions.value = response.suggestions || [];
|
||||
addressOpen.value = addressSuggestions.value.length > 0;
|
||||
})
|
||||
.finally(() => {
|
||||
addressLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function scheduleAddressSuggest() {
|
||||
clearAddressTimer();
|
||||
addressSearchTimer.value = setTimeout(() => {
|
||||
void fetchAddressSuggestions();
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function applyAddressSuggestion(item: AddressSuggestion) {
|
||||
addressOpen.value = false;
|
||||
addressSearch.value = item.value;
|
||||
addressForm.address = item.value;
|
||||
addressForm.unrestrictedValue = item.unrestricted_value || item.value;
|
||||
addressForm.fiasId = item.data?.fias_id || '';
|
||||
}
|
||||
|
||||
function closeDropdownsFromOutside(event: MouseEvent) {
|
||||
const target = event.target as Node | null;
|
||||
if (addressDropdownRef.value && target && !addressDropdownRef.value.contains(target)) {
|
||||
addressOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function addDeliveryAddress() {
|
||||
addressFeedback.value = '';
|
||||
|
||||
const normalizedAddress = addressForm.address.trim() || addressSearch.value.trim();
|
||||
if (normalizedAddress.length < 5) {
|
||||
addressFeedbackTone.value = 'error';
|
||||
addressFeedback.value = 'Введите адрес через подсказки DaData.';
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await createAddressMutation.mutate({
|
||||
input: {
|
||||
label: addressForm.label.trim() ? addressForm.label.trim() : null,
|
||||
address: normalizedAddress,
|
||||
unrestrictedValue: addressForm.unrestrictedValue.trim() ? addressForm.unrestrictedValue.trim() : null,
|
||||
fiasId: addressForm.fiasId.trim() ? addressForm.fiasId.trim() : null,
|
||||
},
|
||||
});
|
||||
|
||||
const payload = result?.data?.createMyDeliveryAddress;
|
||||
if (!payload) {
|
||||
addressFeedbackTone.value = 'error';
|
||||
addressFeedback.value = createAddressMutation.error.value?.message || 'Не удалось добавить адрес.';
|
||||
return;
|
||||
}
|
||||
|
||||
addressForm.label = '';
|
||||
addressForm.address = '';
|
||||
addressForm.unrestrictedValue = '';
|
||||
addressForm.fiasId = '';
|
||||
addressSearch.value = '';
|
||||
addressSuggestions.value = [];
|
||||
addressOpen.value = false;
|
||||
|
||||
addressFeedbackTone.value = 'success';
|
||||
addressFeedback.value = 'Адрес сохранён.';
|
||||
await deliveryAddressesQuery.refetch();
|
||||
}
|
||||
|
||||
async function setDefaultAddress(addressId: string) {
|
||||
addressFeedback.value = '';
|
||||
addressBusyId.value = addressId;
|
||||
@@ -170,113 +57,80 @@ async function deleteAddress(addressId: string) {
|
||||
addressFeedback.value = 'Адрес удалён.';
|
||||
await deliveryAddressesQuery.refetch();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', closeDropdownsFromOutside);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', closeDropdownsFromOutside);
|
||||
clearAddressTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-6">
|
||||
<NuxtLink to="/profile" class="link link-hover text-sm">← Назад в профиль</NuxtLink>
|
||||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Адреса доставки</h1>
|
||||
|
||||
<div class="surface-card rounded-3xl p-5">
|
||||
<p class="text-sm text-[#355947]">
|
||||
Добавьте адрес через DaData и выберите основной. Этот адрес будет использоваться по умолчанию в корзине.
|
||||
</p>
|
||||
|
||||
<fieldset class="fieldset mt-4">
|
||||
<legend class="fieldset-legend">Название адреса (необязательно)</legend>
|
||||
<input v-model="addressForm.label" type="text" class="input w-full" placeholder="Склад МСК" >
|
||||
</fieldset>
|
||||
|
||||
<div ref="addressDropdownRef" class="relative mt-2">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">Поиск адреса (DaData)</legend>
|
||||
<input
|
||||
v-model="addressSearch"
|
||||
type="text"
|
||||
class="input w-full"
|
||||
placeholder="Начните вводить адрес"
|
||||
@input="scheduleAddressSuggest"
|
||||
@focus="addressOpen = addressSuggestions.length > 0"
|
||||
>
|
||||
</fieldset>
|
||||
|
||||
<span v-if="addressLoading" class="loading loading-spinner loading-sm absolute right-3 top-1/2 -translate-y-1/2" />
|
||||
|
||||
<div
|
||||
v-if="addressOpen && addressSuggestions.length > 0"
|
||||
class="absolute z-30 mt-2 max-h-72 w-full overflow-auto rounded-box bg-base-100 p-2"
|
||||
>
|
||||
<button
|
||||
v-for="item in addressSuggestions"
|
||||
:key="`${item.value}-${item.data?.fias_id || ''}`"
|
||||
type="button"
|
||||
class="btn btn-ghost mb-1 h-auto min-h-0 w-full justify-start whitespace-normal px-3 py-2 text-left"
|
||||
@click="applyAddressSuggestion(item)"
|
||||
>
|
||||
<span class="block text-sm font-semibold">{{ item.value }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
||||
<div class="space-y-2">
|
||||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Адреса доставки</h1>
|
||||
<p class="text-sm leading-6 text-[#466653]">
|
||||
Выберите основной адрес для заказов или добавьте новый.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary mt-4 w-full" :disabled="createAddressMutation.loading.value" @click="addDeliveryAddress">
|
||||
{{ createAddressMutation.loading.value ? 'Добавляем…' : 'Добавить адрес' }}
|
||||
</button>
|
||||
|
||||
<div v-if="addressFeedback" class="alert mt-3" :class="addressFeedbackTone === 'success' ? 'alert-success' : 'alert-error'">
|
||||
{{ addressFeedback }}
|
||||
</div>
|
||||
<NuxtLink
|
||||
to="/profile/addresses/new"
|
||||
class="btn rounded-full border-0 bg-[#123824] px-6 text-white hover:bg-[#0f2f20]"
|
||||
>
|
||||
Добавить
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="surface-card rounded-3xl p-5">
|
||||
<h2 class="text-xl font-bold text-[#123824]">Список адресов</h2>
|
||||
<div
|
||||
v-if="addressFeedback"
|
||||
class="rounded-[24px] border px-4 py-3 text-sm font-medium"
|
||||
:class="addressFeedbackTone === 'success'
|
||||
? 'border-[#cbe9d6] bg-[#f1fbf5] text-[#1c6b45]'
|
||||
: 'border-[#f1d1c7] bg-[#fff3ef] text-[#9d4426]'"
|
||||
>
|
||||
{{ addressFeedback }}
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<div v-if="deliveryAddressesQuery.loading.value" class="alert surface-card">Загрузка адресов...</div>
|
||||
<div v-else-if="deliveryAddresses.length === 0" class="alert surface-card">
|
||||
Пока нет адресов доставки.
|
||||
</div>
|
||||
<div v-if="deliveryAddressesQuery.loading.value" class="rounded-[28px] bg-white px-5 py-4 text-sm text-[#355947] shadow-[0_18px_38px_rgba(18,56,36,0.08)]">
|
||||
Загружаем адреса...
|
||||
</div>
|
||||
|
||||
<article
|
||||
v-for="address in deliveryAddresses"
|
||||
:key="address.id"
|
||||
class="rounded-2xl bg-[#f8fbf9] p-3 transition hover:shadow-md"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<p class="font-semibold text-[#123824]">{{ address.label || 'Адрес доставки' }}</p>
|
||||
<p class="text-sm text-[#355947]">{{ address.unrestrictedValue || address.address }}</p>
|
||||
<div v-else-if="deliveryAddresses.length === 0" class="rounded-[28px] bg-white px-5 py-4 text-sm text-[#355947] shadow-[0_18px_38px_rgba(18,56,36,0.08)]">
|
||||
Пока нет адресов доставки.
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<article
|
||||
v-for="address in deliveryAddresses"
|
||||
:key="address.id"
|
||||
class="rounded-[28px] bg-white px-5 py-4 shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
|
||||
>
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-lg font-bold text-[#123824]">{{ address.label || 'Адрес доставки' }}</p>
|
||||
<span v-if="address.isDefault" class="badge border-0 bg-[#e8f5ec] text-[#1c6b45]">Основной</span>
|
||||
</div>
|
||||
<span v-if="address.isDefault" class="badge badge-success">Основной</span>
|
||||
<p class="text-sm leading-6 text-[#557562]">{{ address.unrestrictedValue || address.address }}</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-if="!address.isDefault"
|
||||
class="btn btn-sm"
|
||||
class="btn rounded-full border border-[#d7e6dc] bg-white px-5 text-[#123824] hover:border-[#bed6c7] hover:bg-[#f6fbf8]"
|
||||
:disabled="addressBusyId === address.id"
|
||||
@click="setDefaultAddress(address.id)"
|
||||
>
|
||||
{{ addressBusyId === address.id ? 'Сохраняем…' : 'Сделать основным' }}
|
||||
{{ addressBusyId === address.id ? 'Сохраняем...' : 'Сделать основным' }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-ghost text-error"
|
||||
class="btn rounded-full border border-[#e5cfc7] bg-[#fff5f1] px-5 text-[#a64d2d] hover:border-[#deb5a8] hover:bg-[#ffe8e0]"
|
||||
:disabled="addressBusyId === address.id"
|
||||
@click="deleteAddress(address.id)"
|
||||
>
|
||||
{{ addressBusyId === address.id ? 'Удаляем…' : 'Удалить' }}
|
||||
{{ addressBusyId === address.id ? 'Удаляем...' : 'Удалить' }}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user