Add pagination to the instances list

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-04-20 09:26:12 +02:00
parent 69b88c9238
commit 11bde88a02
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773

View file

@ -124,6 +124,17 @@
</p> </p>
</div> </div>
</router-link> </router-link>
<b-pagination
v-show="instances.total > INSTANCES_PAGE_LIMIT"
:total="instances.total"
v-model="instancePage"
:per-page="INSTANCES_PAGE_LIMIT"
:aria-next-label="$t('Next page')"
:aria-previous-label="$t('Previous page')"
:aria-page-label="$t('Page')"
:aria-current-label="$t('Current page')"
>
</b-pagination>
</div> </div>
<div v-else-if="instances && instances.elements.length == 0"> <div v-else-if="instances && instances.elements.length == 0">
<empty-content icon="lan-disconnect" :inline="true"> <empty-content icon="lan-disconnect" :inline="true">
@ -163,6 +174,8 @@ import {
import { SnackbarProgrammatic as Snackbar } from "buefy"; import { SnackbarProgrammatic as Snackbar } from "buefy";
const { isNavigationFailure, NavigationFailureType } = VueRouter; const { isNavigationFailure, NavigationFailureType } = VueRouter;
const INSTANCES_PAGE_LIMIT = 10;
@Component({ @Component({
apollo: { apollo: {
instances: { instances: {
@ -171,7 +184,7 @@ const { isNavigationFailure, NavigationFailureType } = VueRouter;
variables() { variables() {
return { return {
page: this.instancePage, page: this.instancePage,
limit: 10, limit: INSTANCES_PAGE_LIMIT,
filterDomain: this.filterDomain, filterDomain: this.filterDomain,
filterFollowStatus: this.followStatus, filterFollowStatus: this.followStatus,
}; };
@ -204,6 +217,8 @@ export default class Follows extends Vue {
InstanceFollowStatus = InstanceFollowStatus; InstanceFollowStatus = InstanceFollowStatus;
INSTANCES_PAGE_LIMIT = INSTANCES_PAGE_LIMIT;
data(): Record<string, unknown> { data(): Record<string, unknown> {
return { return {
debouncedUpdateDomainFilter: debounce(this.updateDomainFilter, 500), debouncedUpdateDomainFilter: debounce(this.updateDomainFilter, 500),