fix: layouts

bo/components.d.ts

@@ -12,6 +12,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Cart1: typeof import('./src/components/customer/Cart1.vue')['default']
+    CategoryMenu: typeof import('./src/components/inner/categoryMenu.vue')['default']
     CompanyAccountView: typeof import('./src/components/customer/CompanyAccountView.vue')['default']
     Cs_PrivacyPolicyView: typeof import('./src/components/terms/cs_PrivacyPolicyView.vue')['default']
     Cs_TermsAndConditionsView: typeof import('./src/components/terms/cs_TermsAndConditionsView.vue')['default']

bo/src/components/admin/ProductDetailView.vue

@@ -1,4 +1,6 @@
 <template>
+  
+  <component :is="Default || 'div'">
   <div class="container my-10 mx-auto ">
 
     <div
@@ -112,6 +114,7 @@
       </div>
     </div>
   </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -120,6 +123,7 @@ import { useProductStore } from '@/stores/product'
 import { useEditable } from '@/composable/useConteditable'
 import { langs } from '@/router/langs'
 import type { Language } from '@/types'
+import Default from '@/layouts/default.vue'
 
 const activeTab = ref('description')
 const productStore = useProductStore()

bo/src/components/admin/ProductsView.vue

@@ -6,6 +6,7 @@ import { useProductStore, type Product } from '@/stores/product'
 import { useI18n } from 'vue-i18n'
 import type { TableColumn } from '@nuxt/ui'
 import { h } from 'vue'
+import Default from '@/layouts/default.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -153,9 +154,10 @@ function clearFilters() {
 </script>
 
 <template>
+  <component :is="Default || 'div'">
   <div class="container">
     <div class="p-6 bg-white dark:bg-(--black) min-h-screen font-sans">
-      <div >
+      <div>
         <!-- v-html="productStore.products" -->
       </div>
       <h1 class="text-2xl font-bold mb-6 text-black dark:text-white">{{ t('products.title') }}</h1>
@@ -176,50 +178,33 @@ function clearFilters() {
 
       <div v-if="authStore.isAuthenticated && !productStore.loading && !productStore.error" class="space-y-4">
         <!-- Filter Block -->
-        <div class="flex flex-wrap gap-4 mb-4 p-4 border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-50 dark:bg-gray-800">
+        <div
+          class="flex flex-wrap gap-4 mb-4 p-4 border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-50 dark:bg-gray-800">
           <div class="flex flex-col min-w-[180px]">
-            <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_name') }}</label>
+            <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_name')
-            <UInput 
+              }}</label>
-              v-model="searchName" 
+            <UInput v-model="searchName" :placeholder="t('products.search_name_placeholder')"
-              :placeholder="t('products.search_name_placeholder')" 
+              @update:model-value="resetPage" class="dark:text-white text-black" />
-              @update:model-value="resetPage"
-              class="dark:text-white text-black"
-            />
           </div>
           <div class="flex flex-col min-w-[180px]">
-            <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_code') }}</label>
+            <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_code')
-            <UInput 
+              }}</label>
-              v-model="searchCode" 
+            <UInput v-model="searchCode" :placeholder="t('products.search_code_placeholder')"
-              :placeholder="t('products.search_code_placeholder')" 
+              @update:model-value="resetPage" class="dark:text-white text-black" />
-              @update:model-value="resetPage"
-              class="dark:text-white text-black"
-            />
           </div>
           <div class="flex flex-col min-w-[120px]">
             <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.price_from') }}</label>
-            <UInput 
+            <UInput v-model="priceFromFilter" type="number" :placeholder="t('products.price_from')"
-              v-model="priceFromFilter" 
+              @update:model-value="resetPage" class="dark:text-white text-black" />
-              type="number"
-              :placeholder="t('products.price_from')" 
-              @update:model-value="resetPage"
-              class="dark:text-white text-black"
-            />
           </div>
           <div class="flex flex-col min-w-[120px]">
             <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.price_to') }}</label>
-            <UInput 
+            <UInput v-model="priceToFilter" type="number" :placeholder="t('products.price_to')"
-              v-model="priceToFilter" 
+              @update:model-value="resetPage" class="dark:text-white text-black" />
-              type="number"
-              :placeholder="t('products.price_to')" 
-              @update:model-value="resetPage"
-              class="dark:text-white text-black"
-            />
           </div>
           <div class="flex items-end">
-            <button 
+            <button @click="clearFilters"
-              @click="clearFilters"
+              class="px-4 py-2 text-sm font-medium text-black dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
-              class="px-4 py-2 text-sm font-medium text-black dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
               {{ t('products.clear_filters') }}
             </button>
           </div>
@@ -254,4 +239,5 @@ function clearFilters() {
       </div>
     </div>
   </div>
+  </component>
 </template>

bo/src/components/customer/Cart1.vue

@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
   <div class="container mx-auto mt-20">
     <h2
       class="font-semibold text-black dark:text-white pb-6 text-2xl">
@@ -47,6 +48,7 @@
       </UButton>
     </div>
   </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -54,7 +56,7 @@ import { useCartStore } from '@/stores/cart'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-
+import Default from '@/layouts/default.vue'
 const cartStore = useCartStore()
 const { t } = useI18n()
 const router = useRouter()

bo/src/components/customer/PageAddresses.vue

@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
     <div class="container mx-auto mt-20">
         <div class="flex flex-col gap-5 mb-6">
             <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
@@ -98,13 +99,14 @@
             </template>
         </UModal>
     </div>
+    </component>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
-
+import Default from '@/layouts/default.vue'
 const addressStore = useAddressStore()
 const { t } = useI18n()
 const searchQuery = ref('')

bo/src/components/customer/PageCart.vue

@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
   <div class="container mx-auto mt-20 flex flex-col gap-5 md:gap-10">
     <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1>
     <div class="flex flex-col lg:flex-row gap-5 md:gap-10">
@@ -143,6 +144,7 @@
       </div>
     </div>
   </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -151,7 +153,7 @@ import { useCartStore } from '@/stores/cart'
 import { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-
+import Default from '@/layouts/default.vue'
 const cartStore = useCartStore()
 const addressStore = useAddressStore()
 const { t } = useI18n()

bo/src/components/customer/PageCreateAccount.vue

@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
     <div class="container mx-auto mt-20">
         <div class="max-w-2xl mx-auto">
             <div class="flex flex-col gap-5 mb-6">
@@ -100,6 +101,7 @@
             </div>
         </div>
     </div>
+    </component>
 </template>
 
 <script setup lang="ts">
@@ -109,7 +111,7 @@ import { useCustomerStore } from '@/stores/customer'
 import { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
 import { useCartStore } from '@/stores/cart'
-
+import Default from '@/layouts/default.vue'
 const router = useRouter()
 const customerStore = useCustomerStore()
 const addressStore = useAddressStore()

bo/src/components/customer/PageCustomerData.vue

@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
     <div class="container mx-auto mt-20">
         <div class="flex flex-col gap-5 mb-6">
             <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Customer Data') }}</h1>
@@ -83,6 +84,7 @@
             </div>
         </div>
     </div>
+    </component>
 </template>
 
 <script setup lang="ts">
@@ -91,7 +93,7 @@ import { useRouter } from 'vue-router'
 import { useCustomerStore } from '@/stores/customer'
 import { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
-
+import Default from '@/layouts/default.vue'
 const router = useRouter()
 const customerStore = useCustomerStore()
 const addressStore = useAddressStore()

bo/src/components/customer/PageProductCardFull.vue

@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
     <div class="container mt-20 mx-auto">
         <div class="flex md:flex-row flex-col justify-between gap-8 my-6">
             <div class="flex-1">
@@ -69,13 +70,14 @@
         <hr class="border-t border-(--border-light) dark:border-(--border-dark) mb-8" />
         <ProductVariants />
     </div>
+    </component>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import ProductCustomization from './components/ProductCustomization.vue'
 import ProductVariants from './components/ProductVariants.vue'
-
+import Default from '@/layouts/default.vue'
 interface Color {
     id: string
     name: string

bo/src/components/customer/PageProductsList.vue

@@ -1,4 +1,10 @@
 <template>
+    <suspense>
+        <component :is="Default || 'div'">
+            <!-- <div class="w-64 h-128">
+                <CategoryMenu />
+            </div> -->
+
             <div class="container mx-auto mt-20">
                 <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Products</h1>
                 <div v-if="loading" class="text-center py-8">
@@ -34,7 +40,8 @@
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{
                                     product.product_id }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ product.name }}
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{
+                                    product.name }}
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 dark:text-blue-400">
                                     {{ product.LinkRewrite }}
@@ -47,12 +54,15 @@
                     </div>
                 </div>
             </div>
+        </component>
+    </suspense>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, Suspense } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
-
+import Default from '@/layouts/default.vue'
+// import CategoryMenu from '@/components/inner/categoryMenu.vue'
 interface Product {
     product_id: number
     name: string

bo/src/components/inner/categoryMenu.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { getMenu } from '@/router/menu'
+import type { NavigationMenuItem } from '@nuxt/ui';
+import { ref } from 'vue';
+let menu = await getMenu() as NavigationMenuItem[]
+
+const openAll = ref(false)
+
+function adaptMenu(menu: NavigationMenuItem[]) {
+  for (const item of menu) {
+    if(item.children && item.children.length > 0){
+      console.log(item);
+      adaptMenu(item.children);
+      item.open = openAll.value
+      item.children.unshift({ label: item.label, icon: 'i-lucide-book-open', popover: item.label ,to: { name: 'category', params: item.params }})
+    } else {
+      item.to = { name: 'category', params: item.params };
+      item.icon = 'i-lucide-file-text'
+    }
+  }
+  return menu;
+}
+
+menu = adaptMenu(menu)
+
+const items = ref<NavigationMenuItem[][]>([
+  [
+    ...menu as NavigationMenuItem[]
+  ],
+ 
+])
+
+
+
+</script>
+
+<template>
+    <UNavigationMenu orientation="vertical" type="single" :items="items" class="p-4">
+    </UNavigationMenu>
+</template>

bo/src/layouts/default.vue

@@ -1,53 +1,10 @@
 <script setup lang="ts">
 import TopBar from '@/components/TopBar.vue';
-import { getMenu } from '@/router/menu'
-import type { NavigationMenuItem } from '@nuxt/ui';
-import { on } from 'events';
-import { ref } from 'vue';
-let menu = await getMenu() as NavigationMenuItem[]
-
-function adaptMenu(menu) {
-  for (const item of menu) {
-    if (item.children && item.children.length > 0) {
-      adaptMenu(item.children);
-      // item.children.unshift({ label: item.label, icon: 'i-lucide-book-open', popover: item.label ,to: { name: 'category', params: item.params }})
-      // item.type = 'trigger'
-      // item.icon = 'i-lucide-book-open'
-      // item.onSelect(e){ console.log(e, 'adasdasdas'); }
-    } else {
-      // console.log(item.params);
-      item.to = { name: 'category', params: item.params };
-      item.icon = 'i-lucide-file-text'
-    }
-  }
-  return menu;
-}
-
-menu = adaptMenu(menu.children)
-
-console.log(menu);
-
-const items = ref<NavigationMenuItem[][]>([
-  [
-    
-    ...menu
-  ],
- 
-])
-
-
 </script>
+
 <template>
   <div class="h-screen grid grid-rows-[auto_1fr_auto]">
     <main class="p-10">
-      <div class="mt-24 bg-accented w-1/5 rounded-2xl">
-        <UNavigationMenu orientation="vertical" type="single" :items="items" class="p-4">
-        </UNavigationMenu>
-
-      </div>
-      <!-- <template #item>{{ item }}</template> -->
-      
-
       <TopBar/>
       <slot></slot>
     </main>

bo/src/router/index.ts

@@ -23,34 +23,23 @@ const router = createRouter({
     {
       path: '/:locale',
       children: [
-        { path: 'category/:category_id-:link_rewrite', component: () => import('../views/CategoryView.vue'), name: 'category' },
+        { path: 'category/:category_id-:link_rewrite', component: () => import('@/views/CategoryView.vue'), name: 'category' },
-        {
+        { path: 'products-datail', component: () => import('@/components/admin/ProductDetailView.vue'), name: 'product-detail' },
-          path: '',
+        { path: '', component: () => import('@/views/RepoChartView.vue'), name: 'home' },
-          component: Default,
+        { path: 'products', component: () => import('@/components/admin/ProductsView.vue'), name: 'products' },
-          children: [
+        { path: 'product-card-full', component: () => import('@/components/customer/PageProductCardFull.vue'), name: 'product-card-full' },
-            { path: '', component: () => import('../views/RepoChartView.vue'), name: 'home' },
+        { path: 'addresses', component: () => import('@/components/customer/PageAddresses.vue'), name: 'addresses' },
-            { path: 'products', component: () => import('../components/admin/ProductsView.vue'), name: 'products' },
+        { path: 'customer-data', component: () => import('@/components/customer/PageCustomerData.vue'), name: 'customer-data' },
-            { path: 'products-datail/', component: () => import('../components/admin/ProductDetailView.vue'), name: 'product-detail' },
+        { path: 'create-account', component: () => import('@/components/customer/PageCreateAccount.vue'), name: 'create-account' },
-            { path: 'product-card-full/', component: () => import('../components/customer/PageProductCardFull.vue'), name: 'product-card-full' },
+        { path: 'cart', component: () => import('@/components/customer/PageCart.vue'), name: 'cart' },
-            { path: 'addresses', component: () => import('../components/customer/PageAddresses.vue'), name: 'addresses' },
+        { path: 'cart1', component: () => import('@/components/customer/Cart1.vue'), name: 'cart1' },
-            { path: 'customer-data', component: () => import('../components/customer/PageCustomerData.vue'), name: 'customer-data' },
+        { path: 'products-list', component: () => import('@/components/customer/PageProductsList.vue'), name: 'products-list' },
-            { path: 'create-account', component: () => import('../components/customer/PageCreateAccount.vue'), name: 'create-account' },
-            { path: 'cart', component: () => import('../components/customer/PageCart.vue'), name: 'cart' },
-            { path: 'cart1', component: () => import('../components/customer/Cart1.vue'), name: 'cart1' },
-            { path: 'products-list', component: () => import('../components/customer/PageProductsList.vue'), name: 'products-list' },
-          ],
-        },
         { path: 'login', component: () => import('@/views/LoginView.vue'), name: 'login', meta: { guest: true, } },
         { path: 'register', component: () => import('@/views/RegisterView.vue'), name: 'register', meta: { guest: true } },
         { path: 'password-recovery', component: () => import('@/views/PasswordRecoveryView.vue'), name: 'password-recovery', meta: { guest: true } },
         { path: 'reset-password', component: () => import('@/views/ResetPasswordForm.vue'), name: 'reset-password', meta: { guest: true } },
         { path: 'verify-email', component: () => import('@/views/VerifyEmailView.vue'), name: 'verify-email', meta: { guest: true } },
-        // {
+
-        //   path: '',
-        //   component: Empty,
-        //   children: [
-        //   ],
-        // },
         {
           path: '/:pathMatch(.*)*',
           component: () => import('@/views/NotFoundView.vue'),

bo/src/stores/category.ts

@@ -0,0 +1,40 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+
+const products = [
+    {name: "product name", price: 342432},
+    {name: "product name", price: 342432},
+    {name: "product name", price: 342432},
+    {name: "product name", price: 342432},
+    {name: "product name", price: 342432},
+]
+
+// type CategoryProducts = {}
+
+export const useCategoryStore = defineStore('category', () => {
+    const id_category = ref(0)
+    const categoryProducts = ref(products)
+
+
+    function setCategoryID(id: number) {
+        id_category.value = id
+    }
+
+    async function getCategoryProducts() {
+        return new Promise<typeof products>((resolve) => {
+            setTimeout(() => {
+                console.log('Fetching products from category id: ', id_category.value);
+                resolve(categoryProducts.value)
+            }, 2000 * Math.random())
+        })
+    }
+    return {
+        id_category,
+        getCategoryProducts,
+        setCategoryID
+    }
+})
+
+
+

bo/src/views/CategoryView.vue

@@ -3,8 +3,13 @@
         <div class="container mt-24">
             <div class="row">
                 <div class="col-12">
-                    <h1>Category</h1>
+                    <h2 class="text-2xl">Category ID: {{ $route.params.category_id }}</h2>
-                    {{ $route.params }}
+                    <div v-for="(p, i) in products" :key="i">
+                        <p>
+                            <span class="border-b-1 bg-red-100 px-4">{{ p.name }}</span>
+                            <span class="border-b-1 bg-red-100 px-4">{{ p.price }}</span>
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -15,7 +20,23 @@
 <script setup lang="ts">
 // import { useRoute } from 'vue-router';
 import Default from '@/layouts/default.vue';
+import { useCategoryStore } from '@/stores/category';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 // const route = useRoute()
 // console.log(route);
 
+const categoryStore = useCategoryStore()
+const route = useRoute()
+
+const products = ref([])
+
+watch(() => route.params, async (n) => {
+    categoryStore.setCategoryID(parseInt(n.category_id as string))
+    const res = await categoryStore.getCategoryProducts()
+    products.value = res
+
+}, { immediate: true })
+
+
 </script>

bo/src/views/RepoChartView.vue

@@ -15,6 +15,7 @@ import { useAuthStore } from '@/stores/auth'
 import { i18n } from '@/plugins/02_i18n'
 import type { TableColumn } from '@nuxt/ui'
 import { useI18n } from 'vue-i18n'
+import Default from '@/layouts/default.vue'
 
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
@@ -181,6 +182,7 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
 </script>
 
 <template>
+      <component :is="Default || 'div'">
     <div class="container mx-auto">
         <div class="p-6 bg-(--main-light) dark:bg-(--black) font-sans">
             <h1 class="text-2xl font-bold mb-6 text-black dark:text-white">{{ $t('repo_chart.repository_work_chart') }}
@@ -254,4 +256,5 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
             </div>
         </div>
     </div>
+    </component>
 </template>