+
+ Product Image
+
+
+
+ {{ productStore.productDescription.name || 'Product Name' }}
+
+
-
-
-
-
- {{ productStore.productDescription.available_now }}
-
-
-
-
-
- {{ productStore.productDescription.delivery_in_stock || 'Delivery information' }}
-
+
+
+
+
+ {{ productStore.productDescription.available_now }}
+
+
+
+
+
+ {{ productStore.productDescription.delivery_in_stock || 'Delivery information' }}
+
+
-
-
-
-
-
- Change Text
-
-
-
-
- Save the edited text
-
-
-
- Cancel
-
-
-
-
+
+
+ Change Text
+
+
+
+ Save the edited text
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
@@ -161,8 +174,15 @@
@@ -177,10 +197,141 @@ import Default from '@/layouts/default.vue';
import { langs } from '@/router/langs';
import { useProductStore } from '@/stores/product';
import { useSettingsStore } from '@/stores/settings';
-import { onMounted, ref } from 'vue';
-import { computed } from 'vue';
+import type { EditorToolbarItem } from '@nuxt/ui';
+import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
+const toolbarItems: EditorToolbarItem[][] = [
+ // History controls
+ [{
+ kind: 'undo',
+ icon: 'i-lucide-undo',
+ tooltip: { text: 'Undo' }
+ }, {
+ kind: 'redo',
+ icon: 'i-lucide-redo',
+ tooltip: { text: 'Redo' }
+ }],
+ // Block types
+ [{
+ icon: 'i-lucide-heading',
+ tooltip: { text: 'Headings' },
+ content: {
+ align: 'start'
+ },
+ items: [{
+ kind: 'heading',
+ level: 1,
+ icon: 'i-lucide-heading-1',
+ label: 'Heading 1'
+ }, {
+ kind: 'heading',
+ level: 2,
+ icon: 'i-lucide-heading-2',
+ label: 'Heading 2'
+ }, {
+ kind: 'heading',
+ level: 3,
+ icon: 'i-lucide-heading-3',
+ label: 'Heading 3'
+ }, {
+ kind: 'heading',
+ level: 4,
+ icon: 'i-lucide-heading-4',
+ label: 'Heading 4'
+ }]
+ }, {
+ icon: 'i-lucide-list',
+ tooltip: { text: 'Lists' },
+ content: {
+ align: 'start'
+ },
+ items: [{
+ kind: 'bulletList',
+ icon: 'i-lucide-list',
+ label: 'Bullet List'
+ }, {
+ kind: 'orderedList',
+ icon: 'i-lucide-list-ordered',
+ label: 'Ordered List'
+ }]
+ }, {
+ kind: 'blockquote',
+ icon: 'i-lucide-text-quote',
+ tooltip: { text: 'Blockquote' }
+ }, {
+ kind: 'codeBlock',
+ icon: 'i-lucide-square-code',
+ tooltip: { text: 'Code Block' }
+ }, {
+ kind: 'horizontalRule',
+ icon: 'i-lucide-separator-horizontal',
+ tooltip: { text: 'Horizontal Rule' }
+ }],
+ // Text formatting
+ [{
+ kind: 'mark',
+ mark: 'bold',
+ icon: 'i-lucide-bold',
+ tooltip: { text: 'Bold' }
+ }, {
+ kind: 'mark',
+ mark: 'italic',
+ icon: 'i-lucide-italic',
+ tooltip: { text: 'Italic' }
+ }, {
+ kind: 'mark',
+ mark: 'underline',
+ icon: 'i-lucide-underline',
+ tooltip: { text: 'Underline' }
+ }, {
+ kind: 'mark',
+ mark: 'strike',
+ icon: 'i-lucide-strikethrough',
+ tooltip: { text: 'Strikethrough' }
+ }, {
+ kind: 'mark',
+ mark: 'code',
+ icon: 'i-lucide-code',
+ tooltip: { text: 'Code' }
+ }],
+ // Link
+ [{
+ kind: 'link',
+ icon: 'i-lucide-link',
+ tooltip: { text: 'Link' }
+ }],
+ // Text alignment
+ [{
+ icon: 'i-lucide-align-justify',
+ tooltip: { text: 'Text Align' },
+ content: {
+ align: 'end'
+ },
+ items: [{
+ kind: 'textAlign',
+ align: 'left',
+ icon: 'i-lucide-align-left',
+ label: 'Align Left'
+ }, {
+ kind: 'textAlign',
+ align: 'center',
+ icon: 'i-lucide-align-center',
+ label: 'Align Center'
+ }, {
+ kind: 'textAlign',
+ align: 'right',
+ icon: 'i-lucide-align-right',
+ label: 'Align Right'
+ }, {
+ kind: 'textAlign',
+ align: 'justify',
+ icon: 'i-lucide-align-justify',
+ label: 'Align Justify'
+ }]
+ }]
+]
+
const router = useRouter()
function backFromProduct() {
let path = localStorage.getItem('back_from_product')
@@ -206,7 +357,7 @@ const settingStore = useSettingsStore()
const productStore = useProductStore()
const isTranslations = ref(false)
-const toLangId = ref(null)
+const toLangId = ref
(settingStore.shopDefaultLanguage)
const productID = ref(0)
const translating = ref(false)
@@ -219,10 +370,6 @@ const descriptionRef = ref(null)
const descriptionEdit = useEditable(descriptionRef)
const originalDescription = ref('')
-const isShowProductView = ref(false)
-
-const availableLangs = computed(() => langs.filter(item => item.id !== settingStore.shopDefaultLanguage))
-
const translateToSelectedLanguage = async () => {
if (toLangId.value && productID.value) {
translating.value = true
@@ -230,6 +377,8 @@ const translateToSelectedLanguage = async () => {
await productStore.translateProductDescription(productID.value, toLangId.value)
} finally {
translating.value = false
+ enableEdit()
+ enableDescriptionEdit()
}
}
if (productStore.productDescription) {
@@ -244,6 +393,10 @@ const fetchForLanguage = async (langId: number | null) => {
}
}
+watch(toLangId, () => {
+ fetchForLanguage(toLangId.value)
+})
+
onMounted(async () => {
const id = route.params.product_id
if (id) {
@@ -259,6 +412,8 @@ const items = ref([
// text edit
const enableEdit = () => {
+ console.log(usageRef.value, 'usageRef');
+
if (usageRef.value) {
originalUsage.value = usageRef.value.innerHTML
}
@@ -266,6 +421,15 @@ const enableEdit = () => {
usageEdit.enableEdit()
}
+const enableDescriptionEdit = () => {
+ console.log(usageRef.value, 'usageRef');
+
+ if (descriptionRef.value) {
+ originalDescription.value = descriptionRef.value.innerHTML
+ }
+ descriptionEdit.enableEdit()
+}
+
const saveText = () => {
if (usageRef.value) {
productStore.productDescription.usage = usageRef.value.innerHTML
@@ -285,13 +449,6 @@ const cancelEdit = () => {
isEditing.value = false
}
-const enableDescriptionEdit = () => {
- if (descriptionRef.value) {
- originalDescription.value = descriptionRef.value.innerHTML
- }
- descriptionEdit.enableEdit()
-}
-
const saveDescription = async () => {
if (descriptionRef.value) {
productStore.productDescription.description = descriptionRef.value.innerHTML
@@ -364,5 +521,4 @@ function removeInlineStylesFromAll(product) {
product.description_short = removeStyles(product.description_short)
product.usage = removeStyles(product.usage)
}
-
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index ce0760d..4c80154 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -1,7 +1,7 @@
-