91 lines
3.3 KiB
Vue
91 lines
3.3 KiB
Vue
<script setup>
|
|
import TicketApi from "@/services/TicketApi.js";
|
|
import {onMounted, ref} from 'vue';
|
|
import {codeTicket} from "@/setup/global";
|
|
|
|
const props = defineProps({
|
|
idTicket: [Number,String],
|
|
codeTicket : [Number,String],
|
|
})
|
|
|
|
const messages = ref([])
|
|
|
|
onMounted(async () => {
|
|
messages.value = await TicketApi.getMessages(props.codeTicket, props.idTicket)
|
|
})
|
|
|
|
|
|
</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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 hidden-sm text-end">
|
|
<a href="javascript:void(0);" class="btn btn-outline-secondary me-2"><i class="fa-solid fa-camera"></i></a>
|
|
<a href="javascript:void(0);" class="btn btn-outline-primary me-2"><i class="fa-solid fa-image"></i></a>
|
|
<a href="javascript:void(0);" class="btn btn-outline-info me-2"><i class="fa-solid fa-cogs"></i></a>
|
|
<a href="javascript:void(0);" class="btn btn-outline-warning"><i class="fa-solid fa-question"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-history">
|
|
<ul class="m-b-0">
|
|
|
|
<li class="clearfix" v-for="(message, i) in messages" :key="i">
|
|
<div class="message-data" :class="message.sender === 'pharma' ? 'text-end' : ''">
|
|
<span class="message-data-time">{{message.date}}</span>
|
|
<i class="fa-solid fa-circle-user ms-2 fa-2x text-primary" v-if="message.sender === 'client'"></i>
|
|
</div>
|
|
<div class="message" :class="message.sender === 'pharma' ? 'other-message float-end' : 'my-message'">
|
|
|
|
<strong v-if="message.object !== null">{{message.object}}<br/></strong>
|
|
|
|
<div v-if="message.htmlBody !== null" v-html="message.htmlBody"></div>
|
|
<div v-else>{{message.body}}</div>
|
|
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="chat-message clearfix">
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="fa-solid fa-paper-plane"></i></span>
|
|
<input type="text" class="form-control" placeholder="Entrer votre réponse">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div v-else class="text-center mt-5">
|
|
<i class="fa-solid fa-circle-notch fa-spin fa-fw text-primary fa-4x"></i>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|