Add pagination to the instances list
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
69b88c9238
commit
11bde88a02
|
@ -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),
|
||||||
|
|
Loading…
Reference in a new issue