fix: cart
This commit is contained in:
@@ -1,72 +1,70 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-5 md:gap-10">
|
||||
<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"
|
||||
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
|
||||
<UIcon name="mdi:plus" class="mr-1" />
|
||||
{{ t('New Cart') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
|
||||
<h2
|
||||
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
|
||||
{{ t('Your Carts') }}
|
||||
</h2>
|
||||
<div v-if="cartStore.carts?.length > 0"
|
||||
class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
|
||||
<div v-for="cart in cartStore.carts" :key="cart.cart_id"
|
||||
@click="cartStore.setActiveCart(cart.cart_id)"
|
||||
class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
|
||||
? 'bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
|
||||
<p class="text-black dark:text-white font-medium truncate cursor-pointer"
|
||||
@click="openCart(cart)">{{
|
||||
cart.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
|
||||
@change="toggleCart(cart.cart_id)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="p-8 text-center flex items-center justify-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 class="flex flex-col gap-5 md:gap-10">
|
||||
<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" :disabled="cartStore.carts?.length >= 10"
|
||||
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
|
||||
<UIcon name="mdi:plus" class="mr-1" />
|
||||
{{ t('New Cart') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal v-model:open="showCreateModal">
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col gap-4">
|
||||
<UInput v-model="newCartName" :placeholder="t('Cart name')"
|
||||
class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
|
||||
<h2
|
||||
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
|
||||
{{ t('Your Carts') }}
|
||||
</h2>
|
||||
<div v-if="cartStore.carts?.length > 0"
|
||||
class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
|
||||
<div v-for="cart in cartStore.carts" :key="cart.cart_id"
|
||||
@click="cartStore.setActiveCart(cart.cart_id)"
|
||||
class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
|
||||
? 'bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-black dark:text-white font-medium truncate cursor-pointer"
|
||||
@click="openCart(cart)">{{ cart.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
|
||||
@change="toggleCart(cart.cart_id)" />
|
||||
</div>
|
||||
</div>
|
||||
</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 v-else class="p-8 text-center flex items-center justify-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>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal v-model:open="showCreateModal">
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col gap-4">
|
||||
<UInput v-model="newCartName" :placeholder="t('Cart name')"
|
||||
class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton variant="outline" color="neutral" @click="showCreateModal = false">
|
||||
{{ t('Cancel') }}
|
||||
</UButton>
|
||||
<UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
|
||||
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
|
||||
{{ t('Create') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -89,12 +87,10 @@ async function createCart() {
|
||||
showCreateModal.value = false
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
cartStore.fetchCarts()
|
||||
})
|
||||
|
||||
|
||||
function openCart(cart) {
|
||||
router.push({ name: 'customer-cart', params: { id: cart.cart_id } });
|
||||
}
|
||||
|
||||
@@ -1,44 +1,57 @@
|
||||
<template>
|
||||
<component :is="Default">
|
||||
<template>
|
||||
<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>
|
||||
<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 v-if="loading" class="mt-6">
|
||||
Loading...
|
||||
</div>
|
||||
|
||||
<p v-else-if="searchQuery">
|
||||
<div v-else-if="products.length" class="mt-6 w-full">
|
||||
<UTable :data="products" :columns="columns" class="flex-1 w-full"
|
||||
:ui="{ root: 'max-w-100wv overflow-auto!' }" />
|
||||
</div>
|
||||
|
||||
<p v-else-if="searchQuery" class="mt-6">
|
||||
No products found
|
||||
</p>
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useFetchJson } from '@/composable/useFetchJson';
|
||||
import Default from '@/layouts/default.vue';
|
||||
import { watch } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { useFetchJson } from '@/composable/useFetchJson'
|
||||
import { ref, watch, computed, resolveComponent } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { debounce } from 'chart.js/helpers'
|
||||
import { h } from 'vue'
|
||||
|
||||
import type { TableColumn } from '@nuxt/ui'
|
||||
import type { Product } from '@/types/product'
|
||||
import errorImg from '@/assets/error.svg'
|
||||
|
||||
const searchQuery = ref('')
|
||||
const products = ref([])
|
||||
const products = ref<Product[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
|
||||
async function fetchProducts() {
|
||||
if (!searchQuery.value.trim()) {
|
||||
products.value = []
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const query = searchQuery.value
|
||||
? `name=~${searchQuery.value}`
|
||||
: ''
|
||||
const query = `name=~${searchQuery.value.trim()}`
|
||||
|
||||
const result = await useFetchJson(
|
||||
`/api/v1/restricted/list-products/get-listing?${query}`
|
||||
@@ -52,125 +65,90 @@ async function fetchProducts() {
|
||||
}
|
||||
}
|
||||
|
||||
const debouncedFetch = debounce(fetchProducts, 400)
|
||||
|
||||
watch(searchQuery, () => {
|
||||
fetchProducts()
|
||||
debouncedFetch()
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
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')
|
||||
// })
|
||||
// ]),
|
||||
const sortField = computed({
|
||||
get: () => [
|
||||
route.query.sort as string | undefined,
|
||||
route.query.direction as 'asc' | 'desc' | undefined
|
||||
],
|
||||
set: ([sort]: [string, 'asc' | 'desc']) => {
|
||||
const query = { ...route.query, sort, direction: 'asc' }
|
||||
router.push({ query })
|
||||
}
|
||||
})
|
||||
|
||||
// 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')
|
||||
// })
|
||||
// ]),
|
||||
function getIcon(name: string) {
|
||||
if (sortField.value[0] === name) {
|
||||
return sortField.value[1] === 'asc'
|
||||
? 'i-lucide-arrow-up-narrow-wide'
|
||||
: 'i-lucide-arrow-down-wide-narrow'
|
||||
}
|
||||
return 'i-lucide-arrow-up-down'
|
||||
}
|
||||
|
||||
// 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')
|
||||
// },
|
||||
// }
|
||||
// ]
|
||||
|
||||
const UInput = resolveComponent('UInput')
|
||||
const UButton = resolveComponent('UButton')
|
||||
const UIcon = resolveComponent('UIcon')
|
||||
|
||||
const columns: TableColumn<Product>[] = [
|
||||
{
|
||||
accessorKey: 'product_id',
|
||||
header: 'ID',
|
||||
cell: ({ row }) => `#${row.getValue('product_id')}`
|
||||
},
|
||||
{
|
||||
accessorKey: 'image_link',
|
||||
header: 'Image',
|
||||
cell: ({ row }) =>
|
||||
h('img', {
|
||||
src: row.getValue('image_link'),
|
||||
style: 'width:40px;height:40px;object-fit:cover;',
|
||||
onError: (e: Event) => {
|
||||
(e.target as HTMLImageElement).src = errorImg
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
cell: ({ row }) => row.getValue('name')
|
||||
},
|
||||
{
|
||||
accessorKey: 'quantity',
|
||||
header: 'In stock',
|
||||
cell: ({ row }) => row.getValue('quantity')
|
||||
},
|
||||
{
|
||||
accessorKey: 'action',
|
||||
header: '',
|
||||
cell: ({ row }) =>
|
||||
h(
|
||||
UButton,
|
||||
{
|
||||
onClick: () =>
|
||||
router.push({
|
||||
name: 'admin-product-details',
|
||||
params: {
|
||||
product_id: row.original.product_id,
|
||||
link_rewrite: row.original.link_rewrite
|
||||
}
|
||||
}),
|
||||
color: 'info',
|
||||
variant: 'soft'
|
||||
},
|
||||
() => 'Show product'
|
||||
)
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -36,28 +36,33 @@ export const useCartStore = defineStore('cart', () => {
|
||||
}
|
||||
}
|
||||
|
||||
async function addNewCart(name: string) {
|
||||
try {
|
||||
error.value = null
|
||||
|
||||
const url = `/api/v1/restricted/carts/add-new-cart`
|
||||
const response = await useFetchJson<ApiResponse>(url)
|
||||
|
||||
const newCart: Cart = {
|
||||
id: response.items.cart_id,
|
||||
name: response.items.name,
|
||||
items: []
|
||||
}
|
||||
|
||||
carts.value.push(newCart)
|
||||
activeCartId.value = newCart.id
|
||||
|
||||
return newCart
|
||||
} catch (e: any) {
|
||||
error.value = e?.message ?? 'Error creating cart'
|
||||
}
|
||||
async function addNewCart(name: string) {
|
||||
if (!name.trim()) {
|
||||
error.value = 'Cart name is required'
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
error.value = null
|
||||
|
||||
const url = `/api/v1/restricted/carts/add-new-cart?name=${name}`
|
||||
const response = await useFetchJson<ApiResponse>(url)
|
||||
|
||||
const newCart: Cart = {
|
||||
id: response.items.cart_id,
|
||||
name: response.items.name,
|
||||
items: []
|
||||
}
|
||||
|
||||
carts.value.push(newCart)
|
||||
activeCartId.value = newCart.id
|
||||
|
||||
return newCart
|
||||
} catch (e: any) {
|
||||
error.value = e?.message ?? 'Error creating cart'
|
||||
}
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const amount = ref<number>(1);
|
||||
const errorMessage = ref('');
|
||||
|
||||
@@ -70,7 +70,8 @@ INSERT IGNORE INTO `b2b_routes` (`id`, `name`, `path`, `component`, `meta`, `act
|
||||
}', 1),
|
||||
(20, 'customer-products', 'products', '/components/customer/PageProducts.vue', '{ "guest":true, "name": "Products" }', 1),
|
||||
(21, 'customer-product-details', 'products/:product_id', '/components/customer/PageProduct.vue', '{ "guest":true, "name": "Products" }', 1),
|
||||
(22, 'customer-page-carts', 'carts', '/components/customer/PageCarts.vue', '{ "guest":true, "name": "Carts" }', 1);
|
||||
(22, 'customer-page-carts', 'carts', '/components/customer/PageCarts.vue', '{ "guest":true, "name": "Carts" }', 1),
|
||||
(24, 'customer-search-products', 'search-products', '/components/customer/PageSearchProducts.vue', '{ "guest":true, "name": "Carts" }', 1);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS b2b_top_menu (
|
||||
menu_id INT AUTO_INCREMENT NOT NULL,
|
||||
@@ -286,6 +287,28 @@ INSERT IGNORE INTO `b2b_top_menu` (`menu_id`, `label`, `parent_id`, `params`, `a
|
||||
"locale": ""
|
||||
}
|
||||
}
|
||||
}', 1, 1),
|
||||
(17, '{
|
||||
"name": "customer-search-products",
|
||||
"trans": {
|
||||
"pl": {
|
||||
"label": "Search-Products"
|
||||
},
|
||||
"en": {
|
||||
"label": "Search-Products"
|
||||
},
|
||||
"de": {
|
||||
"label": "Search-Products"
|
||||
}
|
||||
},
|
||||
"icon": "proicons:cart1"
|
||||
}', 1, '{
|
||||
"route": {
|
||||
"name": "customer-search-products",
|
||||
"params": {
|
||||
"locale": ""
|
||||
}
|
||||
}
|
||||
}', 1, 1);
|
||||
|
||||
|
||||
|
||||
@@ -114,5 +114,6 @@ INSERT INTO `b2b_route_roles` (`route_id`, `role_id`) VALUES
|
||||
(19, '1'),
|
||||
(20, '1'),
|
||||
(21, '1'),
|
||||
(22, '1');
|
||||
(22, '1'),
|
||||
(24, '1');
|
||||
-- +goose Down
|
||||
Reference in New Issue
Block a user