fix: contedtable

bo/src/composable/useConteditable.ts

@@ -0,0 +1,37 @@
+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()
+
+    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 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 html = editableRef.innerHTML
+        const cleanHtml = DOMPurify.sanitize(html)
+        await productStore.saveProductDescription(cleanHtml)
+
+        return cleanHtml
+    }
+
+    return {
+        isEditing,
+        removeAttribute,
+        setAttribute
+    }
+}

bo/src/stores/product.ts

@@ -49,9 +49,7 @@ export const useProductStore = defineStore('product', () => {
     currentProduct.value = null
 
     try {
-      const data = await useFetchJson<{ items: Product }>(`/api/v1/restricted/product-description?id=${id}`, {
-        method: 'GET',
-      })
+      const data = await useFetchJson<{ items: Product }>(`/api/v1/restricted/product-description?id=${id}`)
 
       const response = (data as any).items || data
       currentProduct.value = response.items?.[0] || response
@@ -63,6 +61,34 @@ export const useProductStore = defineStore('product', () => {
     }
   }
 
+
+  async function saveProductDescription(description: string) {
+    try {
+      const data = await useFetchJson(
+        `/api/v1/restricted/product-description/save-product-description?productID=1&productShopID=1&productLangID=1`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            description: description,
+            description_short: "<p>Test short</p>",
+            meta_description: "This is a test",
+            meta_title: "...",
+            name: "...",
+            available_now: "Test",
+            available_later: "...",
+            usage: "<p>test</p>"
+          })
+        }
+      )
+      return data
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
   // Clear current product
   function clearCurrentProduct() {
     currentProduct.value = null
@@ -76,5 +102,6 @@ export const useProductStore = defineStore('product', () => {
     getProductDescription,
     fetchProductById,
     clearCurrentProduct,
+    saveProductDescription
   }
 })

bo/src/views/customer/ProductDetailView.vue

@@ -1,34 +1,36 @@
 <template>
-  <div class="container my-10">
-    <div id="textDescriptionRef" ref="textDescriptionRef" v-html="productStore.productDescription.description"></div>
-    <button @click="create">create</button>
-    <button @click="save">Save</button>
+  <div class="container my-10 ">
+    <div class="flex items-start gap-30">
+      <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>
+      <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>
+    <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 productStore = useProductStore()
-const textDescriptionRef = ref<HTMLElement | null>(null)
-
 await productStore.getProductDescription()
 
-const save = () => {
-  const myDiv = document.getElementById("textDescriptionRef");
-  Array.from(myDiv.children).forEach(item => {
-    item.setAttribute('contenteditable', 'false')
-  })
-}
-
-const create = () => {
-  const myDiv = document.getElementById("textDescriptionRef");
-  Array.from(myDiv.children).forEach(item => {
-    item.setAttribute('contenteditable', 'true')
-  })
-}
+const editableRef = ref<HTMLElement | null>(null)
+const { removeAttribute, setAttribute } = useEditable()
 
 </script>
 
@@ -39,4 +41,5 @@ const create = () => {
   gap: 70px;
   margin: 20px 0 20px 0;
 }
+
 </style>