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

Compare commits

base: goc_daniel:574e241c8a10fdcfda13dc56ef045712a59af42f
Branches Tags
goc_daniel:main goc_daniel:expand_orders goc_daniel:translate goc_daniel:front-styles goc_daniel:is_oem goc_daniel:countries_bugfix goc_daniel:expand_carts goc_daniel:small_fixes goc_daniel:orders goc_daniel:update_categories goc_daniel:product-procedures goc_daniel:favorites goc_daniel:addresses goc_daniel:storage goc_daniel:translate_new_field goc_daniel:user_teleport goc_daniel:add_image_link goc_daniel:test goc_daniel:routing goc_daniel:mailisearch
..
compare: goc_daniel:62aafdc11a5e7c4b8f0c9f235ce07811a38389fa
Branches Tags
goc_daniel:main goc_daniel:expand_orders goc_daniel:translate goc_daniel:front-styles goc_daniel:is_oem goc_daniel:countries_bugfix goc_daniel:expand_carts goc_daniel:small_fixes goc_daniel:orders goc_daniel:update_categories goc_daniel:product-procedures goc_daniel:favorites goc_daniel:addresses goc_daniel:storage goc_daniel:translate_new_field goc_daniel:user_teleport goc_daniel:add_image_link goc_daniel:test goc_daniel:routing goc_daniel:mailisearch

6 Commits
574e241c8a ... 62aafdc11a

Author SHA1 Message Date
Arina Yakovenko
62aafdc11a fix: addresses 2026-04-15 16:00:42 +02:00
Arina Yakovenko
5b6ee6d57a Merge remote-tracking branch 'origin/translate' into front-styles 2026-04-15 13:54:24 +02:00
Yakovenko Valeriia
e335c3aa6f fix: cart 2026-04-15 12:42:20 +02:00
Yakovenko Valeriia
c97251c15b Merge branch 'main' of ssh://git.ma-al.com:8822/goc_daniel/b2b into translate 2026-04-15 08:18:08 +02:00
Yakovenko Valeriia
fa85c34794 fix: cart 2026-04-14 15:56:48 +02:00
Yakovenko Valeriia
c59428adaa Merge branch 'main' of ssh://git.ma-al.com:8822/goc_daniel/b2b into translate 2026-04-14 08:56:05 +02:00
20 changed files with 718 additions and 747 deletions
Expand all files Collapse all files

5
bo/components.d.ts vendored
View File

@@ -22,12 +22,16 @@ declare module 'vue' {
FavoriteProducts: typeof import('./src/components/admin/FavoriteProducts.vue')['default'] FavoriteProducts: typeof import('./src/components/admin/FavoriteProducts.vue')['default']
LangSwitch: typeof import('./src/components/inner/LangSwitch.vue')['default'] LangSwitch: typeof import('./src/components/inner/LangSwitch.vue')['default']
PageAddresses: typeof import('./src/components/customer/PageAddresses.vue')['default'] PageAddresses: typeof import('./src/components/customer/PageAddresses.vue')['default']
PageCart: typeof import('./src/components/customer/PageCart.vue')['default']
PageCarts: typeof import('./src/components/customer/PageCarts.vue')['default'] PageCarts: typeof import('./src/components/customer/PageCarts.vue')['default']
PageCArts: typeof import('./src/components/customer/PageCArts.vue')['default']
PageCreateCart: typeof import('./src/components/customer/PageCreateCart.vue')['default']
PageOrders: typeof import('./src/components/customer/PageOrders.vue')['default'] PageOrders: typeof import('./src/components/customer/PageOrders.vue')['default']
PageProduct: typeof import('./src/components/customer/PageProduct.vue')['default'] PageProduct: typeof import('./src/components/customer/PageProduct.vue')['default']
PageProducts: typeof import('./src/components/admin/PageProducts.vue')['default'] PageProducts: typeof import('./src/components/admin/PageProducts.vue')['default']
PageProfileDetails: typeof import('./src/components/customer/PageProfileDetails.vue')['default'] PageProfileDetails: typeof import('./src/components/customer/PageProfileDetails.vue')['default']
PageProfileDetailsAddInfo: typeof import('./src/components/customer/PageProfileDetailsAddInfo.vue')['default'] PageProfileDetailsAddInfo: typeof import('./src/components/customer/PageProfileDetailsAddInfo.vue')['default']
PageSearchProducts: typeof import('./src/components/customer/PageSearchProducts.vue')['default']
PageStatistic: typeof import('./src/components/customer/PageStatistic.vue')['default'] PageStatistic: typeof import('./src/components/customer/PageStatistic.vue')['default']
Pl_PrivacyPolicyView: typeof import('./src/components/terms/pl_PrivacyPolicyView.vue')['default'] Pl_PrivacyPolicyView: typeof import('./src/components/terms/pl_PrivacyPolicyView.vue')['default']
Pl_TermsAndConditionsView: typeof import('./src/components/terms/pl_TermsAndConditionsView.vue')['default'] Pl_TermsAndConditionsView: typeof import('./src/components/terms/pl_TermsAndConditionsView.vue')['default']
@@ -45,6 +49,7 @@ declare module 'vue' {
TopBarLogin: typeof import('./src/components/TopBarLogin.vue')['default'] TopBarLogin: typeof import('./src/components/TopBarLogin.vue')['default']
UAlert: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Alert.vue')['default'] UAlert: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Alert.vue')['default']
UApp: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/App.vue')['default'] UApp: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/App.vue')['default']
UAvatar: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Avatar.vue')['default']
UButton: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Button.vue')['default'] UButton: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Button.vue')['default']
UCard: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Card.vue')['default'] UCard: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Card.vue')['default']
UCheckbox: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Checkbox.vue')['default'] UCheckbox: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Checkbox.vue')['default']

2
bo/src/App.vue
View File

@@ -23,5 +23,3 @@ const layout = computed(() => (route.meta.layout as string) || 'default')
</TooltipProvider> </TooltipProvider>
</Suspense> </Suspense>
</template> </template>

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

@@ -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>

17
bo/src/components/customer/PageCart.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<component :is="Default || 'div'">
<div class="flex flex-col gap-5 md:gap-10">
<h1 class="text-2xl font-bold text-black dark:text-white">
Shopping Cart
</h1>
</div>
</component>
</template>
<script setup lang="ts">
import Default from '@/layouts/default.vue';
import { useCartStore } from '@/stores/customer/cart';
const cartStore =useCartStore()
</script>

266
bo/src/components/customer/PageCarts.vue
View File

@@ -1,201 +1,107 @@
<template> <template>
<div class="flex flex-col gap-5 md:gap-10"> <div class="flex flex-col gap-5 md:gap-10">
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1> <div class="flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex flex-col lg:flex-row gap-5 md:gap-10"> <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Carts') }}</h1>
<div class="flex-1"> <div class="flex gap-3">
<div <UButton color="primary" @click="showCreateModal = true"
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden"> class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
<h2 <UIcon name="mdi:plus" class="mr-1" />
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)"> {{ t('New Cart') }}
{{ t('Selected Products') }} </UButton>
</h2>
<div v-if="cartStore.items.length > 0">
<div v-for="item in cartStore.items" :key="item.id"
class="grid grid-cols-5 items-center p-4 border-b border-(--border-light) dark:border-(--border-dark) w-[100%]">
<div
class="bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
<img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
<UIcon v-else name="mdi:package-variant" class="text-2xl text-gray-400" />
</div>
<p class="text-black dark:text-white text-sm font-medium">{{ item.name }}</p>
<p class="text-black dark:text-white">${{ item.price.toFixed(2) }}</p>
<p class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2)
}}</p>
<div class="flex items-center justify-end gap-10">
<UInputNumber v-model="item.quantity" :min="1"
@update:model-value="(val: number) => cartStore.updateQuantity(item.id, val)" />
<div class="flex justify-center">
<button @click="removeItem(item.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-[20px]" />
</button>
</div>
</div>
</div>
</div>
<div v-else class="p-8 text-center">
<UIcon name="mdi:cart-outline" class="text-6xl text-gray-300 dark:text-gray-600 mb-4" />
<p class="text-gray-500 dark:text-gray-400">{{ t('Your cart is empty') }}</p>
<RouterLink :to="{
name: 'customer-product', params: {
product_id: '51'
}
}" class="inline-block mt-4 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
{{ t('Continue Shopping') }}
</RouterLink>
</div>
</div>
</div>
<div class="lg:w-80">
<div
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6 sticky top-24">
<h2 class="text-lg font-semibold text-black dark:text-white mb-4">{{ t('Order Summary') }}</h2>
<div class="space-y-3 border-b border-(--border-light) dark:border-(--border-dark) pb-4 mb-4">
<div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">{{ t('Products total') }}</span>
<span class="text-black dark:text-white">${{ cartStore.productsTotal.toFixed(2) }}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">{{ t('Shipping') }}</span>
<span class="text-black dark:text-white">
{{ cartStore.shippingCost > 0 ? `$${cartStore.shippingCost.toFixed(2)}` : t('Free') }}
</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">{{ t('VAT') }} ({{ (cartStore.vatRate * 100).toFixed(0)
}}%)</span>
<span class="text-black dark:text-white">${{ cartStore.vatAmount.toFixed(2) }}</span>
</div>
</div>
<div class="flex justify-between mb-6">
<span class="text-black dark:text-white font-semibold text-lg">{{ t('Total') }}</span>
<span class="text-(--text-sky-light) dark:text-(--text-sky-dark) font-bold text-lg">${{
cartStore.orderTotal.toFixed(2) }}</span>
</div>
<div class="flex flex-col gap-3">
<UButton block color="primary" @click="placeOrder" :disabled="!canPlaceOrder"
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light) disabled:opacity-50 disabled:cursor-not-allowed">
{{ t('Place Order') }}
</UButton>
<UButton block variant="outline" color="neutral" @click="cancelOrder"
class="text-black dark:text-white border-(--border-light) dark:border-(--border-dark) hover:bg-gray-100 dark:hover:bg-gray-700">
{{ t('Cancel') }}
</UButton>
</div>
</div>
</div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-10"> </div>
<div class="flex-1">
<div <div class="w-full">
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6"> <div
<h2 class="text-lg font-semibold text-black dark:text-white mb-4">{{ t('Select Delivery Address') }}</h2> class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
<div class="mb-4"> <h2
<UInput v-model="addressSearchQuery" type="text" :placeholder="t('Search address')" class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" /> {{ t('Your Carts') }}
</div> </h2>
<div v-if="addressStore.filteredAddresses.length > 0" class="space-y-3"> <div v-if="cartStore.carts?.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
<label v-for="address in addressStore.filteredAddresses" :key="address.id" <div v-for="cart in cartStore.carts" :key="cart.cart_id" @click="cartStore.setActiveCart(cart.cart_id)"
class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition-colors" :class="cartStore.selectedAddressId === address.id class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20' ? 'bg-blue-50 dark:bg-blue-900/20'
: 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'"> : 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
<input type="radio" :value="address.id" v-model="selectedAddress" <div class="flex-1 min-w-0">
class="mt-1 w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" /> <div class="flex items-center gap-2">
<div class="flex-1"> <p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
<p class="text-black dark:text-white font-medium">{{ address.street }}</p> <p class="text-black dark:text-white font-medium truncate cursor-pointer" @click="openCart(cart)">{{
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.zipCode }}, {{ address.city }}</p> cart.name }}</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.country }}</p> </div>
</div>
</label>
</div>
<div v-else class="text-center py-6">
<UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
<p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
<RouterLink :to="{ name: 'addresses' }"
class="inline-block mt-2 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
{{ t('Add Address') }}
</RouterLink>
</div> </div>
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
@change="toggleCart(cart.cart_id)" />
</div> </div>
</div> </div>
<div class="flex-1"> <div v-else class="p-8 text-center">
<div <UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6"> <p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
<h2 class="text-lg font-semibold text-black dark:text-white mb-4">{{ t('Delivery Method') }}</h2>
<div class="space-y-3">
<label v-for="method in cartStore.deliveryMethods" :key="method.id"
class="flex items-center gap-3 p-4 border rounded-lg cursor-pointer transition-colors" :class="cartStore.selectedDeliveryMethodId === method.id
? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
: 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
<input type="radio" :value="method.id" v-model="selectedDeliveryMethod"
class="w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
<div class="flex-1">
<div class="flex justify-between items-center">
<span class="text-black dark:text-white font-medium">{{ method.name }}</span>
<span class="text-(--text-sky-light) dark:text-(--text-sky-dark) font-medium">
{{ method.price > 0 ? `$${method.price.toFixed(2)}` : t('Free') }}
</span>
</div>
<p class="text-gray-500 dark:text-gray-400 text-sm">{{ method.description }}</p>
</div>
</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </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>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch } from 'vue' import { ref, onMounted } from 'vue'
import { useCartStore } from '@/stores/customer/cart' import { useCartStore } from '@/stores/customer/cart'
import { useAddressStore } from '@/stores/customer/address'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Default from '@/layouts/default.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const cartStore = useCartStore()
const addressStore = useAddressStore()
const { t } = useI18n()
const router = useRouter() const router = useRouter()
const selectedAddress = ref<number | null>(cartStore.selectedAddressId) const cartStore = useCartStore()
const selectedDeliveryMethod = ref<number | null>(cartStore.selectedDeliveryMethodId) const { t } = useI18n()
const addressSearchQuery = ref('')
watch(addressSearchQuery, (val) => { const showCreateModal = ref(false)
addressStore.setSearchQuery(val) const newCartName = ref('')
})
watch(selectedAddress, (newValue) => { async function createCart() {
cartStore.setSelectedAddress(newValue) await cartStore.addNewCart(newCartName.value)
}) newCartName.value = ''
showCreateModal.value = false
watch(selectedDeliveryMethod, (newValue) => {
if (newValue) {
cartStore.setDeliveryMethod(newValue)
}
})
const canPlaceOrder = computed(() => {
return cartStore.items.length > 0 &&
cartStore.selectedAddressId !== null &&
cartStore.selectedDeliveryMethodId !== null
})
function removeItem(itemId: number) {
cartStore.removeItem(itemId)
} }
function placeOrder() {
if (canPlaceOrder.value) { onMounted(() => {
console.log('Placing order...') cartStore.fetchCarts()
alert(t('Order placed successfully!')) })
cartStore.clearCart()
router.push({ name: 'home' })
function openCart(cart) {
router.push({ name: 'customer-cart', params: { id: cart.cart_id } });
}
function toggleCart(cartId: number) {
if (cartStore.activeCartId === cartId) {
cartStore.setActiveCart(null)
} else {
cartStore.setActiveCart(cartId)
} }
} }
</script>
function cancelOrder() {
router.back()
}
</script>

26
bo/src/components/customer/PageProduct.vue
View File

@@ -169,21 +169,21 @@ if (productData.colors.length > 0) {
const route = useRoute() const route = useRoute()
async function toggleFavorite() { // async function toggleFavorite() {
const url = `/api/v1/restricted/product/favorite/${route.params.product_id}` // const url = `/api/v1/restricted/product/favorite/${route.params.product_id}`
try { // try {
if (!productData.is_favorite) { // if (!productData.is_favorite) {
await useFetchJson(url, { method: 'POST' }) // await useFetchJson(url, { method: 'POST' })
} else { // } else {
await useFetchJson(url, { method: 'DELETE' }) // await useFetchJson(url, { method: 'DELETE' })
} // }
productData.is_favorite = !productData.is_favorite // productData.is_favorite = !productData.is_favorite
} catch (e: unknown) { // } catch (e: unknown) {
console.error(e) // console.error(e)
} // }
} // }
</script> </script>
<style scoped> <style scoped>

47
bo/src/components/customer/PageProducts.vue
View File

@@ -48,6 +48,8 @@ import type { TableColumn } from '@nuxt/ui'
import CategoryMenu from '../inner/CategoryMenu.vue' import CategoryMenu from '../inner/CategoryMenu.vue'
import { useCustomerProductStore } from '@/stores/customer/customer-product' import { useCustomerProductStore } from '@/stores/customer/customer-product'
import type { Product } from '@/stores/customer/customer-product' import type { Product } from '@/stores/customer/customer-product'
import { useCartStore } from '@/stores/customer/cart'
import { useToast } from '@nuxt/ui/runtime/composables/useToast.js'
const customerProductStore = useCustomerProductStore() const customerProductStore = useCustomerProductStore()
@@ -307,10 +309,9 @@ const columns: TableColumn<Product>[] = [
cell: ({ row }) => { cell: ({ row }) => {
return h(UButton, { return h(UButton, {
onClick: () => { onClick: () => {
console.log('Clicked', row.original) addToCart(row.original.product_id)
}, },
color: selectedCount.value.product_id !== row.original.product_id ? 'info' : 'primary', color: selectedCount.value.product_id !== row.original.product_id ? 'info' : 'primary',
disabled: selectedCount.value.product_id !== row.original.product_id,
variant: 'solid' variant: 'solid'
}, 'Add to cart') }, 'Add to cart')
}, },
@@ -346,7 +347,7 @@ const columns: TableColumn<Product>[] = [
} }
] ]
const columnsChild: TableColumn<Payment>[] = [ const columnsChild: TableColumn<Product>[] = [
{ {
accessorKey: 'product_id', accessorKey: 'product_id',
header: '', header: '',
@@ -402,7 +403,7 @@ const columnsChild: TableColumn<Payment>[] = [
cell: ({ row }) => { cell: ({ row }) => {
return h(UButton, { return h(UButton, {
onClick: () => { onClick: () => {
console.log('Clicked', row.original) addToCart(row.original.product_id)
}, },
color: selectedCount.value.product_id !== row.original.product_id ? 'info' : 'primary', color: selectedCount.value.product_id !== row.original.product_id ? 'info' : 'primary',
disabled: selectedCount.value.product_id !== row.original.product_id, disabled: selectedCount.value.product_id !== row.original.product_id,
@@ -423,9 +424,47 @@ const columnsChild: TableColumn<Payment>[] = [
variant: 'soft' variant: 'soft'
}, () => 'Show product') }, () => 'Show product')
}, },
},
{
accessorKey: 'counta',
header: '',
cell: ({ row }) => {
return h(UIcon, {
onClick: () => customerProductStore.toggleFavorite(row.original),
class: [
'cursor-pointer text-[20px] transition-transform duration-200 hover:scale-125',
row.original.is_favorite ? 'text-red-500' : 'text-blue-500'
],
name: 'material-symbols:favorite',
variant: 'soft',
})
}
} }
] ]
const cartStore = useCartStore()
const toast = useToast()
async function addToCart(product_id: number) {
if (!cartStore.activeCartId) {
toast.add({
title: "No cart selected",
description: "Please select a cart before adding products",
icon: "i-heroicons-exclamation-triangle",
duration: 5000
})
return
}
const count = selectedCount.value.count || 1
await cartStore.addProduct(product_id, count)
toast.add({
title: "Product added to cart",
description: `Quantity: ${count}`,
icon: "i-heroicons-check-circle",
duration: 5000
})
}
watch( watch(
() => route.query, () => route.query,
() => { () => {

180
bo/src/components/customer/PageSearchProducts.vue Normal file
View File

@@ -0,0 +1,180 @@
<template>
<component :is="Default">
<div class="pt-70! flex flex-col items-center justify-center bg-gray-50 dark:bg-(--main-dark)">
<h1 class="text-6xl font-bold text-black dark:text-white mb-14">Search Products</h1>
<div class="w-full max-w-4xl">
<UInput icon="i-lucide-search" type="text" placeholder="Type product name or ID..."
v-model="searchQuery" class="w-full!" :ui="{ base: 'py-4! rounded-full!' }" />
</div>
<div v-if="products.length" class="mt-6">
<UTable :data="products" :columns="columns" class="flex-1 w-full" :ui="{
root: 'max-w-100wv overflow-auto!'
}" />
</div>
<p v-else-if="searchQuery">
No products found
</p>
</div>
</component>
</template>
<script setup lang="ts">
import { useFetchJson } from '@/composable/useFetchJson';
import Default from '@/layouts/default.vue';
import { watch } from 'vue';
import { ref } from 'vue';
const searchQuery = ref('')
const products = ref([])
const loading = ref(false)
const error = ref<string | null>(null)
async function fetchProducts() {
loading.value = true
error.value = null
try {
const query = searchQuery.value
? `name=~${searchQuery.value}`
: ''
const result = await useFetchJson(
`/api/v1/restricted/list-products/get-listing?${query}`
)
products.value = result.items || result
} catch (e) {
error.value = 'Failed to load products'
} finally {
loading.value = false
}
}
watch(searchQuery, () => {
fetchProducts()
})
import errorImg from '@/assets/error.svg'
import type { TableColumn } from '@nuxt/ui';
import type { Product } from '@/types/product';
// const columns: TableColumn<Product>[] = [
// {
// accessorKey: 'product_id',
// header: ({ column }) => {
// return h('div', { class: 'flex flex-col gap-1' }, [
// h('div', {
// class: 'flex items-center gap-2 cursor-pointer',
// onClick: () => {
// sortField.value = ['product_id', 'asc']
// }
// }, [
// h('span', 'ID'),
// h(UIcon, {
// name: getIcon('product_id')
// })
// ]),
// h(UInput, {
// placeholder: 'Search...',
// modelValue: filters.value[column.id] ?? '',
// 'onUpdate:modelValue': (val: string) => {
// updateFilter(column.id, val)
// },
// size: 'xs'
// })
// ])
// },
// // header: '#',
// cell: ({ row }) => `#${row.getValue('product_id') as number}`
// },
// {
// accessorKey: 'image_link',
// header: 'Image',
// cell: ({ row }) => {
// return h('img', {
// src: row.getValue('image_link') as string,
// style: 'width:40px;height:40px;object-fit:cover;',
// onError: (e: Event) => {
// const target = e.target as HTMLImageElement
// target.src = errorImg
// }
// })
// },
// },
// {
// accessorKey: 'name',
// header: ({ column }) => {
// return h('div', { class: 'flex flex-col gap-1' }, [
// h('div', {
// class: 'flex items-center gap-2 cursor-pointer',
// onClick: () => {
// sortField.value = ['name', 'asc']
// }
// }, [
// h('span', 'Name'),
// h(UIcon, {
// name: getIcon('name')
// })
// ]),
// h(UInput, {
// placeholder: 'Search...',
// modelValue: filters.value[column.id] ?? '',
// 'onUpdate:modelValue': (val: string) => {
// updateFilter(column.id, val)
// },
// size: 'xs'
// })
// ])
// },
// cell: ({ row }) => row.getValue('name') as string,
// filterFn: (row, columnId, value) => {
// const name = row.getValue(columnId) as string
// return name.toLowerCase().includes(value.toLowerCase())
// }
// },
// {
// accessorKey: 'quantity',
// header: ({ }) => {
// return h('div', { class: 'flex flex-col gap-1' }, [
// h('div', {
// class: 'flex items-center gap-2 cursor-pointer',
// onClick: () => {
// sortField.value = ['quantity', 'asc']
// }
// }, [
// h('span', 'In stock'),
// h(UIcon, {
// name: getIcon('quantity')
// })
// ]),
// ])
// },
// cell: ({ row }) => row.getValue('quantity') as number
// },
// {
// accessorKey: 'count',
// header: '',
// cell: ({ row }) => {
// return h(UButton, {
// onClick: () => {
// goToProduct(row.original.product_id, row.original.link_rewrite)
// },
// class: 'cursor-pointer',
// color: 'info',
// variant: 'soft'
// }, () => 'Show product')
// },
// }
// ]
</script>
<style scoped>
input::placeholder {
color: #9ca3af;
}
</style>

1
bo/src/components/inner/LangSwitch.vue
View File

@@ -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) {

43
bo/src/layouts/default.vue
View File

@@ -34,10 +34,33 @@
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<div class="flex h-(--ui-header-height) shrink-0 items-center justify-between px-4 border-b border-default"> <div class="flex h-(--ui-header-height) shrink-0 items-center justify-between px-4 border-b border-default">
<div class="flex items-center gap-2"> <div class="flex items-center gap-5">
<UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar" <div class="flex items-center gap-2">
@click="open = !open" /> <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
<span class="text-[20px] font-medium">{{ pageTitle }}</span> @click="open = !open" />
<span class="text-[20px] font-medium">{{ pageTitle }}</span>
</div>
<div>
<div v-if="cartStore.activeCart"
class="flex items-center gap-2 p-1 rounded-md bg-gray-100 dark:bg-gray-800">
<UIcon name="i-lucide-shopping-cart" />
<div class="flex gap-2">
<p class="text-sm font-medium">
{{ cartStore.activeCart.name }}-
<span class="text-xs text-gray-400">
ID: {{ cartStore.activeCart.cart_id }}
</span>
</p>
</div>
</div>
<span v-else class="text-sm text-red-400 flex gap-1 items-center">
<UIcon name="i-lucide-shopping-cart" />
No cart selected
</span>
</div>
</div> </div>
<div class="hidden md:flex items-center gap-12"> <div class="hidden md:flex items-center gap-12">
@@ -50,7 +73,7 @@
<button v-if="authStore.isAuthenticated" @click="authStore.logout()" <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap"> class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
{{ $t('general.logout') }} {{ $t('general.logout') }}
<UIcon name="ic:baseline-logout" class="text-red-700 dark:text-red-500"/> <UIcon name="ic:baseline-logout" class="text-red-700 dark:text-red-500" />
</button> </button>
</div> </div>
</div> </div>
@@ -172,6 +195,7 @@ import LangSwitch from '@/components/inner/LangSwitch.vue'
import ThemeSwitch from '@/components/inner/ThemeSwitch.vue' import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
import type { LabelTrans, TopMenuItem } from '@/types' import type { LabelTrans, TopMenuItem } from '@/types'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/customer/cart'
const router = useRouter() const router = useRouter()
@@ -181,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)
} }
@@ -297,5 +320,11 @@ const userItems = computed<DropdownMenuItem[][]>(() => [
] ]
]) ])
const cartStore = useCartStore()
onMounted(() => {
cartStore.initCart()
})
defineShortcuts(extractShortcuts(teamsItems.value)) defineShortcuts(extractShortcuts(teamsItems.value))
</script> </script>

2
bo/src/router/index.ts
View File

@@ -103,8 +103,6 @@ async function setRoutes() {
} }
}) })
} }
console.log(router);
// await router.replace(router.currentRoute.value.fullPath) // await router.replace(router.currentRoute.value.fullPath)
} }

11
bo/src/router/langs.ts
View File

@@ -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)
} }

239
bo/src/stores/customer/address.ts
View File

@@ -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
}
})

174
bo/src/stores/customer/cart.ts
View File

@@ -1,22 +1,12 @@
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 CartItem { export interface Cart {
id: number
productId: number
name: string
image: string
price: number
quantity: number
product_number: string
}
export interface DeliveryMethod {
id: number id: number
name: string name: string
price: number items: any[]
description: string
} }
export interface Address { export interface Address {
@@ -29,111 +19,97 @@ export interface Address {
export type AddressTemplate = Record<string, string> export type AddressTemplate = Record<string, string>
export const useCartStore = defineStore('cart', () => { export const useCartStore = defineStore('cart', () => {
const items = ref<CartItem[]>([]) const carts = ref<Cart[]>([])
const selectedAddressId = ref<number | null>(null) const activeCartId = ref<number | null>(null)
const selectedDeliveryMethodId = ref<number | null>(null) const error = ref<string | null>(null)
const shippingCost = ref(0)
const vatRate = ref(0.23) // 23% VAT
const currentPage = ref(1)
const deliveryMethods = ref<DeliveryMethod[]>([
{ id: 1, name: 'Standard Delivery', price: 0, description: '5-7 business days' },
{ id: 2, name: 'Express Delivery', price: 15, description: '2-3 business days' },
{ id: 3, name: 'Priority Delivery', price: 30, description: 'Next business day' }
])
function initMockData() { async function fetchCarts() {
items.value = [ try {
{ id: 1, productId: 101, name: 'Premium Widget Pro', product_number: 'NC209/7000', image: '/img/product-1.jpg', price: 129.99, quantity: 2 }, const res = await useFetchJson<ApiResponse>(
{ id: 2, productId: 102, name: 'Ultra Gadget X', product_number: 'NC234/6453', image: '/img/product-2.jpg', price: 89.50, quantity: 1 }, `/api/v1/restricted/carts/retrieve-carts-info`
{ id: 3, productId: 103, name: 'Mega Tool Set', product_number: 'NC324/9030', image: '/img/product-3.jpg', price: 249.00, quantity: 3 } )
]
carts.value = res.items
} catch (e: any) {
error.value = e?.message ?? 'Error loading carts'
}
} }
const productsTotal = computed(() => { async function addNewCart(name: string) {
return items.value.reduce((sum, item) => sum + (item.price * item.quantity), 0) try {
}) error.value = null
const vatAmount = computed(() => { const url = `/api/v1/restricted/carts/add-new-cart`
return productsTotal.value * vatRate.value const response = await useFetchJson<ApiResponse>(url)
})
const orderTotal = computed(() => { const newCart: Cart = {
return productsTotal.value + shippingCost.value + vatAmount.value id: response.items.cart_id,
}) name: response.items.name,
items: []
const itemCount = computed(() => {
return items.value.reduce((sum, item) => sum + item.quantity, 0)
})
function updateQuantity(itemId: number, quantity: number) {
const item = items.value.find(i => i.id === itemId)
if (item) {
if (quantity <= 0) {
removeItem(itemId)
} else {
item.quantity = quantity
} }
carts.value.push(newCart)
activeCartId.value = newCart.id
return newCart
} catch (e: any) {
error.value = e?.message ?? 'Error creating cart'
} }
} }
function deleteProduct(id: number): boolean { const route = useRoute()
const index = items.value.findIndex(a => a.id === id) const amount = ref<number>(1);
if (index === -1) return false const errorMessage = ref('');
items.value.splice(index, 1) async function addProduct(product_id: number, count: number) {
resetProductPagination() if (!activeCartId.value) {
errorMessage.value = 'No active cart selected'
return
}
return true try {
} const res = await useFetchJson<ApiResponse>(
`/api/v1/restricted/carts/add-product-to-cart?cart_id=${activeCartId.value}&product_id=${product_id}&amount=${count}`
)
function resetProductPagination() { console.log('fsdfsdfdsfdsfs', res)
currentPage.value = 1 } catch (e: any) {
} errorMessage.value = e?.message ?? 'Error adding product'
function removeItem(itemId: number) {
const index = items.value.findIndex(i => i.id === itemId)
if (index !== -1) {
items.value.splice(index, 1)
} }
} }
function clearCart() { function setActiveCart(id: number | null) {
items.value = [] activeCartId.value = id
selectedAddressId.value = null
selectedDeliveryMethodId.value = null
shippingCost.value = 0
}
function setSelectedAddress(addressId: number | null) { if (id) {
selectedAddressId.value = addressId localStorage.setItem('activeCartId', String(id))
} } else {
localStorage.removeItem('activeCartId')
function setDeliveryMethod(methodId: number) {
selectedDeliveryMethodId.value = methodId
const method = deliveryMethods.value.find(m => m.id === methodId)
if (method) {
shippingCost.value = method.price
} }
} }
initMockData() function initCart() {
const saved = localStorage.getItem('activeCartId')
if (saved) {
activeCartId.value = Number(saved)
}
}
const activeCart = computed(() => {
return carts.value.find(c => c.cart_id === activeCartId.value)
})
return { return {
items, carts,
selectedAddressId, activeCartId,
selectedDeliveryMethodId, error,
shippingCost, errorMessage,
vatRate, activeCart,
deliveryMethods, setActiveCart,
productsTotal, addProduct,
vatAmount, fetchCarts,
orderTotal, addNewCart,
itemCount, initCart,
deleteProduct,
updateQuantity,
removeItem,
clearCart,
setSelectedAddress,
setDeliveryMethod
} }
}) })

21
bo/src/stores/customer/customer-product.ts
View File

@@ -11,6 +11,7 @@ export interface Product {
productDetails?: string productDetails?: string
product_id: number product_id: number
is_favorite?: boolean is_favorite?: boolean
quantity: number
} }
export interface ProductResponse { export interface ProductResponse {
@@ -56,6 +57,11 @@ export const useCustomerProductStore = defineStore('customer-product', () => {
} }
} }
function updateFavoriteState(product_id: number, value: boolean) {
const p = productsList.value.find(p => p.product_id === product_id)
if (p) p.is_favorite = value
}
async function toggleFavorite(product: Product) { async function toggleFavorite(product: Product) {
const productId = product.product_id const productId = product.product_id
const isFavorite = product.is_favorite const isFavorite = product.is_favorite
@@ -64,11 +70,19 @@ export const useCustomerProductStore = defineStore('customer-product', () => {
try { try {
if (!isFavorite) { if (!isFavorite) {
await useFetchJson(url, { method: 'POST' }) await useFetchJson(url, {
method: 'POST',
body: JSON.stringify({
id: productId
}),
})
} else { } else {
await useFetchJson(url, { method: 'DELETE' }) await useFetchJson(url, {
method: 'DELETE',
})
} }
product.is_favorite = !isFavorite
product.is_favorite = !product.is_favorite
} catch (e: unknown) { } catch (e: unknown) {
error.value = e instanceof Error ? e.message : 'Failed to update favorite' error.value = e instanceof Error ? e.message : 'Failed to update favorite'
} }
@@ -77,6 +91,7 @@ export const useCustomerProductStore = defineStore('customer-product', () => {
return { return {
fetchProductList, fetchProductList,
toggleFavorite, toggleFavorite,
updateFavoriteState,
productsList, productsList,
total, total,
loading, loading,

2
bruno/b2b_daniel/carts/add-product-to-cart (1).yml
View File

@@ -1,7 +1,7 @@
info: info:
name: add-product-to-cart (1) name: add-product-to-cart (1)
type: http type: http
seq: 1 seq: 2
http: http:
method: GET method: GET

2
bruno/b2b_daniel/carts/add-product-to-cart.yml
View File

@@ -1,7 +1,7 @@
info: info:
name: add-product-to-cart name: add-product-to-cart
type: http type: http
seq: 14 seq: 6
http: http:
method: GET method: GET

2
bruno/b2b_daniel/carts/change-cart-name.yml
View File

@@ -1,7 +1,7 @@
info: info:
name: change-cart-name name: change-cart-name
type: http type: http
seq: 1 seq: 3
http: http:
method: GET method: GET

2
bruno/b2b_daniel/carts/retrieve-cart.yml
View File

@@ -1,7 +1,7 @@
info: info:
name: retrieve-cart name: retrieve-cart
type: http type: http
seq: 1 seq: 4
http: http:
method: GET method: GET

2
bruno/b2b_daniel/carts/retrieve-carts-info.yml
View File

@@ -1,7 +1,7 @@
info: info:
name: retrieve-carts-info name: retrieve-carts-info
type: http type: http
seq: 1 seq: 5
http: http:
method: GET method: GET