fix: addresses
This commit is contained in:
@@ -10,20 +10,32 @@
|
||||
<UIcon name="ic:baseline-search"
|
||||
class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark) relative left-40" />
|
||||
</div>
|
||||
<UButton color="primary" @click="openCreateModal"
|
||||
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
|
||||
<UButton color="info" @click="openCreateModal">
|
||||
<UIcon name="mdi:add-bold" />
|
||||
{{ t('Add Address') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</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"
|
||||
<div v-if="cartStore.addressLoading" class="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
{{ t('Loading addresses...') }}
|
||||
</div>
|
||||
<div v-else-if="cartStore.addressError" class="text-center py-8 text-red-500 dark:text-red-400">
|
||||
{{ cartStore.addressError }}
|
||||
</div>
|
||||
<div v-else-if="cartStore.paginatedAddresses.length"
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div v-for="address in cartStore.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 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 class="flex flex-col gap-2 items-start justify-end">
|
||||
<p class="text-black dark:text-white font-semibold">{{ address.address_info.recipient }}</p>
|
||||
<p class="text-black dark:text-white">{{ address.address_info.street }} {{
|
||||
address.address_info.building_no }}{{ address.address_info.apartment_no ? '/' +
|
||||
address.address_info.apartment_no : '' }}</p>
|
||||
<p class="text-black dark:text-white">{{ address.address_info.postal_code }}, {{
|
||||
address.address_info.city }}</p>
|
||||
<p class="text-black dark:text-white">{{ address.address_info.voivodeship }}</p>
|
||||
<p v-if="address.address_info.address_line2" class="text-black dark:text-white">{{
|
||||
address.address_info.address_line2 }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end justify-between gap-2">
|
||||
<button @click="confirmDelete(address.id)"
|
||||
@@ -47,33 +59,25 @@
|
||||
<template #content>
|
||||
<div class="p-6 flex flex-col gap-6">
|
||||
<p class="text-[20px] text-black dark:text-white ">Address</p>
|
||||
<UForm @submit.prevent="saveAddress" class="space-y-4" :validate="validate">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-black dark:text-white mb-1">Street *</label>
|
||||
<UInput v-model="formData.street" placeholder="Enter street" name="street" class="w-full" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-black dark:text-white mb-1">Zip Code *</label>
|
||||
<UInput v-model="formData.zipCode" placeholder="Enter zip code" name="zipCode"
|
||||
class="w-full" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-black dark:text-white mb-1">City *</label>
|
||||
<UInput v-model="formData.city" placeholder="Enter city" name="city" class="w-full" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-black dark:text-white mb-1">Country *</label>
|
||||
<UInput v-model="formData.country" placeholder="Enter country" name="country"
|
||||
class="w-full" />
|
||||
<UForm @submit="saveAddress" class="space-y-4" :validate="validate" :state="formData">
|
||||
<template v-for="field in formFieldKeys" :key="field">
|
||||
<UFormField :label="fieldLabel(field)" :name="field"
|
||||
:required="field !== 'address_line2'">
|
||||
<UInput v-model="formData[field]" :placeholder="fieldLabel(field)" class="w-full" />
|
||||
</UFormField>
|
||||
</template>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton variant="outline" color="neutral" @click="closeModal">
|
||||
{{ t('Cancel') }}
|
||||
</UButton>
|
||||
|
||||
<UButton type="submit"
|
||||
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
|
||||
{{ t('Save') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton variant="outline" color="neutral" @click="closeModal"
|
||||
class="text-black dark:text-white">{{ t('Cancel') }}</UButton>
|
||||
<UButton variant="outline" color="neutral" @click="saveAddress"
|
||||
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
|
||||
{{ t('Save') }}</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
@@ -103,78 +107,144 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useAddressStore } from '@/stores/customer/address'
|
||||
import { ref, reactive, computed, watch, onMounted } from 'vue'
|
||||
import { useCartStore } from '@/stores/customer/cart'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Default from '@/layouts/default.vue'
|
||||
const addressStore = useAddressStore()
|
||||
import { currentCountry } from '@/router/langs'
|
||||
|
||||
type AddressFormState = Record<string, string>
|
||||
|
||||
const cartStore = useCartStore()
|
||||
const { t } = useI18n()
|
||||
const searchQuery = ref('')
|
||||
const searchQuery = ref(cartStore.addressSearchQuery)
|
||||
const showModal = ref(false)
|
||||
const isEditing = ref(false)
|
||||
const editingAddressId = ref<number | null>(null)
|
||||
const formData = ref({ street: '', zipCode: '', city: '', country: '' })
|
||||
const addressTemplate = ref<AddressFormState | null>(null)
|
||||
const formData = reactive<AddressFormState>({})
|
||||
|
||||
const showDeleteConfirm = ref(false)
|
||||
const addressToDelete = ref<number | null>(null)
|
||||
|
||||
const page = ref(addressStore.currentPage)
|
||||
const paginatedAddresses = computed(() => addressStore.paginatedAddresses)
|
||||
const totalItems = computed(() => addressStore.totalItems)
|
||||
const pageSize = addressStore.pageSize
|
||||
|
||||
watch(page, (newPage) => addressStore.setPage(newPage))
|
||||
watch(searchQuery, (val) => {
|
||||
addressStore.setSearchQuery(val)
|
||||
const page = computed<number>({
|
||||
get: () => cartStore.addressCurrentPage,
|
||||
set: (value: number) => cartStore.setAddressPage(value)
|
||||
})
|
||||
function openCreateModal() {
|
||||
const totalItems = computed(() => cartStore.totalAddressItems)
|
||||
const pageSize = cartStore.addressPageSize
|
||||
const formFieldKeys = computed(() => (addressTemplate.value ? Object.keys(addressTemplate.value) : []))
|
||||
|
||||
watch(searchQuery, (val) => {
|
||||
cartStore.setAddressSearchQuery(val)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
cartStore.fetchAddresses()
|
||||
})
|
||||
|
||||
function clearFormData() {
|
||||
Object.keys(formData).forEach((key) => delete formData[key])
|
||||
}
|
||||
|
||||
function fieldLabel(key: string) {
|
||||
const labels: Record<string, string> = {
|
||||
postal_code: 'Zip Code',
|
||||
post_town: 'City',
|
||||
city: 'City',
|
||||
county: 'County',
|
||||
region: 'Region',
|
||||
voivodeship: 'Region / Voivodeship',
|
||||
street: 'Street',
|
||||
thoroughfare: 'Street',
|
||||
building_no: 'Building No',
|
||||
building_name: 'Building Name',
|
||||
house_number: 'House Number',
|
||||
orientation_number: 'Orientation Number',
|
||||
apartment_no: 'Apartment No',
|
||||
sub_building: 'Sub Building',
|
||||
address_line2: 'Address Line 2',
|
||||
recipient: 'Recipient'
|
||||
}
|
||||
|
||||
return t(labels[key] ?? key.replace(/_/g, ' ').replace(/\b\w/g, (chr) => chr.toUpperCase()))
|
||||
}
|
||||
|
||||
async function openCreateModal() {
|
||||
resetForm()
|
||||
isEditing.value = false
|
||||
|
||||
const template = await cartStore.getAddressTemplate(Number(currentCountry.value?.id) | 2).catch(() => null)
|
||||
if (template) {
|
||||
addressTemplate.value = template
|
||||
clearFormData()
|
||||
Object.assign(formData, template)
|
||||
}
|
||||
|
||||
showModal.value = true
|
||||
}
|
||||
function openEditModal(address: any) {
|
||||
formData.value = {
|
||||
street: address.street,
|
||||
zipCode: address.zipCode,
|
||||
city: address.city,
|
||||
country: address.country
|
||||
|
||||
async function openEditModal(address: any) {
|
||||
currentCountry.value = address.country_id || 1
|
||||
const template = await cartStore.getAddressTemplate(address.country_id | 2).catch(() => null)
|
||||
|
||||
if (template) {
|
||||
addressTemplate.value = template
|
||||
clearFormData()
|
||||
Object.assign(formData, template)
|
||||
}
|
||||
|
||||
if (address.address_info) {
|
||||
formFieldKeys.value.forEach((key) => {
|
||||
formData[key] = address.address_info[key] ?? ''
|
||||
})
|
||||
}
|
||||
|
||||
isEditing.value = true
|
||||
editingAddressId.value = address.id
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
formData.value = { street: '', zipCode: '', city: '', country: '' }
|
||||
clearFormData()
|
||||
editingAddressId.value = null
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
resetForm()
|
||||
}
|
||||
|
||||
function validate() {
|
||||
const errors = []
|
||||
if (!formData.value.street) errors.push({ name: 'street', message: 'Street required' })
|
||||
if (!formData.value.zipCode) errors.push({ name: 'zipCode', message: 'Zip Code required' })
|
||||
if (!formData.value.city) errors.push({ name: 'city', message: 'City required' })
|
||||
if (!formData.value.country) errors.push({ name: 'country', message: 'Country required' })
|
||||
return errors.length ? errors : null
|
||||
const errors: Array<{ name: string; message: string }> = []
|
||||
const optionalFields = new Set(['address_line2'])
|
||||
|
||||
formFieldKeys.value.forEach((key) => {
|
||||
if (!optionalFields.has(key) && !formData[key]?.trim()) {
|
||||
errors.push({ name: key, message: `${fieldLabel(key)} required` })
|
||||
}
|
||||
})
|
||||
|
||||
return errors
|
||||
}
|
||||
function saveAddress() {
|
||||
if (validate()) return
|
||||
|
||||
async function saveAddress() {
|
||||
if (isEditing.value && editingAddressId.value) {
|
||||
addressStore.updateAddress(editingAddressId.value, formData.value)
|
||||
await cartStore.updateAddress(editingAddressId.value, currentCountryId.value, formData)
|
||||
} else {
|
||||
addressStore.addAddress(formData.value)
|
||||
await cartStore.addAddress(currentCountryId.value, formData)
|
||||
}
|
||||
closeModal()
|
||||
}
|
||||
|
||||
function confirmDelete(id: number) {
|
||||
addressToDelete.value = id
|
||||
showDeleteConfirm.value = true
|
||||
}
|
||||
function deleteAddress() {
|
||||
|
||||
async function deleteAddress() {
|
||||
if (addressToDelete.value) {
|
||||
addressStore.deleteAddress(addressToDelete.value)
|
||||
await cartStore.deleteAddress(addressToDelete.value)
|
||||
}
|
||||
showDeleteConfirm.value = false
|
||||
addressToDelete.value = null
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useFetchJson } from '@/composable/useFetchJson'
|
||||
|
||||
export interface CartItem {
|
||||
id: number
|
||||
@@ -18,6 +19,15 @@ export interface DeliveryMethod {
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface Address {
|
||||
id: number
|
||||
country_id: number
|
||||
customer_id: number
|
||||
address_info: Record<string, string>
|
||||
}
|
||||
|
||||
export type AddressTemplate = Record<string, string>
|
||||
|
||||
export const useCartStore = defineStore('cart', () => {
|
||||
const items = ref<CartItem[]>([])
|
||||
const selectedAddressId = ref<number | null>(null)
|
||||
@@ -31,6 +41,122 @@ export const useCartStore = defineStore('cart', () => {
|
||||
{ id: 3, name: 'Priority Delivery', price: 30, description: 'Next business day' }
|
||||
])
|
||||
|
||||
const addresses = ref<Address[]>([])
|
||||
const addressLoading = ref(false)
|
||||
const addressError = ref<string | null>(null)
|
||||
const addressSearchQuery = ref('')
|
||||
const addressCurrentPage = ref(1)
|
||||
const addressPageSize = 20
|
||||
const addressTotalCount = ref(0)
|
||||
|
||||
function transformAddressResponse(address: any): Address {
|
||||
const info = address.address_info || address.addressInfo || {}
|
||||
|
||||
return {
|
||||
id: address.id ?? 0,
|
||||
country_id: address.country_id ?? address.countryId ?? 1,
|
||||
customer_id: address.customer_id ?? address.customerId ?? 0,
|
||||
address_info: info as Record<string, string>
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAddresses() {
|
||||
addressLoading.value = true
|
||||
addressError.value = null
|
||||
|
||||
try {
|
||||
const queryParam = addressSearchQuery.value ? `&query=${encodeURIComponent(addressSearchQuery.value)}` : ''
|
||||
const response = await useFetchJson<Address[]>(`/api/v1/restricted/addresses/retrieve-addresses?page=${addressCurrentPage.value}&elems=${addressPageSize}${queryParam}`)
|
||||
addresses.value = response.items || []
|
||||
addressTotalCount.value = response.count ?? addresses.value.length
|
||||
} catch (error: unknown) {
|
||||
addressError.value = error instanceof Error ? error.message : 'Failed to load addresses'
|
||||
} finally {
|
||||
addressLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function addAddress(countryId: number, formData: AddressTemplate): Promise<Address | null> {
|
||||
addressLoading.value = true
|
||||
addressError.value = null
|
||||
|
||||
try {
|
||||
const response = await useFetchJson<any>(`/api/v1/restricted/addresses/add-new-address?country_id=${countryId}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
|
||||
await fetchAddresses()
|
||||
return transformAddressResponse(response.items ?? response)
|
||||
} catch (error: unknown) {
|
||||
addressError.value = error instanceof Error ? error.message : 'Failed to create address'
|
||||
return null
|
||||
} finally {
|
||||
addressLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function getAddressTemplate(countryId: number): Promise<AddressTemplate> {
|
||||
const response = await useFetchJson<any>(`/api/v1/restricted/addresses/get-template?country_id=${countryId}`)
|
||||
return response.items ?? {}
|
||||
}
|
||||
|
||||
async function updateAddress(id: number, countryId: number, formData: AddressTemplate): Promise<boolean> {
|
||||
addressLoading.value = true
|
||||
addressError.value = null
|
||||
|
||||
try {
|
||||
await useFetchJson<any>(`/api/v1/restricted/addresses/modify-address?country_id=${countryId}&address_id=${id}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
|
||||
await fetchAddresses()
|
||||
return true
|
||||
} catch (error: unknown) {
|
||||
addressError.value = error instanceof Error ? error.message : 'Failed to update address'
|
||||
return false
|
||||
} finally {
|
||||
addressLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteAddress(id: number): Promise<boolean> {
|
||||
addressLoading.value = true
|
||||
addressError.value = null
|
||||
|
||||
try {
|
||||
await useFetchJson<any>(`/api/v1/restricted/addresses/delete-address?address_id=${id}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
|
||||
await fetchAddresses()
|
||||
return true
|
||||
} catch (error: unknown) {
|
||||
addressError.value = error instanceof Error ? error.message : 'Failed to delete address'
|
||||
return false
|
||||
} finally {
|
||||
addressLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const totalAddressItems = computed(() => addressTotalCount.value || addresses.value.length)
|
||||
const totalAddressPages = computed(() => Math.ceil(totalAddressItems.value / addressPageSize))
|
||||
|
||||
const paginatedAddresses = computed(() => addresses.value)
|
||||
|
||||
function setAddressPage(page: number) {
|
||||
addressCurrentPage.value = page
|
||||
return fetchAddresses()
|
||||
}
|
||||
|
||||
function setAddressSearchQuery(query: string) {
|
||||
addressSearchQuery.value = query
|
||||
addressCurrentPage.value = 1
|
||||
return fetchAddresses()
|
||||
}
|
||||
|
||||
|
||||
function initMockData() {
|
||||
items.value = [
|
||||
{ id: 1, productId: 101, name: 'Premium Widget Pro', product_number: 'NC209/7000', image: '/img/product-1.jpg', price: 129.99, quantity: 2 },
|
||||
@@ -124,6 +250,22 @@ export const useCartStore = defineStore('cart', () => {
|
||||
removeItem,
|
||||
clearCart,
|
||||
setSelectedAddress,
|
||||
setDeliveryMethod
|
||||
setDeliveryMethod,
|
||||
addresses,
|
||||
addressLoading,
|
||||
addressError,
|
||||
addressSearchQuery,
|
||||
addressCurrentPage,
|
||||
addressPageSize,
|
||||
paginatedAddresses,
|
||||
totalAddressItems,
|
||||
totalAddressPages,
|
||||
fetchAddresses,
|
||||
addAddress,
|
||||
updateAddress,
|
||||
deleteAddress,
|
||||
setAddressPage,
|
||||
setAddressSearchQuery,
|
||||
getAddressTemplate
|
||||
}
|
||||
})
|
||||
|
||||
1
bruno/b2b_daniel/environments/dev.yml
Normal file
1
bruno/b2b_daniel/environments/dev.yml
Normal file
@@ -0,0 +1 @@
|
||||
name: dev
|
||||
Reference in New Issue
Block a user