goc_daniel/b2b
2
0
Fork 0
Code Issues 7 Pull Requests 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

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