jonathan/gta-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Interface SAV

Browse Source
This commit is contained in:
Jonathan Chevalier
2023-06-13 18:24:39 +02:00
parent 46f85fbd52
commit 99f565f4aa
5 changed files with 125 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/App.vue
View File

@@ -1,43 +1,108 @@
<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="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>
</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>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#my" type="button">Mes fiches</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>
</div>
<div class="tab-pane" id="pending" role="tabpanel" tabindex="0">
TO DO 2
</div>
<div class="tab-pane" id="my" role="tabpanel" tabindex="0">
TO DO 3
<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
<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 <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 <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 :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">
<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">
<ticket-list :rows="myTickets" v-if="myTickets.length >0"></ticket-list>
<div class="alert alert-success" v-else>Aucune fiche</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
#ticketsListContent{
#ticketsListContent {
padding-top: 20px;
}
</style>

25
src/components/TicketList.vue
View File

@@ -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({
@@ -19,30 +23,31 @@ const grid = new Grid({
formatter: (cell) => format(new Date(cell), 'dd/MM/yyyy HH:mm:ss')
}, {
name: 'Origine',
formatter: (cell, row) => html(`<span class=" fw-bold text-${row.cells[4].data.filter1Color}">${cell}</span>` + ((row.cells[3].data !== null) ? `<br/> ${row.cells[3].data}` : ''))
formatter: (cell, row) => html(`<span class=" fw-bold text-${row.cells[4].data.filter1Color}">${cell}</span>` + ((row.cells[3].data !== null) ? `<br/> ${row.cells[3].data}` : ''))
},
{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) => {
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>')
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'],
server: {
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]
)
},
}, 'Interlocuteur', {name: 'Client', width: '120px'}],
data: props.rows,
sort: true,
pagination: {
limit: 10,

4
src/main.js
View File

@@ -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'

17
src/services/TicketApi.js Normal file
View File

@@ -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();
}
}

3
src/style.css
View File

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