mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 05:23:28 +00:00
Messages: add "mark all as read" option
This commit is contained in:
parent
b7614edb70
commit
da43085180
@ -13,10 +13,7 @@ export const useMessageStore = defineStore('message', {
|
|||||||
getConversations(state) {
|
getConversations(state) {
|
||||||
return pubkey => {
|
return pubkey => {
|
||||||
const conversations = []
|
const conversations = []
|
||||||
const counterparties = new Set()
|
for (const counterparty of this.getCounterparties(pubkey)) {
|
||||||
Object.keys(state.byRecipient[pubkey] || {}).forEach(pubkey => counterparties.add(pubkey))
|
|
||||||
Object.keys(state.bySender[pubkey] || {}).forEach(pubkey => counterparties.add(pubkey))
|
|
||||||
for (const counterparty of counterparties) {
|
|
||||||
const messages = this.getMessages(pubkey, counterparty)
|
const messages = this.getMessages(pubkey, counterparty)
|
||||||
const latestMessage = messages.reduce((a, b) => a.createdAt > b.createdAt ? a : b, {createdAt: 0})
|
const latestMessage = messages.reduce((a, b) => a.createdAt > b.createdAt ? a : b, {createdAt: 0})
|
||||||
const lastRead = useMessageStatusStore().getLastRead(pubkey, counterparty)
|
const lastRead = useMessageStatusStore().getLastRead(pubkey, counterparty)
|
||||||
@ -44,6 +41,14 @@ export const useMessageStore = defineStore('message', {
|
|||||||
: []
|
: []
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
getCounterparties(state) {
|
||||||
|
return pubkey => {
|
||||||
|
const counterparties = new Set()
|
||||||
|
Object.keys(state.byRecipient[pubkey] || {}).forEach(pubkey => counterparties.add(pubkey))
|
||||||
|
Object.keys(state.bySender[pubkey] || {}).forEach(pubkey => counterparties.add(pubkey))
|
||||||
|
return Array.from(counterparties)
|
||||||
|
}
|
||||||
|
},
|
||||||
getNumUnread() {
|
getNumUnread() {
|
||||||
// TODO improve performance
|
// TODO improve performance
|
||||||
return pubkey => this.getConversations(pubkey).reduce((sum, conv) => sum + conv.numUnread, 0)
|
return pubkey => this.getConversations(pubkey).reduce((sum, conv) => sum + conv.numUnread, 0)
|
||||||
@ -54,7 +59,7 @@ export const useMessageStore = defineStore('message', {
|
|||||||
const message = Message.from(event)
|
const message = Message.from(event)
|
||||||
if (!message) return false
|
if (!message) return false
|
||||||
|
|
||||||
if (this.messages[message.id]) return
|
if (this.messages[message.id]) return this.messages[message.id]
|
||||||
this.messages[message.id] = message
|
this.messages[message.id] = message
|
||||||
|
|
||||||
if (!this.bySender[message.author]) {
|
if (!this.bySender[message.author]) {
|
||||||
@ -83,6 +88,12 @@ export const useMessageStore = defineStore('message', {
|
|||||||
markAsRead(pubkey, counterparty) {
|
markAsRead(pubkey, counterparty) {
|
||||||
return useMessageStatusStore().markAsRead(pubkey, counterparty)
|
return useMessageStatusStore().markAsRead(pubkey, counterparty)
|
||||||
},
|
},
|
||||||
|
markAllAsRead(pubkey) {
|
||||||
|
const store = useMessageStatusStore()
|
||||||
|
for (const counterparty of this.getCounterparties(pubkey)) {
|
||||||
|
store.markAsRead(pubkey, counterparty)
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -9,12 +9,18 @@
|
|||||||
v-for="message in conversation"
|
v-for="message in conversation"
|
||||||
:key="message.id"
|
:key="message.id"
|
||||||
:sent="message.author === app.myPubkey"
|
:sent="message.author === app.myPubkey"
|
||||||
|
:bg-color="message.author === app.myPubkey ? 'grey-2' : 'pink-2'"
|
||||||
:stamp="formatMessageDate(message.createdAt)"
|
:stamp="formatMessageDate(message.createdAt)"
|
||||||
>
|
>
|
||||||
<EncryptedMessage :message="message" />
|
<EncryptedMessage :message="message" />
|
||||||
</q-chat-message>
|
</q-chat-message>
|
||||||
<p v-if="!conversation?.length" class="placeholder">
|
<p v-if="!conversation?.length" class="placeholder">
|
||||||
This is the beginning of your message history with <UserName :pubkey="counterparty" clickable />.
|
<template v-if="counterparty !== app.myPubkey">
|
||||||
|
This is the beginning of your message history with <UserName :pubkey="counterparty" clickable />.
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
Keep private notes by sending messages to yourself.
|
||||||
|
</template>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1,5 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<PageHeader back-button />
|
<PageHeader back-button>
|
||||||
|
<template #addon>
|
||||||
|
<q-btn icon="more_vert" size="md" round>
|
||||||
|
<q-menu anchor="bottom right" self="top right" :offset="[0, 6]" class="options-popup">
|
||||||
|
<a @click="markAllAsRead" v-close-popup>Mark all as read</a>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
|
</PageHeader>
|
||||||
|
|
||||||
<div class="messages">
|
<div class="messages">
|
||||||
<ConversationItem v-for="conversation in conversations" :key="conversation.pubkey" :conversation="conversation" />
|
<ConversationItem v-for="conversation in conversations" :key="conversation.pubkey" :conversation="conversation" />
|
||||||
<p v-if="!conversations?.length">To send a message, click on the <BaseIcon icon="messages" /> icon in the recipient's profile.</p>
|
<p v-if="!conversations?.length">To send a message, click on the <BaseIcon icon="messages" /> icon in the recipient's profile.</p>
|
||||||
@ -34,6 +43,11 @@ export default {
|
|||||||
return this.messages.getConversations(this.app.myPubkey)
|
return this.messages.getConversations(this.app.myPubkey)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
markAllAsRead() {
|
||||||
|
this.messages.markAllAsRead(this.app.myPubkey)
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -56,3 +70,20 @@ p {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "assets/theme/colors.scss";
|
||||||
|
|
||||||
|
.options-popup {
|
||||||
|
background-color: $color-bg;
|
||||||
|
box-shadow: $shadow-white;
|
||||||
|
border-radius: .5rem;
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
transition: 120ms ease;
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user