mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-06-12 15:13:56 +02:00
Code Releases Activity

refactor(frontend): improve pagination implementation

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/pages/admin/invites.vue
View File

@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkInput v-if="!noExpirationDate" v-model="expiresAt" type="datetime-local">
<template #label>{{ i18n.ts.expirationDate }}</template>
</MkInput>
<MkInput v-model="createCount" type="number" min="1">
<MkInput v-model="createCount" type="number" :min="1">
<template #label>{{ i18n.ts.createCount }}</template>
</MkInput>
<MkButton primary rounded @click="createWithOptions">{{ i18n.ts.create }}</MkButton>
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="-usedAt">{{ i18n.ts.usedAt }} ({{ i18n.ts.descendingOrder }})</option>
</MkSelect>
</div>
<MkPagination ref="pagingComponent" :pagination="pagination">
<MkPagination :paginator="paginator">
<template #default="{ items }">
<div class="_gaps_s">
<MkInviteCode v-for="item in items" :key="item.id" :invite="(item as any)" :onDeleted="deleted" moderator/>
@@ -54,8 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, ref, useTemplateRef } from 'vue';
import type { PagingCtx } from '@/composables/use-pagination.js';
import { computed, markRaw, ref, useTemplateRef } from 'vue';
import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
@@ -67,21 +66,19 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkPagination from '@/components/MkPagination.vue';
import MkInviteCode from '@/components/MkInviteCode.vue';
import { definePage } from '@/page.js';
const pagingComponent = useTemplateRef('pagingComponent');
import { Paginator } from '@/utility/paginator.js';
const type = ref('all');
const sort = ref('+createdAt');
const pagination: PagingCtx = {
endpoint: 'admin/invite/list' as const,
const paginator = markRaw(new Paginator('admin/invite/list', {
limit: 10,
params: computed(() => ({
computedParams: computed(() => ({
type: type.value,
sort: sort.value,
})),
offsetMode: true,
};
}));
const expiresAt = ref('');
const noExpirationDate = ref(true);
@@ -100,13 +97,11 @@ async function createWithOptions() {
text: tickets.map(x => x.code).join('\n'),
});
tickets.forEach(ticket => pagingComponent.value?.paginator.prepend(ticket));
tickets.forEach(ticket => paginator.prepend(ticket));
}
function deleted(id: string) {
if (pagingComponent.value) {
pagingComponent.value.paginator.removeItem(id);
}
paginator.removeItem(id);
}
const headerActions = computed(() => []);