fix: cart

bo/components.d.ts

@@ -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']

bo/src/App.vue

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

bo/src/components/customer/PageCart.vue

@@ -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>

bo/src/components/customer/PageCarts.vue

@@ -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)"
+                        <div v-for="cart in cartStore.carts" :key="cart.cart_id"
-                            class="p-4 cursor-pointer transition-colors flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
+                            @click="cartStore.setActiveCart(cart.cart_id)"
-                                ? 'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-(--accent-blue-light) dark:border-(--accent-blue-dark)'
+                            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"
+                            <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
-                                @change="cartStore.setActiveCart(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>

bo/src/components/customer/PageProducts.vue

@@ -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;
+    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
+    }
 
-    await cartStore.addProduct(product_id, count);
+    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
+    })
 }
-
-// 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(
     () => route.query,
     () => {

bo/src/components/customer/PageSearchProducts.vue

@@ -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>

bo/src/layouts/default.vue

@@ -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">
@@ -50,7 +73,7 @@
             <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
               class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
               {{ $t('general.logout') }}
-              <UIcon name="ic:baseline-logout"  class="text-red-700 dark:text-red-500"/>
+              <UIcon name="ic:baseline-logout" class="text-red-700 dark:text-red-500" />
             </button>
           </div>
         </div>
@@ -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>

bo/src/stores/customer/cart.ts

@@ -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 errorMessage = ref('');
-  const cartId = computed(() => Number(route.params.id));
+
+  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) {
+    if (id) {
-  //   activeCartId.value = 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,
+    errorMessage,
-    // setActiveCart,
+    activeCart,
+    setActiveCart,
     addProduct,
     fetchCarts,
     addNewCart,
-
+    initCart,
   }
 })