fix: select for languages

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

bo/src/components/admin/ProductDetailView.vue

@@ -4,27 +4,43 @@
     <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">
+        <div class="flex items-center gap-3" v-if="!isTranslations">
-          <USelect v-model="selectedLanguage" :items="availableLangs" variant="outline" class="w-40!" valueKey="id">
+          <p class="text-red-500 text-md whitespace-nowrap">Translate from Polish to</p>
-            <template #default="{ modelValue }">
+          <USelect v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
-              <div class="flex items-center gap-2">
+            placeholder="Select language" class="w-48">
-                <span class="text-md">{{availableLangs.find(x => x.id == modelValue)?.flag}}</span>
+            <template #selected="{ modelValue }">
-                <span class="font-medium dark:text-white text-black">{{availableLangs.find(x => x.id ==
+              {{ modelValue }}
-                  modelValue)?.name}}</span>
-              </div>
             </template>
-            <template #item-leading="{ item }">
+            <template #item-label="{ item }">
-              <div class="flex items-center rounded-md cursor-pointer transition-colors">
+              <div class="flex items-center gap-2">
-                <span class="text-md">{{ item.flag }}</span>
+                <span>{{ item.flag }}</span>
-                <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
+                <span>{{ item.name }}</span>
               </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">
@@ -124,10 +140,7 @@
           </div>
         </div>
       </div>
-
-
     </div>
-
   </component>
 </template>
 
@@ -137,7 +150,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';
@@ -167,16 +179,14 @@ function backFromProduct() {
 const route = useRoute()
 const settingStore = useSettingsStore()
 const productStore = useProductStore()
+const isTranslations = ref(false)
 
+const toLangId = ref(null)
 
-const selectedLanguage = ref(settingStore.shopDefaultLanguage)
+const availableLangs = computed(() => langs.filter(item => item.id !== 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 activeTab = ref('description')
 const usageRef = ref<HTMLElement | null>(null)
 const originalUsage = ref('')
@@ -184,50 +194,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 (toLangId.value && productID.value) {
-  if (targetLang && toLangId.value && productID.value) {
     translating.value = true
     try {
-      await productStore.translateProductDescription(productID.value, toLangId.value, defaultLangId.value)
+      await productStore.translateProductDescription(productID.value, toLangId.value)
-      toLangId.value = targetLang.id
     } finally {
       translating.value = false
     }
   }
-}
+  if (productStore.productDescription) {
-
+    isTranslations.value = true
-
-// знайти мову → підвантажити опис → запам’ятати, що це “базова” мова для перекладу.
-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
   }
 }
 
-watch(selectedLanguage, async (newLang: number) => {
+const fetchForLanguage = async (langId: number | null) => {
   if (productID.value) {
-    await fetchForLanguage(newLang)
+    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
@@ -270,6 +269,8 @@ const saveDescription = async () => {
   descriptionEdit.disableEdit()
 
   await productStore.saveProductDescription(productID.value, toLangId.value)
+  toLangId.value = settingStore.shopDefaultLanguage
+  isTranslations.value = false
 }
 
 const cancelDescriptionEdit = () => {
@@ -278,6 +279,7 @@ const cancelDescriptionEdit = () => {
   }
   descriptionEdit.disableEdit()
 }
+
 </script>
 
 
@@ -349,10 +351,6 @@ const cancelDescriptionEdit = () => {
         </div>
       </div>
 
-
-
-
-
       <div v-if="productStore.productDescription" class="mt-16">
         <div class="flex gap-4 my-6">
           <UButton @click="activeTab = 'description'"

bo/src/router/langs.ts

@@ -17,39 +17,39 @@ const cookie = useCookie()
 
 // Initialize languages from API
 export async function initLangs() {
-    try {
+  try {
-        const { items } = await useFetchJson<Language[]>('/api/v1/langs')
+    const { items } = await useFetchJson<Language[]>('/api/v1/langs')
-        langs.push(...items)
+    langs.push(...items)
 
-        let idfromcookie = null
+    let idfromcookie = null
-        const cc = cookie.getCookie('lang_id')
+    const cc = cookie.getCookie('lang_id')
-        if (cc) {
+    if (cc) {
-            idfromcookie = langs.find((x) => x.id == parseInt(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)
     }
+    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 {
+  try {
-        const { items } = await useFetchJson<Country[]>('/api/v1/restricted/langs-and-countries/get-countries')
+    const { items } = await useFetchJson<Country[]>('/api/v1/restricted/langs-and-countries/get-countries')
-        countries.push(...items)
+    countries.push(...items)
 
-        let idfromcookie = null
+    let idfromcookie = null
-        const cc = cookie.getCookie('country_id')
+    const cc = cookie.getCookie('country_id')
-        if (cc) {
+    if (cc) {
-            idfromcookie = langs.find((x) => x.id == parseInt(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)
     }
+    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() {

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
-      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 || '')
           })
         }
       )