fix: product-list

2026-03-25 09:33:39 +01:00
parent e279899e49
commit 0c448c05c9
8 changed files with 94 additions and 47 deletions
--- a/bo/src/components/TopBar.vue
+++ b/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 />
--- a/bo/src/components/customer/PageProductsList.vue
+++ b/bo/src/components/customer/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 {
-    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>
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -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 = () => {
--- a/bo/src/components/admin/ProductsView.vue
+++ b/bo/src/components/admin/ProductsView.vue
@@ -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(() => {