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

bo/src/App.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { TooltipProvider } from 'reka-ui'
 import { RouterView } from 'vue-router'
 </script>
 
 <template>
   <Suspense>
-    <RouterView />
+    <TooltipProvider>
+      <RouterView />
+    </TooltipProvider>
   </Suspense>
 </template>
 

bo/src/components/admin/PageProducts.vue

@@ -1,9 +1,11 @@
 <template>
     <component :is="Default || 'div'">
-        <div class="flex gap-10">
+        <div class="flex flex-col md:flex-row gap-10">
             <CategoryMenu />
             <div class="w-full flex flex-col items-center gap-4">
-                <UTable :data="productsList" :columns="columns" class="flex-1 w-full" />
+                <UTable :data="productsList" :columns="columns" class="flex-1 w-full" :ui="{
+                    root : 'max-w-100wv overflow-auto!'
+                }" />
                 <UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
             </div>
         </div>

bo/src/components/admin/ProductDetailView.vue

@@ -7,47 +7,65 @@
     </div>
     <div class="container mx-auto ">
       <div
-        class=" gap-4 mb-6 border-b border-(--border-light) dark:border-(--border-dark) pb-6 rounded-md">
-        <div v-if="!isShowProductView" class="flex items-center justify-between">
-          <div class="flex items-center gap-3" v-if="!isTranslations">
-            <p class="text-md whitespace-nowrap">
-              Translate from Polish to :</p>
-            <USelectMenu v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
+        class="gap-4 mb-6 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        <div class="flex items-center justify-between">
+          <div class="flex flex-col items-center gap-3" v-if="!isTranslations">
+            <USelectMenu v-model="toLangId" :items="langs" value-key="id"
               class="w-48 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm" :searchInput="false">
               <template #default>
-                <div class="flex items-center gap-2">
-                  <div class="flex flex-col leading-tight items-start">
-                    <span class="text-xs text-gray-400">
-                      Select language
-                    </span>
-                    <span class="font-medium dark:text-white text-black">
-                      {{availableLangs.find(l => l.id === toLangId)?.name || 'Select language'}}
-                    </span>
-                  </div>
+                <div class="flex flex-col items-start leading-tight">
+                  <span class="text-xs text-gray-400">
+                    Selected language
+                  </span>
+                  <span class="font-medium dark:text-white text-black">
+                    {{langs.find(l => l.id === toLangId)?.name || 'Select language'}}
+                  </span>
                 </div>
               </template>
 
               <template #item-leading="{ item }">
-                <div class="flex items-center gap-2">
-                  <span>{{ item.flag }}</span>
-                  <span class="font-medium dark:text-white text-black">{{ item.name }}</span>
+                <div class="flex items-center gap-2 cursor-pointer">
+                  <span class="text-lg">{{ item.flag }}</span>
+                  <span class="font-medium dark:text-white text-black">
+                    {{ item.name }}
+                  </span>
                 </div>
               </template>
             </USelectMenu>
           </div>
 
-          <div class="flex gap-3">
+          <div v-if="toLangId !== settingStore.shopDefaultLanguage && !isTranslations" class="flex gap-7">
+            <UButton @click="translateToSelectedLanguage" color="info" :loading="translating">
+              Translate from Polish to {{langs.find(l => l.id === toLangId)?.name}}
+            </UButton>
+          </div>
+          <div v-if="isTranslations" class="flex gap-3 w-full justify-end">
             <UButton @click="() => {
-              fetchForLanguage(toLangId)
-              isShowProductView = true
-            }" v-if="!isTranslations" class="text-(--text-sky-light) dark:text-(--text-sky-dark)" color="neutral"
-              variant="outline">
-              <p class="dark:text-white"> Show product</p>
+              toLangId = settingStore.shopDefaultLanguage
+              isTranslations = false
+            }" color="info" variant="outline">
+              Cancel and back to Polish
             </UButton>
-            <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating" v-if="!isTranslations"
-              class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-sky-100 dark:bg-(--accent-blue-dark) flex items-center! justify-center!">
-              Translate
+            <UButton color="info" @click="productStore.saveProductDescription(productID, toLangId)">
+              Save translations
             </UButton>
+          </div>
+
+
+          <!-- <div class="flex gap-7">
+            <div v-if="isTranslations === false">
+              <UButton @click="() => {
+                fetchForLanguage(toLangId)
+                isShowProductView = true
+              }" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)"
+                color="neutral" variant="outline">
+                <p class="dark:text-white"> Show product</p>
+              </UButton>
+              <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating"
+                class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) flex items-center! justify-center! px-12">
+                Translate
+              </UButton>
+            </div>
             <div v-else class="flex gap-3">
               <UButton @click="() => {
                 toLangId = settingStore.shopDefaultLanguage
@@ -60,23 +78,16 @@
                 Save
               </UButton>
             </div>
-          </div>
-        </div>
-        <div v-else>
-          <UButton @click="isShowProductView = false" color="primary"
-            class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) gap-2">
-            <UIcon name="line-md:arrow-left" class="" />
-            Back
-          </UButton>
+          </div> -->
         </div>
       </div>
 
-      <div v-if="translating" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <!-- <div v-if="translating" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
         <div class="flex flex-col items-center gap-4 p-8 bg-(--main-light) dark:bg-(--main-dark) rounded-lg shadow-xl">
           <UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
           <p class="text-lg font-medium dark:text-white text-black">Translating...</p>
         </div>
-      </div>
+      </div> -->
 
       <div v-if="productStore.loading" class="flex items-center justify-center py-20">
         <UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
@@ -85,60 +96,62 @@
         <p class="text-red-500">{{ productStore.error }}</p>
       </div>
 
-      <div v-else-if="productStore.productDescription" class="flex items-start gap-30">
-        <div class="w-80 h-80 bg-(--second-light) dark:bg-gray-700 rounded-lg flex items-center justify-center">
-          <span class="text-gray-500 dark:text-gray-400">Product Image</span>
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-[25px] font-bold text-black dark:text-white">
-            {{ productStore.productDescription.name || 'Product Name' }}
-          </p>
-          <p v-html="productStore.productDescription.description_short" class="text-black dark:text-white"></p>
+      <div v-else-if="productStore.productDescription" class="">
+        <div class="flex items-start gap-30">
+          <div class="w-80 h-80 bg-(--second-light) dark:bg-gray-700 rounded-lg flex items-center justify-center">
+            <span class="text-gray-500 dark:text-gray-400">Product Image</span>
+          </div>
+          <div class="flex flex-col gap-2">
+            <p class="text-[25px] font-bold text-black dark:text-white">
+              {{ productStore.productDescription.name || 'Product Name' }}
+            </p>
+            <p v-html="productStore.productDescription.description_short" class="text-black dark:text-white"></p>
 
-          <div class="space-y-[10px]">
-            <div class="flex items-center gap-1">
-              <UIcon name="lets-icons:done-ring-round-fill"
-                class="text-[20px] light:text-(--accent-green-light) dark:text-(--accent-green-dark)" />
-              <p class="text-[16px] font-bold text-(--text-sky-light) dark:text-(--text-sky-dark)">
-                {{ productStore.productDescription.available_now }}
-              </p>
-            </div>
-            <div class="flex items-center gap-1">
-              <UIcon name="marketeq:car-shipping"
-                class="text-[25px] light:text-(--accent-green-light) dark:text-(--accent-green-dark)" />
-              <p class="text-[18px] font-bold text-black dark:text-white">
-                {{ productStore.productDescription.delivery_in_stock || 'Delivery information' }}
-              </p>
+            <div class="space-y-[10px]">
+              <div class="flex items-center gap-1">
+                <UIcon name="lets-icons:done-ring-round-fill"
+                  class="text-[20px] light:text-(--accent-green-light) dark:text-(--accent-green-dark)" />
+                <p class="text-[16px] font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">
+                  {{ productStore.productDescription.available_now }}
+                </p>
+              </div>
+              <div class="flex items-center gap-1">
+                <UIcon name="marketeq:car-shipping"
+                  class="text-[25px] light:text-(--accent-green-light) dark:text-(--accent-green-dark)" />
+                <p class="text-[18px] font-bold text-black dark:text-white">
+                  {{ productStore.productDescription.delivery_in_stock || 'Delivery information' }}
+                </p>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div v-if="productStore.productDescription" class="mt-16">
         <UTabs :items="items" v-model="activeTab" color="info" :content="true">
           <template #description>
-            <div class="px-7">
-              <div class="flex items-center justify-end gap-3 mb-4">
-                <UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
-                  class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-                  <p class="text-(--text-sky-light) dark:text-(--text-sky-dark)">Change Text</p>
-                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
-                </UButton>
-
-                <UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral"
-                  variant="outline" class="p-2.5 cursor-pointer">
-                  <p class="dark:text-white text-black">Save the edited text</p>
-                </UButton>
-
-                <UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" color="neutral"
-                  variant="outline" class="p-2.5 cursor-pointer">
-                  Cancel
-                </UButton>
-              </div>
-
-              <div ref="description" v-html="productStore.productDescription.description"
-                class="flex flex-col justify-center dark:text-white text-black"></div>
+            <div v-if="!isTranslations" class="flex justify-end items-center gap-3 mb-4">
+              <UButton v-if="!isEditing" @click="activeTab === 'usage' ? enableEdit() : enableDescriptionEdit()"
+                class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
+                <p class="text-white">Change Text</p>
+                <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+              </UButton>
+              <UButton v-if="isEditing" @click="activeTab === 'usage' ? saveText : saveDescription" color="neutral"
+                variant="outline" class="p-2.5 cursor-pointer">
+                <p class="dark:text-white text-black">Save the edited text</p>
+              </UButton>
+              <UButton v-if="isEditing" @click="activeTab === 'usage' ? cancelEdit : cancelDescriptionEdit"
+                color="neutral" variant="outline" class="p-2.5 cursor-pointer">
+                Cancel
+              </UButton>
             </div>
+            <UEditor v-if="isTranslations" v-slot="{ editor }" v-model="productStore.productDescription.description"
+              content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74" placeholder="Write there ...">
+              <UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
+                <template #link>
+                  <EditorLinkPopover :editor="editor" auto-open />
+                </template>
+              </UEditorToolbar>
+            </UEditor>
+            <p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white"></p>
           </template>
 
           <template #usage>
@@ -161,8 +174,15 @@
                 </UButton>
               </div>
 
-              <p ref="usage" v-html="productStore.productDescription.usage"
-                class="flex flex-col justify-center w-full text-start dark:text-white text-black"></p>
+              <UEditor v-if="isTranslations" v-slot="{ editor }" v-model="productStore.productDescription.usage"
+                content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74" placeholder="Write there ...">
+                <UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
+                  <template #link>
+                    <EditorLinkPopover :editor="editor" auto-open />
+                  </template>
+                </UEditorToolbar>
+              </UEditor>
+              <p v-else v-html="productStore.productDescription.usage" class="text-black dark:text-white"></p>
             </div>
           </template>
         </UTabs>
@@ -177,10 +197,141 @@ import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
 import { useProductStore } from '@/stores/product';
 import { useSettingsStore } from '@/stores/settings';
-import { onMounted, ref } from 'vue';
-import { computed } from 'vue';
+import type { EditorToolbarItem } from '@nuxt/ui';
+import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+const toolbarItems: EditorToolbarItem[][] = [
+  // History controls
+  [{
+    kind: 'undo',
+    icon: 'i-lucide-undo',
+    tooltip: { text: 'Undo' }
+  }, {
+    kind: 'redo',
+    icon: 'i-lucide-redo',
+    tooltip: { text: 'Redo' }
+  }],
+  // Block types
+  [{
+    icon: 'i-lucide-heading',
+    tooltip: { text: 'Headings' },
+    content: {
+      align: 'start'
+    },
+    items: [{
+      kind: 'heading',
+      level: 1,
+      icon: 'i-lucide-heading-1',
+      label: 'Heading 1'
+    }, {
+      kind: 'heading',
+      level: 2,
+      icon: 'i-lucide-heading-2',
+      label: 'Heading 2'
+    }, {
+      kind: 'heading',
+      level: 3,
+      icon: 'i-lucide-heading-3',
+      label: 'Heading 3'
+    }, {
+      kind: 'heading',
+      level: 4,
+      icon: 'i-lucide-heading-4',
+      label: 'Heading 4'
+    }]
+  }, {
+    icon: 'i-lucide-list',
+    tooltip: { text: 'Lists' },
+    content: {
+      align: 'start'
+    },
+    items: [{
+      kind: 'bulletList',
+      icon: 'i-lucide-list',
+      label: 'Bullet List'
+    }, {
+      kind: 'orderedList',
+      icon: 'i-lucide-list-ordered',
+      label: 'Ordered List'
+    }]
+  }, {
+    kind: 'blockquote',
+    icon: 'i-lucide-text-quote',
+    tooltip: { text: 'Blockquote' }
+  }, {
+    kind: 'codeBlock',
+    icon: 'i-lucide-square-code',
+    tooltip: { text: 'Code Block' }
+  }, {
+    kind: 'horizontalRule',
+    icon: 'i-lucide-separator-horizontal',
+    tooltip: { text: 'Horizontal Rule' }
+  }],
+  // Text formatting
+  [{
+    kind: 'mark',
+    mark: 'bold',
+    icon: 'i-lucide-bold',
+    tooltip: { text: 'Bold' }
+  }, {
+    kind: 'mark',
+    mark: 'italic',
+    icon: 'i-lucide-italic',
+    tooltip: { text: 'Italic' }
+  }, {
+    kind: 'mark',
+    mark: 'underline',
+    icon: 'i-lucide-underline',
+    tooltip: { text: 'Underline' }
+  }, {
+    kind: 'mark',
+    mark: 'strike',
+    icon: 'i-lucide-strikethrough',
+    tooltip: { text: 'Strikethrough' }
+  }, {
+    kind: 'mark',
+    mark: 'code',
+    icon: 'i-lucide-code',
+    tooltip: { text: 'Code' }
+  }],
+  // Link
+  [{
+    kind: 'link',
+    icon: 'i-lucide-link',
+    tooltip: { text: 'Link' }
+  }],
+  // Text alignment
+  [{
+    icon: 'i-lucide-align-justify',
+    tooltip: { text: 'Text Align' },
+    content: {
+      align: 'end'
+    },
+    items: [{
+      kind: 'textAlign',
+      align: 'left',
+      icon: 'i-lucide-align-left',
+      label: 'Align Left'
+    }, {
+      kind: 'textAlign',
+      align: 'center',
+      icon: 'i-lucide-align-center',
+      label: 'Align Center'
+    }, {
+      kind: 'textAlign',
+      align: 'right',
+      icon: 'i-lucide-align-right',
+      label: 'Align Right'
+    }, {
+      kind: 'textAlign',
+      align: 'justify',
+      icon: 'i-lucide-align-justify',
+      label: 'Align Justify'
+    }]
+  }]
+]
+
 const router = useRouter()
 function backFromProduct() {
   let path = localStorage.getItem('back_from_product')
@@ -206,7 +357,7 @@ const settingStore = useSettingsStore()
 const productStore = useProductStore()
 const isTranslations = ref(false)
 
-const toLangId = ref(null)
+const toLangId = ref<number>(settingStore.shopDefaultLanguage)
 const productID = ref<number>(0)
 const translating = ref(false)
 
@@ -219,10 +370,6 @@ const descriptionRef = ref<HTMLElement | null>(null)
 const descriptionEdit = useEditable(descriptionRef)
 const originalDescription = ref('')
 
-const isShowProductView = ref(false)
-
-const availableLangs = computed(() => langs.filter(item => item.id !== settingStore.shopDefaultLanguage))
-
 const translateToSelectedLanguage = async () => {
   if (toLangId.value && productID.value) {
     translating.value = true
@@ -230,6 +377,8 @@ const translateToSelectedLanguage = async () => {
       await productStore.translateProductDescription(productID.value, toLangId.value)
     } finally {
       translating.value = false
+      enableEdit()
+      enableDescriptionEdit()
     }
   }
   if (productStore.productDescription) {
@@ -244,6 +393,10 @@ const fetchForLanguage = async (langId: number | null) => {
   }
 }
 
+watch(toLangId, () => {
+  fetchForLanguage(toLangId.value)
+})
+
 onMounted(async () => {
   const id = route.params.product_id
   if (id) {
@@ -259,6 +412,8 @@ const items = ref([
 
 // text edit
 const enableEdit = () => {
+  console.log(usageRef.value, 'usageRef');
+
   if (usageRef.value) {
     originalUsage.value = usageRef.value.innerHTML
   }
@@ -266,6 +421,15 @@ const enableEdit = () => {
   usageEdit.enableEdit()
 }
 
+const enableDescriptionEdit = () => {
+  console.log(usageRef.value, 'usageRef');
+
+  if (descriptionRef.value) {
+    originalDescription.value = descriptionRef.value.innerHTML
+  }
+  descriptionEdit.enableEdit()
+}
+
 const saveText = () => {
   if (usageRef.value) {
     productStore.productDescription.usage = usageRef.value.innerHTML
@@ -285,13 +449,6 @@ const cancelEdit = () => {
   isEditing.value = false
 }
 
-const enableDescriptionEdit = () => {
-  if (descriptionRef.value) {
-    originalDescription.value = descriptionRef.value.innerHTML
-  }
-  descriptionEdit.enableEdit()
-}
-
 const saveDescription = async () => {
   if (descriptionRef.value) {
     productStore.productDescription.description = descriptionRef.value.innerHTML
@@ -364,5 +521,4 @@ function removeInlineStylesFromAll(product) {
   product.description_short = removeStyles(product.description_short)
   product.usage = removeStyles(product.usage)
 }
-
 </script>

bo/src/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-1">
+  <div class="flex flex-1 overflow-x-hidden h-svh">
     <USidebar v-model:open="open" collapsible="icon" rail :ui="{
-      container: 'h-full',
+      container: 'h-full z-80',
       inner: 'bg-elevated/25 divide-transparent',
       body: 'py-0'
     }">
@@ -32,10 +32,10 @@
     </USidebar>
 
     <div class="flex-1 flex flex-col">
-      <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between px-4 border-b border-default">
+      <div class="flex h-(--ui-header-height) shrink-0 items-center justify-between px-4 border-b border-default">
         <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
           @click="open = !open" />
-        <div class="flex items-center gap-12">
+        <div class="hidden md:flex items-center gap-12">
           <div class="flex items-center gap-2">
             <CountryCurrencySwitch />
             <LangSwitch />
@@ -50,7 +50,7 @@
         </div>
       </div>
 
-      <div class="flex-1 p-4">
+      <div class="flex-1 p-4 bg-slate-50 h-svh">
         <slot />
       </div>
     </div>
@@ -158,6 +158,7 @@ import { useFetchJson } from '@/composable/useFetchJson'
 import { useAuthStore } from '@/stores/auth'
 import CountryCurrencySwitch from '@/components/inner/CountryCurrencySwitch.vue'
 import LangSwitch from '@/components/inner/LangSwitch.vue'
+import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
 
 
 const router = useRouter()

bo/src/stores/product.ts

@@ -54,7 +54,6 @@ export const useProductStore = defineStore('product', () => {
     try {
       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
-      saveProductDescription(productID, toLangId)
       return response.items
     } catch (e: any) {
       error.value = e?.message || 'Failed to translate product description'
@@ -64,42 +63,6 @@ export const useProductStore = defineStore('product', () => {
     }
   }
 
-  function fixHtml(html: string) {
-    return html
-      // 1. fix img
-      .replace(/<img([^>]*?)>/g, '<img$1 />')
-
-      // 2. escape text only
-      .replace(/>([^<]+)</g, (match, text) => {
-        const escaped = text
-          .replace(/&/g, '&amp;')
-          .replace(/"/g, '&quot;')
-          .replace(/'/g, '&#39;')
-
-        return `>${escaped}<`
-      })
-  }
-
-  function fixAll(obj: any): any {
-    if (typeof obj === 'string') {
-      return fixHtml(obj)
-    }
-
-    if (Array.isArray(obj)) {
-      return obj.map(fixAll)
-    }
-
-    if (typeof obj === 'object' && obj !== null) {
-      const result: any = {}
-      for (const [key, value] of Object.entries(obj)) {
-        result[key] = fixAll(value)
-      }
-      return result
-    }
-
-    return obj
-  }
-
   async function saveProductDescription(productID?: number, langId?: number | null) {
     const id = productID || 1
     const lang = langId || 1