Merge branch 'front-styles' of ssh://git.ma-al.com:8822/goc_daniel/b2b into translate

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

@@ -3,60 +3,22 @@
     <p class="cursor-pointer" @click="backFromProduct()">Back to products</p>
     <div class="container my-10 mx-auto ">
       <div
-        class=" gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        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 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">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">
+            <template #selected="{ modelValue }">
+              {{ modelValue }}
+            </template>
+            <template #item-label="{ item }">
               <div class="flex items-center gap-2">
-                  <span v-if="!modelValue" class="text-gray-400">
+                <span>{{ item.flag }}</span>
-                    Select language
+                <span>{{ item.name }}</span>
-                  </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>
-                  <span class="ml-2 dark:text-white text-black font-medium">{{ 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"
             class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
@@ -201,7 +163,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)
@@ -232,8 +194,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