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

fix: default lang

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-04-01 10:52:34 +02:00
parent 980fb1543b
commit b48a143b40
4 changed files with 54 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
<UTable :data="productsList" :columns="columns" class="flex-1 w-full" />
<UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
</div>
</div> -->
</div>
</component>
</suspense>
</template>

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

@@ -1,22 +1,19 @@
<template>
<component :is="Default || 'div'">
{{ settingsStore.settings?.app?.shop_default_language }}
<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 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"
>
<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 }}
{{langOptions.find(l => l.id === modelValue)?.name}}
</span>
</template>
@@ -27,24 +24,15 @@
</template>
</USelectMenu>
<UButton
@click="translateOrSave"
:disabled="selectedLangId === defaultLangId"
:loading="translating"
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!"
>
<UButton @click="translateOrSave" :disabled="selectedLangId === productStore.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"
>
<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>
@@ -101,7 +89,6 @@
</div>
</div>
<!-- TABS -->
<div v-if="productStore.productDescription" class="mt-16">
<div class="flex gap-4 my-6">
<UButton @click="activeTab = 'description'" :class="btnClass('description')" variant="outline">
@@ -113,31 +100,37 @@
</UButton>
</div>
<!-- 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">
<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="displayedUsage || 'Usage information not available'" class="text-black dark:text-white"></p>
<p ref="usageRef" v-html="displayedUsage || 'Usage information not available'"
class="text-black dark:text-white">
</p>
</div>
<!-- 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">
<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" 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>
<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 ref="descriptionRef" v-html="displayedDescription || 'Description not available'"
class="text-black dark:text-white"></div>
</div>
</div>
</div>
</component>
</template>
@@ -158,8 +151,6 @@ const settingsStore = useSettingsStore()
const activeTab = ref('description')
const translating = ref(false)
const noTranslation = ref(false)
const defaultLangId = ref(0)
const selectedLangId = ref(0)
const activeLangId = ref(0)
const productID = ref(0)
@@ -179,72 +170,59 @@ const langOptions = computed(() => langs.filter(l => l.active !== false))
watch(selectedLangId, async (newLang) => {
if (!productID.value) return
if (newLang === defaultLangId.value) {
if (newLang === productStore.defaultLangId.value) {
noTranslation.value = false
activeLangId.value = defaultLangId.value
await productStore.getProductDescription(defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value)
activeLangId.value = productStore.defaultLangId.value
await productStore.getProductDescription(productStore.defaultLangId.value, productID.value)
return
}
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 isViewingExistingTranslation = computed(() => activeLangId.value !== productStore.defaultLangId.value && !noTranslation.value)
const productName = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) {
if (activeLangId.value !== productStore.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) {
if (activeLangId.value !== productStore.defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.description || ''
}
return productStore.defaultProductDescription?.description || ''
})
const displayedShortDescription = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) {
if (activeLangId.value !== productStore.defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.description_short || ''
}
return productStore.defaultProductDescription?.description_short || ''
})
const displayedUsage = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) {
if (activeLangId.value !== productStore.defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.usage || ''
}
return productStore.defaultProductDescription?.usage || ''
})
const goBackToDefault = async () => {
selectedLangId.value = defaultLangId.value
activeLangId.value = defaultLangId.value
selectedLangId.value = productStore.defaultLangId.value
activeLangId.value = productStore.defaultLangId.value
noTranslation.value = false
await productStore.getProductDescription(defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value)
await productStore.getProductDescription(productStore.defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(productStore.defaultLangId.value, productID.value)
}
const translateOrSave = async () => {
if (!productID.value || selectedLangId.value === defaultLangId.value) return
if (!productID.value || selectedLangId.value === productStore.defaultLangId.value) return
translating.value = true
try {
const res = await productStore.translateProductDescription(productID.value, defaultLangId.value, selectedLangId.value)
const res = await productStore.translateProductDescription(productID.value, productStore.defaultLangId.value, selectedLangId.value)
if (res) {
activeLangId.value = selectedLangId.value
noTranslation.value = false
@@ -256,7 +234,7 @@ const translateOrSave = async () => {
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()
@@ -277,7 +255,6 @@ const cancelUsageEdit = () => {
isEditing.value = false
}
/* DESCRIPTION EDIT */
const enableDescriptionEdit = () => {
originalDescription.value = displayedDescription.value
descriptionEdit.enableEdit()
@@ -298,23 +275,15 @@ const cancelDescriptionEdit = () => {
onMounted(async () => {
const settings = await settingsStore.getSettings()
if (settings) {
defaultLangId.value = settings.app.shop_default_language
selectedLangId.value = defaultLangId.value
activeLangId.value = defaultLangId.value
productStore.defaultLangId.value = settings.app.shop_default_language
selectedLangId.value = productStore.defaultLangId.value
activeLangId.value = productStore.defaultLangId.value
}
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)
await productStore.getProductDescription(productStore.defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(productStore.defaultLangId.value, productID.value)
}
})
</script>
<style>
.box {
padding: 20px;
border: 1px solid var(--border-light);
border-radius: 8px;
}
</style>