Interface SAV

src/App.vue

@@ -6,61 +6,36 @@ import TicketApi from "@/services/TicketApi.js";
 
 const filter = ref('ALL');
 
-const apiUrl = computed(() => {
-  return '/App/api.php?prj=pharmamp' + ((filter.value !== 'ALL') ? '&filter=' + filter.value : '')
-})
-
 const tickets = ref({});
 
 const newTickets = computed(() => {
-  return tickets.value.hasOwnProperty('new_tickets') ? mapListOfTickets(tickets.value.new_tickets.list) : []
+  return tickets.value.hasOwnProperty('new_tickets') ? mapListOfTickets(tickets.value.new_tickets.list, filter.value) : []
 })
 
 const pendingTickets = computed(() => {
-  return tickets.value.hasOwnProperty('pending_tickets') ? mapListOfTickets(tickets.value.pending_tickets.list) : []
+  return tickets.value.hasOwnProperty('pending_tickets') ? mapListOfTickets(tickets.value.pending_tickets.list, filter.value) : []
 })
 
 const myTickets = computed(() => {
-  return tickets.value.hasOwnProperty('my_tickets') ? mapListOfTickets(tickets.value.my_tickets.list) : []
+  return tickets.value.hasOwnProperty('my_tickets') ? mapListOfTickets(tickets.value.my_tickets.list, filter.value) : []
 })
 
-const mapListOfTickets = (tickets) => {
+const mapListOfTickets = (tickets, originFilter) => {
-  return tickets.map(ticket =>
+  return tickets.filter(ticket => ((originFilter !== 'ALL') ? ticket.origin === originFilter : true)).map(ticket =>
-      [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.first_name + ' ' + ticket.last_name, ticket.is_customer]);
+      [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.state2, ticket.first_name + ' ' + ticket.last_name, ticket.is_customer]);
 }
 
-const getTickets = async () => {
-
-  if (import.meta.env.DEV) {
-    console.log(apiUrl.value)
-  }
-
-  const response = await fetch(apiUrl.value)
-
-  if (import.meta.env.DEV) {
-    console.log(response.clone().text())
-  }
-
-  return response.json();
-}
 
 onMounted(async () => {
 
-  tickets.value = await getTickets()
+  tickets.value = await TicketApi.getTickets()
 
   const myInterval = setInterval(async function () {
-    tickets.value = await getTickets()
+    tickets.value = await TicketApi.getTickets()
-  }.bind(apiUrl), 180000);
+  }, 180000);
 
 })
 
-watch(filter, async (to, from) => {
-  if (to !== from) {
-    tickets.value = await getTickets()
-  }
-});
-
-
 </script>
 
 <template>
@@ -68,7 +43,6 @@ watch(filter, async (to, from) => {
     <div class="pagetitle">
       <h1>Messagerie & Ordonnances</h1>
     </div>
-
     <div class="card">
       <div class="card-body">
 
@@ -100,9 +74,12 @@ watch(filter, async (to, from) => {
                 class="fa-solid fa-box-archive"></i> Archiver les fiches en cours ?
             </a>
           </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/interface/ase_home.php?prj=pharmamp&config=TA&lang=fr_FR"><i class="fa-solid fa-shuffle"></i> Retourner sur la version de production
+            </a>
+          </li>
+
         </ul>
-
-
       </div>
     </div>
     <div class="card">
@@ -122,7 +99,6 @@ watch(filter, async (to, from) => {
           </li>
         </ul>
         <div class="tab-content" id="ticketsListContent">
-          <div class="tab-pane show active" id="new" role="tabpanel" tabindex="0">
 
           <div class="mb-3 row">
             <label for="origineFilter" class="col-auto col-form-label fw-bold"><i class="fa-solid fa-filter"></i>
@@ -131,22 +107,22 @@ watch(filter, async (to, from) => {
               <select class="form-select" id="origineFilter" v-model="filter">
                 <option value="ALL">Toute</option>
                 <option value="ORDER">Commande</option>
-                  <option value="">Fiche contact</option>
+                <option value="CONTACT">Fiche contact</option>
                 <option value="I_AM_HERE">Je suis là...</option>
                 <option value="ORDONNANCE">Ordonnance</option>
               </select>
             </div>
           </div>
-
+          <div class="tab-pane show active" id="new" role="tabpanel" tabindex="0">
-            <ticket-list :rows="newTickets" v-if="newTickets.length >0"></ticket-list>
+            <ticket-list :rows="newTickets" v-if="newTickets.length >0" :key="'new_'+filter"></ticket-list>
             <div class="alert alert-success" v-else>Aucune fiche</div>
           </div>
           <div class="tab-pane" id="pending" role="tabpanel" tabindex="0">
-            <ticket-list :rows="pendingTickets" v-if="pendingTickets.length >0"></ticket-list>
+            <ticket-list :rows="pendingTickets" v-if="pendingTickets.length >0" :key="'pending_'+filter"></ticket-list>
             <div class="alert alert-success" v-else>Aucune fiche</div>
           </div>
           <div class="tab-pane" id="my" role="tabpanel" tabindex="0">
-            <ticket-list :rows="myTickets" v-if="myTickets.length >0"></ticket-list>
+            <ticket-list :rows="myTickets" v-if="myTickets.length >0" :key="'my_'+filter"></ticket-list>
             <div class="alert alert-success" v-else>Aucune fiche</div>
           </div>
         </div>

src/assets/style-retro-comp.css

@@ -1,6 +1,10 @@
 /* $Id: style.css 12141 2019-02-26 15:47:14Z ghislain $ */
 /* - Mise en forme des onglets - */
 
+body{
+    background: #f6f9ff !important;
+}
+
 h1.prospection{
     display: none !important;
 }

src/assets/style.scss

@@ -6,6 +6,7 @@
 @import "bootstrap/scss/functions";
 
 $font-size-root : '16px';
+$body-bg: #f6f9ff;
 
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/maps";
@@ -41,7 +42,6 @@ $font-size-root : '16px';
   @import "bootstrap/scss/close";
   @import "bootstrap/scss/toasts";
   @import "bootstrap/scss/modal";
-  @import "bootstrap/scss/tooltip";
   @import "bootstrap/scss/popover";
   @import "bootstrap/scss/carousel";
   @import "bootstrap/scss/spinners";
@@ -49,7 +49,7 @@ $font-size-root : '16px';
   @import "bootstrap/scss/placeholders";
 }
 
-
+@import "bootstrap/scss/tooltip";
 // Helpers
 @import "bootstrap/scss/helpers";
 

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/TicketList.vue

@@ -1,10 +1,10 @@
 <script setup>
-import {onMounted, ref} from 'vue';
+import {nextTick, onMounted, ref, watch} from 'vue';
-import TicketApi from "@/servives/TicketApi.js";
 import {format, formatDistance} from "date-fns";
 import {fr} from 'date-fns/locale';
 
 import {Grid, html} from "gridjs";
+import {Tooltip} from 'bootstrap'
 
 const props = defineProps({
   rows: Array,
@@ -46,11 +46,16 @@ const grid = new Grid({
     {
       name: 'Depuis',
       formatter: (cell) => formatDistance(new Date(cell), new Date(), {addSuffix: true, locale: fr})
+    }, {
+      name: 'Derniers messages',
+      formatter: (cell, row) => {
+        return html('<span data-bs-toggle="tooltip" data-bs-html="true" title="<strong>'+row.cells[4].data.txt1+'</strong>'+ ( (row.cells[4].data.txt2 !== null) ? '<hr/>'+row.cells[4].data.txt2 : '')+'">' + cell + '</span>')
+      }
     }, 'Interlocuteur', {name: 'Client', width: '120px'}],
   data: props.rows,
   sort: true,
   pagination: {
-    limit: 10,
+    limit: 100,
     summary: false
   },
   language: {
@@ -78,10 +83,21 @@ const grid = new Grid({
 
 });
 
+
 onMounted(() => {
   grid.render(gridWrapper.value)
+
+  setTimeout(function () {
+    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new Tooltip(tooltipTriggerEl)
+    })
+  }, 1000);
+
 })
 
+
+
 </script>
 
 <template>

src/style.css

@@ -1,7 +1,3 @@
-body{
-  background: #f6f9ff;
-}
-
 #app {
   color: rgba(255, 255, 255, 0.87);
   margin: 0 auto;