Nouvelle interface

src/App.vue

@@ -1,10 +1,13 @@
 <script setup>
 import TicketList from '@/components/TicketList.vue'
+import Modal from "@/components/base/Modal.vue";
 import {computed, nextTick, onMounted, ref, watch} from 'vue';
 import {Tab} from 'bootstrap'
 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";
 
 const store = useGlobalStore()
 
@@ -44,6 +47,20 @@ const mapListOfTickets = (tickets, originFilter) => {
 }
 
 
+const currentTicket =  computed(()=>{
+
+  const vracTickets = [
+    ...tickets.value.my_tickets.list,
+    ...tickets.value.pending_tickets.list,
+    ...tickets.value.new_tickets.list
+  ]
+
+  const currentTickets = vracTickets.filter(t=>t.id === idTicket.value)
+
+  return (currentTickets.length === 1) ? currentTickets[0] : []
+
+})
+
 onMounted(async () => {
   tickets.value = await TicketApi.getTickets()
   apiCounter.value++
@@ -58,6 +75,16 @@ onMounted(async () => {
 
 <template>
 
+
+  <Modal :show="showModal" :hide="hideModal" size="modal-fullscreen">
+    <template v-slot:modal-title>
+      <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>
+    </template>
+  </Modal>
+
   <div class="container-fluid">
     <div id="notification" class="alert d-none" style="position: absolute; top:5px; right:28px;z-index:1"></div>
     <div class="pagetitle">
@@ -69,7 +96,7 @@ onMounted(async () => {
         <ul class="nav">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#"
-               onclick="alert('Non disponible dans cette version beta')"><i class="fas fa-plus-circle"></i> Ajouter une
+               @click="showModal++"><i class="fas fa-plus-circle"></i> Ajouter une
               fiche</a>
           </li>
           <li class="nav-item">
@@ -124,7 +151,7 @@ onMounted(async () => {
 
           <div class="mb-3 row">
             <label for="origineFilter" class="col-auto col-form-label fw-bold"><i class="fa-solid fa-filter"></i>
-              Filter par origine</label>
+              Filtrer par origine</label>
             <div class="col-auto">
               <select class="form-select" id="origineFilter" v-model="filter">
                 <option value="ALL">Toute</option>
@@ -132,6 +159,7 @@ onMounted(async () => {
                 <option value="CONTACT">Fiche contact</option>
                 <option value="I_AM_HERE">Je suis là...</option>
                 <option value="ORDONNANCE">Ordonnance</option>
+                <option value="ADVICE">Conseil Pharmacien</option>
               </select>
             </div>
           </div>

src/assets/chat.scss

@@ -0,0 +1,261 @@
+body{
+  background-color: #f4f7f6;
+  margin-top:20px;
+}
+.card {
+  background: #fff;
+  transition: .5s;
+  border: 0;
+  margin-bottom: 30px;
+  border-radius: .55rem;
+  position: relative;
+  width: 100%;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+}
+.chat-app .people-list {
+  width: 280px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 20px;
+  z-index: 7
+}
+
+.chat-app .chat {
+  margin-left: 280px;
+  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 {
+  padding: 15px 20px;
+  border-bottom: 2px solid #f4f7f6
+}
+
+.chat .chat-header img {
+  float: left;
+  border-radius: 40px;
+  width: 40px
+}
+
+.chat .chat-header .chat-about {
+  float: left;
+  padding-left: 10px
+}
+
+.chat .chat-history {
+  padding: 20px;
+  border-bottom: 2px solid #fff
+}
+
+.chat .chat-history ul {
+  padding: 0
+}
+
+.chat .chat-history ul li {
+  list-style: none;
+  margin-bottom: 30px
+}
+
+.chat .chat-history ul li:last-child {
+  margin-bottom: 0px
+}
+
+.chat .chat-history .message-data {
+  margin-bottom: 15px
+}
+
+.chat .chat-history .message-data img {
+  border-radius: 40px;
+  width: 40px
+}
+
+.chat .chat-history .message-data-time {
+  color: #434651;
+  padding-left: 6px
+}
+
+.chat .chat-history .message {
+  color: #444;
+  padding: 18px 20px;
+  line-height: 26px;
+  font-size: 16px;
+  border-radius: 7px;
+  display: inline-block;
+  position: relative;
+
+}
+
+.chat .chat-history .message:after {
+  bottom: 100%;
+  right: 0px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-bottom-color: #fff;
+  border-width: 10px;
+  margin-left: -10px
+}
+
+.chat .chat-history .my-message {
+  background: #efefef
+}
+
+.chat .chat-history .my-message:after {
+  bottom: 100%;
+  left: 30px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-bottom-color: #efefef;
+  border-width: 10px;
+  margin-left: -10px
+}
+
+.chat .chat-history .other-message {
+  background: #e8f1f3;
+  text-align: right
+}
+
+.chat .chat-history .other-message:after {
+  border-bottom-color: #e8f1f3;
+  right: 15px
+}
+
+.chat .chat-message {
+  padding: 20px
+}
+
+.online,
+.offline,
+.me {
+  margin-right: 2px;
+  font-size: 8px;
+  vertical-align: middle
+}
+
+.message-data i {
+  vertical-align: middle
+}
+
+.online {
+  color: #86c541
+}
+
+.offline {
+  color: #e47297
+}
+
+.me {
+  color: #1d8ecd
+}
+
+.float-right {
+  float: right
+}
+
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0
+}
+
+@media only screen and (max-width: 767px) {
+  .chat-app .people-list {
+    height: 465px;
+    width: 100%;
+    overflow-x: auto;
+    background: #fff;
+    left: -400px;
+    display: none
+  }
+  .chat-app .people-list.open {
+    left: 0
+  }
+  .chat-app .chat {
+    margin: 0
+  }
+  .chat-app .chat .chat-header {
+    border-radius: 0.55rem 0.55rem 0 0
+  }
+  .chat-app .chat-history {
+    height: 300px;
+    overflow-x: auto
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+  .chat-app .chat-list {
+    height: 650px;
+    overflow-x: auto
+  }
+  .chat-app .chat-history {
+    height: 600px;
+    overflow-x: auto
+  }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
+  .chat-app .chat-list {
+    height: 480px;
+    overflow-x: auto
+  }
+  .chat-app .chat-history {
+    height: calc(100vh - 350px);
+    overflow-x: auto
+  }
+}

src/assets/style-retro-comp.scss

@@ -1,12 +1,5 @@
-/* $Id: style.css 12141 2019-02-26 15:47:14Z ghislain $ */
-/* - Mise en forme des onglets - */
-
-/*!
- * Bootstrap v3.3.6 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
 
+#RealContent11{
     // Core variables and mixins
     @import "bs3/stylesheets/bootstrap/variables";
     @import "bs3/stylesheets/bootstrap/mixins";
@@ -51,7 +44,6 @@
     @import "bs3/stylesheets/bootstrap/utilities";
     @import "bs3/stylesheets/bootstrap/responsive-utilities";
 
-#RealContent11{
     @import "bs3/stylesheets/bootstrap/buttons";
     @import "bs3/stylesheets/bootstrap/navs";
     @import "bs3/bootstrap-theme.min";

src/assets/style.scss

@@ -47,7 +47,6 @@ $min-contrast-ratio: 3;
   @import "bootstrap/scss/list-group";
   @import "bootstrap/scss/close";
   @import "bootstrap/scss/toasts";
-  @import "bootstrap/scss/modal";
   @import "bootstrap/scss/popover";
   @import "bootstrap/scss/carousel";
   @import "bootstrap/scss/spinners";
@@ -55,6 +54,7 @@ $min-contrast-ratio: 3;
   @import "bootstrap/scss/placeholders";
 }
 
+@import "bootstrap/scss/modal";
 @import "bootstrap/scss/tooltip";
 
 .custom-tooltip {
@@ -74,4 +74,5 @@ $min-contrast-ratio: 3;
 
 #app {
   @import "niceAdmin.scss";
+  @import "chat.scss";
 }

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>

src/components/TicketList.vue

@@ -1,9 +1,10 @@
 <script setup>
 import {computed, nextTick, onMounted, ref, watch} from 'vue';
+import {showModal, hideModal, idTicket} from "@/setup/global.js";
 import {format, formatDistance} from "date-fns";
 import {fr} from 'date-fns/locale';
 
-import {Grid, html} from "gridjs";
+import {Grid, html, h} from "gridjs";
 import {Tooltip} from 'bootstrap'
 
 const props = defineProps({
@@ -31,7 +32,14 @@ const grid = new Grid({
     {name: 'Origine 2', hidden: true},
     {
       name: 'Voir',
-      formatter: (cell, row) => html('<a href="#" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\' });window.location=\'#\';Affaire(\'11\',\'0\',\'' + cell.id_last_event + '\',\'' + cell.id + '\',\'4\',\'see\')"><i class="fa-solid fa-eye"></i></a>'),
+
+      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
+        }, '');
+
+      },
       width: '100px'
     },
     {
@@ -123,5 +131,4 @@ watch(gridWrapper, (to, from) => {
 </template>
 
 <style scoped>
-
 </style>

src/components/base/Modal.vue

@@ -0,0 +1,71 @@
+<script setup>
+import {Modal} from 'bootstrap'
+import {onMounted, ref, watch, useSlots, useAttrs, computed} from 'vue';
+
+//const emit = defineEmits(['open', 'close'])
+// const slots = useSlots()
+// const attrs = useAttrs()
+
+const props = defineProps({
+  show: Number,
+  hide: Number,
+  size: String,
+  needFooter: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const refModal = ref(null)
+
+const show = computed(() => {
+  return props.show
+})
+
+const hide = computed(() => {
+  return props.hide
+})
+
+let BsModal = null
+
+onMounted(() => {
+  BsModal = new Modal(refModal.value)
+})
+
+watch(show, async (to, from) => {
+  if (to > from) {
+    BsModal.show()
+  }
+})
+
+watch(hide, async (to, from) => {
+  if (to > from) {
+    BsModal.hide()
+  }
+})
+
+</script>
+
+<template>
+  <div class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" ref="refModal">
+    <div class="modal-dialog" :class="size">
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="modal-title"></slot>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <slot name="modal-body"></slot>
+        </div>
+        <div class="modal-footer" v-if="needFooter">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+          <button type="button" class="btn btn-primary">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/services/TicketApi.js

@@ -12,6 +12,22 @@ export default {
             console.log(response.clone().text())
         }
 
+        return response.json();
+    },
+
+    async getMessages() {
+        const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=getMessages'
+
+        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();
     }
 }

src/setup/global.js

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

src/style.css

@@ -11,6 +11,10 @@
   font-size: 0.9rem;
 }
 
+.cursor-pointer{
+  cursor:pointer
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.3s ease;