goc_daniel/b2b
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: style

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-03-13 15:54:09 +01:00
parent b980984c3a
commit 836b6a3bfe
3 changed files with 127 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
bo/src/views/customer/ProductDetailView.vue
View File

@@ -1,36 +1,116 @@
<template>
<div class="container my-10 ">
<div class="flex items-start gap-30">
<div class="flex flex-col gap-10">
<div class="flex flex-col gap-10">
<p class="p-60 bg-yellow-300">img</p>
<div class="flex gap-3 mb-3">
<button @click="removeAttribute(editableRef)"
class="p-2 border border-(--border-light) dark:border-(--border-dark)">create</button>
<button @click="setAttribute(editableRef)"
class="p-2 border border-(--border-light) dark:border-(--border-dark)">Save</button>
</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 class="space-2">
<p>Ilość:</p>
<button @click="decrement" class="px-3 py-1 bg-gray-200 rounded">-</button>
<span class="px-2">{{ quantity }}</span>
<button @click="increment" class="px-3 py-1 bg-gray-200 rounded">+</button>
</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>
<UIcon name="tdesign:cart-filled" class="text-[20px]" />
<p> Dodaj do koszyka </p>
</UButton>
</div>
</div>
<div>
<p class="text-[25px] font-bold">{{ productStore.productDescription.name }}</p>
<p>{{ productStore.productDescription.available_now }}</p>
<p ref="editableRef2" v-html="productStore.productDescription.usage"></p>
</div>
<div class="mt-16">
<div class="flex gap-4 m-2">
<UButton @click="activeTab = 'description'" color="neutral" variant="outline">
<p>Description</p>
</UButton>
<UButton @click="activeTab = 'usage'" 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">
<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">
<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">
<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">
<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 ref="editableRef" v-html="productStore.productDescription.description"></div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useProductStore } from '@/stores/product'
import { useEditable } from '@/composable/useConteditable'
import { ref } from 'vue'
const activeTab = ref('description')
const productStore = useProductStore()
await productStore.getProductDescription()
const editableRef = ref<HTMLElement | null>(null)
const { removeAttribute, setAttribute } = useEditable()
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>
@@ -41,5 +121,4 @@ const { removeAttribute, setAttribute } = useEditable()
gap: 70px;
margin: 20px 0 20px 0;
}
</style>