fix: product-list

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 = () => {