95 lines
2.7 KiB
HTML
95 lines
2.7 KiB
HTML
<div class="q-mr-md">
|
|
<q-btn dense round flat icon="chat" @click="startDialog" />
|
|
<q-dialog
|
|
v-model="dialog"
|
|
maximized
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<q-card>
|
|
<q-bar>
|
|
<q-btn dense flat icon="chat" label="Chat" @click="isChat = true" />
|
|
<q-btn
|
|
dense
|
|
flat
|
|
icon="receipt_long"
|
|
label="Orders"
|
|
@click="isChat = false"
|
|
/>
|
|
|
|
<q-space></q-space>
|
|
|
|
<q-btn dense flat icon="close" @click="closeDialog">
|
|
<q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
|
|
</q-btn>
|
|
</q-bar>
|
|
<div v-if="isChat">
|
|
<q-card-section
|
|
class="q-ml-auto"
|
|
style="
|
|
width: 100%;
|
|
max-width: 720px;
|
|
height: calc(100vh - 120px);
|
|
overflow-y: scroll;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
"
|
|
>
|
|
<q-chat-message
|
|
:key="index"
|
|
v-for="(message, index) in sortedMessages"
|
|
:name="message.sender"
|
|
:text="[message.msg]"
|
|
:sent="message.sender == 'Me'"
|
|
:bg-color="message.json ? 'purple-2' : message.sender == 'Me' ? 'white' : 'light-green-2'"
|
|
:stamp="message.timestamp"
|
|
size="6"
|
|
><template v-slot:avatar v-if="message.json">
|
|
<q-icon
|
|
color="secondary"
|
|
name="smart_toy"
|
|
class="q-message-avatar q-message-avatar--received"
|
|
/> </template
|
|
></q-chat-message>
|
|
</q-card-section>
|
|
<q-card-actions>
|
|
<q-form @submit="sendMessage" class="full-width chat-input">
|
|
<q-input
|
|
ref="newMessage"
|
|
v-model="newMessage"
|
|
placeholder="Message"
|
|
class="full-width"
|
|
dense
|
|
outlined
|
|
>
|
|
<template>
|
|
<q-btn
|
|
round
|
|
dense
|
|
flat
|
|
type="submit"
|
|
icon="send"
|
|
color="primary"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</q-form>
|
|
</q-card-actions>
|
|
</div>
|
|
<div v-else>
|
|
<q-card-section>
|
|
<q-table
|
|
title="Orders"
|
|
:data="ordersList"
|
|
:columns="ordersTable.columns"
|
|
:pagination.sync="ordersTable.pagination"
|
|
row-key="id"
|
|
/>
|
|
</q-card-section>
|
|
</div>
|
|
<q-inner-loading :showing="loading">
|
|
<q-spinner-comment size="50px" color="primary" />
|
|
</q-inner-loading>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|