fix: style

bo/src/composable/useConteditable.ts

@@ -1,37 +1,41 @@
 import { ref, type Ref } from 'vue'
 import DOMPurify from 'dompurify'
-import { useProductStore } from '@/stores/product'
 
-export function useEditable() {
-    const isEditing = ref(false)
-    const productStore = useProductStore()
+export function useEditable(elementRef: Ref<HTMLElement | null>) {
 
-    const removeAttribute = (editableRef: HTMLElement | null) => {
-        if (!editableRef) return
-        isEditing.value = true
-        Array.from(editableRef.children).forEach(item => {
-            item.setAttribute('contenteditable', 'true')
-            console.log('lllllll')
-        })
-    }
+  const isEditing = ref(false)
 
-    const setAttribute = async (editableRef: HTMLElement | null): Promise<string | undefined> => {
-        if (!editableRef) return
-        Array.from(editableRef.children).forEach(item => {
-            item.setAttribute('contenteditable', 'false')
-        })
-        isEditing.value = false
+  const enableEdit = () => {
+    if (!elementRef.value) return
 
-        const html = editableRef.innerHTML
-        const cleanHtml = DOMPurify.sanitize(html)
-        await productStore.saveProductDescription(cleanHtml)
+    isEditing.value = true
 
-        return cleanHtml
-    }
+    Array.from(elementRef.value.children).forEach(item => {
+      item.setAttribute('contenteditable', 'true')
+    })
+  }
 
-    return {
-        isEditing,
-        removeAttribute,
-        setAttribute
-    }
+  const disableEdit = () => {
+    if (!elementRef.value) return
+
+    isEditing.value = false
+
+    Array.from(elementRef.value.children).forEach(item => {
+      item.setAttribute('contenteditable', 'false')
+    })
+  }
+
+  const getCleanHtml = () => {
+    if (!elementRef.value) return ''
+
+    const html = elementRef.value.innerHTML
+    return DOMPurify.sanitize(html)
+  }
+
+  return {
+    isEditing,
+    enableEdit,
+    disableEdit,
+    getCleanHtml
+  }
 }

bo/src/views/customer/ProductDetailView.vue

@@ -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>