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

@@ -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>
+          <p class="text-red-500 text-md whitespace-nowrap">Translate from Polish to</p>
-          <USelect v-model="toLangId" :items="availableLangs" variant="outline" class="w-40!" valueKey="id">
+          <USelect v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
-            <template #default="{ modelValue }">
+            placeholder="Select language" class="w-48">
-              <div class="flex items-center gap-2">
+            <template #selected="{ modelValue }">
-                <span v-if="!modelValue" class="text-gray-400">
+              {{ modelValue }}
-                  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-label="{ item }">
-            <template #item-leading="{ item }">
+              <div class="flex items-center gap-2">
-              <div class="flex items-center rounded-md cursor-pointer transition-colors">
+                <span>{{ item.flag }}</span>
-                <span class="text-md">{{ item.flag }}</span>
+                <span>{{ item.name }}</span>
-                <span class="ml-2 dark:text-white text-black font-medium">{{ 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) => {
+const fetchForLanguage = async (langId: number | null) => {
-  if (langId && productID.value) {
+  if (productID.value) {
     await productStore.getProductDescription(langId, productID.value)
   }
 }

bo/src/stores/product.ts

@@ -29,12 +29,12 @@ 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