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-07-06 18:39:07 +02:00
parent f3f90db859
commit 6a98b61f51
9 changed files with 218 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@@ -8,6 +8,7 @@ import {Tab} from 'bootstrap'
import Messenger from "@/components/Messenger.vue";
import TicketList from '@/components/TicketList.vue'
import Modal from '@/components/base/Modal.vue'
import FormReply from "@/components/FormReply.vue";
const store = useGlobalStore()
const storeTicket = useTicketStore();
@@ -40,7 +41,7 @@ const waitingPromise = () => {
const mapListOfTickets = (tickets) => {
return tickets.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]);
[ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket, ticket.advisor, ticket.datetime, ticket.state2, ticket.first_name + ' ' + ticket.last_name, ticket.is_customer]);
}
onMounted(async () => {
@@ -60,7 +61,7 @@ onMounted(async () => {
<template>
<Modal :show="showModal" :hide="hideModal" size="modal-fullscreen">
<Modal :show="showModal" :hide="hideModal" class="modal-xl messenger">
<template v-slot:modal-title>
<h2 v-if="idTicket !== 0">Fiche n° {{ idTicket }} - {{ currentTicket.first_name }}
{{ currentTicket.last_name }}</h2>
@@ -68,6 +69,9 @@ onMounted(async () => {
<template v-slot:modal-body>
<Messenger :key="showModal" v-if="showModal"></Messenger>
</template>
<template v-slot:modal-footer>
<FormReply :key="showModal" v-if="showModal"></FormReply>
</template>
</Modal>
<div class="container-fluid">

73
src/assets/chat.scss
View File

@@ -12,64 +12,16 @@ body{
width: 100%;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
}
.chat-app .people-list {
width: 280px;
position: absolute;
left: 0;
.standard-message-list {
width: 0;
position: absolute; /* Stay in place */
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
left: 0;
z-index: 7;
max-height :100%;
overflow-y: auto;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
.chat .chat-header {
@@ -77,11 +29,6 @@ body{
border-bottom: 2px solid #f4f7f6
}
.chat .chat-header img {
float: left;
border-radius: 40px;
width: 40px
}
.chat .chat-header .chat-about {
float: left;
@@ -258,4 +205,4 @@ body{
height: calc(100vh - 350px);
overflow-x: auto
}
}
}

109
src/components/FormReply.vue Normal file
View File

@@ -0,0 +1,109 @@
<script setup>
import TicketApi from "@/services/TicketApi.js";
import {onMounted, ref, nextTick} from 'vue';
import {suspens, messages, moveToBottom} from "@/setup/global";
import {useTicketStore} from "@/stores/ticket";
const storeTicket = useTicketStore();
const sendBtn = ref()
const sidePanel = ref()
const standardMessage = ref([])
const replyOption = ref({private_message: null, notification: 'Réponse envoyée'})
const quill = ref(null)
const sendReply = async () => {
if (quill.value === null || quill.value === '') {
alert('NOK')
return;
}
sendBtn.value.disabled = true
suspens.value = true
await moveToBottom("body-modal-to-scroll")
const newMessage = await TicketApi.saveMessage(storeTicket.idTicket, quill.value, replyOption.value)
if (newMessage.result === 'OK') {
const newList = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
setTimeout(async function () {
setQuillContent('<p></p>')
suspens.value = false
sendBtn.value.disabled = false
messages.value = newList
await moveToBottom("body-modal-to-scroll")
}, 1000);
}
}
onMounted(async () => {
standardMessage.value = await TicketApi.getStandardMessageList(storeTicket.idTicket)
})
const openPanel = () => {
sidePanel.value.style.width = '400px'
}
const closePanel = () => {
sidePanel.value.style.width = '0'
}
const setQuillContent = (val) => {
quill.value = val
}
</script>
<template>
<div class="chat-message clearfix">
<div id="sidePanel" ref="sidePanel" class="standard-message-list bg-white" v-if="standardMessage.length >0">
<div class="d-flex flex-column align-items-stretch flex-shrink-0">
<a href="#" @click="closePanel()" class="p-3 link-dark text-decoration-none border-bottom">
<span class="fs-5 fw-semibold">Messages Type</span>
<Icon icon="carbon:close-filled" class="text-danger float-end"/>
</a>
<div class="list-group list-group-flush border-bottom">
<a href="#" @click="setQuillContent(message.RUD_data_desc); closePanel()"
class="list-group-item list-group-item-action py-3 list-group-item list-group-item-action list-group-item-light"
v-for="(message, i) in standardMessage" :key="'std-message-' + i">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">{{ message.RUD_data_label }}</strong>
</div>
<div class="col-10 mb-1 small">{{ message.RUD_data_desc }}</div>
</a>
</div>
</div>
</div>
<div class="my-2">
<a href="#" @click="openPanel()" class="btn btn-outline-secondary me-2"><i
class="fa-solid fa-comment-dots"></i> Messages type</a>
<a href="javascript:void(0);" class="btn btn-outline-primary me-2"><i class="fa-solid fa-paperclip"></i></a>
</div>
<QuillEditor theme="snow" v-model:content="quill" contentType="html" placeholder="Entrer votre réponse"/>
<div class="text-end mt-4">
<button class="btn btn-primary" @click="sendReply" ref="sendBtn"><i class="fa-solid fa-paper-plane"></i> Envoyer
</button>
</div>
</div>
</template>
<style scoped>
</style>

64
src/components/Messenger.vue
View File

@@ -1,69 +1,42 @@
<script setup>
import TicketApi from "@/services/TicketApi.js";
import {onMounted, ref} from 'vue';
import {onMounted, ref, nextTick} from 'vue';
import {storeToRefs} from "pinia";
import {format, formatDistance} from "date-fns";
import {fr} from 'date-fns/locale';
import {suspens, messages, moveToBottom} from "@/setup/global";
import {useTicketStore} from "@/stores/ticket";
const storeTicket = useTicketStore();
const messages = ref([])
const {
currentTicket,
} = storeToRefs(storeTicket)
const sendBtn = ref();
onMounted(async () => {
messages.value = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
await moveToBottom("body-modal-to-scroll")
})
const suspens = ref(false)
const replyOption = ref({private_message: null, notification: 'Réponse envoyée'})
const quill = ref()
const sendReply = async () => {
if (quill.value === null || quill.value === '') {
alert('NOK')
return;
}
sendBtn.value.disabled = true
suspens.value = true
await TicketApi.saveMessage(storeTicket.idTicket, quill.value, replyOption.value)
const newList = await TicketApi.getMessages(storeTicket.currentTicket.code, storeTicket.idTicket)
setTimeout(function () {
quill.value = null
suspens.value = false
sendBtn.value.disabled = false
messages.value = newList
}, 1000);
}
</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-app" id="test">
<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>
<span><Icon icon="mdi:email" class="text-primary"/> {{currentTicket.email}}</span>
</div>
</div>
</div>
@@ -116,19 +89,6 @@ const sendReply = async () => {
</ul>
</div>
<div class="chat-message clearfix">
<div class="my-2">
<a href="javascript:void(0);" class="btn btn-outline-secondary me-2"><i class="fa-solid fa-comment-dots"></i> Messages type</a>
<a href="javascript:void(0);" class="btn btn-outline-primary me-2"><i class="fa-solid fa-paperclip"></i></a>
</div>
<QuillEditor theme="snow" v-model:content="quill" contentType="html" placeholder="Entrer votre réponse"/>
<div class="text-end mt-4">
<button class="btn btn-primary" @click="sendReply" ref="sendBtn"><i class="fa-solid fa-paper-plane"></i> Envoyer</button>
</div>
</div>
</div>
</div>
</div>

15
src/components/TicketList.vue
View File

@@ -36,7 +36,6 @@ const grid = new Grid({
{name: 'Origine 2', hidden: true},
{
name: 'Voir',
formatter: (cell, row) => {
return h('i', {
className: 'fas fa-eye text-primary cursor-pointer',
@@ -46,6 +45,13 @@ const grid = new Grid({
},
width: '100px'
},
{
name: 'Voir (old)',
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-eye"></i></a>')
},
width: '100px'
},
{
name: 'Attribuer à',
formatter: (cell, row) => {
@@ -76,6 +82,7 @@ const grid = new Grid({
}],
data: props.rows,
sort: true,
//search: true,
pagination: {
limit: 15,
summary: false
@@ -105,6 +112,7 @@ const grid = new Grid({
});
const initTooltip = () => {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
@@ -116,6 +124,8 @@ const initTooltip = () => {
onMounted(() => {
grid.render(gridWrapper.value)
//grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));
})
@@ -134,5 +144,6 @@ watch(gridWrapper, (to, from) => {
<div ref="gridWrapper"></div>
</template>
<style scoped>
<style>
</style>

7
src/components/base/Modal.vue
View File

@@ -54,12 +54,11 @@ watch(hide, async (to, from) => {
<slot name="modal-title"></slot>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body" id="body-modal-to-scroll">
<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 class="modal-footer d-block">
<slot name="modal-footer"></slot>
</div>
</div>
</div>

19
src/services/TicketApi.js
View File

@@ -15,9 +15,22 @@ export default {
return response.json();
},
async getStandardMessageList(id) {
const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=getStandardMessageList&id_business=' + id
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();
},
async getMessages(code, id) {
// code =2641056
// id = 66088
const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=getMessages&code_business=' + code + '&id_business=' + id
if (import.meta.env.DEV) {
@@ -34,7 +47,7 @@ export default {
},
async saveMessage(id, quill, replyOption) {
const apiUrl = '/App/api.php?prj=pharmamp&controller=TicketingController&method=saveMessage'
if (import.meta.env.DEV) {
if (import.meta.env.DEV) {
console.log(apiUrl)
}

11
src/setup/global.js
View File

@@ -1,4 +1,13 @@
import {ref} from "vue";
import {nextTick, ref} from "vue";
export const showModal = ref(0)
export const hideModal = ref(0)
export const suspens = ref(false)
export const messages = ref([])
export const moveToBottom = async (id) => {
await nextTick()
const objDiv = document.getElementById(id);
objDiv.scrollTop = objDiv.scrollHeight;
}

69
src/style.css
View File

@@ -1,51 +1,51 @@
#app {
color: rgba(255, 255, 255, 0.87);
margin: 0 auto;
padding: 1rem;
font-size: 1rem;
font-family: "Open Sans", sans-serif;
color: #444444;
color: rgba(255, 255, 255, 0.87);
margin: 0 auto;
padding: 1rem;
font-size: 1rem;
font-family: "Open Sans", sans-serif;
color: #444444;
}
#app .gridjs-wrapper{
font-size: 0.9rem;
#app .gridjs-wrapper {
font-size: 0.9rem;
}
.cursor-pointer{
cursor:pointer
.cursor-pointer {
cursor: pointer
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
opacity: 0;
}
.gridjs-head {
padding: 10px 0 5px 0 !important;
padding: 10px 0 5px 0 !important;
}
.gridjs-wrapper .green {
color: green;
font-weight: bold;
color: green;
font-weight: bold;
}
.gridjs-wrapper .red {
color: red;
font-weight: bold;
color: red;
font-weight: bold;
}
.gridjs-wrapper .orange {
color: orange;
font-weight: bold;
color: orange;
font-weight: bold;
}
.gridjs-wrapper .black {
color: black;
color: black;
}
/*.gridjs-footer,*/
@@ -54,8 +54,8 @@
/*}*/
.gridjs-wrapper {
font-size: 0.95rem !important;
border-top: 1px solid #e5e7eb !important;
font-size: 0.95rem !important;
border-top: 1px solid #e5e7eb !important;
}
/*.gridjs-wrapper table td:last-child button{*/
@@ -69,21 +69,30 @@
/*}*/
tr.gridjs-tr:nth-child(odd) td {
background-color: #eeeded !important;
background-color: #eeeded !important;
}
th.gridjs-th {
white-space: normal !important;
color: #000000 !important;
white-space: normal !important;
color: #000000 !important;
}
.gridjs-th-sort button {
border-width: 0;
color: white;
background-color: transparent !important;
border-width: 0;
color: white;
background-color: transparent !important;
}
.gridjs-wrapper tr:hover td{
background-color: lightblue !important;
.gridjs-wrapper tr:hover td {
background-color: lightblue !important;
}
.messenger .modal-body {
max-height: calc(100vh - 400px);
overflow-y: auto;
}
.messenger .modal-footer {
display: block;
}