goc_daniel/b2b
2
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: layouts

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-03-24 12:26:23 +01:00
parent 78b32cbd9c
commit 0cee3e5cb7
16 changed files with 224 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
bo/components.d.ts vendored
View File

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

4
bo/src/components/admin/ProductDetailView.vue
View File

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

54
bo/src/components/admin/ProductsView.vue
View File

@@ -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>
<UInput
v-model="searchName"
:placeholder="t('products.search_name_placeholder')"
@update:model-value="resetPage"
class="dark:text-white text-black"
/>
<label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_name')
}}</label>
<UInput v-model="searchName" :placeholder="t('products.search_name_placeholder')"
@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>
<UInput
v-model="searchCode"
:placeholder="t('products.search_code_placeholder')"
@update:model-value="resetPage"
class="dark:text-white text-black"
/>
<label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_code')
}}</label>
<UInput v-model="searchCode" :placeholder="t('products.search_code_placeholder')"
@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
v-model="priceFromFilter"
type="number"
:placeholder="t('products.price_from')"
@update:model-value="resetPage"
class="dark:text-white text-black"
/>
<UInput v-model="priceFromFilter" 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
v-model="priceToFilter"
type="number"
:placeholder="t('products.price_to')"
@update:model-value="resetPage"
class="dark:text-white text-black"
/>
<UInput v-model="priceToFilter" type="number" :placeholder="t('products.price_to')"
@update:model-value="resetPage" class="dark:text-white text-black" />
</div>
<div class="flex items-end">
<button
@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"
>
<button @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">
{{ t('products.clear_filters') }}
</button>
</div>
@@ -254,4 +239,5 @@ function clearFilters() {
</div>
</div>
</div>
</component>
</template>

4
bo/src/components/customer/Cart1.vue
View File

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

4
bo/src/components/customer/PageAddresses.vue
View File

@@ -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('')

4
bo/src/components/customer/PageCart.vue
View File

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

4
bo/src/components/customer/PageCreateAccount.vue
View File

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

4
bo/src/components/customer/PageCustomerData.vue
View File

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

4
bo/src/components/customer/PageProductCardFull.vue
View File

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

108
bo/src/components/customer/PageProductsList.vue
View File

@@ -1,58 +1,68 @@
<template>
<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">
<span class="text-gray-600 dark:text-gray-400">Loading products...</span>
</div>
<div v-else-if="error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
{{ error }}
</div>
<div v-else class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Image</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Product ID</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Name</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Link</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
<tr v-for="product in productsList" :key="product.product_id"
class="hover:bg-gray-50 dark:hover:bg-gray-800">
<td class="px-6 py-4 whitespace-nowrap">
<img :src="getImageUrl(product.ImageID, product.LinkRewrite,)" alt="product image"
class="w-16 h-16 object-cover rounded" />
</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>
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 dark:text-blue-400">
{{ product.LinkRewrite }}
</td>
</tr>
</tbody>
</table>
<div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
No products found
<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">
<span class="text-gray-600 dark:text-gray-400">Loading products...</span>
</div>
<div v-else-if="error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
{{ error }}
</div>
<div v-else class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Image</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Product ID</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Name</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Link</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
<tr v-for="product in productsList" :key="product.product_id"
class="hover:bg-gray-50 dark:hover:bg-gray-800">
<td class="px-6 py-4 whitespace-nowrap">
<img :src="getImageUrl(product.ImageID, product.LinkRewrite,)" alt="product image"
class="w-16 h-16 object-cover rounded" />
</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>
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 dark:text-blue-400">
{{ product.LinkRewrite }}
</td>
</tr>
</tbody>
</table>
<div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
No products found
</div>
</div>
</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

40
bo/src/components/inner/categoryMenu.vue Normal file
View File

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

45
bo/src/layouts/default.vue
View File

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

35
bo/src/router/index.ts
View File

@@ -23,34 +23,23 @@ const router = createRouter({
{
path: '/:locale',
children: [
{ path: 'category/:category_id-:link_rewrite', component: () => import('../views/CategoryView.vue'), name: 'category' },
{
path: '',
component: Default,
children: [
{ path: '', component: () => import('../views/RepoChartView.vue'), name: 'home' },
{ path: 'products', component: () => import('../components/admin/ProductsView.vue'), name: 'products' },
{ path: 'products-datail/', component: () => import('../components/admin/ProductDetailView.vue'), name: 'product-detail' },
{ path: 'product-card-full/', component: () => import('../components/customer/PageProductCardFull.vue'), name: 'product-card-full' },
{ path: 'addresses', component: () => import('../components/customer/PageAddresses.vue'), name: 'addresses' },
{ path: 'customer-data', component: () => import('../components/customer/PageCustomerData.vue'), name: 'customer-data' },
{ 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: '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: '', component: () => import('@/views/RepoChartView.vue'), name: 'home' },
{ path: 'products', component: () => import('@/components/admin/ProductsView.vue'), name: 'products' },
{ path: 'product-card-full', component: () => import('@/components/customer/PageProductCardFull.vue'), name: 'product-card-full' },
{ path: 'addresses', component: () => import('@/components/customer/PageAddresses.vue'), name: 'addresses' },
{ path: 'customer-data', component: () => import('@/components/customer/PageCustomerData.vue'), name: 'customer-data' },
{ 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'),

40
bo/src/stores/category.ts Normal file
View File

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

25
bo/src/views/CategoryView.vue
View File

@@ -3,8 +3,13 @@
<div class="container mt-24">
<div class="row">
<div class="col-12">
<h1>Category</h1>
{{ $route.params }}
<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>
@@ -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>

3
bo/src/views/RepoChartView.vue
View File

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