natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix: ⚗️ messaging pagination

This commit is contained in:
ThatOneCalculator 2022-11-03 15:37:31 -07:00
parent e5606ef249
commit dae60381be
3 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docker-compose.yml
View File

@ -2,6 +2,7 @@ version: "3"
services:
web:
image: thatonecalculator/calckey
build: .
restart: always
links:

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "calckey",
"version": "12.119.0-calc.6.5",
"version": "12.119.0-calc.7",
"codename": "aqua",
"repository": {
"type": "git",

67
packages/client/src/pages/messaging/index.vue
View File

@ -3,42 +3,44 @@
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800">
<div v-size="{ max: [400] }" class="yweeujhr">
<MkButton primary class="start" @click="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
<MkButton primary class="start" @click="start"><i class="fas fa-plus"></i> {{ i18n.ts.startMessaging }}</MkButton>
<div v-if="messages.length > 0" class="history">
<MkA
v-for="(message, i) in messages"
:key="message.id"
v-anim="i"
class="message _block"
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
:data-index="i"
>
<div>
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
<header v-if="message.groupId">
<span class="name">{{ message.group.name }}</span>
<MkTime :time="message.createdAt" class="time"/>
</header>
<header v-else>
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
<MkTime :time="message.createdAt" class="time"/>
</header>
<div class="body">
<p class="text">
<span v-if="isMe(message)" class="me">{{ $ts.you }}: </span>
<span v-if="message.text != null && message.text.length > 0">{{ message.text }}</span>
<span v-else> 📎</span>
</p>
<MkPagination v-slot="{items}" :pagination="pagination">
<MkA
v-for="(message, i) in items"
:key="message.id"
v-anim="i"
class="message _block"
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
:data-index="i"
>
<div>
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
<header v-if="message.groupId">
<span class="name">{{ message.group.name }}</span>
<MkTime :time="message.createdAt" class="time"/>
</header>
<header v-else>
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
<MkTime :time="message.createdAt" class="time"/>
</header>
<div class="body">
<p class="text">
<span v-if="isMe(message)" class="me">{{ i18n.ts.you }}: </span>
<span v-if="message.text != null && message.text.length > 0">{{ message.text }}</span>
<span v-else> 📎</span>
</p>
</div>
</div>
</div>
</MkA>
</MkA>
</MkPagination>
</div>
<div v-if="!fetching && messages.length == 0" class="_fullinfo">
<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
<div>{{ $ts.noHistory }}</div>
<div>{{ i18n.ts.noHistory }}</div>
</div>
<MkLoading v-if="fetching"/>
</div>
@ -67,6 +69,11 @@ let connection = $ref(null);
const getAcct = Acct.toString;
const pagination = {
endpoint: 'messaging' as const,
limit: 10,
};
function isMe(message) {
return message.userId === $i.id;
}