Merge branch 'front-styles' of ssh://git.ma-al.com:8822/goc_daniel/b2b into translate
This commit is contained in:
@@ -6,9 +6,8 @@
|
||||
Back to products</p>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="gap-4 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="gap-4 mb-6 border-b border-(--border-light) dark:border-(--border-dark) py-4">
|
||||
<div class="flex flex-wrap gap-4 items-center justify-between">
|
||||
<div class="flex flex-col items-center gap-3" v-if="!isTranslations">
|
||||
<USelectMenu v-model="toLangId" :items="langs" value-key="id"
|
||||
class="w-48 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm" :searchInput="false">
|
||||
@@ -18,7 +17,7 @@
|
||||
Selected language
|
||||
</span>
|
||||
<span class="font-medium dark:text-white text-black">
|
||||
{{langs.find(l => l.id === toLangId)?.name || 'Select language'}}
|
||||
{{ selectedLangName }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -34,7 +33,8 @@
|
||||
</USelectMenu>
|
||||
</div>
|
||||
|
||||
<div v-if="toLangId !== settingStore.shopDefaultLanguage && !isTranslations" class="flex gap-7">
|
||||
<div v-if="toLangId !== settingStore.shopDefaultLanguage && !isTranslations"
|
||||
class="flex flex-wrap-reverse justify-between gap-2">
|
||||
<UButton color="info" variant="outline" v-if="!isEditing" @click="isTranslations = true">
|
||||
<p>Change Text</p>
|
||||
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-7.5" />
|
||||
@@ -45,13 +45,16 @@
|
||||
</div>
|
||||
<div v-if="isTranslations" class="flex gap-3 w-full justify-end">
|
||||
<UButton @click="() => {
|
||||
toLangId = settingStore.shopDefaultLanguage
|
||||
handleCancel()
|
||||
isTranslations = false
|
||||
}" color="info" variant="outline">
|
||||
Cancel and back to Polish
|
||||
Cancel
|
||||
</UButton>
|
||||
<UButton color="info" @click="productStore.saveProductDescription(productID, toLangId)">
|
||||
Save translations
|
||||
<UButton color="info" @click="async () => {
|
||||
await productStore.saveProductDescription(productID, toLangId)
|
||||
isTranslations = false
|
||||
}">
|
||||
Save
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,45 +68,41 @@
|
||||
</div>
|
||||
|
||||
<div v-else-if="productStore.productDescription" class="space-y-7.5">
|
||||
<div class="flex gap-6 h-full w-full">
|
||||
<div
|
||||
class="min-w-96 min-h-96 border border-(--border-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 justify-between min-h-full w-full">
|
||||
<div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-6 h-full w-full gap-6">
|
||||
<img class="md:col-span-2 rounded-md" :src="productStore.productDescription.image_link"
|
||||
:alt="productStore.productDescription.name" @onError="(e: Event) => {
|
||||
const target = e.target as HTMLImageElement
|
||||
target.src = errorImg
|
||||
}">
|
||||
<div class="md:col-span-4 flex flex-col justify-between min-h-full w-full space-y-7.5">
|
||||
<div class="space-y-7.5">
|
||||
<div>
|
||||
<p v-if="!isTranslations" class="text-[25px] font-bold text-black dark:text-white">
|
||||
{{ productStore.productDescription.name || 'Product Name' }}
|
||||
{{ productStore.productDescription.name }}
|
||||
</p>
|
||||
<div class="" v-if="isTranslations">
|
||||
<p>Title:</p>
|
||||
<UEditor v-slot="{ editor }" v-model="productStore.productDescription.name" content-type="html"
|
||||
:ui="{ base: 'p-8 sm:px-16', root : 'pt-2' }" class="min-w-full border rounded-md border-(--border-light)"
|
||||
placeholder="Write there ...">
|
||||
<UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
|
||||
<template #link>
|
||||
<EditorLinkPopover :editor="editor" auto-open />
|
||||
</template>
|
||||
</UEditorToolbar>
|
||||
</UEditor>
|
||||
<UTextarea :rows="1" v-model="productStore.productDescription.name" autoresize :ui="{
|
||||
root: 'w-full bg-inherit!',
|
||||
base: 'text-2xl! bg-inherit!',
|
||||
}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="" v-if="isTranslations">
|
||||
<p>Link rewrite:</p>
|
||||
<UTextarea :rows="1" v-model="productStore.productDescription.link_rewrite" autoresize :ui="{
|
||||
root: 'w-full',
|
||||
base: 'bg-inherit!',
|
||||
}" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p v-if="!isTranslations" v-html="productStore.productDescription.description_short"
|
||||
class="text-black dark:text-white"></p>
|
||||
<div class="" v-if="isTranslations">
|
||||
<p>Short description:</p>
|
||||
<UEditor v-slot="{ editor }" v-model="productStore.productDescription.description_short"
|
||||
content-type="html" :ui="{ base: 'p-8 sm:px-16' }"
|
||||
class="w-full border rounded-md border-(--border-light)" placeholder="Write there ...">
|
||||
<UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
|
||||
<template #link>
|
||||
<EditorLinkPopover :editor="editor" auto-open />
|
||||
</template>
|
||||
</UEditorToolbar>
|
||||
</UEditor>
|
||||
<ProductEditor v-model="productStore.productDescription.description_short" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,64 +131,13 @@
|
||||
root: 'items-start!'
|
||||
}">
|
||||
<template #description>
|
||||
<!-- <div v-if="!isTranslations" class="flex justify-end items-center gap-3 mb-4">
|
||||
<UButton v-if="!isEditing" @click="activeTab === 'usage' ? enableEdit() : 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!" />
|
||||
</UButton>
|
||||
<UButton v-if="isEditing" @click="activeTab === 'usage' ? saveText : 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="isEditing" @click="activeTab === 'usage' ? cancelEdit : cancelDescriptionEdit"
|
||||
color="neutral" variant="outline" class="p-2.5 cursor-pointer">
|
||||
Cancel
|
||||
</UButton>
|
||||
</div> -->
|
||||
<UEditor v-if="isTranslations" v-slot="{ editor }" v-model="productStore.productDescription.description"
|
||||
content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74" placeholder="Write there ...">
|
||||
<UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
|
||||
<template #link>
|
||||
<EditorLinkPopover :editor="editor" auto-open />
|
||||
</template>
|
||||
</UEditorToolbar>
|
||||
</UEditor>
|
||||
<p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white px-7"></p>
|
||||
<ProductEditor v-if="isTranslations" v-model="productStore.productDescription.description" />
|
||||
<p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white"></p>
|
||||
</template>
|
||||
|
||||
<template #usage>
|
||||
<div class="px-7">
|
||||
<div class="flex justify-end items-center gap-3 py-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-(--text-sky-light) dark:text-(--text-sky-dark)">Change Text</p>
|
||||
<UIcon name="material-symbols-light:stylus-note-sharp"
|
||||
class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
</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
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<UEditor v-if="isTranslations" v-slot="{ editor }" v-model="productStore.productDescription.usage"
|
||||
content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74"
|
||||
placeholder="Write there ...">
|
||||
<UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
|
||||
<template #link>
|
||||
<EditorLinkPopover :editor="editor" auto-open />
|
||||
</template>
|
||||
</UEditorToolbar>
|
||||
</UEditor>
|
||||
<p v-else v-html="productStore.productDescription.usage" class="text-black dark:text-white"></p>
|
||||
</div>
|
||||
<ProductEditor v-if="isTranslations" v-model="productStore.productDescription.usage" />
|
||||
<p v-else v-html="productStore.productDescription.usage" class="text-black dark:text-white"></p>
|
||||
</template>
|
||||
</UTabs>
|
||||
</div>
|
||||
@@ -198,147 +146,31 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useEditable } from '@/composable/useConteditable';
|
||||
import Default from '@/layouts/default.vue';
|
||||
import { langs } from '@/router/langs';
|
||||
import { useProductStore } from '@/stores/admin/product';
|
||||
import { useSettingsStore } from '@/stores/admin/settings';
|
||||
import type { EditorToolbarItem } from '@nuxt/ui';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { useProductStore } from '@/stores/product';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { computed, 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'
|
||||
}]
|
||||
}]
|
||||
]
|
||||
import ProductEditor from '../inner/ProductEditor.vue';
|
||||
import errorImg from '@/assets/error.svg'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const settingStore = useSettingsStore()
|
||||
const productStore = useProductStore()
|
||||
|
||||
const toLangId = ref<number>(settingStore.shopDefaultLanguage)
|
||||
const productID = ref<number>(0)
|
||||
const translating = ref(false)
|
||||
const isEditing = ref(false)
|
||||
const isTranslations = ref(false)
|
||||
|
||||
const selectedLangName = computed(() => {
|
||||
return langs.find(l => l.id === toLangId.value)?.name || 'Select language'
|
||||
})
|
||||
|
||||
|
||||
function backFromProduct() {
|
||||
let path = localStorage.getItem('back_from_product')
|
||||
|
||||
@@ -353,23 +185,11 @@ function backFromProduct() {
|
||||
localStorage.removeItem('back_from_product')
|
||||
} else {
|
||||
router.push({
|
||||
name: 'customer-products',
|
||||
name: 'admin-products',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const settingStore = useSettingsStore()
|
||||
const productStore = useProductStore()
|
||||
const isTranslations = ref(false)
|
||||
|
||||
const toLangId = ref<number>(settingStore.shopDefaultLanguage)
|
||||
const productID = ref<number>(0)
|
||||
const translating = ref(false)
|
||||
|
||||
const activeTab = ref('')
|
||||
const isEditing = ref(false)
|
||||
|
||||
const translateToSelectedLanguage = async () => {
|
||||
if (toLangId.value && productID.value) {
|
||||
translating.value = true
|
||||
@@ -389,11 +209,16 @@ const fetchForLanguage = async (langId: number | null) => {
|
||||
await productStore.getProductDescription(langId, productID.value)
|
||||
}
|
||||
}
|
||||
const handleCancel = async () => {
|
||||
await productStore.getProductDescription(toLangId.value, productID.value)
|
||||
isTranslations.value = false
|
||||
}
|
||||
|
||||
watch(toLangId, () => {
|
||||
fetchForLanguage(toLangId.value)
|
||||
watch(toLangId, (lang) => {
|
||||
fetchForLanguage(lang)
|
||||
})
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
const id = route.params.product_id
|
||||
if (id) {
|
||||
|
||||
160
bo/src/components/inner/ProductEditor.vue
Normal file
160
bo/src/components/inner/ProductEditor.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<UEditor v-slot="{ editor }" v-model="localValue" content-type="html"
|
||||
:ui="{ base: 'p-8 sm:px-16', root: 'p-2' }"
|
||||
class="min-w-full border rounded-md border-(--border-light)" placeholder="Write there ...">
|
||||
<UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8 flex-wrap!">
|
||||
<template #link>
|
||||
<EditorLinkPopover :editor="editor" auto-open />
|
||||
</template>
|
||||
</UEditorToolbar>
|
||||
</UEditor>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { EditorToolbarItem } from '@nuxt/ui';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const localValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value: string) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
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'
|
||||
}]
|
||||
}]
|
||||
]
|
||||
</script>
|
||||
Reference in New Issue
Block a user