Interface SAV

src/App.vue

@@ -7,7 +7,7 @@ import TicketApi from "@/services/TicketApi.js";
 import {useGlobalStore} from "@/stores/global";
 import {storeToRefs} from "pinia";
 import Messenger from "@/components/Messenger.vue";
-import {showModal, hideModal, idTicket} from "@/setup/global.js";
+import {showModal, hideModal, idTicket, codeTicket} from "@/setup/global.js";
 
 const store = useGlobalStore()
 
@@ -81,7 +81,7 @@ onMounted(async () => {
       <h2 v-if="idTicket !== 0">Fiche n° {{idTicket}} - {{currentTicket.first_name}} {{currentTicket.last_name}}</h2>
     </template>
     <template v-slot:modal-body>
-      <Messenger :key="showModal" v-if="showModal" :id-ticket="idTicket"></Messenger>
+      <Messenger :key="showModal" v-if="showModal" :id-ticket="idTicket" :code-ticket="codeTicket"></Messenger>
     </template>
   </Modal>
 

src/components/Messenger.vue

@@ -1,15 +1,17 @@
 <script setup>
 import TicketApi from "@/services/TicketApi.js";
 import {onMounted, ref} from 'vue';
+import {codeTicket} from "@/setup/global";
 
 const props = defineProps({
-  idTicket: [Number,String]
+  idTicket: [Number,String],
+  codeTicket : [Number,String],
 })
 
 const messages = ref([])
 
 onMounted(async () => {
-  messages.value = await TicketApi.getMessages()
+  messages.value = await TicketApi.getMessages(props.codeTicket, props.idTicket)
 })
 
 
@@ -49,11 +51,18 @@ onMounted(async () => {
                  <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' : ''">
+                     <div class="message-data" :class="message.sender === 'pharma' ? '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>
+                     <div class="message" :class="message.sender === 'pharma' ? 'other-message float-end' : 'my-message'">
+
+                       <strong v-if="message.object !== null">{{message.object}}<br/></strong>
+
+                       <div v-if="message.htmlBody !== null" v-html="message.htmlBody"></div>
+                       <div v-else>{{message.body}}</div>
+
+                     </div>
                    </li>
                  </ul>
                </div>

src/components/TicketList.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {computed, nextTick, onMounted, ref, watch} from 'vue';
-import {showModal, hideModal, idTicket} from "@/setup/global.js";
+import {showModal, hideModal, idTicket, codeTicket} from "@/setup/global.js";
 import {format, formatDistance} from "date-fns";
 import {fr} from 'date-fns/locale';
 
@@ -36,7 +36,7 @@ const grid = new Grid({
       formatter: (cell, row) => {
         return h('i', {
           className: 'fas fa-eye text-primary cursor-pointer',
-          onClick: () => {showModal.value++; idTicket.value = row.cells[4].data.id} // id_last_event
+          onClick: () => {showModal.value++; idTicket.value = row.cells[4].data.id; codeTicket.value = row.cells[4].data.code} // id_last_event
         }, '');
 
       },

src/services/TicketApi.js

@@ -15,8 +15,10 @@ export default {
         return response.json();
     },
 
-    async getMessages() {
-        const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=getMessages'
+    async getMessages(code, id) {
+        // code =2641056
+        // id = 66088
+        const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=getMessages&code_business='+code + '&id_business='+id
 
         if (import.meta.env.DEV) {
             console.log(apiUrl)

src/setup/global.js

@@ -3,3 +3,4 @@ import {ref} from "vue";
 export const showModal = ref(0)
 export const hideModal = ref(0)
 export const idTicket = ref(0)
+export const codeTicket = ref(0)