diff options
Diffstat (limited to 'packages/frontend/src/pages/announcements.vue')
| -rw-r--r-- | packages/frontend/src/pages/announcements.vue | 29 |
1 files changed, 9 insertions, 20 deletions
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue index 2c671c6b34..4c34c3c74b 100644 --- a/packages/frontend/src/pages/announcements.vue +++ b/packages/frontend/src/pages/announcements.vue @@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_spacer" style="--MI_SPACER-w: 800px;"> <div class="_gaps"> <MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo> - <MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps"> + <MkPagination v-slot="{items}" :paginator="paginator" class="_gaps"> <section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement"> <div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div> <div :class="$style.header"> @@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { ref, computed, useTemplateRef } from 'vue'; +import { ref, computed, markRaw } from 'vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; import MkInfo from '@/components/MkInfo.vue'; @@ -54,24 +54,14 @@ import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { $i } from '@/i.js'; import { updateCurrentAccountPartial } from '@/accounts.js'; +import { Paginator } from '@/utility/paginator.js'; -const paginationCurrent = { - endpoint: 'announcements' as const, +const paginator = markRaw(new Paginator('announcements', { limit: 10, - params: { - isActive: true, - }, -}; - -const paginationPast = { - endpoint: 'announcements' as const, - limit: 10, - params: { - isActive: false, - }, -}; - -const paginationEl = useTemplateRef('paginationEl'); + computedParams: computed(() => ({ + isActive: tab.value === 'current', + })), +})); const tab = ref('current'); @@ -85,8 +75,7 @@ async function read(target) { if (confirm.canceled) return; } - if (!paginationEl.value) return; - paginationEl.value.paginator.updateItem(target.id, a => ({ + paginator.updateItem(target.id, a => ({ ...a, isRead: true, })); |