From 55a3d2b1d312af449237b1eed55b1b7f48b937b1 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 14 Jun 2021 15:40:30 +0200
Subject: [PATCH] Add pagination to resource mover modal as well
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
.../components/Resource/ResourceSelector.vue | 51 +++++++++++++++----
1 file changed, 40 insertions(+), 11 deletions(-)
diff --git a/js/src/components/Resource/ResourceSelector.vue b/js/src/components/Resource/ResourceSelector.vue
index 818a90f10..e1aa4acde 100644
--- a/js/src/components/Resource/ResourceSelector.vue
+++ b/js/src/components/Resource/ResourceSelector.vue
@@ -58,18 +58,34 @@
>
{{ $t("No resources in this folder") }}
</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>
- <b-button
- type="is-primary"
- @click="updateResource"
- :disabled="moveDisabled"
- >{{
- $t("Move resource to {folder}", { folder: resource.title })
- }}</b-button
- >
- <b-button type="is-text" @click="$emit('close-move-modal')">{{
- $t("Cancel")
- }}</b-button>
+ <div class="buttons">
+ <b-button type="is-text" @click="$emit('close-move-modal')">{{
+ $t("Cancel")
+ }}</b-button>
+ <b-button
+ type="is-primary"
+ @click="updateResource"
+ :disabled="moveDisabled"
+ ><template v-if="resource.path === '/'">
+ {{ $t("Move resource to the root folder") }}
+ </template>
+ <template v-else
+ >{{ $t("Move resource to {folder}", { folder: resource.title }) }}
+ </template></b-button
+ >
+ </div>
</div>
</template>
<script lang="ts">
@@ -86,6 +102,8 @@ import { IResource } from "../../types/resource";
return {
path: this.resource.path,
username: this.username,
+ page: this.page,
+ limit: this.RESOURCES_PER_PAGE,
};
}
return { path: "/", username: this.username };
@@ -103,6 +121,10 @@ export default class ResourceSelector extends Vue {
resource: IResource | undefined = this.initialResource.parent;
+ RESOURCES_PER_PAGE = 10;
+
+ page = 1;
+
goDown(element: IResource): void {
if (element.type === "folder" && element.id !== this.initialResource.id) {
this.resource = element;
@@ -150,4 +172,11 @@ export default class ResourceSelector extends Vue {
color: #fff;
}
}
+.buttons {
+ justify-content: flex-end;
+}
+
+nav.pagination {
+ margin: 0.5rem;
+}
</style>