mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2024-11-21 01:21:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Actually paginate versions

Browse Source
This commit is contained in:
Nassim Jahnke 2023-08-26 14:17:35 +10:00
parent d38d91b687
commit ac981d261d
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/composables/useApiHelper.ts
View File

@ -108,8 +108,8 @@ export async function useProjectChannels(project: string): Promise<NonNullAsyncD
return await useAsyncDataNonNull("useProjectChannels:" + project, () => useInternalApi<ProjectChannel[]>(`channels/${project}`));
}
export async function useProjectVersions(project: string): Promise<Ref<PaginatedResult<Version> | null>> {
return extract(await useAsyncData("useProjectVersions:" + project, () => useApi<PaginatedResult<Version>>(`projects/${project}/versions`)));
export async function useProjectVersions(project: string, data?: object): Promise<Ref<PaginatedResult<Version> | null>> {
return extract(await useAsyncData("useProjectVersions:" + project, () => useApi<PaginatedResult<Version>>(`projects/${project}/versions`, "GET", data)));
}
export async function useProjectVersionsInternal(project: string, version: string): Promise<Ref<HangarVersion | null>> {

23
frontend/src/pages/[user]/[project]/versions/index.vue
View File

@ -20,6 +20,7 @@ import { useSeo } from "~/composables/useSeo";
import Alert from "~/components/design/Alert.vue";
import Pagination from "~/components/design/Pagination.vue";
import PlatformLogo from "~/components/logos/platforms/PlatformLogo.vue";
import { ref } from "#imports";
const i18n = useI18n();
const route = useRoute();
@ -48,7 +49,20 @@ const requestOptions = computed(() => {
};
});
const results = await Promise.all([useProjectChannels(route.params.project as string), useProjectVersions(route.params.project as string)]);
const pagination = ref();
const page = ref(0);
const requestParams = computed(() => {
const limit = 7;
return {
limit,
offset: page.value * limit,
};
});
const results = await Promise.all([
useProjectChannels(route.params.project as string),
useProjectVersions(route.params.project as string, requestParams.value),
]);
const channels = results[0].data;
const versions = results[1];
filter.channels.push(...channels.value.map((c) => c.name));
@ -56,6 +70,11 @@ filter.platforms.push(...platforms.value.map((p) => p.enumName));
useHead(useSeo("Versions | " + props.project.name, props.project.description, route, props.project.avatarUrl));
async function emitPageUpdate(newPage: number) {
page.value = newPage;
versions.value = (await useProjectVersions(route.params.project as string, requestParams.value))?.value;
}
watch(
filter,
async () => {
@ -112,7 +131,7 @@ function getVisibilityTitle(visibility: Visibility) {
<section class="basis-full md:basis-11/15 flex-grow">
<ul>
<Alert v-if="!versions || !versions.result || versions.result.length === 0" type="info"> {{ i18n.t("version.page.noVersions") }} </Alert>
<Pagination v-else-if="versions" :items="versions.result">
<Pagination v-else-if="versions" ref="pagination" :items="versions.result" :server-pagination="versions.pagination" @update:page="emitPageUpdate">
<template #default="{ item }">
<li class="mb-2">
<Card :class="getBorderClasses(item)" class="pb-1">