tweak
This commit is contained in:
Arc
parent
19dbe64e7f
commit
cd0bca1c85
2 changed files with 150 additions and 147 deletions
|
|
@ -1,143 +1,146 @@
|
|||
<div>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="row items-center q-col-gutter-sm">
|
||||
<div class="col-auto">
|
||||
<h6 class="text-subtitle1 q-my-none">Messages</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-badge v-if="unreadMessages" color="primary" outline
|
||||
><span v-text="unreadMessages"></span> new</q-badge
|
||||
>
|
||||
</div>
|
||||
<div class="col-auto q-ml-auto">
|
||||
<q-btn
|
||||
v-if="activePublicKey"
|
||||
@click="showClientOrders"
|
||||
unelevated
|
||||
outline
|
||||
size="sm"
|
||||
>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>
|
||||
<div class="row q-col-gutter-sm items-end">
|
||||
<div class="col" style="min-width: 0">
|
||||
<q-select
|
||||
v-model="activePublicKey"
|
||||
:options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
|
||||
label="Select Customer"
|
||||
emit-value
|
||||
@input="selectActiveCustomer()"
|
||||
:display-value="activePublicKey ? buildCustomerLabel(customers.find(c => c.public_key === activePublicKey)) : ''"
|
||||
class="ellipsis"
|
||||
>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<span v-text="scope.opt.label.split('(')[0]"></span>
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
class="text-mono"
|
||||
style="word-break: break-all"
|
||||
>
|
||||
<span v-text="scope.opt.value"></span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
label="ADD"
|
||||
color="primary"
|
||||
unelevated
|
||||
@click="showAddPublicKey = true"
|
||||
>
|
||||
<q-tooltip> Add a public key to chat with </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</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 messagesAsJson"
|
||||
:key="index"
|
||||
:name="dm.incoming ? 'customer': 'me'"
|
||||
:sent="!dm.incoming"
|
||||
:stamp="dm.dateFrom"
|
||||
:bg-color="dm.incoming ? 'white' : 'light-green-2'"
|
||||
:class="'chat-mesage-index-'+index"
|
||||
<q-expansion-item
|
||||
icon="chat"
|
||||
label="Messages"
|
||||
header-class="text-grey"
|
||||
expand-separator
|
||||
>
|
||||
<q-card-section class="q-pb-none">
|
||||
<div class="row items-center q-col-gutter-sm">
|
||||
<div class="col-auto">
|
||||
<q-badge v-if="unreadMessages" color="primary" outline
|
||||
><span v-text="unreadMessages"></span> new</q-badge
|
||||
>
|
||||
</div>
|
||||
<div class="col-auto q-ml-auto">
|
||||
<q-btn
|
||||
v-if="activePublicKey"
|
||||
@click="showClientOrders"
|
||||
unelevated
|
||||
outline
|
||||
size="sm"
|
||||
>Client Orders</q-btn
|
||||
>
|
||||
<div v-if="dm.isJson">
|
||||
<div v-if="dm.message.type === 0">
|
||||
<strong>New order:</strong>
|
||||
</div>
|
||||
<div v-else-if="dm.message.type === 1">
|
||||
<strong>Reply sent for order: </strong>
|
||||
</div>
|
||||
<div v-else-if="dm.message.type === 2">
|
||||
<q-badge v-if="dm.message.paid" color="green">Paid </q-badge>
|
||||
<q-badge v-if="dm.message.shipped" color="green"
|
||||
>Shipped
|
||||
</q-badge>
|
||||
</div>
|
||||
<div>
|
||||
<span v-text="dm.message.message"></span>
|
||||
<q-badge color="orange">
|
||||
<span
|
||||
v-text="dm.message.id"
|
||||
@click="showOrderDetails(dm.message.id, dm.event_id)"
|
||||
class="cursor-pointer"
|
||||
></span>
|
||||
</q-badge>
|
||||
</div>
|
||||
<q-badge
|
||||
@click="showMessageRawData(index)"
|
||||
class="cursor-pointer"
|
||||
>...</q-badge
|
||||
>
|
||||
</div>
|
||||
<div v-else><span v-text="dm.message"></span></div>
|
||||
</q-chat-message>
|
||||
</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
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm items-end">
|
||||
<div class="col" style="min-width: 0">
|
||||
<q-select
|
||||
v-model="activePublicKey"
|
||||
:options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
|
||||
label="Select Customer"
|
||||
emit-value
|
||||
@input="selectActiveCustomer()"
|
||||
:display-value="activePublicKey ? buildCustomerLabel(customers.find(c => c.public_key === activePublicKey)) : ''"
|
||||
class="ellipsis"
|
||||
>
|
||||
<template>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
type="submit"
|
||||
icon="send"
|
||||
color="primary"
|
||||
/>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<span v-text="scope.opt.label.split('(')[0]"></span>
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
class="text-mono"
|
||||
style="word-break: break-all"
|
||||
>
|
||||
<span v-text="scope.opt.value"></span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
label="ADD"
|
||||
color="primary"
|
||||
unelevated
|
||||
@click="showAddPublicKey = true"
|
||||
>
|
||||
<q-tooltip> Add a public key to chat with </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</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 messagesAsJson"
|
||||
:key="index"
|
||||
:name="dm.incoming ? 'customer': 'me'"
|
||||
:sent="!dm.incoming"
|
||||
:stamp="dm.dateFrom"
|
||||
:bg-color="dm.incoming ? 'white' : 'light-green-2'"
|
||||
:class="'chat-mesage-index-'+index"
|
||||
>
|
||||
<div v-if="dm.isJson">
|
||||
<div v-if="dm.message.type === 0">
|
||||
<strong>New order:</strong>
|
||||
</div>
|
||||
<div v-else-if="dm.message.type === 1">
|
||||
<strong>Reply sent for order: </strong>
|
||||
</div>
|
||||
<div v-else-if="dm.message.type === 2">
|
||||
<q-badge v-if="dm.message.paid" color="green"
|
||||
>Paid
|
||||
</q-badge>
|
||||
<q-badge v-if="dm.message.shipped" color="green"
|
||||
>Shipped
|
||||
</q-badge>
|
||||
</div>
|
||||
<div>
|
||||
<span v-text="dm.message.message"></span>
|
||||
<q-badge color="orange">
|
||||
<span
|
||||
v-text="dm.message.id"
|
||||
@click="showOrderDetails(dm.message.id, dm.event_id)"
|
||||
class="cursor-pointer"
|
||||
></span>
|
||||
</q-badge>
|
||||
</div>
|
||||
<q-badge
|
||||
@click="showMessageRawData(index)"
|
||||
class="cursor-pointer"
|
||||
>...</q-badge
|
||||
>
|
||||
</div>
|
||||
<div v-else><span v-text="dm.message"></span></div>
|
||||
</q-chat-message>
|
||||
</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-expansion-item>
|
||||
</q-card>
|
||||
<div>
|
||||
<q-dialog v-model="showAddPublicKey" position="top">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
|
||||
%} {% block page %}
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12 col-md-7 q-gutter-y-md">
|
||||
<div class="col-12 col-md-7 col-lg-8 q-gutter-y-md">
|
||||
<div v-if="merchant && merchant.id">
|
||||
<q-card>
|
||||
<div class="row items-center no-wrap">
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-5 q-gutter-y-md">
|
||||
<div class="col-12 col-md-5 col-lg-4 q-gutter-y-md">
|
||||
<div v-if="g.user.admin" class="col-12 q-mb-lg">
|
||||
<q-card>
|
||||
<q-card-section class="q-pa-md">
|
||||
|
|
@ -342,6 +342,18 @@
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-if="merchant && merchant.id" class="col-12">
|
||||
<direct-messages
|
||||
ref="directMessagesRef"
|
||||
:inkey="g.user.wallets[0].inkey"
|
||||
:adminkey="g.user.wallets[0].adminkey"
|
||||
:active-chat-customer="activeChatCustomer"
|
||||
:merchant-id="merchant.id"
|
||||
@customer-selected="filterOrdersForCustomer"
|
||||
@order-selected="showOrderDetails"
|
||||
>
|
||||
</direct-messages>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card>
|
||||
<q-expansion-item
|
||||
|
|
@ -370,18 +382,6 @@
|
|||
</q-expansion-item>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-if="merchant && merchant.id" class="col-12">
|
||||
<direct-messages
|
||||
ref="directMessagesRef"
|
||||
:inkey="g.user.wallets[0].inkey"
|
||||
:adminkey="g.user.wallets[0].adminkey"
|
||||
:active-chat-customer="activeChatCustomer"
|
||||
:merchant-id="merchant.id"
|
||||
@customer-selected="filterOrdersForCustomer"
|
||||
@order-selected="showOrderDetails"
|
||||
>
|
||||
</direct-messages>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue