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

fix: cart

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-04-15 12:42:20 +02:00
parent c97251c15b
commit e335c3aa6f
8 changed files with 301 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bo/components.d.ts vendored
View File

@@ -32,6 +32,7 @@ declare module 'vue' {
PageProducts: typeof import('./src/components/admin/PageProducts.vue')['default']
PageProfileDetails: typeof import('./src/components/customer/PageProfileDetails.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']
Pl_PrivacyPolicyView: typeof import('./src/components/terms/pl_PrivacyPolicyView.vue')['default']
Pl_TermsAndConditionsView: typeof import('./src/components/terms/pl_TermsAndConditionsView.vue')['default']
@@ -48,6 +49,7 @@ declare module 'vue' {
TopBar: typeof import('./src/components/TopBar.vue')['default']
TopBarLogin: typeof import('./src/components/TopBarLogin.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']
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']
UCard: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Card.vue')['default']

5
bo/src/App.vue
View File

@@ -7,11 +7,12 @@ const authStore = useAuthStore()
</script>
<template>
<UApp>
<Suspense>
<TooltipProvider>
<RouterView />
<UNotifications />
</TooltipProvider>
</Suspense>
</UApp>
</template>

3
bo/src/components/customer/PageCart.vue
View File

@@ -4,13 +4,14 @@
<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>

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

@@ -1,7 +1,7 @@
<template>
<component :is="Default || 'div'">
<div class="flex flex-col gap-5 md:gap-10">
<div class="flex flex-col md:flex-row justify-between gap-4">
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Carts') }}</h1>
<div class="flex gap-3">
<UButton color="primary" @click="showCreateModal = true"
@@ -19,23 +19,23 @@
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
{{ t('Your Carts') }}
</h2>
<div v-if="cartStore.carts.length > 0"
<div v-if="cartStore.carts?.length > 0"
class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
<div v-for="cart in cartStore.carts" :key="cart.cart_id" @click="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)'
<div v-for="cart in cartStore.carts" :key="cart.cart_id"
@click="cartStore.setActiveCart(cart.cart_id)"
class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
? 'bg-blue-50 dark:bg-blue-900/20'
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
<p class="text-black dark:text-white font-medium truncate cursor-pointer">{{
<p class="text-black dark:text-white font-medium truncate cursor-pointer"
@click="openCart(cart)">{{
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)" /> -->
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
@change="toggleCart(cart.cart_id)" />
</div>
</div>
<div v-else class="p-8 text-center">
@@ -98,8 +98,15 @@ onMounted(() => {
})
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>

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

@@ -44,6 +44,7 @@ import CategoryMenu from '../inner/CategoryMenu.vue'
import { useCustomerProductStore } 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()
@@ -397,7 +398,7 @@ const columnsChild: TableColumn<Product>[] = [
cell: ({ row }) => {
return h(UButton, {
onClick: () => {
console.log('Clicked', row.original)
addToCart(row.original.product_id)
},
color: selectedCount.value.product_id !== row.original.product_id ? 'info' : 'primary',
disabled: selectedCount.value.product_id !== row.original.product_id,
@@ -437,30 +438,28 @@ const columnsChild: TableColumn<Product>[] = [
]
const cartStore = useCartStore()
const toast = useToast()
async function addToCart(product_id: number) {
const count = selectedCount.value.count || 1;
await cartStore.addProduct(product_id, count);
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
}
// 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]
// }
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(
() => 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>

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

@@ -34,11 +34,34 @@
<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 items-center gap-5">
<div class="flex items-center gap-2">
<UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
@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 class="hidden md:flex items-center gap-12">
<div class="flex items-center gap-2">
@@ -172,6 +195,7 @@ import LangSwitch from '@/components/inner/LangSwitch.vue'
import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
import type { LabelTrans, TopMenuItem } from '@/types'
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/customer/cart'
const router = useRouter()
@@ -297,5 +321,11 @@ const userItems = computed<DropdownMenuItem[][]>(() => [
]
])
const cartStore = useCartStore()
onMounted(() => {
cartStore.initCart()
})
defineShortcuts(extractShortcuts(teamsItems.value))
</script>

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

@@ -15,7 +15,6 @@ export const useCartStore = defineStore('cart', () => {
const activeCartId = ref<number | null>(null)
const error = ref<string | null>(null)
async function fetchCarts() {
try {
const res = await useFetchJson<ApiResponse>(
@@ -28,7 +27,6 @@ export const useCartStore = defineStore('cart', () => {
}
}
async function addNewCart(name: string) {
try {
error.value = null
@@ -51,38 +49,59 @@ export const useCartStore = defineStore('cart', () => {
}
}
const route = useRoute()
const amount = ref<number>(1);
const errorMassege = ref('');
const cartId = computed(() => Number(route.params.id));
const errorMessage = ref('');
async function addProduct(product_id: number, count: number) {
if (!activeCartId.value) {
errorMessage.value = 'No active cart selected'
return
}
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}`
`/api/v1/restricted/carts/add-product-to-cart?cart_id=${activeCartId.value}&product_id=${product_id}&amount=${count}`
)
console.log('sfdsfdfd', res);
console.log('fsdfsdfdsfdsfs', res)
} catch (e: any) {
errorMassege.value = e?.message ?? 'Error loading carts'
errorMessage.value = e?.message ?? 'Error adding product'
}
}
function setActiveCart(id: number | null) {
activeCartId.value = id
// function setActiveCart(id: number) {
// activeCartId.value = id
// }
if (id) {
localStorage.setItem('activeCartId', String(id))
} else {
localStorage.removeItem('activeCartId')
}
}
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 {
carts,
activeCartId,
error,
errorMassege,
// setActiveCart,
errorMessage,
activeCart,
setActiveCart,
addProduct,
fetchCarts,
addNewCart,
initCart,
}
})