fix: save product descriptions

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'"