Add pagination to resource mover modal as well

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-14 15:40:30 +02:00
parent 7c37b10ceb
commit 55a3d2b1d3
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773

View file

@ -58,18 +58,34 @@
> >
{{ $t("No resources in this folder") }} {{ $t("No resources in this folder") }}
</p> </p>
<b-pagination
v-if="resource.children.total > RESOURCES_PER_PAGE"
:total="resource.children.total"
v-model="page"
size="is-small"
:per-page="RESOURCES_PER_PAGE"
:aria-next-label="$t('Next page')"
:aria-previous-label="$t('Previous page')"
:aria-page-label="$t('Page')"
:aria-current-label="$t('Current page')"
/>
</article> </article>
<b-button <div class="buttons">
type="is-primary" <b-button type="is-text" @click="$emit('close-move-modal')">{{
@click="updateResource" $t("Cancel")
:disabled="moveDisabled" }}</b-button>
>{{ <b-button
$t("Move resource to {folder}", { folder: resource.title }) type="is-primary"
}}</b-button @click="updateResource"
> :disabled="moveDisabled"
<b-button type="is-text" @click="$emit('close-move-modal')">{{ ><template v-if="resource.path === '/'">
$t("Cancel") {{ $t("Move resource to the root folder") }}
}}</b-button> </template>
<template v-else
>{{ $t("Move resource to {folder}", { folder: resource.title }) }}
</template></b-button
>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -86,6 +102,8 @@ import { IResource } from "../../types/resource";
return { return {
path: this.resource.path, path: this.resource.path,
username: this.username, username: this.username,
page: this.page,
limit: this.RESOURCES_PER_PAGE,
}; };
} }
return { path: "/", username: this.username }; return { path: "/", username: this.username };
@ -103,6 +121,10 @@ export default class ResourceSelector extends Vue {
resource: IResource | undefined = this.initialResource.parent; resource: IResource | undefined = this.initialResource.parent;
RESOURCES_PER_PAGE = 10;
page = 1;
goDown(element: IResource): void { goDown(element: IResource): void {
if (element.type === "folder" && element.id !== this.initialResource.id) { if (element.type === "folder" && element.id !== this.initialResource.id) {
this.resource = element; this.resource = element;
@ -150,4 +172,11 @@ export default class ResourceSelector extends Vue {
color: #fff; color: #fff;
} }
} }
.buttons {
justify-content: flex-end;
}
nav.pagination {
margin: 0.5rem;
}
</style> </style>