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/admin/PageProductsList.vue
+++ b/bo/src/components/admin/PageProductsList.vue
@@ -0,0 +1,124 @@
+<template>
+    <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 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>
+                                <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"
+                                @click="goToProduct(product.product_id)">
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <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.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.link_rewrite }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div class="flex justify-center items-center py-8">
+                        <UPagination v-model:page="page" :total="total" :page-size="perPage" />
+                    </div>
+                    <div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
+                        No products found
+                    </div>
+                </div>
+            </div>
+        </component>
+    </suspense>
+</template>
+
+<script setup lang="ts">
+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
+    image_link: string
+    link_rewrite: string
+}
+
+const router = useRouter()
+
+const page = ref(1)
+const perPage = ref(15)
+const total = ref(0)
+
+interface ApiResponse {
+    message: string
+    items: Product[]
+    count: number
+}
+
+const productsList = ref<Product[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+async function fetchProductList() {
+    loading.value = true
+    error.value = null
+
+    try {
+        const response = await useFetchJson(
+            `api/v1/restricted/list-products/get-listing?p=${page.value}&elems=${perPage.value}`
+        ) 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'
+    } finally {
+        loading.value = false
+    }
+}
+
+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(() => {