From 9b525f06cd76af11727655cb06615f7b7fd09262 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Thu, 16 Apr 2026 09:40:04 +0200
Subject: [PATCH] fix: cart

---
 bo/src/components/customer/PageCarts.vue      | 126 +++++-----
 .../customer/PageSearchProducts.vue           | 238 ++++++++----------
 bo/src/stores/customer/cart.ts                |  45 ++--
 i18n/migrations/20260302163100_routes.sql     |  25 +-
 .../20260302163123_create_tables_data.sql     |   3 +-
 5 files changed, 220 insertions(+), 217 deletions(-)

diff --git a/bo/src/components/customer/PageCarts.vue b/bo/src/components/customer/PageCarts.vue
index 3f28f1d..ac277d0 100644
--- a/bo/src/components/customer/PageCarts.vue
+++ b/bo/src/components/customer/PageCarts.vue
@@ -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 } });
 }
diff --git a/bo/src/components/customer/PageSearchProducts.vue b/bo/src/components/customer/PageSearchProducts.vue
index 5a6f2a0..360c17a 100644
--- a/bo/src/components/customer/PageSearchProducts.vue
+++ b/bo/src/components/customer/PageSearchProducts.vue
@@ -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>
diff --git a/bo/src/stores/customer/cart.ts b/bo/src/stores/customer/cart.ts
index 36eb6f3..f789b75 100644
--- a/bo/src/stores/customer/cart.ts
+++ b/bo/src/stores/customer/cart.ts
@@ -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('');
diff --git a/i18n/migrations/20260302163100_routes.sql b/i18n/migrations/20260302163100_routes.sql
index 2ee9aec..bd1e790 100644
--- a/i18n/migrations/20260302163100_routes.sql
+++ b/i18n/migrations/20260302163100_routes.sql
@@ -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);
 
 
diff --git a/i18n/migrations/20260302163123_create_tables_data.sql b/i18n/migrations/20260302163123_create_tables_data.sql
index fce9709..8593b29 100644
--- a/i18n/migrations/20260302163123_create_tables_data.sql
+++ b/i18n/migrations/20260302163123_create_tables_data.sql
@@ -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
\ No newline at end of file