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-16 17:53:50 +02:00
parent 7569d5962f
commit 97c2175e7b
6 changed files with 55 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/App.vue
View File

@@ -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) => {
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]);
const mapListOfTickets = (tickets, originFilter) => {
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.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()
}.bind(apiUrl), 180000);
tickets.value = await TicketApi.getTickets()
}, 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,31 +99,30 @@ 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>
Filter par origine</label>
<div class="col-auto">
<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="I_AM_HERE">Je suis là...</option>
<option value="ORDONNANCE">Ordonnance</option>
</select>
</div>
<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>
<div class="col-auto">
<select class="form-select" id="origineFilter" v-model="filter">
<option value="ALL">Toute</option>
<option value="ORDER">Commande</option>
<option value="CONTACT">Fiche contact</option>
<option value="I_AM_HERE">Je suis là...</option>
<option value="ORDONNANCE">Ordonnance</option>
</select>
</div>
<ticket-list :rows="newTickets" v-if="newTickets.length >0"></ticket-list>
</div>
<div class="tab-pane show active" id="new" role="tabpanel" tabindex="0">
<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>

4
src/assets/style-retro-comp.css
View File

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

4
src/assets/style.scss
View File

@@ -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";

40
src/components/HelloWorld.vue
View File

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

22
src/components/TicketList.vue
View File

@@ -1,10 +1,10 @@
<script setup>
import {onMounted, ref} from 'vue';
import TicketApi from "@/servives/TicketApi.js";
import {nextTick, onMounted, ref, watch} from 'vue';
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>

4
src/style.css
View File

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