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

fix: product-list

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-03-25 09:33:39 +01:00
parent e279899e49
commit 0c448c05c9
8 changed files with 94 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
bo/src/components/TopBar.vue
View File

@@ -19,6 +19,9 @@ const authStore = useAuthStore()
<span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
</RouterLink>
<!-- Right Side Actions -->
<RouterLink :to="{ name: 'products-list' }">
products list
</RouterLink>
<RouterLink :to="{ name: 'product-detail' }">
product detail
</RouterLink>
@@ -37,9 +40,6 @@ const authStore = useAuthStore()
<RouterLink :to="{ name: 'cart1' }">
Cart1
</RouterLink>
<RouterLink :to="{ name: 'products-list' }">
Products List
</RouterLink>
<div class="flex items-center gap-2">
<!-- Language Switcher -->
<LangSwitch />

28
bo/src/components/customer/PageProductsList.vue → bo/src/components/admin/PageProductsList.vue
View File

@@ -22,7 +22,7 @@
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>
Product Code</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>
@@ -33,18 +33,19 @@
</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">
class="hover:bg-gray-50 dark:hover:bg-gray-800"
@click="goToProduct(product.product_id)">
<td class="px-6 py-4 whitespace-nowrap">
<img :src="product.ImageID" alt="product image"
<img :src="product.image_link" 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>
product.reference }}</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 }}
{{ product.link_rewrite }}
</td>
</tr>
</tbody>
@@ -65,13 +66,16 @@
import { ref, onMounted, watch } from 'vue'
import { useFetchJson } from '@/composable/useFetchJson'
import Default from '@/layouts/default.vue'
import { useRouter } from 'vue-router'
interface Product {
product_id: number
reference: number
product_id:number
name: string
ImageID: string
LinkRewrite: string
image_link: string
link_rewrite: string
}
const router = useRouter()
const page = ref(1)
const perPage = ref(15)
@@ -97,6 +101,7 @@ async function fetchProductList() {
) as ApiResponse
productsList.value = response.items || []
console.log(response)
total.value = response.count || 0
} catch (e: unknown) {
error.value = e instanceof Error ? e.message : 'Failed to load products'
@@ -109,4 +114,11 @@ watch(page, () => {
fetchProductList()
})
onMounted(fetchProductList)
function goToProduct(productId: number) {
router.push({
name: 'product-detail',
params: { id: productId }
})
}
</script>

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

@@ -35,11 +35,19 @@
</div>
</div>
<div class="flex items-start gap-30">
<p class="p-80 bg-(--second-light)">img</p>
<div v-if="productStore.loading" class="flex items-center justify-center py-20">
<UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
</div>
<div v-else-if="productStore.error" class="flex items-center justify-center py-20">
<p class="text-red-500">{{ productStore.error }}</p>
</div>
<div v-else-if="productStore.productDescription" class="flex items-start gap-30">
<div class="w-80 h-80 bg-(--second-light) dark:bg-gray-700 rounded-lg flex items-center justify-center">
<span class="text-gray-500 dark:text-gray-400">Product Image</span>
</div>
<div class="flex flex-col gap-2">
<p class="text-[25px] font-bold text-black dark:text-white">
{{ productStore.productDescription.name }}
{{ productStore.productDescription.name || 'Product Name' }}
</p>
<p v-html="productStore.productDescription.description_short" class="text-black dark:text-white"></p>
<div class="space-y-[10px]">
@@ -52,14 +60,14 @@
<div class="flex items-center gap-1">
<UIcon name="marketeq:car-shipping" class="text-[25px] text-green-600" />
<p class="text-[18px] font-bold text-black dark:text-white">
{{ productStore.productDescription.delivery_in_stock }}
{{ productStore.productDescription.delivery_in_stock || 'Delivery information' }}
</p>
</div>
</div>
</div>
</div>
<div class="mt-16">
<div v-if="productStore.productDescription" class="mt-16">
<div class="flex gap-4 my-6">
<UButton @click="activeTab = 'description'"
:class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
@@ -118,21 +126,19 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
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 route = useRoute()
const activeTab = ref('description')
const productStore = useProductStore()
const translating = ref(false)
// const availableLangs = computed(() => {
// return langs.filter((l: Language) => ['cs', 'pl', 'der'].includes(l.iso_code))
// })
const isEditing = ref(false)
const availableLangs = computed(() => langs)
@@ -140,21 +146,29 @@ const availableLangs = computed(() => langs)
const selectedLanguage = ref('pl')
const currentLangId = ref(2)
const productID = ref<number>(0)
// Watch for language changes and refetch product description
watch(selectedLanguage, async (newLang: string) => {
if (productID.value) {
await fetchForLanguage(newLang)
}
})
const fetchForLanguage = async (langCode: string) => {
const lang = langs.find((l: Language) => l.iso_code === langCode)
if (lang) {
await productStore.getProductDescription(lang.id)
if (lang && productID.value) {
await productStore.getProductDescription(lang.id, productID.value)
currentLangId.value = lang.id
}
}
const translateToSelectedLanguage = async () => {
const targetLang = langs.find((l: Language) => l.iso_code === selectedLanguage.value)
if (targetLang && currentLangId.value) {
if (targetLang && currentLangId.value && productID.value) {
translating.value = true
try {
await productStore.translateProductDescription(currentLangId.value, targetLang.id)
await productStore.translateProductDescription(productID.value, currentLangId.value, targetLang.id)
currentLangId.value = targetLang.id
} finally {
translating.value = false
@@ -162,7 +176,14 @@ const translateToSelectedLanguage = async () => {
}
}
await fetchForLanguage(selectedLanguage.value)
onMounted(async () => {
const id = route.params.id
if (id) {
productID.value = Number(id)
await fetchForLanguage(selectedLanguage.value)
}
})
const descriptionRef = ref<HTMLElement | null>(null)
const usageRef = ref<HTMLElement | null>(null)
@@ -174,7 +195,7 @@ const originalUsage = ref('')
const saveDescription = async () => {
descriptionEdit.disableEdit()
await productStore.saveProductDescription()
await productStore.saveProductDescription(productID.value)
}
const cancelDescriptionEdit = () => {
@@ -202,7 +223,7 @@ const enableEdit = () => {
const saveText = () => {
usageEdit.disableEdit()
isEditing.value = false
productStore.saveProductDescription()
productStore.saveProductDescription(productID.value)
}
const cancelEdit = () => {

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

@@ -23,9 +23,9 @@ const page = ref(1)
const pageSize = 5
// Fetch products on mount
onMounted(() => {
productStore.getProductDescription()
})
// onMounted(() => {
// productStore.getProductDescription(langID: , productID.value)
// })
// Filtered products
// const filteredProducts = computed(() => {

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

@@ -2,8 +2,8 @@ import { createRouter, createWebHistory } from 'vue-router'
import { currentLang, langs } from './langs'
import { getSettings } from './settings'
import { useAuthStore } from '@/stores/auth'
import Default from '@/layouts/default.vue'
import { getMenu } from './menu'
// import Default from '@/layouts/default.vue'
// import { getMenu } from './menu'
function isAuthenticated(): boolean {
@@ -34,7 +34,7 @@ const router = createRouter({
{ 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: 'products-list', component: () => import('@/components/admin/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 } },

29
bo/src/stores/product.ts
View File

@@ -1,6 +1,7 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { useFetchJson } from '@/composable/useFetchJson'
import type { ProductDescription } from '@/types/product'
export interface Product {
id: number
@@ -27,25 +28,29 @@ export const useProductStore = defineStore('product', () => {
const loading = ref(false)
const error = ref<string | null>(null)
async function getProductDescription(langId: number = 1) {
async function getProductDescription(langId = 1, productID: number) {
loading.value = true
error.value = null
try {
const response = await useFetchJson(`/api/v1/restricted/product-description/get-product-description?productID=51&productShopID=1&productLangID=${langId}`)
productDescription.value = response
} catch (e: any) {
error.value = e?.message || 'Failed to load product description'
console.error('Failed to fetch product description:', e)
const response = await useFetchJson<ProductDescription>(
`/api/v1/restricted/product-description/get-product-description?productID=${productID}&productLangID=${langId}`
)
console.log(response, 'dfsfsdf');
productDescription.value = response.items
} catch (e: unknown) {
error.value = e instanceof Error ? e.message : 'Failed to load product description'
} finally {
loading.value = false
}
}
async function saveProductDescription() {
async function saveProductDescription(productID?: number) {
const id = productID || 1
try {
const data = await useFetchJson(
`/api/v1/restricted/product-description/save-product-description?productID=1&productShopID=1&productLangID=1`,
`/api/v1/restricted/product-description/save-product-description?productID=${id}&productShopID=1&productLangID=1`,
{
method: 'POST',
body: JSON.stringify(
@@ -64,14 +69,14 @@ export const useProductStore = defineStore('product', () => {
}
}
async function translateProductDescription(fromLangId: number, toLangId: number) {
async function translateProductDescription(productID: number, fromLangId: number, toLangId: number) {
loading.value = true
error.value = null
try {
const response = await useFetchJson(`/api/v1/restricted/product-description/translate-product-description?productID=51&productShopID=1&productFromLangID=${fromLangId}&productToLangID=${toLangId}&model=OpenAI`)
productDescription.value = response
return response
const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-description/translate-product-description?productID=${productID}&productShopID=1&productFromLangID=${fromLangId}&productToLangID=${toLangId}&model=OpenAI`)
productDescription.value = response.items
return response.items
} catch (e: any) {
error.value = e?.message || 'Failed to translate product description'
console.error('Failed to translate product description:', e)

9
bo/src/types/product.d.ts vendored Normal file
View File

@@ -0,0 +1,9 @@
export interface ProductDescription {
id?: number
name?: string
description: string
description_short: string
meta_description: string
available_now: string
usage: string
}