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

fix: cart

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-04-14 15:56:48 +02:00
parent c59428adaa
commit fa85c34794
12 changed files with 242 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bo/components.d.ts vendored
View File

@@ -23,7 +23,10 @@ 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']

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

@@ -0,0 +1,16 @@
<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';
</script>

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

@@ -1,204 +1,105 @@
<template> <template>
<component :is="Default || 'div'"> <component :is="Default || 'div'">
<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 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> </div>
<p class="text-black dark:text-white text-sm font-medium">{{ item.name }}</p> </div>
<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"> <div class="w-full">
<UInputNumber v-model="item.quantity" :min="1" <div
@update:model-value="(val: number) => cartStore.updateQuantity(item.id, val)" /> class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
<div class="flex justify-center"> <h2
<button @click="removeItem(item.id)" class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
class="p-2 text-red-500 bg-red-100 dark:bg-(--main-dark) rounded transition-colors" {{ t('Your Carts') }}
:title="t('Remove')"> </h2>
<UIcon name="material-symbols:delete" class="text-[20px]" /> <div v-if="cartStore.carts.length > 0"
</button> class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
</div> <div v-for="cart in cartStore.carts" :key="cart.cart_id" @click="openCart(cart)"
class="p-4 cursor-pointer transition-colors flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
? 'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-(--accent-blue-light) dark:border-(--accent-blue-dark)'
: '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">{{
cart.name }}</p>
<UIcon v-if="cartStore.activeCartId === cart.cart_id" name="mdi:check-circle"
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) flex-shrink-0" />
</div>
</div>
<!-- <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
@change="cartStore.setActiveCart(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>
<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>
<div class="lg:w-80">
<div <UModal v-model:open="showCreateModal">
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6 sticky top-24"> <template #header>
<h2 class="text-lg font-semibold text-black dark:text-white mb-4">{{ t('Order Summary') }}</h2> <h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
<div class="space-y-3 border-b border-(--border-light) dark:border-(--border-dark) pb-4 mb-4"> </template>
<div class="flex justify-between"> <template #body>
<span class="text-gray-600 dark:text-gray-400">{{ t('Products total') }}</span> <div class="flex flex-col gap-4">
<span class="text-black dark:text-white">${{ cartStore.productsTotal.toFixed(2) }}</span> <UInput v-model="newCartName" :placeholder="t('Cart name')"
</div> class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
<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 class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-10">
<div class="flex-1">
<div
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6">
<h2 class="text-lg font-semibold text-black dark:text-white mb-4">{{ t('Select Delivery Address') }}</h2>
<div class="mb-4">
<UInput v-model="addressSearchQuery" type="text" :placeholder="t('Search address')"
class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
</div>
<div v-if="addressStore.filteredAddresses.length > 0" class="space-y-3">
<label v-for="address in addressStore.filteredAddresses" :key="address.id"
class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition-colors" :class="cartStore.selectedAddressId === address.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="address.id" v-model="selectedAddress"
class="mt-1 w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
<div class="flex-1">
<p class="text-black dark:text-white font-medium">{{ address.street }}</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.zipCode }}, {{ address.city }}</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.country }}</p>
</div> </div>
</label> </template>
</div> <template #footer>
<div v-else class="text-center py-6"> <div class="flex justify-end gap-2">
<UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" /> <UButton variant="outline" color="neutral" @click="showCreateModal = false">
<p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p> {{ t('Cancel') }}
<RouterLink :to="{ name: 'addresses' }" </UButton>
class="inline-block mt-2 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline"> <UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
{{ t('Add Address') }} class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
</RouterLink> {{ t('Create') }}
</div> </UButton>
</div>
</div>
<div class="flex-1">
<div
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6">
<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> </div>
</label> </template>
</div> </UModal>
</div> </component>
</div>
</div>
</div>
</component>
</template> </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 { useRouter } from 'vue-router'
import Default from '@/layouts/default.vue' import Default from '@/layouts/default.vue'
const cartStore = useCartStore() import { useRouter } from 'vue-router'
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) {
console.log('Placing order...')
alert(t('Order placed successfully!'))
cartStore.clearCart()
router.push({ name: 'home' })
}
}
function cancelOrder() { onMounted(() => {
router.back() cartStore.fetchCarts()
})
function openCart(cart) {
router.push({ name: 'customer-cart', params: { id: cart.cart_id } });
} }
</script> </script>

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

@@ -87,7 +87,6 @@ import { ref, computed } from 'vue'
import ProductCustomization from './components/ProductCustomization.vue' import ProductCustomization from './components/ProductCustomization.vue'
import ProductVariants from './components/ProductVariants.vue' import ProductVariants from './components/ProductVariants.vue'
import Default from '@/layouts/default.vue' import Default from '@/layouts/default.vue'
import { useFetchJson } from '@/composable/useFetchJson'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
interface Color { interface Color {
id: string id: string
@@ -172,21 +171,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>

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

@@ -2,14 +2,6 @@
<suspense> <suspense>
<component :is="Default || 'div'"> <component :is="Default || 'div'">
<div class=""> <div class="">
<!-- <UNavigationMenu orientation="vertical" :items="listing" class="data-[orientation=vertical]:w-48">
<template #item="{ item, active }">
<div class="flex items-center gap-2 px-3 py-2">
<UIcon name="i-heroicons-book-open" />
<span>{{ item.name }}</span>
</div>
</template>
</UNavigationMenu> -->
<h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Products</h1> <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Products</h1>
<div v-if="customerProductStore.loading" class="text-center py-8"> <div v-if="customerProductStore.loading" class="text-center py-8">
<span class="text-gray-600 dark:text-gray-400">Loading products...</span> <span class="text-gray-600 dark:text-gray-400">Loading products...</span>
@@ -51,6 +43,7 @@ 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'
const customerProductStore = useCustomerProductStore() const customerProductStore = useCustomerProductStore()
@@ -310,10 +303,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')
}, },
@@ -349,7 +341,7 @@ const columns: TableColumn<Product>[] = [
} }
] ]
const columnsChild: TableColumn<Payment>[] = [ const columnsChild: TableColumn<Product>[] = [
{ {
accessorKey: 'product_id', accessorKey: 'product_id',
header: '', header: '',
@@ -426,9 +418,49 @@ 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()
async function addToCart(product_id: number) {
const count = selectedCount.value.count || 1;
await cartStore.addProduct(product_id, count);
}
// async function addToCart(product_id: number) {
// if (!cartStore.activeCartId) {
// alert('Select a cart first')
// return
// }
// const count = selectedCount.value[row.original.product_id] || 1
// await cartStore.addProduct(
// cartStore.activeCartId,
// row.original.product_id,
// count
// )
// delete selectedCount.value[row.original.product_id]
// }
watch( watch(
() => route.query, () => route.query,
() => { () => {

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

@@ -1,129 +1,88 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { ref, computed } from 'vue' import { computed, ref } from 'vue'
import { useFetchJson } from '@/composable/useFetchJson'
import type { ApiResponse } from '@/types'
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 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() {
items.value = [ async function fetchCarts() {
{ id: 1, productId: 101, name: 'Premium Widget Pro', product_number: 'NC209/7000', image: '/img/product-1.jpg', price: 129.99, quantity: 2 }, try {
{ id: 2, productId: 102, name: 'Ultra Gadget X', product_number: 'NC234/6453', image: '/img/product-2.jpg', price: 89.50, quantity: 1 }, const res = await useFetchJson<ApiResponse>(
{ id: 3, productId: 103, name: 'Mega Tool Set', product_number: 'NC324/9030', image: '/img/product-3.jpg', price: 249.00, quantity: 3 } `/api/v1/restricted/carts/retrieve-carts-info`
] )
carts.value = res.items
} catch (e: any) {
error.value = e?.message ?? 'Error loading carts'
}
} }
const productsTotal = computed(() => {
return items.value.reduce((sum, item) => sum + (item.price * item.quantity), 0)
})
const vatAmount = computed(() => { async function addNewCart(name: string) {
return productsTotal.value * vatRate.value try {
}) error.value = null
const orderTotal = computed(() => { const url = `/api/v1/restricted/carts/add-new-cart`
return productsTotal.value + shippingCost.value + vatAmount.value const response = await useFetchJson<ApiResponse>(url)
})
const itemCount = computed(() => { const newCart: Cart = {
return items.value.reduce((sum, item) => sum + item.quantity, 0) id: response.items.cart_id,
}) name: response.items.name,
items: []
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 index = items.value.findIndex(a => a.id === id)
if (index === -1) return false
items.value.splice(index, 1) const route = useRoute()
resetProductPagination() const amount = ref<number>(1);
const errorMassege = ref('');
const cartId = computed(() => Number(route.params.id));
return true async function addProduct(product_id: number) {
} try {
const res = await useFetchJson<ApiResponse>(
`/api/v1/restricted/carts/add-product-to-cart?cart_id=${cartId.value}&product_id=${product_id}&amount=${amount.value}`
)
console.log('sfdsfdfd', res);
function resetProductPagination() { } catch (e: any) {
currentPage.value = 1 errorMassege.value = e?.message ?? 'Error loading carts'
}
function removeItem(itemId: number) {
const index = items.value.findIndex(i => i.id === itemId)
if (index !== -1) {
items.value.splice(index, 1)
} }
} }
function clearCart() {
items.value = []
selectedAddressId.value = null
selectedDeliveryMethodId.value = null
shippingCost.value = 0
}
function setSelectedAddress(addressId: number | null) { // function setActiveCart(id: number) {
selectedAddressId.value = addressId // activeCartId.value = id
} // }
function setDeliveryMethod(methodId: number) {
selectedDeliveryMethodId.value = methodId
const method = deliveryMethods.value.find(m => m.id === methodId)
if (method) {
shippingCost.value = method.price
}
}
initMockData()
return { return {
items, carts,
selectedAddressId, activeCartId,
selectedDeliveryMethodId, error,
shippingCost, errorMassege,
vatRate, // setActiveCart,
deliveryMethods, addProduct,
productsTotal, fetchCarts,
vatAmount, addNewCart,
orderTotal,
itemCount,
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