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

fix: add product description editing and saving functionality

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-03-26 15:55:47 +01:00
parent 3c6fa077a0
commit faa990ca9b
8 changed files with 199 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
bo/components.d.ts vendored
View File

@@ -11,7 +11,6 @@ export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
Cart1: typeof import('./src/components/customer/Cart1.vue')['default']
CartSelector: typeof import('./src/components/customer/CartSelector.vue')['default']
CategoryMenu: typeof import('./src/components/inner/categoryMenu.vue')['default']
Cs_PrivacyPolicyView: typeof import('./src/components/terms/cs_PrivacyPolicyView.vue')['default']
@@ -43,15 +42,12 @@ declare module 'vue' {
UCard: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Card.vue')['default']
UCheckbox: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Checkbox.vue')['default']
UDrawer: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Drawer.vue')['default']
UDropdownMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/DropdownMenu.vue')['default']
UForm: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Form.vue')['default']
UFormField: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/FormField.vue')['default']
UIcon: typeof import('./node_modules/@nuxt/ui/dist/runtime/vue/components/Icon.vue')['default']
UInput: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Input.vue')['default']
UInputNumber: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/InputNumber.vue')['default']
ULink: typeof import('./node_modules/@nuxt/ui/dist/runtime/vue/overrides/vue-router/Link.vue')['default']
UModal: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Modal.vue')['default']
UNavigationMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/NavigationMenu.vue')['default']
UPagination: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Pagination.vue')['default']
USelect: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Select.vue')['default']
USelectMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue')['default']

9
bo/src/components/TopBar.vue
View File

@@ -11,14 +11,12 @@ const authStore = useAuthStore()
class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-14">
<!-- Logo -->
<RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center">
<UIcon name="i-heroicons-clock" class="w-5 h-5" />
<UIcon name="carbon:ibm-webmethods-b2b-integration" class="w-5 h-5" />
</div>
<span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
<span class="font-semibold text-gray-900 dark:text-white">B2B</span>
</RouterLink>
<!-- Right Side Actions -->
<RouterLink :to="{ name: 'products-list' }">
products list
</RouterLink>
@@ -38,11 +36,8 @@ const authStore = useAuthStore()
Carts
</RouterLink>
<div class="flex items-center gap-2">
<!-- Language Switcher -->
<LangSwitch />
<!-- Theme Switcher -->
<ThemeSwitch />
<!-- Logout Button (only when authenticated) -->
<button v-if="authStore.isAuthenticated" @click="authStore.logout()"
class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark)">
{{ $t('general.logout') }}

4
bo/src/components/TopBarLogin.vue
View File

@@ -11,18 +11,14 @@ const authStore = useAuthStore()
class="fixed top-0 left-0 right-0 z-50 bg-(--main-light)/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
<div class="container px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-14">
<!-- Logo -->
<RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center">
<UIcon name="carbon:ibm-webmethods-b2b-integration" class="w-5 h-5" />
</div>
<span class="font-semibold text-gray-900 dark:text-white">B2B</span>
</RouterLink>
<!-- Right Side Actions -->
<div class="flex items-center gap-2">
<!-- Language Switcher -->
<LangSwitch />
<!-- Theme Switcher -->
<ThemeSwitch />
</div>
</div>

53
bo/src/components/admin/PageProductsList.vue
View File

@@ -39,19 +39,18 @@
</template>
<script setup lang="ts">
import { ref, onMounted, watch, h, resolveComponent, computed } from 'vue'
import { ref, watch, h, resolveComponent, computed } from 'vue'
import { useFetchJson } from '@/composable/useFetchJson'
import Default from '@/layouts/default.vue'
import { useRoute, useRouter } from 'vue-router'
import type { TableColumn } from '@nuxt/ui'
import { log } from 'console'
interface Product {
reference: number
product_id: number
name: string
image_link: string
link_rewrite: string
quantity: number
}
const router = useRouter()
@@ -136,7 +135,7 @@ async function fetchProductList() {
try {
const response = await useFetchJson<ApiResponse>(url)
productsList.value = response.items || []
productsList.value = (response as unknown as { items: Product[] }).items || []
total.value = response.count || 0
} catch (e: unknown) {
error.value = e instanceof Error ? e.message : 'Failed to load products'
@@ -145,15 +144,16 @@ async function fetchProductList() {
}
}
function goToProduct(productId: number) {
function goToProduct(productId: number, imageLink: string) {
router.push({
name: 'product-detail',
params: { id: productId }
params: { id: productId },
query: { image: imageLink }
})
}
const selectedCount = ref({
product_id: null,
product_id: null as number | null,
count: 0
})
@@ -170,7 +170,7 @@ const UInput = resolveComponent('UInput')
const UButton = resolveComponent('UButton')
const UIcon = resolveComponent('UIcon')
const columns: TableColumn<Payment>[] = [
const columns: TableColumn<Product>[] = [
{
id: 'expand',
cell: ({ row }) =>
@@ -219,8 +219,13 @@ const columns: TableColumn<Payment>[] = [
})
])
},
// header: '#',
cell: ({ row }) => `#${row.getValue('product_id') as number}`
cell: ({ row }) => h('span', {
class: 'cursor-pointer text-blue-500 hover:underline',
onClick: (e: Event) => {
e.stopPropagation()
goToProduct(row.original.product_id, row.original.image_link)
}
}, `#${row.getValue('product_id') as number}`)
},
{
accessorKey: 'image_link',
@@ -262,7 +267,13 @@ const columns: TableColumn<Payment>[] = [
})
])
},
cell: ({ row }) => row.getValue('name') as string,
cell: ({ row }) => h('span', {
class: 'cursor-pointer text-blue-500 hover:underline',
onClick: (e: Event) => {
e.stopPropagation()
goToProduct(row.original.product_id, row.original.image_link)
}
}, row.getValue('name') as string),
filterFn: (row, columnId, value) => {
const name = row.getValue(columnId) as string
return name.toLowerCase().includes(value.toLowerCase())
@@ -327,11 +338,17 @@ const columns: TableColumn<Payment>[] = [
}
]
const columnsChild: TableColumn<Payment>[] = [
const columnsChild: TableColumn<Product>[] = [
{
accessorKey: 'product_id',
header: '',
cell: ({ row }) => `#${row.getValue('product_id') as number}`
cell: ({ row }) => h('span', {
class: 'cursor-pointer text-blue-500 hover:underline',
onClick: (e: Event) => {
e.stopPropagation()
goToProduct(row.original.product_id, row.original.image_link)
}
}, `#${row.getValue('product_id') as number}`)
},
{
accessorKey: 'image_link',
@@ -346,7 +363,13 @@ const columnsChild: TableColumn<Payment>[] = [
{
accessorKey: 'name',
header: '',
cell: ({ row }) => row.getValue('name') as string
cell: ({ row }) => h('span', {
class: 'cursor-pointer text-blue-500 hover:underline',
onClick: (e: Event) => {
e.stopPropagation()
goToProduct(row.original.product_id, row.original.image_link)
}
}, row.getValue('name') as string)
},
{
accessorKey: 'quantity',
@@ -393,7 +416,7 @@ const columnsChild: TableColumn<Payment>[] = [
}
]
watch([page, sortField, filters.value], () => {
watch([page, sortField, filters], () => {
fetchProductList()
}, { immediate: true })
</script>

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

@@ -2,11 +2,11 @@
<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="iso_code">
<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>
@@ -42,9 +42,7 @@
<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>
<img v-if="imageUrl" :src="imageUrl as string" class="w-[60%]" />
<div class="flex flex-col gap-2">
<p class="text-[25px] font-bold text-black dark:text-white">
{{ productStore.productDescription.name || 'Product Name' }}
@@ -94,13 +92,13 @@
<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">
<UButton v-if="isEditing" @click="cancelEdit" color="neutral" variant="outline"
class="p-2.5 cursor-pointer">
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>
</div>
<div v-if="activeTab === 'description'"
@@ -111,10 +109,12 @@
<p class="text-white">Change Text</p>
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
</UButton>
<UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
<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>
<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">
@@ -148,7 +148,10 @@ const selectedLanguage = ref('pl')
const currentLangId = ref(2)
const productID = ref<number>(0)
// Watch for language changes and refetch product description
const imageUrl = computed(() => {
return route.query.image ? String(route.query.image) : ''
})
watch(selectedLanguage, async (newLang: string) => {
if (productID.value) {
await fetchForLanguage(newLang)
@@ -194,10 +197,14 @@ const originalDescription = ref('')
const originalUsage = ref('')
const saveDescription = async () => {
descriptionEdit.disableEdit()
await productStore.saveProductDescription(productID.value)
if (descriptionRef.value) {
productStore.productDescription.description = descriptionRef.value.innerHTML
}
descriptionEdit.disableEdit()
await productStore.saveProductDescription(productID.value, currentLangId.value)
}
const cancelDescriptionEdit = () => {
if (descriptionRef.value) {
descriptionRef.value.innerHTML = originalDescription.value
@@ -221,9 +228,14 @@ const enableEdit = () => {
}
const saveText = () => {
if (usageRef.value) {
productStore.productDescription.usage = usageRef.value.innerHTML
}
usageEdit.disableEdit()
isEditing.value = false
productStore.saveProductDescription(productID.value)
productStore.saveProductDescription(productID.value, currentLangId.value)
}
const cancelEdit = () => {
@@ -233,14 +245,5 @@ const cancelEdit = () => {
usageEdit.disableEdit()
isEditing.value = false
}
</script>
<style>
.images {
display: flex;
align-items: center;
gap: 70px;
margin: 20px 0 20px 0;
}
</style>

6
bo/src/components/admin/ProductsView.vue
View File

@@ -158,26 +158,20 @@ function clearFilters() {
<div class="container">
<div class="p-6 bg-white dark:bg-(--black) min-h-screen font-sans">
<div>
<!-- v-html="productStore.products" -->
</div>
<h1 class="text-2xl font-bold mb-6 text-black dark:text-white">{{ t('products.title') }}</h1>
<div v-if="!authStore.isAuthenticated" class="mb-4 p-3 bg-yellow-100 text-yellow-700 rounded">
{{ t('products.login_to_view') }}
</div>
<!-- Loading State -->
<div v-if="productStore.loading" class="mb-4 p-3 bg-blue-100 text-blue-700 rounded">
{{ t('products.loading') }}...
</div>
<!-- Error State -->
<div v-if="productStore.error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
{{ productStore.error }}
</div>
<div v-if="authStore.isAuthenticated && !productStore.loading && !productStore.error" class="space-y-4">
<!-- Filter Block -->
<div
class="flex flex-wrap gap-4 mb-4 p-4 border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-50 dark:bg-gray-800">
<div class="flex flex-col min-w-[180px]">

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

@@ -25,7 +25,7 @@ const router = createRouter({
path: '/:locale',
children: [
{ path: 'category/:category_id-:link_rewrite', component: () => import('@/views/CategoryView.vue'), name: 'category' },
{ path: 'products-datail', component: () => import('@/components/admin/ProductDetailView.vue'), name: 'product-detail' },
{ path: 'products-detail/:id(\\d+)?', component: () => import('@/components/admin/ProductDetailView.vue'), name: 'product-detail' },
{ path: '', component: () => import('@/views/RepoChartView.vue'), name: 'home' },
{ path: 'products', component: () => import('@/components/admin/ProductsView.vue'), name: 'products' },
{ path: 'product-card-full', component: () => import('@/components/customer/PageProductCardFull.vue'), name: 'product-card-full' },
@@ -116,3 +116,4 @@ router.beforeEach((to, from) => {
})
export default router

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

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
import { ref } from 'vue'
import { useFetchJson } from '@/composable/useFetchJson'
import type { ProductDescription } from '@/types/product'
import { currentLang } from '@/router/langs'
export interface Product {
id: number
@@ -34,10 +35,10 @@ export const useProductStore = defineStore('product', () => {
try {
const response = await useFetchJson<ProductDescription>(
`/api/v1/restricted/product-description/get-product-description?productID=${productID}&productLangID=${langId}`
`/api/v1/restricted/product-translation/get-product-description?productID=${productID}&productLangID=${langId}`,
)
console.log(response, 'dfsfsdf');
productDescription.value = response.items
console.log(productDescription, 'dfsfsdf');
} catch (e: unknown) {
error.value = e instanceof Error ? e.message : 'Failed to load product description'
@@ -45,21 +46,31 @@ export const useProductStore = defineStore('product', () => {
loading.value = false
}
}
async function saveProductDescription(productID?: number) {
function stripHtml(html: string) {
const div = document.createElement('div')
div.innerHTML = html
return div.textContent || div.innerText || ''
}
async function saveProductDescription(productID?: number, langId?: number) {
const id = productID || 1
const lang = langId || 1
try {
const data = await useFetchJson(
`/api/v1/restricted/product-description/save-product-description?productID=${id}&productShopID=1&productLangID=1`,
`/api/v1/restricted/product-translation/save-product-description?productID=${id}&productLangID=${lang}`,
{
method: 'POST',
body: JSON.stringify(
{
description: productDescription.value.description,
description_short: productDescription.value.description_short,
meta_description: productDescription.value.meta_description,
available_now: productDescription.value.available_now,
usage: productDescription.value.usage
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: stripHtml(productDescription.value?.name || ''),
description: stripHtml(productDescription.value?.description || ''),
description_short: stripHtml(productDescription.value?.description_short || ''),
meta_title: stripHtml(productDescription.value?.meta_title || ''),
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 || '')
})
}
)
@@ -69,12 +80,12 @@ export const useProductStore = defineStore('product', () => {
}
}
async function translateProductDescription(productID: number, fromLangId: number, toLangId: number) {
async function translateProductDescription(productID: number, fromLangId: number, toLangId: number, model: string = 'OpenAI') {
loading.value = true
error.value = null
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-translation/translate-product-description?productID=${productID}&productFromLangID=${fromLangId}&productToLangID=${toLangId}&model=${model}`)
productDescription.value = response.items
return response.items
} catch (e: any) {