fix: addresses
This commit is contained in:
@@ -1,248 +1,239 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="">
|
<div class="flex flex-col gap-5">
|
||||||
<div class="flex flex-col gap-5 mb-6">
|
<div class="flex justify-between items-center">
|
||||||
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
|
<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">
|
<UButton color="info" @click="openModal()">
|
||||||
<div class="flex gap-2 items-center">
|
<UIcon name="mdi:add-bold" />
|
||||||
<UInput v-model="searchQuery" type="text" :placeholder="t('Search address')"
|
{{ t('Add Address') }}
|
||||||
class="bg-white dark:bg-gray-800 text-black dark:text-white absolute" />
|
</UButton>
|
||||||
<UIcon name="ic:baseline-search"
|
</div>
|
||||||
class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark) relative left-40" />
|
|
||||||
</div>
|
<div v-if="store.loading" class="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||||
<UButton color="info" @click="openCreateModal">
|
{{ t('Loading...') }}
|
||||||
<UIcon name="mdi:add-bold" />
|
</div>
|
||||||
{{ t('Add Address') }}
|
<div v-else-if="store.error" class="text-center py-8 text-red-500">
|
||||||
|
{{ store.error }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="store.addresses.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div v-for="addr in store.addresses" :key="addr.id"
|
||||||
|
class="border border-(--border-light) dark:border-(--border-dark) rounded-md p-4 bg-(--second-light) dark:bg-(--main-dark) flex justify-between">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<p class="font-semibold text-black dark:text-white">{{ addr.address_unparsed.recipient }}</p>
|
||||||
|
<p class="text-sm text-black dark:text-white">
|
||||||
|
{{ addr.address_unparsed.street }} {{ addr.address_unparsed.building_no
|
||||||
|
}}{{ addr.address_unparsed.apartment_no ? '/' + addr.address_unparsed.apartment_no : '' }}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-black dark:text-white">
|
||||||
|
{{ addr.address_unparsed.postal_code }}, {{ addr.address_unparsed.city }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-end justify-between">
|
||||||
|
<UButton size="xs" color="error" variant="ghost" :title="t('Delete')"
|
||||||
|
@click="confirmDelete(addr.id)">
|
||||||
|
<UIcon name="material-symbols:delete" class="text-[18px]" />
|
||||||
|
</UButton>
|
||||||
|
<UButton size="sm" color="neutral" variant="outline" @click="openModal(addr)">
|
||||||
|
{{ t('edit') }}
|
||||||
|
<UIcon name="ic:sharp-edit" class="text-[14px]" />
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<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-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)"
|
|
||||||
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-(--text-sky-light) dark:text-(--text-sky-dark) text-[13px]">
|
|
||||||
{{ t('edit') }}
|
|
||||||
<UIcon name="ic:sharp-edit" class="text-[15px]" />
|
|
||||||
</UButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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="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" color="info" class="cursor-pointer">
|
|
||||||
{{ t('Save') }}
|
|
||||||
</UButton>
|
|
||||||
</div>
|
|
||||||
</UForm>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</UModal>
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
</UModal>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div v-else class="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||||
|
{{ t('No addresses found') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<UModal v-model:open="showModal">
|
||||||
|
<template #header>
|
||||||
|
<h3 class="text-lg font-semibold text-black dark:text-white">
|
||||||
|
{{ editingId ? t('Edit Address') : t('Add Address') }}
|
||||||
|
</h3>
|
||||||
|
</template>
|
||||||
|
<template #body>
|
||||||
|
<div class="flex flex-col gap-5">
|
||||||
|
<USelectMenu v-model="selectedCountry" :items="countries" class="w-full"
|
||||||
|
@update:model-value="onCountryChange" :searchInput="false">
|
||||||
|
<template #default>
|
||||||
|
<div class="flex flex-col items-start leading-tight">
|
||||||
|
<span class="text-xs text-gray-400">{{ t('Country') }}</span>
|
||||||
|
<span v-if="selectedCountry" class="font-medium text-black dark:text-white">
|
||||||
|
{{ selectedCountry.name }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="text-gray-400">{{ t('Select country') }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #item-leading="{ item }">
|
||||||
|
<span class="text-lg mr-1">{{ item.flag }} {{ item.name }}</span>
|
||||||
|
</template>
|
||||||
|
</USelectMenu>
|
||||||
|
|
||||||
|
<div v-if="templateLoading" class="text-center py-4 text-gray-500 dark:text-gray-400">
|
||||||
|
{{ t('Loading...') }}
|
||||||
|
</div>
|
||||||
|
<p v-else-if="!selectedCountry" class="text-center text-sm text-gray-400 dark:text-gray-500">
|
||||||
|
{{ t('Select a country to continue') }}
|
||||||
|
</p>
|
||||||
|
<UForm v-else :validate="validate" :state="formData" @submit="save" class="space-y-4">
|
||||||
|
<UFormField v-for="field in templateKeys" :key="field" :label="fieldLabel(field)" :name="field"
|
||||||
|
:required="!optionalFields.has(field)">
|
||||||
|
<UInput v-model="formData[field]" :placeholder="fieldLabel(field)" class="w-full" />
|
||||||
|
</UFormField>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-2 pt-2">
|
||||||
|
<UButton variant="outline" color="neutral" @click="showModal = false">
|
||||||
|
{{ t('Cancel') }}
|
||||||
|
</UButton>
|
||||||
|
<UButton type="submit" color="info">
|
||||||
|
{{ t('Save') }}
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</UForm>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</UModal>
|
||||||
|
|
||||||
|
<UModal v-model:open="showDeleteConfirm">
|
||||||
|
<template #body>
|
||||||
|
<div class="flex flex-col items-center gap-3 py-2">
|
||||||
|
<UIcon name="f7:exclamationmark-triangle" class="text-[40px] text-red-600" />
|
||||||
|
<p class="font-semibold text-black dark:text-white">{{ t('Confirm Delete') }}</p>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||||
|
{{ t('Are you sure you want to delete this address?') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-center gap-4">
|
||||||
|
<UButton variant="outline" color="neutral" @click="showDeleteConfirm = false">
|
||||||
|
{{ t('Cancel') }}
|
||||||
|
</UButton>
|
||||||
|
<UButton variant="outline" color="error" @click="deleteAddress">
|
||||||
|
{{ t('Delete') }}
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</UModal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, computed, watch, onMounted } from 'vue'
|
import { ref, reactive, computed } from 'vue'
|
||||||
import { useCartStore } from '@/stores/customer/cart'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { currentCountry } from '@/router/langs'
|
import { countries } from '@/router/langs'
|
||||||
|
import { useAddressStore } from '@/stores/customer/address'
|
||||||
|
import type { Country } from '@/types'
|
||||||
|
import type { Address } from '@/stores/customer/address'
|
||||||
|
|
||||||
type AddressFormState = Record<string, string>
|
|
||||||
|
|
||||||
const cartStore = useCartStore()
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const searchQuery = ref(cartStore.addressSearchQuery)
|
const store = useAddressStore()
|
||||||
|
|
||||||
|
// --- Modal state ---
|
||||||
const showModal = ref(false)
|
const showModal = ref(false)
|
||||||
const isEditing = ref(false)
|
const editingId = ref<number | null>(null)
|
||||||
const editingAddressId = ref<number | null>(null)
|
const selectedCountry = ref<Country | null>(null)
|
||||||
const addressTemplate = ref<AddressFormState | null>(null)
|
const templateLoading = ref(false)
|
||||||
const formData = reactive<AddressFormState>({})
|
const template = ref<Record<string, string>>({})
|
||||||
|
const formData = reactive<Record<string, string>>({})
|
||||||
|
|
||||||
|
const templateKeys = computed(() => Object.keys(template.value))
|
||||||
|
const optionalFields = new Set(['address_line2'])
|
||||||
|
|
||||||
|
// --- Delete state ---
|
||||||
const showDeleteConfirm = ref(false)
|
const showDeleteConfirm = ref(false)
|
||||||
const addressToDelete = ref<number | null>(null)
|
const deleteId = ref<number | null>(null)
|
||||||
|
|
||||||
const page = computed<number>({
|
const fieldLabels: Record<string, string> = {
|
||||||
get: () => cartStore.addressCurrentPage,
|
recipient: 'Recipient',
|
||||||
set: (value: number) => cartStore.setAddressPage(value)
|
street: 'Street',
|
||||||
})
|
thoroughfare: 'Street',
|
||||||
const totalItems = computed(() => cartStore.totalAddressItems)
|
building_no: 'Building No',
|
||||||
const pageSize = cartStore.addressPageSize
|
building_name: 'Building Name',
|
||||||
const formFieldKeys = computed(() => (addressTemplate.value ? Object.keys(addressTemplate.value) : []))
|
house_number: 'House Number',
|
||||||
|
orientation_number: 'Orientation Number',
|
||||||
watch(searchQuery, (val) => {
|
apartment_no: 'Apartment No',
|
||||||
cartStore.setAddressSearchQuery(val)
|
sub_building: 'Sub Building',
|
||||||
})
|
postal_code: 'Zip Code',
|
||||||
|
post_town: 'City',
|
||||||
onMounted(() => {
|
city: 'City',
|
||||||
cartStore.fetchAddresses()
|
county: 'County',
|
||||||
})
|
region: 'Region',
|
||||||
|
voivodeship: 'Region / Voivodeship',
|
||||||
function clearFormData() {
|
address_line2: 'Address Line 2'
|
||||||
Object.keys(formData).forEach((key) => delete formData[key])
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function fieldLabel(key: string) {
|
function fieldLabel(key: string) {
|
||||||
const labels: Record<string, string> = {
|
return t(fieldLabels[key] ?? key.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()))
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
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() {
|
|
||||||
clearFormData()
|
|
||||||
editingAddressId.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeModal() {
|
|
||||||
showModal.value = false
|
|
||||||
resetForm()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function validate() {
|
function validate() {
|
||||||
const errors: Array<{ name: string; message: string }> = []
|
return templateKeys.value
|
||||||
const optionalFields = new Set(['address_line2'])
|
.filter((key) => !optionalFields.has(key) && !formData[key]?.trim())
|
||||||
|
.map((key) => ({ name: key, message: t(`${fieldLabel(key)} is required`) }))
|
||||||
formFieldKeys.value.forEach((key) => {
|
|
||||||
if (!optionalFields.has(key) && !formData[key]?.trim()) {
|
|
||||||
errors.push({ name: key, message: `${fieldLabel(key)} required` })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return errors
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function saveAddress() {
|
function applyTemplate(tpl: Record<string, string>, existing?: Record<string, string>) {
|
||||||
if (isEditing.value && editingAddressId.value) {
|
Object.keys(formData).forEach((k) => delete formData[k])
|
||||||
await cartStore.updateAddress(editingAddressId.value, currentCountry.value?.id || 2, formData)
|
Object.keys(tpl).forEach((k) => {
|
||||||
|
formData[k] = existing?.[k] ?? ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function openModal(addr?: Address) {
|
||||||
|
template.value = {}
|
||||||
|
Object.keys(formData).forEach((k) => delete formData[k])
|
||||||
|
|
||||||
|
if (addr) {
|
||||||
|
editingId.value = addr.id
|
||||||
|
selectedCountry.value = countries.find((c) => c.id === addr.country_id) ?? null
|
||||||
|
loadTemplate(addr.country_id, addr.address_unparsed)
|
||||||
} else {
|
} else {
|
||||||
await cartStore.addAddress(currentCountry.value?.id || 2, formData)
|
editingId.value = null
|
||||||
|
selectedCountry.value = null
|
||||||
}
|
}
|
||||||
closeModal()
|
|
||||||
|
showModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onCountryChange(country: Country | null) {
|
||||||
|
if (!country) {
|
||||||
|
template.value = {}
|
||||||
|
Object.keys(formData).forEach((k) => delete formData[k])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await loadTemplate(country.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadTemplate(countryId: number, existing?: Record<string, string>) {
|
||||||
|
templateLoading.value = true
|
||||||
|
try {
|
||||||
|
const tpl = await store.getTemplate(countryId)
|
||||||
|
template.value = tpl
|
||||||
|
applyTemplate(tpl, existing)
|
||||||
|
} finally {
|
||||||
|
templateLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save() {
|
||||||
|
if (!selectedCountry.value) return
|
||||||
|
if (editingId.value) {
|
||||||
|
await store.updateAddress(editingId.value, selectedCountry.value.id, { ...formData })
|
||||||
|
} else {
|
||||||
|
await store.createAddress(selectedCountry.value.id, { ...formData })
|
||||||
|
}
|
||||||
|
showModal.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
function confirmDelete(id: number) {
|
function confirmDelete(id: number) {
|
||||||
addressToDelete.value = id
|
deleteId.value = id
|
||||||
showDeleteConfirm.value = true
|
showDeleteConfirm.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
async function deleteAddress() {
|
async function deleteAddress() {
|
||||||
if (addressToDelete.value) {
|
if (deleteId.value) await store.deleteAddress(deleteId.value)
|
||||||
await cartStore.deleteAddress(addressToDelete.value)
|
|
||||||
}
|
|
||||||
showDeleteConfirm.value = false
|
showDeleteConfirm.value = false
|
||||||
addressToDelete.value = null
|
deleteId.value = null
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
|
store.fetchAddresses()
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -1,69 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col gap-5 md:gap-10">
|
<div class="flex flex-col gap-5 md:gap-10">
|
||||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
|
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Carts') }}</h1>
|
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Carts') }}</h1>
|
||||||
<div class="flex gap-3">
|
<div class="flex gap-3">
|
||||||
<UButton color="primary" @click="showCreateModal = true"
|
<UButton color="primary" @click="showCreateModal = true"
|
||||||
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
|
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:plus" class="mr-1" />
|
<UIcon name="mdi:plus" class="mr-1" />
|
||||||
{{ t('New Cart') }}
|
{{ t('New Cart') }}
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full">
|
|
||||||
<div
|
|
||||||
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
|
|
||||||
<h2
|
|
||||||
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
|
|
||||||
{{ t('Your Carts') }}
|
|
||||||
</h2>
|
|
||||||
<div v-if="cartStore.carts?.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
|
|
||||||
<div v-for="cart in cartStore.carts" :key="cart.cart_id" @click="cartStore.setActiveCart(cart.cart_id)"
|
|
||||||
class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
|
|
||||||
? 'bg-blue-50 dark:bg-blue-900/20'
|
|
||||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
|
|
||||||
<div class="flex-1 min-w-0">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
|
|
||||||
<p class="text-black dark:text-white font-medium truncate cursor-pointer" @click="openCart(cart)">{{
|
|
||||||
cart.name }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
|
|
||||||
@change="toggleCart(cart.cart_id)" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="p-8 text-center">
|
|
||||||
<UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<UModal v-model:open="showCreateModal">
|
<div class="w-full">
|
||||||
<template #header>
|
<div
|
||||||
<h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
|
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
|
||||||
</template>
|
<h2
|
||||||
<template #body>
|
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
|
||||||
<div class="flex flex-col gap-4">
|
{{ t('Your Carts') }}
|
||||||
<UInput v-model="newCartName" :placeholder="t('Cart name')"
|
</h2>
|
||||||
class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
|
<div v-if="cartStore.carts?.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
|
||||||
|
<div v-for="cart in cartStore.carts" :key="cart.cart_id" @click="cartStore.setActiveCart(cart.cart_id)"
|
||||||
|
class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
|
||||||
|
? 'bg-blue-50 dark:bg-blue-900/20'
|
||||||
|
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
|
||||||
|
<p class="text-black dark:text-white font-medium truncate cursor-pointer" @click="openCart(cart)">{{
|
||||||
|
cart.name }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
|
||||||
|
@change="toggleCart(cart.cart_id)" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div v-else class="p-8 text-center">
|
||||||
<template #footer>
|
<UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
|
||||||
<div class="flex justify-end gap-2">
|
<p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
|
||||||
<UButton variant="outline" color="neutral" @click="showCreateModal = false">
|
|
||||||
{{ t('Cancel') }}
|
|
||||||
</UButton>
|
|
||||||
<UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
|
|
||||||
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
|
|
||||||
{{ t('Create') }}
|
|
||||||
</UButton>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</UModal>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<UModal v-model:open="showCreateModal">
|
||||||
|
<template #header>
|
||||||
|
<h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
|
||||||
|
</template>
|
||||||
|
<template #body>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<UInput v-model="newCartName" :placeholder="t('Cart name')"
|
||||||
|
class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-end gap-2">
|
||||||
|
<UButton variant="outline" color="neutral" @click="showCreateModal = false">
|
||||||
|
{{ t('Cancel') }}
|
||||||
|
</UButton>
|
||||||
|
<UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
|
||||||
|
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
|
||||||
|
{{ t('Create') }}
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</UModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
@@ -54,7 +54,6 @@ const locale = computed({
|
|||||||
const pathParts = currentPath.split('/').filter(Boolean)
|
const pathParts = currentPath.split('/').filter(Boolean)
|
||||||
|
|
||||||
cookie.setCookie('lang_id', `${langs.find((x) => x.iso_code == value)?.id}`, { days: 60, secure: true, sameSite: 'Lax' })
|
cookie.setCookie('lang_id', `${langs.find((x) => x.iso_code == value)?.id}`, { days: 60, secure: true, sameSite: 'Lax' })
|
||||||
|
|
||||||
if (pathParts.length > 0) {
|
if (pathParts.length > 0) {
|
||||||
const isLocale = langs.some((l) => l.lang_code === pathParts[0])
|
const isLocale = langs.some((l) => l.lang_code === pathParts[0])
|
||||||
if (isLocale) {
|
if (isLocale) {
|
||||||
|
|||||||
@@ -205,8 +205,7 @@ const menu = ref<TopMenuItem[] | null>(null)
|
|||||||
async function getTopMenu() {
|
async function getTopMenu() {
|
||||||
try {
|
try {
|
||||||
const { items } = await useFetchJson<TopMenuItem[]>('/api/v1/restricted/menu/get-top-menu')
|
const { items } = await useFetchJson<TopMenuItem[]>('/api/v1/restricted/menu/get-top-menu')
|
||||||
|
menu.value = items[0]?.children || []
|
||||||
menu.value = items
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -103,8 +103,6 @@ async function setRoutes() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(router);
|
|
||||||
// await router.replace(router.currentRoute.value.fullPath)
|
// await router.replace(router.currentRoute.value.fullPath)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -12,10 +12,7 @@ export const currentCountry = ref<Country>()
|
|||||||
const defLang = ref<Language>()
|
const defLang = ref<Language>()
|
||||||
const defCountry = ref<Country>()
|
const defCountry = ref<Country>()
|
||||||
const cookie = useCookie()
|
const cookie = useCookie()
|
||||||
// Get available language codes for route matching
|
|
||||||
// export const availableLocales = computed(() => langs.map((l) => l.lang_code))
|
|
||||||
|
|
||||||
// Initialize languages from API
|
|
||||||
export async function initLangs() {
|
export async function initLangs() {
|
||||||
try {
|
try {
|
||||||
const { items } = await useFetchJson<Language[]>('/api/v1/langs')
|
const { items } = await useFetchJson<Language[]>('/api/v1/langs')
|
||||||
@@ -33,8 +30,6 @@ export async function initLangs() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize country/currency from API
|
|
||||||
|
|
||||||
export async function initCountryCurrency() {
|
export async function initCountryCurrency() {
|
||||||
try {
|
try {
|
||||||
const { items } = await useFetchJson<Country[]>('/api/v1/restricted/langs-and-countries/get-countries')
|
const { items } = await useFetchJson<Country[]>('/api/v1/restricted/langs-and-countries/get-countries')
|
||||||
@@ -43,13 +38,10 @@ export async function initCountryCurrency() {
|
|||||||
let idfromcookie = null
|
let idfromcookie = null
|
||||||
const cc = cookie.getCookie('country_id')
|
const cc = cookie.getCookie('country_id')
|
||||||
if (cc) {
|
if (cc) {
|
||||||
idfromcookie = langs.find((x) => x.id == parseInt(cc))
|
idfromcookie = countries.find((x) => x.id == parseInt(cc))
|
||||||
}
|
}
|
||||||
defCountry.value = items.find((x) => x.id === defLang.value?.id)
|
defCountry.value = items.find((x) => x.id === defLang.value?.id)
|
||||||
currentCountry.value = idfromcookie ?? defCountry.value
|
currentCountry.value = idfromcookie ?? defCountry.value
|
||||||
console.log(defCountry.value);
|
|
||||||
console.log(currentCountry.value);
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch languages:', error)
|
console.error('Failed to fetch languages:', error)
|
||||||
}
|
}
|
||||||
@@ -60,7 +52,6 @@ export async function switchLocalization() {
|
|||||||
await useFetchJson('/api/v1/public/auth/update-choice', {
|
await useFetchJson('/api/v1/public/auth/update-choice', {
|
||||||
method: 'POST'
|
method: 'POST'
|
||||||
})
|
})
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,231 +1,58 @@
|
|||||||
import { useFetchJson } from '@/composable/useFetchJson'
|
import { useFetchJson } from '@/composable/useFetchJson'
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
import { ref, computed } from 'vue'
|
import { ref } from 'vue'
|
||||||
import type { AddressTemplate } from './cart'
|
|
||||||
|
|
||||||
export interface AddressFormData {
|
|
||||||
street: string
|
|
||||||
zipCode: string
|
|
||||||
city: string
|
|
||||||
country: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Address {
|
export interface Address {
|
||||||
id: number
|
id: number
|
||||||
street: string
|
country_id: number
|
||||||
zipCode: string
|
address_unparsed: Record<string, string>
|
||||||
city: string
|
|
||||||
country: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useAddressStore = defineStore('address', () => {
|
export const useAddressStore = defineStore('address', () => {
|
||||||
|
const addresses = ref<Address[]>([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const error = ref<string | null>(null)
|
const error = ref<string | null>(null)
|
||||||
|
|
||||||
const currentPage = ref(1)
|
|
||||||
const pageSize = 20
|
|
||||||
|
|
||||||
const searchQuery = ref('')
|
|
||||||
|
|
||||||
function initMockData() {
|
|
||||||
addresses.value = [
|
|
||||||
{ id: 1, street: 'Main Street 123', zipCode: '10-001', city: 'New York', country: 'United States' },
|
|
||||||
{ id: 2, street: 'Oak Avenue 123', zipCode: '90-001', city: 'Los Angeles', country: 'United States' },
|
|
||||||
{ id: 3, street: 'Pine Road 123', zipCode: '60-601', city: 'Chicago', country: 'United States' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredAddresses = computed(() => {
|
|
||||||
if (!searchQuery.value) return addresses.value
|
|
||||||
|
|
||||||
const query = searchQuery.value.toLowerCase()
|
|
||||||
|
|
||||||
return addresses.value.filter(addr =>
|
|
||||||
addr.street.toLowerCase().includes(query) ||
|
|
||||||
addr.city.toLowerCase().includes(query) ||
|
|
||||||
addr.country.toLowerCase().includes(query) ||
|
|
||||||
addr.zipCode.toLowerCase().includes(query)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
const totalItems = computed(() => filteredAddresses.value.length)
|
|
||||||
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize))
|
|
||||||
|
|
||||||
function getAddressById(id: number) {
|
|
||||||
return addresses.value.find(addr => addr.id === id)
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalize(data: AddressFormData): AddressFormData {
|
|
||||||
return {
|
|
||||||
street: data.street.trim(),
|
|
||||||
zipCode: data.zipCode.trim(),
|
|
||||||
city: data.city.trim(),
|
|
||||||
country: data.country.trim()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateId(): number {
|
|
||||||
return Math.max(0, ...addresses.value.map(a => a.id)) + 1
|
|
||||||
}
|
|
||||||
|
|
||||||
function setPage(page: number) {
|
|
||||||
currentPage.value = page
|
|
||||||
}
|
|
||||||
|
|
||||||
function setSearchQuery(query: string) {
|
|
||||||
searchQuery.value = query
|
|
||||||
currentPage.value = 1
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetPagination() {
|
|
||||||
currentPage.value = 1
|
|
||||||
}
|
|
||||||
|
|
||||||
initMockData()
|
|
||||||
|
|
||||||
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() {
|
async function fetchAddresses() {
|
||||||
addressLoading.value = true
|
loading.value = true
|
||||||
addressError.value = null
|
error.value = null
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const queryParam = addressSearchQuery.value ? `&query=${encodeURIComponent(addressSearchQuery.value)}` : ''
|
const res = await useFetchJson<Address[]>('/api/v1/restricted/addresses/retrieve-addresses')
|
||||||
const response = await useFetchJson<Address[]>(`/api/v1/restricted/addresses/retrieve-addresses?page=${addressCurrentPage.value}&elems=${addressPageSize}${queryParam}`)
|
addresses.value = res.items ?? []
|
||||||
addresses.value = response.items || []
|
} catch (e: unknown) {
|
||||||
addressTotalCount.value = response.count ?? addresses.value.length
|
error.value = e instanceof Error ? e.message : 'Failed to load addresses'
|
||||||
} catch (error: unknown) {
|
|
||||||
addressError.value = error instanceof Error ? error.message : 'Failed to load addresses'
|
|
||||||
} finally {
|
} finally {
|
||||||
addressLoading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function addAddress(countryId: number, formData: AddressTemplate): Promise<Address | null> {
|
async function deleteAddress(id: number) {
|
||||||
addressLoading.value = true
|
await useFetchJson(`/api/v1/restricted/addresses/delete-address?address_id=${id}`, { method: 'DELETE' })
|
||||||
addressError.value = null
|
addresses.value = addresses.value.filter((a) => a.id !== id)
|
||||||
|
|
||||||
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> {
|
async function getTemplate(countryId: number): Promise<Record<string, string>> {
|
||||||
const response = await useFetchJson<any>(`/api/v1/restricted/addresses/get-template?country_id=${countryId}`)
|
const res = await useFetchJson<Record<string, string>>(
|
||||||
return response.items ?? {}
|
`/api/v1/restricted/addresses/get-template?country_id=${countryId}`
|
||||||
|
)
|
||||||
|
return res.items ?? {}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateAddress(id: number, countryId: number, formData: AddressTemplate): Promise<boolean> {
|
async function createAddress(countryId: number, data: Record<string, string>) {
|
||||||
addressLoading.value = true
|
await useFetchJson(`/api/v1/restricted/addresses/add-new-address?country_id=${countryId}`, {
|
||||||
addressError.value = null
|
method: 'POST',
|
||||||
|
body: JSON.stringify(data)
|
||||||
try {
|
})
|
||||||
await useFetchJson<any>(`/api/v1/restricted/addresses/modify-address?country_id=${countryId}&address_id=${id}`, {
|
await fetchAddresses()
|
||||||
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> {
|
async function updateAddress(id: number, countryId: number, data: Record<string, string>) {
|
||||||
addressLoading.value = true
|
await useFetchJson(`/api/v1/restricted/addresses/modify-address?country_id=${countryId}&address_id=${id}`, {
|
||||||
addressError.value = null
|
method: 'POST',
|
||||||
|
body: JSON.stringify(data)
|
||||||
try {
|
})
|
||||||
await useFetchJson<any>(`/api/v1/restricted/addresses/delete-address?address_id=${id}`, {
|
await fetchAddresses()
|
||||||
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)
|
return { addresses, loading, error, fetchAddresses, deleteAddress, getTemplate, createAddress, updateAddress }
|
||||||
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()
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
addresses,
|
|
||||||
loading,
|
|
||||||
error,
|
|
||||||
currentPage,
|
|
||||||
pageSize,
|
|
||||||
totalItems,
|
|
||||||
totalPages,
|
|
||||||
searchQuery,
|
|
||||||
filteredAddresses,
|
|
||||||
paginatedAddresses,
|
|
||||||
getAddressById,
|
|
||||||
addAddress,
|
|
||||||
updateAddress,
|
|
||||||
deleteAddress,
|
|
||||||
setPage,
|
|
||||||
setSearchQuery,
|
|
||||||
resetPagination,
|
|
||||||
addressLoading,
|
|
||||||
addressError,
|
|
||||||
addressSearchQuery,
|
|
||||||
addressCurrentPage,
|
|
||||||
addressPageSize,
|
|
||||||
totalAddressItems,
|
|
||||||
totalAddressPages,
|
|
||||||
fetchAddresses,
|
|
||||||
setAddressPage,
|
|
||||||
setAddressSearchQuery,
|
|
||||||
getAddressTemplate
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { useFetchJson } from '@/composable/useFetchJson'
|
import { useFetchJson } from '@/composable/useFetchJson'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
export interface Cart {
|
export interface Cart {
|
||||||
id: number
|
id: number
|
||||||
|
|||||||
Reference in New Issue
Block a user