fix: cart

bo/src/components/customer/PageCarts.vue

@@ -3,7 +3,7 @@
         <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"
+                <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') }}
@@ -27,10 +27,8 @@
                             : '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>
+                                    @click="openCart(cart)">{{ cart.name }}</p>
                             </div>
                         </div>
                         <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
@@ -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 } });
 }

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>

bo/src/stores/customer/cart.ts

@@ -36,11 +36,16 @@ export const useCartStore = defineStore('cart', () => {
     }
   }
 
-  async function addNewCart(name: string) {
+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`
+    const url = `/api/v1/restricted/carts/add-new-cart?name=${name}`
     const response = await useFetchJson<ApiResponse>(url)
 
     const newCart: Cart = {
@@ -56,7 +61,7 @@ export const useCartStore = defineStore('cart', () => {
   } catch (e: any) {
     error.value = e?.message ?? 'Error creating cart'
   }
-  }
+}
 
   const route = useRoute()
   const amount = ref<number>(1);

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);
 
 

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