From 7e8e9897e165173c738b300cee29819b58f98fb1 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Thu, 2 Apr 2026 09:01:26 +0200
Subject: [PATCH] fix: button showProduct

---
 bo/src/components/admin/ProductDetailView.vue | 59 ++++++++++++++-----
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 0b9afb7..f94ee32 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -3,21 +3,50 @@
     <p class="cursor-pointer" @click="backFromProduct()">Back to products</p>
     <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-center gap-3" v-if="!isTranslations">
-          <p class="text-red-500 text-md whitespace-nowrap">Translate from Polish to</p>
-          <USelect v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
-            placeholder="Select language" class="w-48">
-            <template #selected="{ modelValue }">
-              {{ modelValue }}
-            </template>
-            <template #item-label="{ item }">
-              <div class="flex items-center gap-2">
-                <span>{{ item.flag }}</span>
-                <span>{{ item.name }}</span>
-              </div>
-            </template>
-          </USelect>
+        class=" gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        <div v-if="!isShowProductView" class="flex items-end justify-between">
+          <div class="flex items-center gap-3" v-if="!isTranslations">
+            <p class="text-red-500 text-md whitespace-nowrap">Translate from Polish to</p>
+            <USelect v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
+              placeholder="Select language" class="w-48">
+              <template #selected="{ modelValue }">
+                {{ modelValue }}
+              </template>
+              <template #item-label="{ item }">
+                <div class="flex items-center gap-2">
+                  <span>{{ item.flag }}</span>
+                  <span>{{ item.name }}</span>
+                </div>
+              </template>
+            </USelect>
+          </div>
+
+          <div class="flex gap-3 items-end justify-end">
+            <UButton @click="() => {
+              fetchForLanguage(toLangId)
+              isShowProductView = true
+            }" color="primary" v-if="isTranslations === false"
+              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 justify-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>
         <div v-else>
           <UButton @click="isShowProductView = false" color="primary"