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

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

@@ -1,19 +1,16 @@
<template> <template>
<component :is="Default || 'div'"> <component :is="Default || 'div'">
{{ settingsStore.settings?.app?.shop_default_language }}
<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 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"> <div class="flex items-center gap-3">
<template v-if="!isViewingExistingTranslation"> <template v-if="!isViewingExistingTranslation">
<USelectMenu <USelectMenu v-model="selectedLangId" :items="langOptions" value-key="id" class="w-40"
v-model="selectedLangId" :search-input="false">
:items="langOptions"
value-key="id"
class="w-40"
:search-input="false"
>
<template #default="{ modelValue }"> <template #default="{ modelValue }">
<span class="dark:text-white text-black"> <span class="dark:text-white text-black">
{{langOptions.find(l => l.id === modelValue)?.name}} {{langOptions.find(l => l.id === modelValue)?.name}}
@@ -27,24 +24,15 @@
</template> </template>
</USelectMenu> </USelectMenu>
<UButton <UButton @click="translateOrSave" :disabled="selectedLangId === productStore.defaultLangId" :loading="translating"
@click="translateOrSave" class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
:disabled="selectedLangId === defaultLangId"
:loading="translating"
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!"
>
Translate Translate
</UButton> </UButton>
</template> </template>
<template v-else> <template v-else>
<UButton <UButton @click="goBackToDefault" color="neutral" variant="outline" class="cursor-pointer">
@click="goBackToDefault"
color="neutral"
variant="outline"
class="cursor-pointer"
>
<UIcon name="i-lucide-arrow-left" class="mr-1" /> <UIcon name="i-lucide-arrow-left" class="mr-1" />
<p class="dark:text-white">Back to Polish</p> <p class="dark:text-white">Back to Polish</p>
</UButton> </UButton>
@@ -101,7 +89,6 @@
</div> </div>
</div> </div>
<!-- TABS -->
<div v-if="productStore.productDescription" class="mt-16"> <div v-if="productStore.productDescription" class="mt-16">
<div class="flex gap-4 my-6"> <div class="flex gap-4 my-6">
<UButton @click="activeTab = 'description'" :class="btnClass('description')" variant="outline"> <UButton @click="activeTab = 'description'" :class="btnClass('description')" variant="outline">
@@ -113,31 +100,37 @@
</UButton> </UButton>
</div> </div>
<!-- USAGE -->
<div v-if="activeTab === 'usage'" class="box"> <div v-if="activeTab === 'usage'" class="box">
<div class="flex justify-end mb-4 gap-2"> <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 Edit Usage
</UButton> </UButton>
<UButton v-if="isEditing" @click="saveUsage" class="px-3 py-1 border rounded">Save</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> <UButton v-if="isEditing" @click="cancelUsageEdit" class="px-3 py-1 border rounded">Cancel</UButton>
</div> </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> </div>
<!-- DESCRIPTION -->
<div v-if="activeTab === 'description'" class="box"> <div v-if="activeTab === 'description'" class="box">
<div class="flex justify-end mb-4 gap-2"> <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 Edit Description
</UButton> </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="saveDescription" class="px-3 py-1 border rounded">
<UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" class="px-3 py-1 border rounded">Cancel</UButton> Save
</UButton>
<UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit"
class="px-3 py-1 border rounded">
Cancel</UButton>
</div> </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> </div>
</div> </div>
</component> </component>
</template> </template>
@@ -158,8 +151,6 @@ const settingsStore = useSettingsStore()
const activeTab = ref('description') const activeTab = ref('description')
const translating = ref(false) const translating = ref(false)
const noTranslation = ref(false) const noTranslation = ref(false)
const defaultLangId = ref(0)
const selectedLangId = ref(0) const selectedLangId = ref(0)
const activeLangId = ref(0) const activeLangId = ref(0)
const productID = ref(0) const productID = ref(0)
@@ -179,72 +170,59 @@ const langOptions = computed(() => langs.filter(l => l.active !== false))
watch(selectedLangId, async (newLang) => { watch(selectedLangId, async (newLang) => {
if (!productID.value) return if (!productID.value) return
if (newLang === defaultLangId.value) { if (newLang === productStore.defaultLangId.value) {
noTranslation.value = false noTranslation.value = false
activeLangId.value = defaultLangId.value activeLangId.value = productStore.defaultLangId.value
await productStore.getProductDescription(defaultLangId.value, productID.value) await productStore.getProductDescription(productStore.defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value)
return return
} }
await productStore.getProductDescription(newLang, productID.value)
const desc = productStore.productDescription 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(() => { const productName = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) { if (activeLangId.value !== productStore.defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.name || '' return productStore.productDescription?.name || ''
} }
return productStore.defaultProductDescription?.name || productStore.productDescription?.name || '' return productStore.defaultProductDescription?.name || productStore.productDescription?.name || ''
}) })
const displayedDescription = computed(() => { const displayedDescription = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) { if (activeLangId.value !== productStore.defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.description || '' return productStore.productDescription?.description || ''
} }
return productStore.defaultProductDescription?.description || '' return productStore.defaultProductDescription?.description || ''
}) })
const displayedShortDescription = computed(() => { 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.productDescription?.description_short || ''
} }
return productStore.defaultProductDescription?.description_short || '' return productStore.defaultProductDescription?.description_short || ''
}) })
const displayedUsage = computed(() => { const displayedUsage = computed(() => {
if (activeLangId.value !== defaultLangId.value && !noTranslation.value) { if (activeLangId.value !== productStore.defaultLangId.value && !noTranslation.value) {
return productStore.productDescription?.usage || '' return productStore.productDescription?.usage || ''
} }
return productStore.defaultProductDescription?.usage || '' return productStore.defaultProductDescription?.usage || ''
}) })
const goBackToDefault = async () => { const goBackToDefault = async () => {
selectedLangId.value = defaultLangId.value selectedLangId.value = productStore.defaultLangId.value
activeLangId.value = defaultLangId.value activeLangId.value = productStore.defaultLangId.value
noTranslation.value = false noTranslation.value = false
await productStore.getProductDescription(defaultLangId.value, productID.value) await productStore.getProductDescription(productStore.defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value) await productStore.getDefaultProductDescription(productStore.defaultLangId.value, productID.value)
} }
const translateOrSave = async () => { const translateOrSave = async () => {
if (!productID.value || selectedLangId.value === defaultLangId.value) return if (!productID.value || selectedLangId.value === productStore.defaultLangId.value) return
translating.value = true translating.value = true
try { 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) { if (res) {
activeLangId.value = selectedLangId.value activeLangId.value = selectedLangId.value
noTranslation.value = false 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' : ''] const btnClass = (tab: string) => ['cursor-pointer px-4 py-2', activeTab.value === tab ? 'bg-blue-500 text-white' : '']
/* USAGE EDIT */
const enableUsageEdit = () => { const enableUsageEdit = () => {
originalUsage.value = displayedUsage.value originalUsage.value = displayedUsage.value
usageEdit.enableEdit() usageEdit.enableEdit()
@@ -277,7 +255,6 @@ const cancelUsageEdit = () => {
isEditing.value = false isEditing.value = false
} }
/* DESCRIPTION EDIT */
const enableDescriptionEdit = () => { const enableDescriptionEdit = () => {
originalDescription.value = displayedDescription.value originalDescription.value = displayedDescription.value
descriptionEdit.enableEdit() descriptionEdit.enableEdit()
@@ -298,23 +275,15 @@ const cancelDescriptionEdit = () => {
onMounted(async () => { onMounted(async () => {
const settings = await settingsStore.getSettings() const settings = await settingsStore.getSettings()
if (settings) { if (settings) {
defaultLangId.value = settings.app.shop_default_language productStore.defaultLangId.value = settings.app.shop_default_language
selectedLangId.value = defaultLangId.value selectedLangId.value = productStore.defaultLangId.value
activeLangId.value = defaultLangId.value activeLangId.value = productStore.defaultLangId.value
} }
const id = route.params.product_id const id = route.params.product_id
if (id) { if (id) {
productID.value = Number(id) productID.value = Number(id)
await productStore.getProductDescription(defaultLangId.value, productID.value) await productStore.getProductDescription(productStore.defaultLangId.value, productID.value)
await productStore.getDefaultProductDescription(defaultLangId.value, productID.value) await productStore.getDefaultProductDescription(productStore.defaultLangId.value, productID.value)
} }
}) })
</script> </script>
<style>
.box {
padding: 20px;
border: 1px solid var(--border-light);
border-radius: 8px;
}
</style>

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

@@ -1,3 +1,4 @@
import { useSettingsStore } from '../stores/settings'
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { ref } from 'vue' import { ref } from 'vue'
import { useFetchJson } from '@/composable/useFetchJson' import { useFetchJson } from '@/composable/useFetchJson'
@@ -28,6 +29,9 @@ export const useProductStore = defineStore('product', () => {
const currentProduct = ref<Product | null>(null) const currentProduct = ref<Product | null>(null)
const loading = ref(false) const loading = ref(false)
const error = ref<string | null>(null) const error = ref<string | null>(null)
const settingsStore = useSettingsStore()
const defaultLangId = settingsStore.shopDefaultLanguage
async function getProductDescription(langId = 1, productID: number) { async function getProductDescription(langId = 1, productID: number) {
loading.value = true loading.value = true
@@ -45,17 +49,6 @@ export const useProductStore = defineStore('product', () => {
} }
} }
async function getDefaultProductDescription(langId: number, productID: number) {
try {
const response = await useFetchJson<ProductDescription>(
`/api/v1/restricted/product-translation/get-product-description?productID=${productID}&productLangID=${langId}`
)
defaultProductDescription.value = response.items
} catch (e: unknown) {
console.error('Failed to load default product description:', e)
}
}
async function saveProductDescription(productID?: number, langId?: number, shopId = 1) { async function saveProductDescription(productID?: number, langId?: number, shopId = 1) {
const id = productID || 1 const id = productID || 1
try { try {
@@ -83,7 +76,7 @@ export const useProductStore = defineStore('product', () => {
error.value = null error.value = null
try { try {
const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-description/translate-product-description?productID=${productID}&productShopID=1&productFromLangID=${fromLangId}&productToLangID=${toLangId}&model=OpenAI`) const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-description/translate-product-description?productID=${productID}&productShopID=1&productFromLangID=${fromLangId}&productToLangID=${defaultLangId}&model=OpenAI`)
productDescription.value = response.items productDescription.value = response.items
return response.items return response.items
} catch (e: any) { } catch (e: any) {
@@ -104,8 +97,8 @@ export const useProductStore = defineStore('product', () => {
currentProduct, currentProduct,
loading, loading,
error, error,
defaultLangId,
getProductDescription, getProductDescription,
getDefaultProductDescription,
clearCurrentProduct, clearCurrentProduct,
saveProductDescription, saveProductDescription,
translateProductDescription, translateProductDescription,

3
bo/src/stores/settings.ts
View File

@@ -7,6 +7,7 @@ import { ref } from 'vue'
export const useSettingsStore = defineStore('settings', () => { export const useSettingsStore = defineStore('settings', () => {
const settings = ref<Settings | null>(null) const settings = ref<Settings | null>(null)
const loaded = ref(false) const loaded = ref(false)
const shopDefaultLanguage= settings?.app?.shop_default_language
async function getSettings(): Promise<Settings | null> { async function getSettings(): Promise<Settings | null> {
if (loaded.value && settings.value) return settings.value if (loaded.value && settings.value) return settings.value
@@ -16,5 +17,5 @@ export const useSettingsStore = defineStore('settings', () => {
return resp.items return resp.items
} }
return { settings, loaded, getSettings } return { settings, loaded, shopDefaultLanguage, getSettings }
}) })