Interface SAV

src/components/Messenger.vue

@@ -10,10 +10,36 @@ const storeTicket = useTicketStore();
 
 const messages = ref([])
 
+const sendBtn = ref();
+
 onMounted(async () => {
-  messages.value = await TicketApi.getMessages(storeTicket.currentTicket.codeTicket, storeTicket.idTicket)
+  messages.value = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
 })
 
+const suspens = ref(false)
+const reply = ref({message: null})
+
+const sendReply = async () => {
+
+  if (reply.value.message === null || reply.value.message === '') {
+    alert('NOK')
+    return;
+  }
+
+  sendBtn.value.disabled = true
+  suspens.value = true
+  await TicketApi.saveMessage(storeTicket.idTicket, reply.value)
+  const newList = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
+
+  setTimeout(function () {
+    reply.value = {}
+    suspens.value = false
+    sendBtn.value.disabled = false
+    messages.value = newList
+  }, 1000);
+
+
+}
 
 </script>
 
@@ -80,6 +106,12 @@ onMounted(async () => {
 
                 </div>
               </li>
+              <li class="clearfix" v-if="suspens">
+                <div class="message-data text-end">Envoi en cours</div>
+                <div class="message other-message float-end">
+                  <div class="dot-flashing"></div>
+                </div>
+              </li>
             </ul>
           </div>
 
@@ -91,8 +123,9 @@ onMounted(async () => {
           </div>
           <div class="chat-message clearfix">
             <div class="input-group mb-3">
-              <span class="input-group-text"><i class="fa-solid fa-paper-plane"></i></span>
+              <button class="input-group-text" @click="sendReply" ref="sendBtn"><i class="fa-solid fa-paper-plane"></i>
-              <input type="text" class="form-control" placeholder="Entrer votre réponse">
+              </button>
+              <input type="text" class="form-control" placeholder="Entrer votre réponse" v-model="reply.message">
             </div>
           </div>
         </div>
@@ -107,5 +140,57 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+/**
+ * ==============================================
+ * Dot Flashing
+ * ==============================================
+ */
+.dot-flashing {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dot-flashing 1s infinite linear alternate;
+  animation-delay: 0.5s;
+}
 
+.dot-flashing::before, .dot-flashing::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.dot-flashing::before {
+  left: -15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dot-flashing 1s infinite alternate;
+  animation-delay: 0s;
+}
+
+.dot-flashing::after {
+  left: 15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dot-flashing 1s infinite alternate;
+  animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+  0% {
+    background-color: #9880ff;
+  }
+  50%, 100% {
+    background-color: rgba(152, 128, 255, 0.2);
+  }
+}
 </style>

src/services/TicketApi.js

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