1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-21 16:55:33 +02:00

refactor(frontend): improve pagination implementation

This commit is contained in:
syuilo
2025-06-29 15:11:25 +09:00
parent 8bc822d829
commit f1deb89e34
68 changed files with 1067 additions and 1138 deletions

View File

@@ -115,7 +115,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<div v-else-if="tab === 'users'" class="_gaps_m">
<MkPagination v-slot="{ items }" :pagination="usersPagination">
<MkPagination v-slot="{ items }" :paginator="usersPaginator">
<div :class="$style.users">
<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${user.updatedAt ? dateString(user.updatedAt) : 'unknown'}`" :to="`/admin/user/${user.id}`">
<MkUserCardMini :user="user"/>
@@ -132,10 +132,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { ref, computed, watch, markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import type { ChartSrc } from '@/components/MkChart.vue';
import type { PagingCtx } from '@/composables/use-pagination.js';
import MkChart from '@/components/MkChart.vue';
import MkObjectView from '@/components/MkObjectView.vue';
import FormLink from '@/components/form/link.vue';
@@ -156,6 +155,7 @@ import MkPagination from '@/components/MkPagination.vue';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
import { dateString } from '@/filters/date.js';
import MkTextarea from '@/components/MkTextarea.vue';
import { Paginator } from '@/utility/paginator.js';
const props = defineProps<{
host: string;
@@ -173,8 +173,7 @@ const isMediaSilenced = ref(false);
const faviconUrl = ref<string | null>(null);
const moderationNote = ref('');
const usersPagination = {
endpoint: iAmModerator ? 'admin/show-users' : 'users',
const usersPaginator = iAmModerator ? markRaw(new Paginator('admin/show-users', {
limit: 10,
params: {
sort: '+updatedAt',
@@ -182,7 +181,15 @@ const usersPagination = {
hostname: props.host,
},
offsetMode: true,
} satisfies PagingCtx<'admin/show-users' | 'users'>;
})) : markRaw(new Paginator('users', {
limit: 10,
params: {
sort: '+updatedAt',
state: 'all',
hostname: props.host,
},
offsetMode: true,
}));
if (iAmModerator) {
watch(moderationNote, async () => {