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>
</div>
</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 v-else-if="instances && instances.elements.length == 0">
<empty-content icon="lan-disconnect" :inline="true">
@ -163,6 +174,8 @@ import {
import { SnackbarProgrammatic as Snackbar } from "buefy";
const { isNavigationFailure, NavigationFailureType } = VueRouter;
const INSTANCES_PAGE_LIMIT = 10;
@Component({
apollo: {
instances: {
@ -171,7 +184,7 @@ const { isNavigationFailure, NavigationFailureType } = VueRouter;
variables() {
return {
page: this.instancePage,
limit: 10,
limit: INSTANCES_PAGE_LIMIT,
filterDomain: this.filterDomain,
filterFollowStatus: this.followStatus,
};
@ -204,6 +217,8 @@ export default class Follows extends Vue {
InstanceFollowStatus = InstanceFollowStatus;
INSTANCES_PAGE_LIMIT = INSTANCES_PAGE_LIMIT;
data(): Record<string, unknown> {
return {
debouncedUpdateDomainFilter: debounce(this.updateDomainFilter, 500),