fix: page Addresses
This commit is contained in:
@@ -1,118 +1,148 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="p-6 bg-white dark:bg-(--black) min-h-screen font-sans">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-2xl font-bold text-black dark:text-white">
|
||||
{{ t('addresses.title') }}
|
||||
</h1>
|
||||
<UButton @click="showModal = true"
|
||||
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
|
||||
<span class="i-lucide-plus" />
|
||||
{{ t('addresses.addNew') }}
|
||||
<div class="container mx-auto mt-10">
|
||||
<div class="flex flex-col mb-6">
|
||||
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex gap-2 items-center">
|
||||
<UInput v-model="searchQuery" type="text" :placeholder="t('Search address')"
|
||||
class="bg-white dark:bg-gray-800 text-black dark:text-white absolute" />
|
||||
<UIcon name="ic:baseline-search"
|
||||
class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-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)">
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<UInput v-model="searchQuery" type="text" :placeholder="t('addresses.searchPlaceholder')"
|
||||
class="bg-white dark:bg-gray-800 text-black dark:text-white w-[30%]" />
|
||||
</div>
|
||||
<div v-if="paginatedAddresses.length > 0" class="space-y-4">
|
||||
<div v-for="address in paginatedAddresses" :key="address.id"
|
||||
class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800 hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<p class="text-black dark:text-white mt-1">
|
||||
{{ address.street }}
|
||||
</p>
|
||||
<p class="text-black dark:text-white flex gap-2">
|
||||
{{ address.zipCode }}, <span>{{ address.city }}</span>
|
||||
</p>
|
||||
<p class="text-black dark:text-white">{{ address.country }}</p>
|
||||
</div>
|
||||
<div v-else class="text-center py-8 text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</div>
|
||||
|
||||
<div class="mt-6 flex justify-center">
|
||||
<UPagination v-model:page="page" :total="totalItems" :page-size="pageSize" />
|
||||
</div>
|
||||
|
||||
<UModal v-model:open="showModal" :overlay="true" class="max-w-md mx-auto">
|
||||
<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" />
|
||||
</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>
|
||||
</div>
|
||||
<div v-else class="text-center py-12 text-gray-500 dark:text-gray-400">
|
||||
<span class="i-lucide-map-pin text-4xl mb-4 block" />
|
||||
<p class="text-lg">{{ t('addresses.noAddresses') }}</p>
|
||||
<UButton @click="showModal"
|
||||
class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
{{ t('addresses.addFirst') }}
|
||||
</UButton>
|
||||
</div>
|
||||
<form @submit.prevent="saveAddress" class="space-y-4 mt-4">
|
||||
<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" />
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<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" />
|
||||
<UModal v-model:open="showDeleteConfirm" :overlay="true" class="max-w-md mx-auto">
|
||||
<template #content>
|
||||
<div class="p-6 flex flex-col gap-3">
|
||||
<div class="flex flex-col gap-2 justify-center items-center">
|
||||
<p class="flex items-end gap-2 dark:text-white text-black">
|
||||
<UIcon name='f7:exclamationmark-triangle' class="text-[35px] text-red-700" />
|
||||
Confirm Delete
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
{{ t('Are you sure you want to delete this address?') }}</p>
|
||||
</div>
|
||||
<div class="flex justify-center gap-5">
|
||||
<UButton variant="outline" color="neutral" @click="showDeleteConfirm = false"
|
||||
class="dark:text-white text-black">{{ t('Cancel') }}
|
||||
</UButton>
|
||||
<UButton variant="outline" color="neutral" @click="deleteAddress" class="text-red-700">
|
||||
{{ t('Delete') }}</UButton>
|
||||
</div>
|
||||
</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" />
|
||||
</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" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton color="neutral" variant="outline" @click="closeModal">Cancel</UButton>
|
||||
<UButton type="submit" color="primary">Save</UButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAddressStore, type Address, type AddressFormData } from '@/stores/address'
|
||||
import { useAddressStore } from '@/stores/address'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const addressStore = useAddressStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const searchQuery = ref('')
|
||||
const showModal = ref(false)
|
||||
const isEditing = ref(false)
|
||||
const editingAddressId = ref<number | null>(null)
|
||||
const formData = ref({ street: '', zipCode: '', city: '', country: '' })
|
||||
|
||||
const formData = ref<AddressFormData>({
|
||||
street: '',
|
||||
zipCode: '',
|
||||
city: '',
|
||||
country: ''
|
||||
})
|
||||
|
||||
const formErrors = ref<Record<string, string>>({})
|
||||
const searchQuery = ref('')
|
||||
|
||||
let searchTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
watch(searchQuery, (newValue) => {
|
||||
if (searchTimeout) clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(() => {
|
||||
addressStore.setSearchQuery(newValue)
|
||||
}, 300)
|
||||
})
|
||||
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)
|
||||
})
|
||||
|
||||
function openCreateModal() {
|
||||
resetForm()
|
||||
isEditing.value = false
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEditModal(address: any) {
|
||||
formData.value = { ...address }
|
||||
isEditing.value = true
|
||||
editingAddressId.value = address.id
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
formData.value = {
|
||||
street: '',
|
||||
zipCode: '',
|
||||
city: '',
|
||||
country: ''
|
||||
}
|
||||
formErrors.value = {}
|
||||
formData.value = { street: '', zipCode: '', city: '', country: '' }
|
||||
editingAddressId.value = null
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
@@ -120,35 +150,35 @@ function closeModal() {
|
||||
resetForm()
|
||||
}
|
||||
|
||||
function validateForm(): boolean {
|
||||
formErrors.value = {}
|
||||
|
||||
if (!formData.value.street.trim()) {
|
||||
formErrors.value.street = 'Street is required'
|
||||
}
|
||||
if (!formData.value.zipCode.trim()) {
|
||||
formErrors.value.zipCode = 'Zip Code is required'
|
||||
}
|
||||
if (!formData.value.city.trim()) {
|
||||
formErrors.value.city = 'City is required'
|
||||
}
|
||||
if (!formData.value.country.trim()) {
|
||||
formErrors.value.country = 'Country is required'
|
||||
}
|
||||
|
||||
return Object.keys(formErrors.value).length === 0
|
||||
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
|
||||
}
|
||||
|
||||
function saveAddress() {
|
||||
if (!validateForm()) return
|
||||
|
||||
if (validate()) return
|
||||
if (isEditing.value && editingAddressId.value) {
|
||||
(editingAddressId.value, formData.value)
|
||||
addressStore.updateAddress(editingAddressId.value, formData.value)
|
||||
} else {
|
||||
addressStore.addAddress(formData.value)
|
||||
}
|
||||
|
||||
closeModal()
|
||||
}
|
||||
|
||||
</script>
|
||||
function confirmDelete(id: number) {
|
||||
addressToDelete.value = id
|
||||
showDeleteConfirm.value = true
|
||||
}
|
||||
|
||||
function deleteAddress() {
|
||||
if (addressToDelete.value) {
|
||||
addressStore.deleteAddress(addressToDelete.value)
|
||||
}
|
||||
showDeleteConfirm.value = false
|
||||
addressToDelete.value = null
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user