From 126625bace18d2720559a8d001b5f2d6900b6045 Mon Sep 17 00:00:00 2001 From: Yakovenko Valeriia Date: Fri, 13 Mar 2026 08:56:40 +0100 Subject: [PATCH] fix: product description --- bo/src/assets/main.css | 1 - bo/src/components/TopBar.vue | 3 + bo/src/router/index.ts | 2 +- bo/src/stores/product.ts | 23 +- bo/src/views/RepoChartView.vue | 2 + bo/src/views/customer/ProductDetailView.vue | 340 +++----------------- bo/src/views/customer/ProductsView.vue | 53 +-- 7 files changed, 81 insertions(+), 343 deletions(-) diff --git a/bo/src/assets/main.css b/bo/src/assets/main.css index 56c84e3..77bddb8 100644 --- a/bo/src/assets/main.css +++ b/bo/src/assets/main.css @@ -11,7 +11,6 @@ body { .container{ max-width: 2100px; - margin: auto; } @theme { diff --git a/bo/src/components/TopBar.vue b/bo/src/components/TopBar.vue index e8fa41b..eb632f7 100644 --- a/bo/src/components/TopBar.vue +++ b/bo/src/components/TopBar.vue @@ -19,6 +19,9 @@ const authStore = useAuthStore() TimeTracker + + product detail +
diff --git a/bo/src/router/index.ts b/bo/src/router/index.ts index b913e6d..a0fe04e 100644 --- a/bo/src/router/index.ts +++ b/bo/src/router/index.ts @@ -32,7 +32,7 @@ const router = createRouter({ children: [ { path: '', component: () => import('../views/RepoChartView.vue'), name: 'home' }, { path: 'products', component: () => import('../views/customer/ProductsView.vue'), name: 'products' }, - { path: 'products/:id', component: () => import('../views/customer/ProductDetailView.vue'), name: 'product-detail' }, + { path: 'products-datail/', component: () => import('../views/customer/ProductDetailView.vue'), name: 'product-detail' }, ], }, { diff --git a/bo/src/stores/product.ts b/bo/src/stores/product.ts index d9816fb..7dec3d7 100644 --- a/bo/src/stores/product.ts +++ b/bo/src/stores/product.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia' -import { ref, computed } from 'vue' +import { ref } from 'vue' import { useFetchJson } from '@/composable/useFetchJson' export interface Product { @@ -22,31 +22,26 @@ export interface ProductResponse { } export const useProductStore = defineStore('product', () => { - const products = ref([]) + const productDescription = ref() const currentProduct = ref(null) const loading = ref(false) const error = ref(null) // Fetch all products - async function fetchProducts() { + async function getProductDescription() { loading.value = true error.value = null try { - const data = await useFetchJson('/api/v1/restricted/product-description', { - method: 'GET', - }) -console.log(data) - const response = (data as any).items || data - products.value = response.items || response || [] + const response = await useFetchJson('/api/v1/restricted/product-description/get-product-description?productID=51&productShopID=1&productLangID=1') + productDescription.value = response } catch (e: any) { - error.value = e?.message || 'Failed to load products' - console.error('Failed to fetch products:', e) + error.value = e?.message || 'Failed to load product description' + console.error('Failed to fetch product description:', e) } finally { loading.value = false } } - // Fetch single product by ID async function fetchProductById(id: number) { loading.value = true @@ -74,11 +69,11 @@ console.log(data) } return { - products, + productDescription, currentProduct, loading, error, - fetchProducts, + getProductDescription, fetchProductById, clearCurrentProduct, } diff --git a/bo/src/views/RepoChartView.vue b/bo/src/views/RepoChartView.vue index 749817c..fee05fe 100644 --- a/bo/src/views/RepoChartView.vue +++ b/bo/src/views/RepoChartView.vue @@ -15,6 +15,8 @@ import { useAuthStore } from '@/stores/auth' import { i18n } from '@/plugins/02_i18n' import type { TableColumn } from '@nuxt/ui' import { useI18n } from 'vue-i18n' +import ProductDetailView from './customer/ProductDetailView.vue' +import ProductsView from './customer/ProductsView.vue' ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) diff --git a/bo/src/views/customer/ProductDetailView.vue b/bo/src/views/customer/ProductDetailView.vue index 294b12f..e7b52ee 100644 --- a/bo/src/views/customer/ProductDetailView.vue +++ b/bo/src/views/customer/ProductDetailView.vue @@ -1,304 +1,42 @@ - - + + + + \ No newline at end of file diff --git a/bo/src/views/customer/ProductsView.vue b/bo/src/views/customer/ProductsView.vue index 19cca53..7ea7c9f 100644 --- a/bo/src/views/customer/ProductsView.vue +++ b/bo/src/views/customer/ProductsView.vue @@ -12,7 +12,6 @@ const authStore = useAuthStore() const productStore = useProductStore() const { t } = useI18n() -// Search filters const searchName = ref('') const searchCode = ref('') const priceFromFilter = ref(null) @@ -24,28 +23,30 @@ const pageSize = 5 // Fetch products on mount onMounted(() => { - productStore.fetchProducts() + productStore.getProductDescription() }) // Filtered products -const filteredProducts = computed(() => { - return productStore.products.filter(product => { - const matchesName = product.name.toLowerCase().includes(searchName.value.toLowerCase()) - const matchesCode = product.code.toLowerCase().includes(searchCode.value.toLowerCase()) - const matchesPriceFrom = priceFromFilter.value === null || product.priceFrom >= priceFromFilter.value - const matchesPriceTo = priceToFilter.value === null || product.priceTo <= priceToFilter.value +// const filteredProducts = computed(() => { +// console.log(productStore.products); + +// return productStore.products.filter(product => { +// const matchesName = product.name.toLowerCase().includes(searchName.value.toLowerCase()) +// const matchesCode = product.code.toLowerCase().includes(searchCode.value.toLowerCase()) +// const matchesPriceFrom = priceFromFilter.value === null || product.priceFrom >= priceFromFilter.value +// const matchesPriceTo = priceToFilter.value === null || product.priceTo <= priceToFilter.value - return matchesName && matchesCode && matchesPriceFrom && matchesPriceTo - }) -}) +// return matchesName && matchesCode && matchesPriceFrom && matchesPriceTo +// }) +// }) -const totalItems = computed(() => filteredProducts.value.length) +// const totalItems = computed(() => filteredProducts.value.length) -const paginatedProducts = computed(() => { - const start = (page.value - 1) * pageSize - const end = start + pageSize - return filteredProducts.value.slice(start, end) -}) +// const paginatedProducts = computed(() => { +// const start = (page.value - 1) * pageSize +// const end = start + pageSize +// return filteredProducts.value.slice(start, end) +// }) // Reset page when filters change function resetPage() { @@ -154,6 +155,7 @@ function clearFilters() {