goc_daniel/b2b
2
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: create Account Page

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-03-23 16:14:43 +01:00
parent 508418523f
commit d0c1f49d3e
15 changed files with 461 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
bo/src/components/customer/PageAddresses.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="container mx-auto mt-15">
<div class="container mx-auto mt-20">
<div class="flex flex-col gap-5 mb-6">
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
<div class="flex md:flex-row flex-col justify-between items-start md:items-center gap-5 md:gap-0">
@@ -18,18 +18,23 @@
</div>
<div v-if="paginatedAddresses.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div v-for="address in paginatedAddresses" :key="address.id"
class="border border-(--border-light) dark:border-(--border-dark) rounded-md p-4 bg-(--second-light) dark:bg-(--main-dark) hover:shadow-md transition-shadow">
<p class="text-black dark:text-white">{{ address.street }}</p>
<p class="text-black dark:text-white">{{ address.zipCode }}, {{ address.city }}</p>
<p class="text-black dark:text-white">{{ address.country }}</p>
<div class="flex gap-2 mt-2">
<UButton size="sm" color="neutral" variant="outline" @click="openEditModal(address)"
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{ t('edit') }}
</UButton>
<button size="sm" color="destructive" variant="outline" @click="confirmDelete(address.id)"
class="text-red-500 hover:bg-red-100 dark:hover:bg-red-900 dark:hover:text-red-100 rounded transition-colors p-2">
<UIcon name="material-symbols:delete" class="text-[16px]" />
</button>
class="border border-(--border-light) dark:border-(--border-dark) rounded-md p-4 bg-(--second-light) dark:bg-(--main-dark) hover:shadow-md transition-shadow flex justify-between">
<div class="flex flex-col gap-2 items-strat justify-end">
<p class="text-black dark:text-white">{{ address.street }}</p>
<p class="text-black dark:text-white">{{ address.zipCode }}, {{ address.city }}</p>
<p class="text-black dark:text-white">{{ address.country }}</p>
</div>
<div class="flex flex-col items-end justify-between gap-2">
<button @click="confirmDelete(address.id)"
class="p-2 text-red-500 bg-red-100 dark:bg-(--main-dark) rounded transition-colors"
:title="t('Remove')">
<UIcon name="material-symbols:delete" class="text-[18px]" />
</button>
<UButton size="sm" color="neutral" variant="outline" @click="openEditModal(address)"
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) text-[13px]">
{{ t('edit') }}
<UIcon name="ic:sharp-edit" class="text-[15px]" />
</UButton>
</div>
</div>
</div>