Alexandr SaVBaD Waltz
132ed8a89e
Enhanced address management UI by introducing a delete button to the address card component. Moved address deletion logic from the profile page to the card for better modularity. - Added a delete icon to `address.vue` with hover effect and error color styling. - Integrated `useAddressDelete` composable into the card for deletion handling. - Updated SCSS to style the delete button with proper alignment and spacing. Improves usability and keeps the address management interface consistent and intuitive. No breaking changes.
83 lines
No EOL
1.8 KiB
Vue
83 lines
No EOL
1.8 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";
|
|
|
|
const {t} = useI18n();
|
|
const addressesStore = useAddressesStore();
|
|
|
|
const addresses = computed(() => addressesStore.addresses);
|
|
|
|
const { setPageTitle } = usePageTitle();
|
|
|
|
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> |