goc_daniel/b2b
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: save product descriptions

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-04-01 16:19:02 +02:00
parent d8f71bd8ff
commit 79730eb826
4 changed files with 82 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
bo/src/components/admin/ProductDetailView.vue
View File

@@ -1,18 +1,25 @@
<template>
<component :is="Default || 'div'">
<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">
<USelect v-model="selectedLanguage" :items="availableLangs" variant="outline" class="w-40!" valueKey="id">
<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 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>
<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>
</template>
<template #item-leading="{ item }">
<div class="flex items-center rounded-md cursor-pointer transition-colors">
<span class="text-md">{{ item.flag }}</span>
@@ -20,11 +27,30 @@
</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">
@@ -137,7 +163,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';
@@ -146,15 +171,13 @@ import { useRoute } from 'vue-router';
const route = useRoute()
const settingStore = useSettingsStore()
const productStore = useProductStore()
const isTranslations = ref(false)
const selectedLanguage = ref(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 availableLangs = computed(() => langs.filter(item => item.id !== settingStore.shopDefaultLanguage))
const productID = ref<number>(0)
const translating = ref(false)
const activeTab = ref('description')
const usageRef = ref<HTMLElement | null>(null)
@@ -163,50 +186,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 (targetLang && toLangId.value && productID.value) {
if (toLangId.value && productID.value) {
translating.value = true
try {
await productStore.translateProductDescription(productID.value, toLangId.value, defaultLangId.value)
toLangId.value = targetLang.id
await productStore.translateProductDescription(productID.value, toLangId.value)
} finally {
translating.value = false
}
}
}
// знайти мову → підвантажити опис → запам’ятати, що це “базова” мова для перекладу.
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
if (productStore.productDescription) {
isTranslations.value = true
}
}
watch(selectedLanguage, async (newLang: number) => {
if (productID.value) {
await fetchForLanguage(newLang)
const fetchForLanguage = async (langId: number) => {
if (langId && productID.value) {
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
@@ -249,6 +261,8 @@ const saveDescription = async () => {
descriptionEdit.disableEdit()
await productStore.saveProductDescription(productID.value, toLangId.value)
toLangId.value = settingStore.shopDefaultLanguage
isTranslations.value = false
}
const cancelDescriptionEdit = () => {
@@ -257,6 +271,7 @@ const cancelDescriptionEdit = () => {
}
descriptionEdit.disableEdit()
}
</script>
@@ -328,10 +343,6 @@ const cancelDescriptionEdit = () => {
</div>
</div>
<div v-if="productStore.productDescription" class="mt-16">
<div class="flex gap-4 my-6">
<UButton @click="activeTab = 'description'"

3
bo/src/router/index.ts
View File

@@ -1,5 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router'
import { currentLang, langs } from './langs'
import { currentLang, langs, switchLocalization } from './langs'
import { getSettings } from './settings'
import { useAuthStore } from '@/stores/auth'
import { getRoutes } from './menu'
@@ -8,6 +8,7 @@ function isAuthenticated(): boolean {
if (typeof document === 'undefined') return false
return document.cookie.split('; ').some((c) => c === 'is_authenticated=1')
}
await switchLocalization()
await getSettings()
const routes = await getRoutes()

48
bo/src/router/langs.ts
View File

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

10
bo/src/stores/product.ts
View File

@@ -37,7 +37,7 @@ export const useProductStore = defineStore('product', () => {
`/api/v1/restricted/product-translation/get-product-description?productID=${productID}&productLangID=${langId}`
)
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 || '')
})
}
)