Alexandr SaVBaD Waltz
048da0e251
Introduced address management functionality, including address creation, deletion, and display with full localization support. Integrated GraphQL queries, mutations, and reusable composables for backend communication. - Added `addresses.vue` to profile for managing user addresses. - Implemented `useAddressCreate`, `useAddressDelete`, and `useAddressAutocomplete` composables. - Created reusable components: `forms/address.vue` and `cards/address.vue`. - Updated `navigation.vue` to include addresses in profile navigation. - Enhanced localization files for address-related translations. This improves user experience by enabling comprehensive address management in the profile section. No breaking changes.
85 lines
No EOL
1.9 KiB
Vue
85 lines
No EOL
1.9 KiB
Vue
<template>
|
|
<div class="addresses">
|
|
<div class="addresses__top">
|
|
<h1 class="addresses__top-title">{{ t('profile.addresses.title') }}</h1>
|
|
</div>
|
|
<div class="addresses__main">
|
|
<div class="addresses__main-inner">
|
|
<h6 class="addresses__main-title">{{ t('profile.addresses.title1') }}</h6>
|
|
<forms-address />
|
|
</div>
|
|
<div class="addresses__main-inner">
|
|
<h6 class="addresses__main-title">{{ t('profile.addresses.title2') }}</h6>
|
|
<div class="list">
|
|
<cards-address
|
|
v-for="address in addresses"
|
|
:key="address.node.uuid"
|
|
:address="address.node"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {usePageTitle} from "@composables/utils";
|
|
import {useAddressDelete} from "@composables/adresses";
|
|
|
|
const {t} = useI18n();
|
|
const addressesStore = useAddressesStore();
|
|
|
|
const addresses = computed(() => addressesStore.addresses);
|
|
|
|
const { setPageTitle } = usePageTitle();
|
|
const { deleteAddress, deleteLoading } = useAddressDelete();
|
|
|
|
setPageTitle(t('breadcrumbs.addresses'));
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.addresses {
|
|
background-color: $main;
|
|
width: 100%;
|
|
border: 1px solid $border;
|
|
border-radius: $default_border_radius;
|
|
height: fit-content;
|
|
|
|
&__top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 25px;
|
|
padding: 24px 32px;
|
|
border-bottom: 1px solid $border;
|
|
|
|
&-title {
|
|
color: $primary;
|
|
font-family: "Playfair Display", sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
&__main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 75px;
|
|
padding: 24px 32px;
|
|
|
|
&-inner {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
&-title {
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
</style> |