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

fix: translate

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-04-01 09:36:01 +02:00
parent d6066e39ce
commit b829bf2185
6 changed files with 264 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
bo/src/components/admin/PageProducts.vue
View File

@@ -14,7 +14,7 @@
</template>
</UTable>
<div class="container mx-auto mt-20">
<!-- <div class="container mx-auto mt-20">
<h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Products</h1>
<div v-if="loading" class="text-center py-8">
<span class="text-gray-600 dark:text-gray-400">Loading products...</span>
@@ -66,7 +66,7 @@
No products found
</div>
</div>
</div>
</div> -->
</component>
</suspense>
</template>
@@ -213,8 +213,8 @@ async function fetchProductList() {
function goToProduct(productId: number) {
router.push({
name: 'product-detail',
params: { id: productId }
name: 'customer-product-details',
params: { product_id: productId }
})
}
@@ -352,6 +352,7 @@ const columns: TableColumn<Payment>[] = [
return h(UButton, {
onClick: () => {
console.log('Clicked', row.original)
goToProduct(row.original.product_id)
},
color: 'primary',
variant: 'solid'

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

@@ -1,33 +1,61 @@
<template>
<component :is="Default || 'div'">
<div class="container my-10 mx-auto ">
<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="iso_code">
<template #default="{ modelValue }">
<div class="flex items-center gap-2">
<span class="text-md">{{availableLangs.find(x => x.iso_code == modelValue)?.flag}}</span>
<span class="font-medium dark:text-white text-black">{{availableLangs.find(x => x.iso_code ==
modelValue)?.name}}</span>
</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 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">
<template v-if="!isViewingExistingTranslation">
<USelectMenu
v-model="selectedLangId"
:items="langOptions"
value-key="id"
class="w-40"
:search-input="false"
>
<template #default="{ modelValue }">
<span class="dark:text-white text-black">
{{ langOptions.find(l => l.id === modelValue)?.name }}
</span>
</template>
<template #item-leading="{ item }">
<span class="dark:text-white text-black font-medium">
{{ item.name }}
</span>
</template>
</USelectMenu>
<UButton
@click="translateOrSave"
:disabled="selectedLangId === defaultLangId"
:loading="translating"
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!"
>
Translate
</UButton>
</template>
<template v-else>
<UButton
@click="goBackToDefault"
color="neutral"
variant="outline"
class="cursor-pointer"
>
<UIcon name="i-lucide-arrow-left" class="mr-1" />
<p class="dark:text-white">Back to Polish</p>
</UButton>
</template>
</div>
<UButton @click="translateToSelectedLanguage" color="primary" :loading="translating"
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
Translate
</UButton>
</div>
<p v-if="noTranslation" class="text-red-500 mt-2">
No translation available
</p>
<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" />
@@ -38,18 +66,23 @@
<div v-if="productStore.loading" class="flex items-center justify-center py-20">
<UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
</div>
<div v-else-if="productStore.error" class="flex items-center justify-center py-20">
<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' }}
{{ productName || 'Product Name' }}
</p>
<p v-html="productStore.productDescription.description_short" class="text-black dark:text-white"></p>
<p v-html="displayedShortDescription" 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] text-green-600" />
@@ -57,6 +90,7 @@
{{ productStore.productDescription.available_now }}
</p>
</div>
<div class="flex items-center gap-1">
<UIcon name="marketeq:car-shipping" class="text-[25px] text-green-600" />
<p class="text-[18px] font-bold text-black dark:text-white">
@@ -67,63 +101,43 @@
</div>
</div>
<!-- TABS -->
<div v-if="productStore.productDescription" class="mt-16">
<div class="flex gap-4 my-6">
<UButton @click="activeTab = 'description'"
:class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
variant="outline">
<p class="dark:text-white">Description</p>
<UButton @click="activeTab = 'description'" :class="btnClass('description')" variant="outline">
Description
</UButton>
<UButton @click="activeTab = 'usage'"
:class="['cursor-pointer', activeTab === 'usage' ? 'bg-blue-500 text-white' : '']" color="neutral"
variant="outline">
<p class="dark:text-white">Usage</p>
<UButton @click="activeTab = 'usage'" :class="btnClass('usage')" variant="outline">
Usage
</UButton>
</div>
<div v-if="activeTab === 'usage'"
class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
<div class="flex justify-end items-center gap-3 mb-4">
<UButton v-if="!isEditing" @click="enableEdit"
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="saveText" 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="cancelEdit" color="neutral" variant="outline"
class="p-2.5 cursor-pointer">
Cancel
<!-- USAGE -->
<div v-if="activeTab === 'usage'" class="box">
<div class="flex justify-end mb-4 gap-2">
<UButton v-if="!isEditing" @click="enableUsageEdit" class="bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)! text-white px-3 py-1 rounded">
Edit Usage
</UButton>
<UButton v-if="isEditing" @click="saveUsage" class="px-3 py-1 border rounded">Save</UButton>
<UButton v-if="isEditing" @click="cancelUsageEdit" class="px-3 py-1 border rounded">Cancel</UButton>
</div>
<p ref="usageRef" v-html="productStore.productDescription.usage"
class="flex flex-col justify-center w-full text-start dark:text-white! text-black!"></p>
<p ref="usageRef" v-html="displayedUsage || 'Usage information not available'" class="text-black dark:text-white"></p>
</div>
<div v-if="activeTab === 'description'"
class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
<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-white">Change Text</p>
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
<!-- DESCRIPTION -->
<div v-if="activeTab === 'description'" class="box">
<div class="flex justify-end mb-4 gap-2">
<UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit" class="bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)! text-white px-3 py-1 rounded">
Edit Description
</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="descriptionRef" v-html="productStore.productDescription.description"
class="flex flex-col justify-center dark:text-white text-black">
<UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" class="px-3 py-1 border rounded">Save</UButton>
<UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" class="px-3 py-1 border rounded">Cancel</UButton>
</div>
<div ref="descriptionRef" v-html="displayedDescription || 'Description not available'" class="text-black dark:text-white"></div>
</div>
</div>
</div>
</component>
</template>
@@ -132,118 +146,175 @@
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useProductStore } from '@/stores/product'
import { useEditable } from '@/composable/useConteditable'
import { useSettingsStore } from '@/stores/settings'
import { langs } from '@/router/langs'
import type { Language } from '@/types'
import { useEditable } from '@/composable/useConteditable'
import Default from '@/layouts/default.vue'
const route = useRoute()
const activeTab = ref('description')
const productStore = useProductStore()
const settingsStore = useSettingsStore()
const activeTab = ref('description')
const translating = ref(false)
const noTranslation = ref(false)
const isEditing = ref(false)
const availableLangs = computed(() => langs)
const selectedLanguage = ref('en')
const currentLangId = ref(2)
const productID = ref<number>(0)
// Watch for language changes and refetch product description
watch(selectedLanguage, async (newLang: string) => {
if (productID.value) {
await fetchForLanguage(newLang)
}
})
const fetchForLanguage = async (langCode: string) => {
const lang = langs.find((l: Language) => l.iso_code === langCode)
if (lang && productID.value) {
await productStore.getProductDescription(lang.id, productID.value)
currentLangId.value = lang.id
}
}
const translateToSelectedLanguage = async () => {
const targetLang = langs.find((l: Language) => l.iso_code === selectedLanguage.value)
if (targetLang && currentLangId.value && productID.value) {
translating.value = true
try {
await productStore.translateProductDescription(productID.value, currentLangId.value, targetLang.id)
currentLangId.value = targetLang.id
} finally {
translating.value = false
}
}
}
onMounted(async () => {
const id = route.params.product_id
if (id) {
productID.value = Number(id)
await fetchForLanguage(selectedLanguage.value)
}
})
const defaultLangId = ref(0)
const selectedLangId = ref(0)
const activeLangId = ref(0)
const productID = ref(0)
const descriptionRef = ref<HTMLElement | null>(null)
const usageRef = ref<HTMLElement | null>(null)
const descriptionEdit = useEditable(descriptionRef)
const usageEdit = useEditable(usageRef)
const isEditing = ref(false)
const originalDescription = ref('')
const originalUsage = ref('')
const originalDescription = ref('')
const saveDescription = async () => {
descriptionEdit.disableEdit()
await productStore.saveProductDescription(productID.value)
}
const langOptions = computed(() => langs.filter(l => l.active !== false))
const cancelDescriptionEdit = () => {
if (descriptionRef.value) {
descriptionRef.value.innerHTML = originalDescription.value
watch(selectedLangId, async (newLang) => {
if (!productID.value) return
if (newLang === defaultLangId.value) {
noTranslation.value = false
activeLangId.value = defaultLangId.value
await productStore.getProductDescription(defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value)
return
}
descriptionEdit.disableEdit()
await productStore.getProductDescription(newLang, productID.value)
const desc = productStore.productDescription
if (!desc || (!desc.description && !desc.description_short && !desc.usage)) {
noTranslation.value = true
activeLangId.value = defaultLangId.value
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value)
} else {
noTranslation.value = false
activeLangId.value = newLang
}
})
const isViewingExistingTranslation = computed(() => activeLangId.value !== defaultLangId.value && !noTranslation.value)
const productName = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.name || ''
}
return productStore.defaultProductDescription?.name || productStore.productDescription?.name || ''
})
const displayedDescription = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.description || ''
}
return productStore.defaultProductDescription?.description || ''
})
const displayedShortDescription = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.description_short || ''
}
return productStore.defaultProductDescription?.description_short || ''
})
const displayedUsage = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.usage || ''
}
return productStore.defaultProductDescription?.usage || ''
})
const goBackToDefault = async () => {
selectedLangId.value = defaultLangId.value
activeLangId.value = defaultLangId.value
noTranslation.value = false
await productStore.getProductDescription(defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value)
}
const translateOrSave = async () => {
if (!productID.value || selectedLangId.value === defaultLangId.value) return
translating.value = true
try {
const res = await productStore.translateProductDescription(productID.value, defaultLangId.value, selectedLangId.value)
if (res) {
activeLangId.value = selectedLangId.value
noTranslation.value = false
}
} finally {
translating.value = false
}
}
const btnClass = (tab: string) => ['cursor-pointer px-4 py-2', activeTab.value === tab ? 'bg-blue-500 text-white' : '']
/* USAGE EDIT */
const enableUsageEdit = () => {
originalUsage.value = displayedUsage.value
usageEdit.enableEdit()
isEditing.value = true
}
const saveUsage = async () => {
if (usageRef.value && productStore.productDescription) {
productStore.productDescription.usage = usageRef.value.innerHTML
}
usageEdit.disableEdit()
isEditing.value = false
await productStore.saveProductDescription(productID.value, activeLangId.value, 1)
}
const cancelUsageEdit = () => {
if (usageRef.value) usageRef.value.innerHTML = originalUsage.value
if (productStore.productDescription) productStore.productDescription.usage = originalUsage.value
usageEdit.disableEdit()
isEditing.value = false
}
/* DESCRIPTION EDIT */
const enableDescriptionEdit = () => {
if (descriptionRef.value) {
originalDescription.value = descriptionRef.value.innerHTML
}
originalDescription.value = displayedDescription.value
descriptionEdit.enableEdit()
}
const enableEdit = () => {
if (usageRef.value) {
originalUsage.value = usageRef.value.innerHTML
const saveDescription = async () => {
if (descriptionRef.value && productStore.productDescription) {
productStore.productDescription.description = descriptionRef.value.innerHTML
}
isEditing.value = true
usageEdit.enableEdit()
descriptionEdit.disableEdit()
await productStore.saveProductDescription(productID.value, activeLangId.value, 1)
}
const cancelDescriptionEdit = () => {
if (descriptionRef.value) descriptionRef.value.innerHTML = originalDescription.value
if (productStore.productDescription) productStore.productDescription.description = originalDescription.value
descriptionEdit.disableEdit()
}
const saveText = () => {
usageEdit.disableEdit()
isEditing.value = false
productStore.saveProductDescription(productID.value)
}
const cancelEdit = () => {
if (usageRef.value) {
usageRef.value.innerHTML = originalUsage.value
onMounted(async () => {
const settings = await settingsStore.getSettings()
if (settings) {
defaultLangId.value = settings.app.shop_default_language
selectedLangId.value = defaultLangId.value
activeLangId.value = defaultLangId.value
}
usageEdit.disableEdit()
isEditing.value = false
}
const id = route.params.product_id
if (id) {
productID.value = Number(id)
await productStore.getProductDescription(defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value)
}
})
</script>
<style>
.images {
display: flex;
align-items: center;
gap: 70px;
margin: 20px 0 20px 0;
.box {
padding: 20px;
border: 1px solid var(--border-light);
border-radius: 8px;
}
</style>