77 lines
2.2 KiB
HTML
77 lines
2.2 KiB
HTML
<div>
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="row">
|
|
<div class="col-2">
|
|
<h6 class="text-subtitle1 q-my-none">Messages</h6>
|
|
</div>
|
|
<div class="col-4">
|
|
<q-badge v-if="unreadMessages" color="green"><span v-text="unreadMessages"></span> new</q-badge>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-btn
|
|
v-if="activePublicKey"
|
|
@click="showClientOrders"
|
|
unelevated
|
|
outline
|
|
class="float-right"
|
|
>Client Orders</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pa-none">
|
|
<q-separator></q-separator>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-select
|
|
v-model="activePublicKey"
|
|
:options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
|
|
label="Select Customer"
|
|
emit-value
|
|
@input="selectActiveCustomer()"
|
|
>
|
|
</q-select>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="chat-container" ref="chatCard">
|
|
<div class="chat-box">
|
|
<div class="chat-messages" style="height: 45vh">
|
|
<q-chat-message
|
|
v-for="(dm, index) in messages"
|
|
:key="index"
|
|
:name="dm.incoming ? 'customer': 'me'"
|
|
:text="[dm.message]"
|
|
:sent="!dm.incoming"
|
|
:bg-color="dm.incoming ? 'white' : 'light-green-2'"
|
|
:class="'chat-mesage-index-'+index"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<q-card-section>
|
|
<q-form @submit="sendDirectMesage" 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-section>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|