mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-24 05:44:12 +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

42
packages/frontend/src/pages/channels.vue
View File

@@ -18,27 +18,27 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton large primary gradate rounded @click="search">{{ i18n.ts.search }}</MkButton>
</div>
<MkFoldableSection v-if="channelPagination">
<MkFoldableSection v-if="channelPaginator">
<template #header>{{ i18n.ts.searchResult }}</template>
<MkChannelList :key="key" :pagination="channelPagination"/>
<MkChannelList :key="key" :paginator="channelPaginator"/>
</MkFoldableSection>
</div>
<div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredPagination">
<MkPagination v-slot="{items}" :paginator="featuredPaginator">
<div :class="$style.root">
<MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/>
</div>
</MkPagination>
</div>
<div v-else-if="tab === 'favorites'">
<MkPagination v-slot="{items}" :pagination="favoritesPagination">
<MkPagination v-slot="{items}" :paginator="favoritesPaginator">
<div :class="$style.root">
<MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/>
</div>
</MkPagination>
</div>
<div v-else-if="tab === 'following'">
<MkPagination v-slot="{items}" :pagination="followingPagination">
<MkPagination v-slot="{items}" :paginator="followingPaginator">
<div :class="$style.root">
<MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/>
</div>
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-else-if="tab === 'owned'">
<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="ownedPagination">
<MkPagination v-slot="{items}" :paginator="ownedPaginator">
<div :class="$style.root">
<MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/>
</div>
@@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { computed, markRaw, onMounted, ref, shallowRef } from 'vue';
import MkChannelPreview from '@/components/MkChannelPreview.vue';
import MkChannelList from '@/components/MkChannelList.vue';
import MkPagination from '@/components/MkPagination.vue';
@@ -68,6 +68,7 @@ import MkFoldableSection from '@/components/MkFoldableSection.vue';
import { definePage } from '@/page.js';
import { i18n } from '@/i18n.js';
import { useRouter } from '@/router.js';
import { Paginator } from '@/utility/paginator.js';
const router = useRouter();
@@ -80,31 +81,27 @@ const key = ref('');
const tab = ref('featured');
const searchQuery = ref('');
const searchType = ref('nameAndDescription');
const channelPagination = ref();
const channelPaginator = shallowRef();
onMounted(() => {
searchQuery.value = props.query ?? '';
searchType.value = props.type ?? 'nameAndDescription';
});
const featuredPagination = {
endpoint: 'channels/featured' as const,
const featuredPaginator = markRaw(new Paginator('channels/featured', {
limit: 10,
noPaging: true,
};
const favoritesPagination = {
endpoint: 'channels/my-favorites' as const,
}));
const favoritesPaginator = markRaw(new Paginator('channels/my-favorites', {
limit: 100,
noPaging: true,
};
const followingPagination = {
endpoint: 'channels/followed' as const,
}));
const followingPaginator = markRaw(new Paginator('channels/followed', {
limit: 10,
};
const ownedPagination = {
endpoint: 'channels/owned' as const,
}));
const ownedPaginator = markRaw(new Paginator('channels/owned', {
limit: 10,
};
}));
async function search() {
const query = searchQuery.value.toString().trim();
@@ -113,14 +110,13 @@ async function search() {
const type = searchType.value.toString().trim();
channelPagination.value = {
endpoint: 'channels/search',
channelPaginator.value = markRaw(new Paginator('channels/search', {
limit: 10,
params: {
query: searchQuery.value,
type: type,
},
};
}));
key.value = query + type;
}