From d0c055a819c8c42036cd18581ae6bb4c4ac82091 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Thu, 2 Apr 2026 08:52:29 +0200
Subject: [PATCH] fix: select for languages

---
 bo/components.d.ts                            |  1 +
 bo/src/components/admin/ProductDetailView.vue | 38 ++++++-------------
 bo/src/stores/product.ts                      |  6 +--
 3 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/bo/components.d.ts b/bo/components.d.ts
index aabe3f5..7c39661 100644
--- a/bo/components.d.ts
+++ b/bo/components.d.ts
@@ -40,6 +40,7 @@ declare module 'vue' {
     TopBar: typeof import('./src/components/TopBar.vue')['default']
     TopBarLogin: typeof import('./src/components/TopBarLogin.vue')['default']
     UAlert: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Alert.vue')['default']
+    UAvatar: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Avatar.vue')['default']
     UButton: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Button.vue')['default']
     UCard: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Card.vue')['default']
     UCheckbox: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Checkbox.vue')['default']
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 2efe361..7dd650a 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -5,30 +5,19 @@
       <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">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 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>
+          <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-leading="{ item }">
-              <div class="flex items-center rounded-md cursor-pointer transition-colors">
-                <span class="text-md">{{ item.flag }}</span>
-                <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
+            <template #item-label="{ item }">
+              <div class="flex items-center gap-2">
+                <span>{{ item.flag }}</span>
+                <span>{{ item.name }}</span>
               </div>
             </template>
           </USelect>
-
         </div>
 
         <UButton @click="fetchForLanguage(toLangId)" color="primary"
@@ -151,10 +140,7 @@
           </div>
         </div>
       </div>
-
-
     </div>
-
   </component>
 </template>
 
@@ -195,7 +181,7 @@ const settingStore = useSettingsStore()
 const productStore = useProductStore()
 const isTranslations = ref(false)
 
-const toLangId = ref(settingStore.shopDefaultLanguage)
+const toLangId = ref(null)
 
 const availableLangs = computed(() => langs.filter(item => item.id !== settingStore.shopDefaultLanguage))
 const productID = ref<number>(0)
@@ -224,8 +210,8 @@ const translateToSelectedLanguage = async () => {
   }
 }
 
-const fetchForLanguage = async (langId: number) => {
-  if (langId && productID.value) {
+const fetchForLanguage = async (langId: number | null) => {
+  if (productID.value) {
     await productStore.getProductDescription(langId, productID.value)
   }
 }
diff --git a/bo/src/stores/product.ts b/bo/src/stores/product.ts
index 2283b4b..a400bd2 100644
--- a/bo/src/stores/product.ts
+++ b/bo/src/stores/product.ts
@@ -29,15 +29,15 @@ export const useProductStore = defineStore('product', () => {
   const error = ref<string | null>(null)
   const productDescription = ref()
 
-  async function getProductDescription(langId: number, productID: number) {
+  async function getProductDescription(langId: number | null, productID: number) {
     loading.value = true
     error.value = null
     try {
       const response = await useFetchJson<ProductDescription>(
-        `/api/v1/restricted/product-translation/get-product-description?productID=${productID}&productLangID=${langId}`
+        `/api/v1/restricted/product-translation/get-product-description?productID=${productID}&productLangID=${langId ? langId : settingStore.shopDefaultLanguage}`
       )
       productDescription.value = response.items
-  
+
     } catch (e: unknown) {
       error.value = e instanceof Error ? e.message : 'Failed to load product description'
     } finally {