Add pagination to resource mover modal as well

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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
+    <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>
 </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>