134 lines
4.9 KiB
Vue
134 lines
4.9 KiB
Vue
<template>
|
|
<div class="container my-10 ">
|
|
|
|
<UButton>Translations</UButton>
|
|
<div class="flex items-start gap-30">
|
|
<div class="flex flex-col gap-10">
|
|
<p class="p-60 bg-yellow-300">img</p>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<p class="text-[25px] font-bold">{{ productStore.productDescription.name }}</p>
|
|
<p v-html="productStore.productDescription.description_short"></p>
|
|
|
|
<div>
|
|
<p>Ilość:</p>
|
|
<div
|
|
class="flex items-center w-[15%] border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-200">
|
|
<button @click="decrement" class="px-3 py-1 cursor-pointer">-</button>
|
|
<span class="px-6">{{ quantity }}</span>
|
|
<button @click="increment" class="px-3 py-1 cursor-pointer">+</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-[10px]">
|
|
<div class="flex gap-1 items-center">
|
|
<UIcon name="lets-icons:done-ring-round-fill" class="text-[20px] text-green-600" />
|
|
<p class=" gap-1text-[16px] font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{
|
|
productStore.productDescription.available_now }}</p>
|
|
</div>
|
|
<div class="flex gap-1 items-center">
|
|
<UIcon name="marketeq:car-shipping" class="text-[25px] text-green-600" />
|
|
<p class="text-[18px] font-bold">{{ productStore.productDescription.delivery_in_stock }}</p>
|
|
</div>
|
|
<UButton class="cursor-pointer">
|
|
<UIcon name="tdesign:cart-filled" class="text-[20px]" />
|
|
<p> Dodaj do koszyka </p>
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16">
|
|
<div class="flex gap-4 m-2">
|
|
<UButton @click="activeTab = 'description'"
|
|
:class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
|
|
variant="outline">
|
|
<p>Description</p>
|
|
</UButton>
|
|
|
|
<UButton @click="activeTab = 'usage'"
|
|
:class="['cursor-pointer', activeTab === 'usage' ? 'bg-blue-500 text-white' : '']" color="neutral"
|
|
variant="outline">
|
|
<p>Usage</p>
|
|
</UButton>
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'usage'">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<UButton @click="usageEdit.enableEdit()" class="flex items-center gap-2 m-2 cursor-pointer">
|
|
<p>Create Text</p>
|
|
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px]" />
|
|
</UButton>
|
|
<UButton @click="save" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
|
|
<p>Save the edited text</p>
|
|
</UButton>
|
|
</div>
|
|
<p ref="usageRef" v-html="productStore.productDescription.usage"
|
|
class="p-8 flex flex-col justify-center w-full text-start border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark) dark:text-white text-black">
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'description'">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<UButton @click="descriptionEdit.enableEdit()" class="flex items-center gap-2 m-2 cursor-pointer">
|
|
<p>Create Text</p>
|
|
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px]" />
|
|
</UButton>
|
|
<UButton @click="save" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
|
|
<p>Save the edited text</p>
|
|
</UButton>
|
|
</div>
|
|
<div ref="descriptionRef" v-html="productStore.productDescription.description"
|
|
class="p-8 flex flex-col justify-center border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark) dark:text-white text-black">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useProductStore } from '@/stores/product'
|
|
import { useEditable } from '@/composable/useConteditable'
|
|
|
|
const activeTab = ref('description')
|
|
const productStore = useProductStore()
|
|
await productStore.getProductDescription()
|
|
await productStore.getProductDescriptionTranslations()
|
|
|
|
const quantity = ref(1)
|
|
|
|
const increment = () => {
|
|
quantity.value += 1
|
|
}
|
|
const decrement = () => {
|
|
if (quantity.value > 1) quantity.value -= 1
|
|
}
|
|
const descriptionRef = ref<HTMLElement | null>(null)
|
|
const usageRef = ref<HTMLElement | null>(null)
|
|
|
|
const descriptionEdit = useEditable(descriptionRef)
|
|
const usageEdit = useEditable(usageRef)
|
|
|
|
const save = async () => {
|
|
const description = descriptionEdit.getCleanHtml()
|
|
const usage = usageEdit.getCleanHtml()
|
|
|
|
descriptionEdit.disableEdit()
|
|
usageEdit.disableEdit()
|
|
// await productStore.saveProductDescription({
|
|
// description,
|
|
// usage
|
|
// })
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.images {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 70px;
|
|
margin: 20px 0 20px 0;
|
|
}
|
|
</style> |