Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: ⚗️ messaging pagination

Browse Source
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: services:
web: web:
image: thatonecalculator/calckey
build: . build: .
restart: always restart: always
links: links:

2
package.json
View File

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

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

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