fix: migrations

bo/components.d.ts

@@ -11,7 +11,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    ButtonGoToProfile: typeof import('./src/components/customer-management/ButtonGoToProfile.vue')['default']
     CartDetails: typeof import('./src/components/customer/CartDetails.vue')['default']
     CategoryMenu: typeof import('./src/components/inner/CategoryMenu.vue')['default']
     copy: typeof import('./src/components/admin/ProductDetailView copy.vue')['default']
@@ -45,7 +44,6 @@ 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']
-    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']
     UCheckbox: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Checkbox.vue')['default']

bo/src/App.vue

@@ -1,15 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { TooltipProvider } from 'reka-ui'
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import DefaultLayout from '@/layouts/default.vue'
+import EmptyLayout from '@/layouts/empty.vue'
+import ManagementLayout from '@/layouts/management.vue'
 import { useAuthStore } from './stores/customer/auth'
 
 const authStore = useAuthStore()
+const route = useRoute()
+const layout = computed(() => (route.meta.layout as string) || 'default')
 </script>
 
 <template>
   <Suspense>
     <TooltipProvider>
-      <RouterView />
+      <component :is="layout === 'empty' ? EmptyLayout : layout === 'management' ? ManagementLayout : DefaultLayout">
+        <RouterView v-slot="{ Component }">
+          <component :is="Component" />
+        </RouterView>
+      </component>
     </TooltipProvider>
   </Suspense>
 </template>

bo/src/components/admin/FavoriteProducts.vue

@@ -1,12 +1,9 @@
 <template>
-    <component :is="Default || 'div'">
-        <div>
+            <div>
 
         </div>
-    </component>
-</template>
+    </template>
 
 <script setup lang="ts">
-import Default from '@/layouts/default.vue';
 
 </script>

bo/src/components/admin/PageProducts.vue

@@ -1,6 +1,5 @@
 <template>
-    <component :is="Default || 'div'">
-        <div class="flex flex-col md:flex-row gap-10">
+            <div class="flex flex-col md:flex-row gap-10">
             <CategoryMenu />
             <div class="w-full flex flex-col items-center gap-4">
                 <UTable :data="productsList" :columns="columns" class="flex-1 w-full" :ui="{
@@ -9,13 +8,11 @@
                 <UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
             </div>
         </div>
-    </component>
-</template>
+    </template>
 
 <script setup lang="ts">
 import { ref, watch, h, resolveComponent, computed } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
-import Default from '@/layouts/default.vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { TableColumn } from '@nuxt/ui'
 import CategoryMenu from '../inner/CategoryMenu.vue'

bo/src/components/admin/ProductDetailView copy.vue

@@ -1,6 +1,5 @@
 <template>
-  <component :is="Default || 'div'">
-    <div class="flex items-center gap-2 mb-4">
+      <div class="flex items-center gap-2 mb-4">
       <UIcon name="line-md:arrow-left" class="text-(--text-sky-light) dark:text-(--text-sky-dark)" />
       <p class="cursor-pointer text-(--text-sky-light) dark:text-(--text-sky-dark)" @click="backFromProduct()">
         Back to products</p>
@@ -190,12 +189,10 @@
         </UTabs>
       </div>
     </div>
-  </component>
-</template>
+  </template>
 
 <script setup lang="ts">
 import { useEditable } from '@/composable/useConteditable';
-import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
 import { useProductStore } from '@/stores/product';
 import { useSettingsStore } from '@/stores/admin/settings';

bo/src/components/admin/ProductDetailView.vue

@@ -1,6 +1,5 @@
 <template>
-  <component :is="Default || 'div'">
-    <div class="flex items-center gap-2 mb-4">
+      <div class="flex items-center gap-2 mb-4">
       <UIcon name="line-md:arrow-left" class="text-(--text-sky-light) dark:text-(--text-sky-dark)" />
       <p class="cursor-pointer text-(--text-sky-light) dark:text-(--text-sky-dark)" @click="backFromProduct()">
         Back to products</p>
@@ -154,11 +153,9 @@
       </div>
       <div class=""></div>
     </div>
-  </component>
-</template>
+  </template>
 
 <script setup lang="ts">
-import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
 import { useProductStore } from '@/stores/admin/product';
 import { useSettingsStore } from '@/stores/admin/settings';

bo/src/components/admin/UsersList.vue

@@ -1,17 +1,14 @@
 <template>
-    <component :is="Default || 'div'">
-        <div class="flex flex-col md:flex-row gap-10">
+            <div class="flex flex-col md:flex-row gap-10">
             <div class="w-full flex flex-col items-center gap-4">
                 <UTable :data="usersList" :columns="columns" class="flex-1 w-full"
                     :ui="{ root: 'max-w-100wv overflow-auto!' }" />
                 <UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
             </div>
         </div>
-    </component>
-</template>
+    </template>
 
 <script setup lang="ts">
-import Default from '@/layouts/default.vue'
 import { ref, computed, watch, resolveComponent, h } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
 import { useRoute, useRouter } from 'vue-router'

bo/src/components/admin/UsersSearch.vue

@@ -1,6 +1,5 @@
 <template>
-    <component :is="Default">
-        <div class="pt-70! flex flex-col items-center justify-center bg-gray-50 dark:bg-(--main-dark)">
+            <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 Users</h1>
 
             <div class="w-full max-w-4xl">
@@ -18,12 +17,10 @@
                 No users found with that name or ID
             </p>
         </div>
-    </component>
-</template>
+    </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, resolveComponent, h } from 'vue'
-import Default from '@/layouts/default.vue';
 import type { TableColumn } from '@nuxt/ui';
 import { useRoute, useRouter } from 'vue-router';
 import { useFetchJson } from '@/composable/useFetchJson';

bo/src/components/customer-management/Profile.vue

@@ -1,11 +1,7 @@
 <template>
-    <component :is="Management || 'div'">
-        <div>customer-management</div>
-    </component>
+    <div>customer-management</div>
 </template>
 
 
 <script setup lang="ts">
-import Management from '@/layouts/management.vue';
-
-</script>   
+</script>

bo/src/components/customer/CartDetails.vue

@@ -1,6 +1,5 @@
 <template>
-    <component :is="Default || 'div'">
-  <div class="">
+      <div class="">
     <h2
       class="font-semibold text-black dark:text-white pb-6 text-2xl">
       {{ t('Cart Items') }}
@@ -48,15 +47,13 @@
       </UButton>
     </div>
   </div>
-  </component>
-</template>
+  </template>
 
 <script setup lang="ts">
 import { useCartStore } from '@/stores/customer/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,6 +1,5 @@
 <template>
-    <component :is="Default || 'div'">
-        <div class="">
+            <div class="">
             <div class="flex flex-col gap-5 mb-6">
                 <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
                 <div class="flex md:flex-row flex-col justify-between items-start md:items-center gap-5 md:gap-0">
@@ -72,8 +71,7 @@
                                     {{ t('Cancel') }}
                                 </UButton>
 
-                                <UButton type="submit"
-                                    class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
+                                <UButton type="submit" color="info" class="cursor-pointer">
                                     {{ t('Save') }}
                                 </UButton>
                             </div>
@@ -103,14 +101,12 @@
                 </template>
             </UModal>
         </div>
-    </component>
-</template>
+    </template>
 
 <script setup lang="ts">
 import { ref, reactive, computed, watch, onMounted } from 'vue'
 import { useCartStore } from '@/stores/customer/cart'
 import { useI18n } from 'vue-i18n'
-import Default from '@/layouts/default.vue'
 import { currentCountry } from '@/router/langs'
 
 type AddressFormState = Record<string, string>
@@ -230,9 +226,9 @@ function validate() {
 
 async function saveAddress() {
     if (isEditing.value && editingAddressId.value) {
-        await cartStore.updateAddress(editingAddressId.value, currentCountryId.value, formData)
+        await cartStore.updateAddress(editingAddressId.value, currentCountry.value?.id || 2, formData)
     } else {
-        await cartStore.addAddress(currentCountryId.value, formData)
+        await cartStore.addAddress(currentCountry.value?.id || 2, formData)
     }
     closeModal()
 }

bo/src/components/customer/PageCarts.vue

@@ -1,6 +1,5 @@
 <template>
-  <component :is="Default || 'div'">
-    <div class="flex flex-col gap-5 md:gap-10">
+      <div class="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">
         <div class="flex-1">
@@ -147,8 +146,7 @@
         </div>
       </div>
     </div>
-  </component>
-</template>
+  </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
@@ -156,7 +154,6 @@ import { useCartStore } from '@/stores/customer/cart'
 import { useAddressStore } from '@/stores/customer/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/PageOrders.vue

@@ -1,9 +1,6 @@
 <template>
-    <component :is="Default || 'div'">
-        Orders page
-    </component>
-</template>
+            Orders page
+    </template>
 
 <script lang="ts" setup>
-import Default from '@/layouts/default.vue'
 </script>

bo/src/components/customer/PageProduct.vue

@@ -1,6 +1,5 @@
 <template>
-    <component :is="Default || 'div'">
-        <div class="">
+            <div class="">
             <div class="flex md:flex-row flex-col justify-between gap-8 my-6">
                 <div class="flex-1">
                     <div
@@ -79,14 +78,12 @@
             <hr class="border-t border-(--border-light) dark:border-(--border-dark) mb-8" />
             <ProductVariants />
         </div>
-    </component>
-</template>
+    </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'
 import { useFetchJson } from '@/composable/useFetchJson'
 import { useRoute } from 'vue-router'
 interface Color {

bo/src/components/customer/PageProducts.vue

@@ -1,7 +1,6 @@
 <template>
     <suspense>
-        <component :is="Default || 'div'">
-            <div class="">
+                    <div class="">
                 <!-- <UNavigationMenu orientation="vertical" :items="listing" class="data-[orientation=vertical]:w-48">
                     <template #item="{ item, active }">
                         <div class="flex items-center gap-2 px-3 py-2">
@@ -39,13 +38,11 @@
                     </div>
                 </div>
             </div>
-        </component>
-    </suspense>
+            </suspense>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, h, resolveComponent, computed } from 'vue'
-import Default from '@/layouts/default.vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { TableColumn } from '@nuxt/ui'
 import CategoryMenu from '../inner/CategoryMenu.vue'

bo/src/components/customer/PageProfileDetails.vue

@@ -1,6 +1,5 @@
 <template>
-    <component :is="Default || 'div'">
-        <div class="">
+            <div class="">
             <div class="flex flex-col gap-5 mb-6">
                 <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Customer Data') }}</h1>
 
@@ -97,8 +96,7 @@
                 </div>
             </div>
         </div>
-    </component>
-</template>
+    </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
@@ -106,7 +104,6 @@ import { useRouter } from 'vue-router'
 import { useCustomerStore } from '@/stores/customer'
 import { useAddressStore } from '@/stores/customer/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/PageProfileDetailsAddInfo.vue

@@ -1,6 +1,5 @@
 <template>
-    <component :is="Default || 'div'">
-        <div class="">
+            <div class="">
             <div class="max-w-2xl mx-auto">
                 <div class="flex flex-col gap-5 mb-6">
                     <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Create Account') }}</h1>
@@ -109,8 +108,7 @@
                 </div>
             </div>
         </div>
-    </component>
-</template>
+    </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
@@ -119,7 +117,6 @@ import { useCustomerStore } from '@/stores/customer'
 import { useAddressStore } from '@/stores/customer/address'
 import { useI18n } from 'vue-i18n'
 import { useCartStore } from '@/stores/customer/cart'
-import Default from '@/layouts/default.vue'
 const router = useRouter()
 const customerStore = useCustomerStore()
 const addressStore = useAddressStore()

bo/src/components/customer/PageStatistic.vue

@@ -1,9 +1,6 @@
 <template>
-    <component :is="Default || 'div'">
-        Statistic page
-    </component>
-</template>
+            Statistic page
+    </template>
 
 <script lang="ts" setup>
-import Default from '@/layouts/default.vue'
 </script>

bo/src/components/customer/StorageFileBrowser.vue

@@ -1,6 +1,5 @@
 <template>
-    <component :is="Default || 'div'">
-        <div class="p-4">
+            <div class="p-4">
             <div v-if="loading" class="flex justify-center py-8">
                 <ULoader />
             </div>
@@ -25,13 +24,11 @@
                 </template>
             </UTree>
         </div>
-    </component>
-</template>
+    </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
-import Default from '@/layouts/default.vue'
 
 interface FileItemRaw {
     Name: string

bo/src/layouts/management.vue

@@ -39,7 +39,7 @@
                     <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
                         @click="open = !open" />
                     <p class="font-bold text-xl">Customer-Management: <span class="text-[20px] font-medium">{{ pageTitle
-                            }}</span></p>
+                    }}</span></p>
                 </div>
                 <div class="hidden md:flex items-center gap-12">
                     <div class="flex items-center gap-2">
@@ -179,8 +179,7 @@ const router = useRouter()
 
 const menu = ref<TopMenuItem[] | null>(null)
 
-const Id =Number(route.params.user_id)
-
+const Id = Number(route.params.user_id)
 async function cmGetTopMenu() {
     try {
         const { items } = await useFetchJson<TopMenuItem[]>(`/api/v1/restricted/menu/get-top-menu?target_user_id=${Id}`)
@@ -191,7 +190,6 @@ async function cmGetTopMenu() {
     }
 }
 
-console.log(route)
 watch(
     () => route.params.user_id,
     () => {

bo/src/router/index.ts

@@ -13,13 +13,30 @@ await getSettings()
 
 const routes = await getRoutes()
 let newRoutes = []
+
+function getLayoutFromComponent(path: string) {
+  const emptyLayouts = [
+    'LoginView.vue',
+    'RegisterView.vue',
+    'PasswordRecoveryView.vue',
+    'VerifyEmailView.vue',
+    'ResetPasswordForm.vue'
+  ]
+  return emptyLayouts.some((name) => path.includes(name)) ? 'empty' : 'default'
+}
+
 for (let r of routes) {
   const component = () => import(/* @vite-ignore */ `..${r.component}`)
+  const parsedMeta = r.meta ? JSON.parse(r.meta) : {}
+  const layout = parsedMeta.layout ?? getLayoutFromComponent(r.component)
   newRoutes.push({
     path: r.path,
     component,
     name: r.name,
-    meta: r.meta ? JSON.parse(r.meta) : {},
+    meta: {
+      ...parsedMeta,
+      layout,
+    },
   })
 }
 
@@ -73,15 +90,21 @@ async function setRoutes() {
     }
 
     const importedComponent = (await importer()).default
+    const parsedMeta = item.meta ? JSON.parse(item.meta) : {}
+    const layout = parsedMeta.layout ?? getLayoutFromComponent(item.component)
 
     router.addRoute('locale', {
       path: item.path,
       component: importedComponent,
       name: item.name,
-      meta: item.meta ? JSON.parse(item.meta) : {}
+      meta: {
+        ...parsedMeta,
+        layout,
+      }
     })
   }
-
+  
+  console.log(router);
   // await router.replace(router.currentRoute.value.fullPath)
 }
 

bo/src/views/CategoryView.vue

@@ -1,42 +0,0 @@
-<template>
-    <component :is="Default || 'div'">
-        <div class="container mt-24">
-            <div class="row">
-                <!-- <div class="col-12">
-                    <h2 class="text-2xl">Category ID: {{ $route.params.category_id }}</h2>
-                    <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>
-    </component>
-</template>
-
-
-<script setup lang="ts">
-// import { useRoute } from 'vue-router';
-import Default from '@/layouts/default.vue';
-import { useCategoryStore } from '@/stores/admin/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/HomeView.vue

@@ -1,9 +1,6 @@
 <template>
-        <component :is="Default || 'div'">
-            home View
-        </component>
-</template>
+                    home View
+        </template>
 <script setup lang="ts">
-import Default from '@/layouts/default.vue';
 
 </script>

bo/src/views/RepoChartView.vue

@@ -15,7 +15,6 @@ import { useAuthStore } from '@/stores/customer/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)
 
@@ -182,8 +181,7 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
 </script>
 
 <template>
-      <component :is="Default || 'div'">
-    <div class="">
+          <div class="">
         <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') }}
             </h1>
@@ -256,5 +254,4 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
             </div>
         </div>
     </div>
-    </component>
-</template>
+    </template>

bo/src/views/StorageView.vue

@@ -7,6 +7,5 @@
 </template>
 
 <script setup lang="ts">
-import Default from '@/layouts/default.vue'
 import StorageFileBrowser from '@/components/customer/StorageFileBrowser.vue'
 </script>