Interface SAV

src/components/Messenger.vue

@@ -17,22 +17,23 @@ onMounted(async () => {
 })
 
 const suspens = ref(false)
-const reply = ref({message: null})
+const replyOption = ref({private_message: null, notification: 'Réponse envoyée'})
+const quill = ref()
 
 const sendReply = async () => {
 
-  if (reply.value.message === null || reply.value.message === '') {
+  if (quill.value === null || quill.value === '') {
     alert('NOK')
     return;
   }
 
   sendBtn.value.disabled = true
   suspens.value = true
-  await TicketApi.saveMessage(storeTicket.idTicket, reply.value)
+  await TicketApi.saveMessage(storeTicket.idTicket, quill.value, replyOption.value)
   const newList = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
 
   setTimeout(function () {
-    reply.value = {}
+    quill.value = null
     suspens.value = false
     sendBtn.value.disabled = false
     messages.value = newList
@@ -115,17 +116,17 @@ const sendReply = async () => {
             </ul>
           </div>
 
-          <div class="col-lg-12 hidden-sm text-end" style="padding: 20px">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary me-2"><i class="fa-solid fa-camera"></i></a>
-            <a href="javascript:void(0);" class="btn btn-outline-primary me-2"><i class="fa-solid fa-image"></i></a>
-            <a href="javascript:void(0);" class="btn btn-outline-info me-2"><i class="fa-solid fa-cogs"></i></a>
-            <a href="javascript:void(0);" class="btn btn-outline-warning"><i class="fa-solid fa-question"></i></a>
-          </div>
           <div class="chat-message clearfix">
-            <div class="input-group mb-3">
-              <button class="input-group-text" @click="sendReply" ref="sendBtn"><i class="fa-solid fa-paper-plane"></i>
-              </button>
-              <input type="text" class="form-control" placeholder="Entrer votre réponse" v-model="reply.message">
+
+            <div class="my-2">
+              <a href="javascript:void(0);" class="btn btn-outline-secondary me-2"><i class="fa-solid fa-comment-dots"></i> Messages type</a>
+              <a href="javascript:void(0);" class="btn btn-outline-primary me-2"><i class="fa-solid fa-paperclip"></i></a>
+            </div>
+
+            <QuillEditor theme="snow" v-model:content="quill" contentType="html" placeholder="Entrer votre réponse"/>
+
+            <div class="text-end mt-4">
+              <button class="btn btn-primary" @click="sendReply" ref="sendBtn"><i class="fa-solid fa-paper-plane"></i> Envoyer</button>
             </div>
           </div>
         </div>

src/main.js

@@ -14,12 +14,16 @@ import "gridjs/dist/theme/mermaid.css";
 
 import { Icon } from '@iconify/vue';
 
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
 const pinia = createPinia()
 
 const app = createApp(App)
 //app.use(router);
 app.use(pinia)
 app.component('Icon', Icon);
+app.component('QuillEditor', QuillEditor)
 app.mount("#app");
 
 

src/services/TicketApi.js

@@ -32,7 +32,7 @@ export default {
 
         return response.json();
     },
-    async saveMessage(id, reply) {
+    async saveMessage(id, quill, replyOption) {
         const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=saveMessage'
          if (import.meta.env.DEV) {
             console.log(apiUrl)
@@ -40,7 +40,8 @@ export default {
 
         const postData = new FormData();
         postData.append("id_business", id);
-        postData.append("data", JSON.stringify(reply));
+        postData.append("quill", quill);
+        postData.append("data", JSON.stringify(replyOption));
 
         const response = await fetch(apiUrl, {
             method: 'POST',