From 79730eb826f196b3a36d05c0065ab6ad41701b5c Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Wed, 1 Apr 2026 16:19:02 +0200
Subject: [PATCH] fix: save product descriptions

---
 bo/src/components/admin/ProductDetailView.vue | 89 +++++++++++--------
 bo/src/router/index.ts                        |  3 +-
 bo/src/router/langs.ts                        | 48 +++++-----
 bo/src/stores/product.ts                      | 10 ++-
 4 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 840dd43..eb57353 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -1,18 +1,25 @@
 <template>
   <component :is="Default || 'div'">
-
     <div class="container my-10 mx-auto ">
       <div
         class="flex items-end justify-between gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
-        <div class="flex items-end gap-3">
-          <USelect v-model="selectedLanguage" :items="availableLangs" variant="outline" class="w-40!" valueKey="id">
+        <div class="flex items-center gap-3" v-if="!isTranslations">
+          <p class="text-red-500 text-md">Translate from Polish to</p>
+          <USelect v-model="toLangId" :items="availableLangs" variant="outline" class="w-40!" valueKey="id">
             <template #default="{ modelValue }">
               <div class="flex items-center gap-2">
-                <span class="text-md">{{availableLangs.find(x => x.id == modelValue)?.flag}}</span>
-                <span class="font-medium dark:text-white text-black">{{availableLangs.find(x => x.id ==
-                  modelValue)?.name}}</span>
+                <span v-if="!modelValue" class="text-gray-400">
+                  Select language
+                </span>
+                <template v-else>
+                  <span class="text-md">{{availableLangs.find(x => x.id === modelValue)?.flag}}</span>
+                  <span class="font-medium dark:text-white text-black">
+                    {{availableLangs.find(x => x.id === modelValue)?.name}}
+                  </span>
+                </template>
               </div>
             </template>
+
             <template #item-leading="{ item }">
               <div class="flex items-center rounded-md cursor-pointer transition-colors">
                 <span class="text-md">{{ item.flag }}</span>
@@ -20,11 +27,30 @@
               </div>
             </template>
           </USelect>
+
         </div>
+
+        <UButton @click="fetchForLanguage(toLangId)" color="primary"
+          class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
+          Show product
+        </UButton>
         <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating"
+          v-if="isTranslations === false"
           class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
           Translate
         </UButton>
+        <div v-else class="flex gap-3 items-end">
+          <UButton @click="() => {
+            toLangId = settingStore.shopDefaultLanguage
+            isTranslations = false
+          }" color="primary" class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
+            Cancel
+          </UButton>
+          <UButton color="primary" @click="saveDescription"
+            class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
+            Save
+          </UButton>
+        </div>
       </div>
 
       <div v-if="translating" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
@@ -137,7 +163,6 @@ import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
 import { useProductStore } from '@/stores/product';
 import { useSettingsStore } from '@/stores/settings';
-import type { Language } from '@/types';
 import { watch } from 'vue';
 import { onMounted, ref } from 'vue';
 import { computed } from 'vue';
@@ -146,15 +171,13 @@ import { useRoute } from 'vue-router';
 const route = useRoute()
 const settingStore = useSettingsStore()
 const productStore = useProductStore()
+const isTranslations = ref(false)
 
-
-const selectedLanguage = ref(settingStore.shopDefaultLanguage)
-const availableLangs = computed(() => langs)
-const productID = ref<number>(0)
 const toLangId = ref(settingStore.shopDefaultLanguage)
-const defaultLangId = ref(settingStore.shopDefaultLanguage)
-const translating = ref(false)
 
+const availableLangs = computed(() => langs.filter(item => item.id !== settingStore.shopDefaultLanguage))
+const productID = ref<number>(0)
+const translating = ref(false)
 
 const activeTab = ref('description')
 const usageRef = ref<HTMLElement | null>(null)
@@ -163,50 +186,39 @@ const isEditing = ref(false)
 const usageEdit = useEditable(usageRef)
 const descriptionRef = ref<HTMLElement | null>(null)
 const descriptionEdit = useEditable(descriptionRef)
-
-
 const originalDescription = ref('')
 
-// Коли користувач обирає мову, ця функція бере текст продукту з основної мови і перекладає його на вибрану мову. Поки переклад йде – показує спінер. Коли переклад готовий, активна мова оновлюється, а спінер зникає.
-
 const translateToSelectedLanguage = async () => {
-  const targetLang = langs.find((l: Language) => l.id === selectedLanguage.value)
-  if (targetLang && toLangId.value && productID.value) {
+  if (toLangId.value && productID.value) {
     translating.value = true
     try {
-      await productStore.translateProductDescription(productID.value, toLangId.value, defaultLangId.value)
-      toLangId.value = targetLang.id
+      await productStore.translateProductDescription(productID.value, toLangId.value)
     } finally {
       translating.value = false
     }
   }
-}
-
-
-// знайти мову → підвантажити опис → запам’ятати, що це “базова” мова для перекладу.
-const fetchForLanguage = async (langCode: number) => {
-  const lang = langs.find((l: Language) => l.id === langCode)
-  if (lang && productID.value) {
-    await productStore.getProductDescription(lang.id, productID.value)
-    toLangId.value = lang.id
+  if (productStore.productDescription) {
+    isTranslations.value = true
   }
 }
 
-watch(selectedLanguage, async (newLang: number) => {
-  if (productID.value) {
-    await fetchForLanguage(newLang)
+const fetchForLanguage = async (langId: number) => {
+  if (langId && productID.value) {
+    await productStore.getProductDescription(langId, productID.value)
   }
-})
+}
+
 
 onMounted(async () => {
   const id = route.params.product_id
   if (id) {
     productID.value = Number(id)
-    await fetchForLanguage(selectedLanguage.value)
+    await fetchForLanguage(toLangId.value)
   }
 })
 
 
+// text edit
 const enableEdit = () => {
   if (usageRef.value) {
     originalUsage.value = usageRef.value.innerHTML
@@ -249,6 +261,8 @@ const saveDescription = async () => {
   descriptionEdit.disableEdit()
 
   await productStore.saveProductDescription(productID.value, toLangId.value)
+  toLangId.value = settingStore.shopDefaultLanguage
+  isTranslations.value = false
 }
 
 const cancelDescriptionEdit = () => {
@@ -257,6 +271,7 @@ const cancelDescriptionEdit = () => {
   }
   descriptionEdit.disableEdit()
 }
+
 </script>
 
 
@@ -328,10 +343,6 @@ const cancelDescriptionEdit = () => {
         </div>
       </div>
 
-
-
-
-
       <div v-if="productStore.productDescription" class="mt-16">
         <div class="flex gap-4 my-6">
           <UButton @click="activeTab = 'description'"
diff --git a/bo/src/router/index.ts b/bo/src/router/index.ts
index 0dc8688..745d15e 100644
--- a/bo/src/router/index.ts
+++ b/bo/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { currentLang, langs } from './langs'
+import { currentLang, langs, switchLocalization } from './langs'
 import { getSettings } from './settings'
 import { useAuthStore } from '@/stores/auth'
 import { getRoutes } from './menu'
@@ -8,6 +8,7 @@ function isAuthenticated(): boolean {
   if (typeof document === 'undefined') return false
   return document.cookie.split('; ').some((c) => c === 'is_authenticated=1')
 }
+await switchLocalization()
 await getSettings()
 
 const routes = await getRoutes()
diff --git a/bo/src/router/langs.ts b/bo/src/router/langs.ts
index 3a0b434..b39e195 100644
--- a/bo/src/router/langs.ts
+++ b/bo/src/router/langs.ts
@@ -17,39 +17,39 @@ const cookie = useCookie()
 
 // Initialize languages from API
 export async function initLangs() {
-    try {
-        const { items } = await useFetchJson<Language[]>('/api/v1/langs')
-        langs.push(...items)
+  try {
+    const { items } = await useFetchJson<Language[]>('/api/v1/langs')
+    langs.push(...items)
 
-        let idfromcookie = null
-        const cc = cookie.getCookie('lang_id')
-        if (cc) {
-            idfromcookie = langs.find((x) => x.id == parseInt(cc))
-        }
-        defLang.value = items.find((x) => x.is_default == true)
-        currentLang.value = idfromcookie ?? defLang.value
-    } catch (error) {
-        console.error('Failed to fetch languages:', error)
+    let idfromcookie = null
+    const cc = cookie.getCookie('lang_id')
+    if (cc) {
+      idfromcookie = langs.find((x) => x.id == parseInt(cc))
     }
+    defLang.value = items.find((x) => x.is_default == true)
+    currentLang.value = idfromcookie ?? defLang.value
+  } catch (error) {
+    console.error('Failed to fetch languages:', error)
+  }
 }
 
 // Initialize country/currency from API
 
 export async function initCountryCurrency() {
-    try {
-        const { items } = await useFetchJson<Country[]>('/api/v1/restricted/langs-and-countries/get-countries')
-        countries.push(...items)
+  try {
+    const { items } = await useFetchJson<Country[]>('/api/v1/restricted/langs-and-countries/get-countries')
+    countries.push(...items)
 
-        let idfromcookie = null
-        const cc = cookie.getCookie('country_id')
-        if (cc) {
-            idfromcookie = langs.find((x) => x.id == parseInt(cc))
-        }
-        defCountry.value = items.find((x) => x.id === defLang.value?.id)
-        currentCountry.value = idfromcookie ?? defCountry.value
-    } catch (error) {
-        console.error('Failed to fetch languages:', error)
+    let idfromcookie = null
+    const cc = cookie.getCookie('country_id')
+    if (cc) {
+      idfromcookie = langs.find((x) => x.id == parseInt(cc))
     }
+    defCountry.value = items.find((x) => x.id === defLang.value?.id)
+    currentCountry.value = idfromcookie ?? defCountry.value
+  } catch (error) {
+    console.error('Failed to fetch languages:', error)
+  }
 }
 
 export async function switchLocalization() {
diff --git a/bo/src/stores/product.ts b/bo/src/stores/product.ts
index 27e3ad7..2283b4b 100644
--- a/bo/src/stores/product.ts
+++ b/bo/src/stores/product.ts
@@ -37,7 +37,7 @@ export const useProductStore = defineStore('product', () => {
         `/api/v1/restricted/product-translation/get-product-description?productID=${productID}&productLangID=${langId}`
       )
       productDescription.value = response.items
-      console.log(productDescription, 'dfsfsdf');
+  
     } catch (e: unknown) {
       error.value = e instanceof Error ? e.message : 'Failed to load product description'
     } finally {
@@ -45,12 +45,13 @@ export const useProductStore = defineStore('product', () => {
     }
   }
 
-  async function translateProductDescription(productID: number, toLangId: number, defaultLangId: number, model: string = 'OpenAI') {
+  const settingStore = useSettingsStore()
+  async function translateProductDescription(productID: number, toLangId: number, model: string = 'Google') {
     loading.value = true
     error.value = null
 
     try {
-      const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-translation/translate-product-description?productID=${productID}&productFromLangID=${defaultLangId}&productToLangID=${toLangId}&model=${model}`)
+      const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-translation/translate-product-description?productID=${productID}&productFromLangID=${settingStore.shopDefaultLanguage}&productToLangID=${toLangId}&model=${model}`)
       productDescription.value = response.items
       return response.items
     } catch (e: any) {
@@ -87,7 +88,8 @@ export const useProductStore = defineStore('product', () => {
             meta_description: stripHtml(productDescription.value?.meta_description || ''),
             available_now: stripHtml(productDescription.value?.available_now || ''),
             available_later: stripHtml(productDescription.value?.available_later || ''),
-            usage: stripHtml(productDescription.value?.usage || '')
+            usage: stripHtml(productDescription.value?.usage || ''),
+            // delivery_in_stock: stripHtml(productDescription.value?.delivery_in_stock || '')
           })
         }
       )