Interface SAV

src/App.vue

@@ -8,6 +8,7 @@ import {Tab} from 'bootstrap'
 import Messenger from "@/components/Messenger.vue";
 import TicketList from '@/components/TicketList.vue'
 import Modal from '@/components/base/Modal.vue'
+import FormReply from "@/components/FormReply.vue";
 
 const store = useGlobalStore()
 const storeTicket = useTicketStore();
@@ -40,7 +41,7 @@ const waitingPromise = () => {
 
 const mapListOfTickets = (tickets) => {
   return tickets.map(ticket =>
-      [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.state2, ticket.first_name + ' ' + ticket.last_name, ticket.is_customer]);
+      [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket, ticket.advisor, ticket.datetime, ticket.state2, ticket.first_name + ' ' + ticket.last_name, ticket.is_customer]);
 }
 
 onMounted(async () => {
@@ -60,7 +61,7 @@ onMounted(async () => {
 <template>
 
 
-  <Modal :show="showModal" :hide="hideModal" size="modal-fullscreen">
+  <Modal :show="showModal" :hide="hideModal" class="modal-xl messenger">
     <template v-slot:modal-title>
       <h2 v-if="idTicket !== 0">Fiche n° {{ idTicket }} - {{ currentTicket.first_name }}
         {{ currentTicket.last_name }}</h2>
@@ -68,6 +69,9 @@ onMounted(async () => {
     <template v-slot:modal-body>
       <Messenger :key="showModal" v-if="showModal"></Messenger>
     </template>
+    <template v-slot:modal-footer>
+      <FormReply :key="showModal" v-if="showModal"></FormReply>
+    </template>
   </Modal>
 
   <div class="container-fluid">

src/assets/chat.scss

@@ -12,64 +12,16 @@ body{
   width: 100%;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
 }
-.chat-app .people-list {
+.standard-message-list {
-  width: 280px;
+  width: 0;
-  position: absolute;
+  position: absolute; /* Stay in place */
-  left: 0;
   top: 0;
-  padding: 20px;
+  left: 0;
-  z-index: 7
+  z-index: 7;
-}
+  max-height :100%;
-
+  overflow-y: auto;
-.chat-app .chat {
+  overflow-x: hidden; /* Disable horizontal scroll */
-  margin-left: 280px;
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
-  border-left: 1px solid #eaeaea
-}
-
-.people-list {
-  -moz-transition: .5s;
-  -o-transition: .5s;
-  -webkit-transition: .5s;
-  transition: .5s
-}
-
-.people-list .chat-list li {
-  padding: 10px 15px;
-  list-style: none;
-  border-radius: 3px
-}
-
-.people-list .chat-list li:hover {
-  background: #efefef;
-  cursor: pointer
-}
-
-.people-list .chat-list li.active {
-  background: #efefef
-}
-
-.people-list .chat-list li .name {
-  font-size: 15px
-}
-
-.people-list .chat-list img {
-  width: 45px;
-  border-radius: 50%
-}
-
-.people-list img {
-  float: left;
-  border-radius: 50%
-}
-
-.people-list .about {
-  float: left;
-  padding-left: 8px
-}
-
-.people-list .status {
-  color: #999;
-  font-size: 13px
 }
 
 .chat .chat-header {
@@ -77,11 +29,6 @@ body{
   border-bottom: 2px solid #f4f7f6
 }
 
-.chat .chat-header img {
-  float: left;
-  border-radius: 40px;
-  width: 40px
-}
 
 .chat .chat-header .chat-about {
   float: left;

src/components/FormReply.vue

@@ -0,0 +1,109 @@
+<script setup>
+import TicketApi from "@/services/TicketApi.js";
+import {onMounted, ref, nextTick} from 'vue';
+
+import {suspens, messages, moveToBottom} from "@/setup/global";
+
+import {useTicketStore} from "@/stores/ticket";
+
+const storeTicket = useTicketStore();
+
+const sendBtn = ref()
+const sidePanel = ref()
+const standardMessage = ref([])
+
+const replyOption = ref({private_message: null, notification: 'Réponse envoyée'})
+const quill = ref(null)
+
+const sendReply = async () => {
+
+  if (quill.value === null || quill.value === '') {
+    alert('NOK')
+    return;
+  }
+
+  sendBtn.value.disabled = true
+  suspens.value = true
+
+  await moveToBottom("body-modal-to-scroll")
+
+  const newMessage = await TicketApi.saveMessage(storeTicket.idTicket, quill.value, replyOption.value)
+
+  if (newMessage.result === 'OK') {
+
+    const newList = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
+
+    setTimeout(async function () {
+      setQuillContent('<p></p>')
+      suspens.value = false
+      sendBtn.value.disabled = false
+      messages.value = newList
+
+      await moveToBottom("body-modal-to-scroll")
+
+    }, 1000);
+  }
+
+}
+
+onMounted(async () => {
+  standardMessage.value = await TicketApi.getStandardMessageList(storeTicket.idTicket)
+})
+
+const openPanel = () => {
+  sidePanel.value.style.width = '400px'
+}
+
+const closePanel = () => {
+  sidePanel.value.style.width = '0'
+}
+
+const setQuillContent = (val) => {
+  quill.value = val
+}
+
+</script>
+
+
+<template>
+  <div class="chat-message clearfix">
+
+    <div id="sidePanel" ref="sidePanel" class="standard-message-list bg-white" v-if="standardMessage.length >0">
+
+      <div class="d-flex flex-column align-items-stretch flex-shrink-0">
+        <a href="#" @click="closePanel()" class="p-3 link-dark text-decoration-none border-bottom">
+          <span class="fs-5 fw-semibold">Messages Type</span>
+          <Icon icon="carbon:close-filled" class="text-danger float-end"/>
+        </a>
+        <div class="list-group list-group-flush border-bottom">
+          <a href="#" @click="setQuillContent(message.RUD_data_desc); closePanel()"
+             class="list-group-item list-group-item-action py-3 list-group-item list-group-item-action list-group-item-light"
+             v-for="(message, i) in standardMessage" :key="'std-message-' + i">
+            <div class="d-flex w-100 align-items-center justify-content-between">
+              <strong class="mb-1">{{ message.RUD_data_label }}</strong>
+            </div>
+            <div class="col-10 mb-1 small">{{ message.RUD_data_desc }}</div>
+          </a>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="my-2">
+      <a href="#" @click="openPanel()" 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>
+</template>
+
+<style scoped>
+
+</style>

src/components/Messenger.vue

@@ -1,69 +1,42 @@
 <script setup>
 import TicketApi from "@/services/TicketApi.js";
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, nextTick} from 'vue';
+import {storeToRefs} from "pinia";
 import {format, formatDistance} from "date-fns";
 import {fr} from 'date-fns/locale';
 
+import {suspens, messages, moveToBottom} from "@/setup/global";
+
 import {useTicketStore} from "@/stores/ticket";
 
 const storeTicket = useTicketStore();
 
-const messages = ref([])
+const {
+  currentTicket,
+} = storeToRefs(storeTicket)
+
 
-const sendBtn = ref();
 
 onMounted(async () => {
   messages.value = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
+  await moveToBottom("body-modal-to-scroll")
 })
 
-const suspens = ref(false)
-const replyOption = ref({private_message: null, notification: 'Réponse envoyée'})
-const quill = ref()
-
-const sendReply = async () => {
-
-  if (quill.value === null || quill.value === '') {
-    alert('NOK')
-    return;
-  }
-
-  sendBtn.value.disabled = true
-  suspens.value = true
-  await TicketApi.saveMessage(storeTicket.idTicket, quill.value, replyOption.value)
-  const newList = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
-
-  setTimeout(function () {
-    quill.value = null
-    suspens.value = false
-    sendBtn.value.disabled = false
-    messages.value = newList
-  }, 1000);
-
-
-}
 
 </script>
 
 <template>
+
   <div v-if="messages.length >0" class="container-fluid">
 
     <div class="col-lg-12">
-      <div class="chat-app">
+      <div class="chat-app" id="test">
-        <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>
+                  <span><Icon icon="mdi:email" class="text-primary"/> {{currentTicket.email}}</span>
-                  <small>Last seen: 2 hours ago</small>
                 </div>
               </div>
             </div>
@@ -116,19 +89,6 @@ const sendReply = async () => {
             </ul>
           </div>
 
-          <div class="chat-message clearfix">
-
-            <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>
       </div>
     </div>

src/components/TicketList.vue

@@ -36,7 +36,6 @@ const grid = new Grid({
     {name: 'Origine 2', hidden: true},
     {
       name: 'Voir',
-
       formatter: (cell, row) => {
         return h('i', {
           className: 'fas fa-eye text-primary cursor-pointer',
@@ -46,6 +45,13 @@ const grid = new Grid({
       },
       width: '100px'
     },
+    {
+      name: 'Voir (old)',
+      formatter: (cell, row) => {
+        return html('<a href="#" style="text-decoration: none" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\'});window.location=\'#\';Affaire(\'11\',\'0\',\'' + row.cells[4].data.id_last_event + '\',\'' + row.cells[4].data.id + '\',\'4\',\'see\')"<i class="fa-solid fa-eye"></i></a>')
+     },
+      width: '100px'
+    },
     {
       name: 'Attribuer à',
       formatter: (cell, row) => {
@@ -76,6 +82,7 @@ const grid = new Grid({
     }],
   data: props.rows,
   sort: true,
+  //search: true,
   pagination: {
     limit: 15,
     summary: false
@@ -105,6 +112,7 @@ const grid = new Grid({
 
 });
 
+
 const initTooltip = () => {
   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
 
@@ -116,6 +124,8 @@ const initTooltip = () => {
 
 onMounted(() => {
   grid.render(gridWrapper.value)
+
+  //grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));
 })
 
 
@@ -134,5 +144,6 @@ watch(gridWrapper, (to, from) => {
   <div ref="gridWrapper"></div>
 </template>
 
-<style scoped>
+<style>
+
 </style>

src/components/base/Modal.vue

@@ -54,12 +54,11 @@ watch(hide, async (to, from) => {
           <slot name="modal-title"></slot>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
-        <div class="modal-body">
+        <div class="modal-body" id="body-modal-to-scroll">
           <slot name="modal-body"></slot>
         </div>
-        <div class="modal-footer" v-if="needFooter">
+        <div class="modal-footer d-block">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+          <slot name="modal-footer"></slot>
-          <button type="button" class="btn btn-primary">OK</button>
         </div>
       </div>
     </div>

src/services/TicketApi.js

@@ -15,9 +15,22 @@ export default {
         return response.json();
     },
 
+    async getStandardMessageList(id) {
+        const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=getStandardMessageList&id_business=' + id
+
+        if (import.meta.env.DEV) {
+            console.log(apiUrl)
+        }
+
+        const response = await fetch(apiUrl)
+
+        if (import.meta.env.DEV) {
+            console.log(response.clone().text())
+        }
+
+        return response.json();
+    },
     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) {
@@ -34,7 +47,7 @@ export default {
     },
     async saveMessage(id, quill, replyOption) {
         const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=saveMessage'
-         if (import.meta.env.DEV) {
+        if (import.meta.env.DEV) {
             console.log(apiUrl)
         }
 

src/setup/global.js

@@ -1,4 +1,13 @@
-import {ref} from "vue";
+import {nextTick, ref} from "vue";
 
 export const showModal = ref(0)
 export const hideModal = ref(0)
+
+export const suspens = ref(false)
+export const messages = ref([])
+
+export const moveToBottom = async (id) => {
+    await nextTick()
+    const objDiv = document.getElementById(id);
+    objDiv.scrollTop = objDiv.scrollHeight;
+}

src/style.css

@@ -1,51 +1,51 @@
 #app {
-  color: rgba(255, 255, 255, 0.87);
+    color: rgba(255, 255, 255, 0.87);
-  margin: 0 auto;
+    margin: 0 auto;
-  padding: 1rem;
+    padding: 1rem;
-  font-size: 1rem;
+    font-size: 1rem;
-  font-family: "Open Sans", sans-serif;
+    font-family: "Open Sans", sans-serif;
-  color: #444444;
+    color: #444444;
 }
 
-#app .gridjs-wrapper{
+#app .gridjs-wrapper {
-  font-size: 0.9rem;
+    font-size: 0.9rem;
 }
 
-.cursor-pointer{
+.cursor-pointer {
-  cursor:pointer
+    cursor: pointer
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease;
+    transition: opacity 0.3s ease;
 }
 
 .fade-enter-from,
 .fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }
 
 .gridjs-head {
-  padding: 10px 0 5px 0 !important;
+    padding: 10px 0 5px 0 !important;
 }
 
 .gridjs-wrapper .green {
-  color: green;
+    color: green;
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .gridjs-wrapper .red {
-  color: red;
+    color: red;
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .gridjs-wrapper .orange {
-  color: orange;
+    color: orange;
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .gridjs-wrapper .black {
-  color: black;
+    color: black;
 }
 
 /*.gridjs-footer,*/
@@ -54,8 +54,8 @@
 /*}*/
 
 .gridjs-wrapper {
-  font-size: 0.95rem !important;
+    font-size: 0.95rem !important;
-  border-top: 1px solid #e5e7eb !important;
+    border-top: 1px solid #e5e7eb !important;
 }
 
 /*.gridjs-wrapper table td:last-child button{*/
@@ -69,21 +69,30 @@
 /*}*/
 
 tr.gridjs-tr:nth-child(odd) td {
-  background-color: #eeeded !important;
+    background-color: #eeeded !important;
 }
 
 th.gridjs-th {
-  white-space: normal !important;
+    white-space: normal !important;
-  color: #000000 !important;
+    color: #000000 !important;
 }
 
 .gridjs-th-sort button {
-  border-width: 0;
+    border-width: 0;
-  color: white;
+    color: white;
-  background-color: transparent !important;
+    background-color: transparent !important;
 }
 
 
-.gridjs-wrapper tr:hover td{
+.gridjs-wrapper tr:hover td {
-  background-color: lightblue !important;
+    background-color: lightblue !important;
+}
+
+.messenger .modal-body {
+    max-height: calc(100vh - 400px);
+    overflow-y: auto;
+}
+
+.messenger .modal-footer {
+    display: block;
 }