Interface SAV

src/App.vue

@@ -1,33 +1,98 @@
 <script setup>
 import TicketList from '@/components/TicketList.vue'
-import {onMounted, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {Tab} from 'bootstrap'
+import TicketApi from "@/services/TicketApi.js";
+
+const tickets = ref({});
+
+const newTickets = computed(() => {
+  return tickets.value.hasOwnProperty('new_tickets') ? mapListOfTickets(tickets.value.new_tickets.list) : []
+})
+
+const pendingTickets = computed(() => {
+  return tickets.value.hasOwnProperty('pending_tickets') ? mapListOfTickets(tickets.value.pending_tickets.list) : []
+})
+
+const myTickets = computed(() => {
+  return tickets.value.hasOwnProperty('my_tickets') ? mapListOfTickets(tickets.value.my_tickets.list) : []
+})
+
+const mapListOfTickets = (tickets) => {
+  return tickets.map(ticket =>
+      [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.first_name + ' ' + ticket.last_name, ticket.is_customer]);
+}
+
+onMounted(async () => {
+
+  tickets.value = await TicketApi.getTickets()
+
+  const myInterval = setInterval(async function () {
+    tickets.value = await TicketApi.getTickets()
+  }, 180000);
+
+})
+
+
 </script>
 
 <template>
   <div class="container-fluid">
+    <div class="pagetitle">
+      <h1>Messagerie & Ordonnances</h1>
+    </div>
+
+    <div class="card">
+      <div class="card-body">
+
+    <ul class="nav">
+      <li class="nav-item">
+        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-plus-circle"></i> Ajouter une fiche</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#"><i class="fa-solid fa-magnifying-glass"></i> Recherche de fiches</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#"> <i class="fa-solid fa-file-medical"></i> Livraisons ordonnances</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link"><i class="fa-solid fa-bell-concierge"></i> Accueil Comptoir</a>
+      </li>
+    </ul>
+        Archiver les fiches en cours ? <br/>
+        Filtrer les fiches par origine : Toute
+
+      </div>
+    </div>
     <div class="card">
       <div class="card-body">
         <ul class="nav nav-tabs nav-tabs-bordered" id="ticketsList" role="tablist" ref="tab">
           <li class="nav-item" role="presentation">
-          <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#new" type="button">Nouvelles Fiches</button>
+            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#new" type="button">Nouvelles Fiches
+              <span class="badge text-bg-secondary">{{ newTickets.length }}</span></button>
           </li>
           <li class="nav-item" role="presentation">
-          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pending" type="button">Fiches en cours</button>
+            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pending" type="button">Fiches en cours <span
+                class="badge text-bg-secondary">{{ pendingTickets.length }}</span></button>
           </li>
           <li class="nav-item" role="presentation">
-          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#my" type="button">Mes fiches</button>
+            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#my" type="button">Mes fiches <span
+                class="badge text-bg-secondary">{{ myTickets.length }}</span></button>
           </li>
         </ul>
         <div class="tab-content" id="ticketsListContent">
           <div class="tab-pane show active" id="new" role="tabpanel" tabindex="0">
-          <ticket-list></ticket-list>
+
+            <ticket-list :rows="newTickets" v-if="newTickets.length >0"></ticket-list>
+            <div class="alert alert-success" v-else>Aucune fiche</div>
           </div>
           <div class="tab-pane" id="pending" role="tabpanel" tabindex="0">
-         TO DO 2
+            <ticket-list :rows="pendingTickets" v-if="pendingTickets.length >0"></ticket-list>
+            <div class="alert alert-success" v-else>Aucune fiche</div>
           </div>
           <div class="tab-pane" id="my" role="tabpanel" tabindex="0">
-          TO DO 3
+            <ticket-list :rows="myTickets" v-if="myTickets.length >0"></ticket-list>
+            <div class="alert alert-success" v-else>Aucune fiche</div>
           </div>
         </div>
       </div>

src/components/TicketList.vue

@@ -6,6 +6,10 @@ import {fr} from 'date-fns/locale';
 
 import {Grid, html} from "gridjs";
 
+const props = defineProps({
+  rows: Array,
+})
+
 const gridWrapper = ref(null)
 
 const grid = new Grid({
@@ -25,24 +29,25 @@ 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) => 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>'),
+      width: '100px'
     },
     {
       name: 'Attribuer à',
       formatter: (cell, row) => {
+
+        if (cell !== '0') {
+          return row.cells[4].data.advisor_name
+        } else {
           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-hand-point-down"></i></a>')
         }
+      }
     },
     {
       name: 'Depuis',
       formatter: (cell) => formatDistance(new Date(cell), new Date(), {addSuffix: true, locale: fr})
-    }, 'Interlocuteur'],
+    }, 'Interlocuteur', {name: 'Client', width: '120px'}],
-  server: {
+  data: props.rows,
-    url: '/App/api.php?prj=pharmamp',
-    then: data => data.list.map(ticket =>
-        [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.first_name + ' ' + ticket.last_name]
-    )
-  },
   sort: true,
   pagination: {
     limit: 10,

src/main.js

@@ -2,10 +2,8 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 
-
-import './style.css'
 import './assets/style.scss'
-
+import './style.css'
 
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 import '@fortawesome/fontawesome-free/css/solid.css'

src/services/TicketApi.js

@@ -0,0 +1,17 @@
+export default {
+    async getTickets() {
+        const apiUrl = '/App/api.php?prj=pharmamp'
+
+        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/style.css

@@ -5,8 +5,7 @@ body{
 #app {
   color: rgba(255, 255, 255, 0.87);
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
-  text-align: center;
   font-size: 1rem;
   font-family: "Open Sans", sans-serif;
   color: #444444;