lnbits-exts/nostrmarket
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

order list

Browse source
This commit is contained in:
Tiago Vasconcelos 2023-03-10 12:03:46 +00:00
parent e9f37f4a6b
commit 310cf50d5c
2 changed files with 125 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

114
static/components/chat-dialog/chat-dialog.html
View file

@ -8,8 +8,14 @@
>
<q-card>
<q-bar>
<q-icon name="chat" />
<div>Chat Box</div>
<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>
@ -17,52 +23,64 @@
<q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
</q-btn>
</q-bar>
<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.sender == 'Me' ? 'white' : 'light-green-2'"
:stamp="message.timestamp"
size="6"
/>
</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 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.sender == 'Me' ? 'white' : 'light-green-2'"
:stamp="message.timestamp"
size="6"
/>
</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 style="height: calc(100vh - 120px)">
<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-cube size="50px" color="primary" />
</q-inner-loading>

67
static/components/chat-dialog/chat-dialog.js
View file

@ -9,15 +9,64 @@ async function chatDialog(path) {
data: function () {
return {
dialog: false,
isChat: false,
loading: false,
pool: null,
nostrMessages: [],
newMessage: ''
newMessage: '',
ordersTable: {
columns: [
{
name: 'id',
align: 'left',
label: 'ID',
field: 'id'
},
{
name: 'paid',
align: 'left',
label: 'Paid',
field: 'paid',
sortable: true
},
{
name: 'shipped',
align: 'left',
label: 'Shipped',
field: 'shipped',
sortable: true
},
{
name: 'invoice',
align: 'left',
label: 'Invoice',
field: row =>
row.payment_options &&
row.payment_options.find(p => p.type == 'ln').link
}
],
pagination: {
rowsPerPage: 10
}
}
}
},
computed: {
sortedMessages() {
return this.nostrMessages.sort((a, b) => b.created_at - a.created_at)
},
ordersList() {
let orders = this.nostrMessages
.sort((a, b) => b.created_at - a.created_at)
.filter(o => isJson(o.msg))
.reduce((acc, cur) => {
const obj = JSON.parse(cur.msg)
const key = obj.id
const curGroup = acc[key] ?? {}
return {...acc, [key]: {...curGroup, ...obj}}
}, {})
console.log(orders)
return Object.values(orders)
}
},
methods: {
@ -67,13 +116,15 @@ async function chatDialog(path) {
event.content
)
}
messagesMap.set(event.id, {
created_at: event.created_at,
msg: plaintext,
timestamp: timeFromNow(event.created_at * 1000),
sender: `${mine ? 'Me' : 'Merchant'}`
})
this.nostrMessages = Array.from(messagesMap.values())
if (plaintext) {
messagesMap.set(event.id, {
created_at: event.created_at,
msg: plaintext,
timestamp: timeFromNow(event.created_at * 1000),
sender: `${mine ? 'Me' : 'Merchant'}`
})
this.nostrMessages = Array.from(messagesMap.values())
}
} catch {
console.error('Unable to decrypt message!')
}