Nouvelle interface

src/components/Messenger.vue

@@ -0,0 +1,81 @@
+<script setup>
+import TicketApi from "@/services/TicketApi.js";
+import {onMounted, ref} from 'vue';
+
+const props = defineProps({
+  idTicket: [Number,String]
+})
+
+const messages = ref([])
+
+onMounted(async () => {
+  messages.value = await TicketApi.getMessages()
+})
+
+
+</script>
+
+<template>
+   <div v-if="messages.length >0" class="container-fluid">
+
+         <div class="col-lg-12">
+           <div class="chat-app">
+             <div id="plist" class="people-list">
+
+               Menu / to do
+
+             </div>
+             <div class="chat">
+               <div class="chat-header clearfix">
+                 <div class="row">
+                   <div class="col-lg-6">
+                     <a href="javascript:void(0);" data-toggle="modal" data-target="#view_info">
+                       <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="avatar">
+                     </a>
+                     <div class="chat-about">
+                       <h6 class="m-b-0">Aiden Chavez</h6>
+                       <small>Last seen: 2 hours ago</small>
+                     </div>
+                   </div>
+                   <div class="col-lg-6 hidden-sm text-end">
+                     <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>
+               </div>
+               <div class="chat-history">
+                 <ul class="m-b-0">
+
+                   <li class="clearfix" v-for="(message, i) in messages" :key="i">
+                     <div class="message-data" :class="message.sender === 'client' ? 'text-end' : ''">
+                       <span class="message-data-time">{{message.date}}</span>
+                       <i class="fa-solid fa-circle-user ms-2 fa-2x text-primary" v-if="message.sender === 'client'"></i>
+                     </div>
+                     <div class="message" :class="message.sender === 'client' ? 'other-message float-end' : 'my-message'"> {{message.object}} </div>
+                   </li>
+                 </ul>
+               </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>
+                   <input type="text" class="form-control" placeholder="Entrer votre réponse">
+                 </div>
+               </div>
+             </div>
+           </div>
+         </div>
+
+
+
+   </div>
+    <div v-else class="text-center mt-5">
+     <i class="fa-solid fa-circle-notch fa-spin fa-fw text-primary fa-4x"></i>
+    </div>
+</template>
+
+<style scoped>
+
+</style>