fix: product-list

bo/components.d.ts

@@ -25,7 +25,7 @@ declare module 'vue' {
     PageCreateAccount: typeof import('./src/components/customer/PageCreateAccount.vue')['default']
     PageCustomerData: typeof import('./src/components/customer/PageCustomerData.vue')['default']
     PageProductCardFull: typeof import('./src/components/customer/PageProductCardFull.vue')['default']
-    PageProductsList: typeof import('./src/components/customer/PageProductsList.vue')['default']
+    PageProductsList: typeof import('./src/components/admin/PageProductsList.vue')['default']
     Pl_PrivacyPolicyView: typeof import('./src/components/terms/pl_PrivacyPolicyView.vue')['default']
     Pl_TermsAndConditionsView: typeof import('./src/components/terms/pl_TermsAndConditionsView.vue')['default']
     ProductCustomization: typeof import('./src/components/customer/components/ProductCustomization.vue')['default']

bo/src/components/TopBar.vue

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

bo/src/components/admin/PageProductsList.vue

@@ -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 {
+    reference: number
     product_id:number
     name: string
-    ImageID: string
+    image_link: string
-    LinkRewrite: 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>

bo/src/components/admin/ProductDetailView.vue

@@ -35,11 +35,19 @@
       </div>
     </div>
 
-    <div class="flex items-start gap-30">
+    <div v-if="productStore.loading" class="flex items-center justify-center py-20">
-      <p class="p-80 bg-(--second-light)">img</p>
+      <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) {
+  if (lang && productID.value) {
-    await productStore.getProductDescription(lang.id)
+    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 () => {
   }
 }
 
+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 = () => {

bo/src/components/admin/ProductsView.vue

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

bo/src/router/index.ts

@@ -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 Default from '@/layouts/default.vue'
-import { getMenu } from './menu'
+// 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 } },

bo/src/stores/product.ts

@@ -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}`)
+      const response = await useFetchJson<ProductDescription>(
-      productDescription.value = response
+        `/api/v1/restricted/product-description/get-product-description?productID=${productID}&productLangID=${langId}`
-    } catch (e: any) {
+      )
-      error.value = e?.message || 'Failed to load product description'
+      console.log(response, 'dfsfsdf');
-      console.error('Failed to fetch product description:', e)
+      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`)
+      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
+      productDescription.value = response.items
-      return response
+      return response.items
     } catch (e: any) {
       error.value = e?.message || 'Failed to translate product description'
       console.error('Failed to translate product description:', e)

bo/src/types/product.d.ts

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