Add a pager to the dashboard package list

Refs #959.

Implement a rudimentary cursor-based pager on the dashboard package list
with previous and next page links.

dashboard/src/pages/packages/index.vue

@@ -85,13 +85,47 @@ const toggleLegend = () => {
                 >{{ pkg.name }}</router-link
               >
             </td>
-            <td><UUID :id="pkg.aipId" /></td>
+            <td>
+              <UUID :id="pkg.aipId" />
+            </td>
             <td>{{ $filters.formatDateTime(pkg.startedAt) }}</td>
-            <td><UUID :id="pkg.locationId" /></td>
-            <td><StatusBadge :status="pkg.status" /></td>
+            <td>
+              <UUID :id="pkg.locationId" />
+            </td>
+            <td>
+              <StatusBadge :status="pkg.status" />
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
+    <div>
+      <nav aria-label="Package list pages">
+        <ul class="pagination justify-content-center">
+          <li class="page-item">
+            <a
+              href="#"
+              :class="{
+                'page-link': true,
+                disabled: !packageStore.hasPrevPage,
+              }"
+              @click.prevent="packageStore.prevPage"
+              >Previous</a
+            >
+          </li>
+          <li class="page-item">
+            <a
+              href="#"
+              :class="{
+                'page-link': true,
+                disabled: !packageStore.hasNextPage,
+              }"
+              @click.prevent="packageStore.nextPage"
+              >Next</a
+            >
+          </li>
+        </ul>
+      </nav>
+    </div>
   </div>
 </template>

dashboard/src/stores/package.ts

@@ -23,6 +23,15 @@ export const usePackageStore = defineStore("package", {
     // A list of packages shown during searches.
     packages: [] as Array<api.EnduroStoredPackage>,
 
+    // Cursor for this page of packages.
+    cursor: 0,
+
+    // Cursor for next page of packages.
+    nextCursor: 0,
+
+    // A list of previous page cursors.
+    prevCursors: [] as Array<number>,
+
     // User-interface interactions between components.
     ui: {
       download: new UIRequest(),
@@ -44,6 +53,12 @@ export const usePackageStore = defineStore("package", {
     isRejected(): boolean {
       return this.isDone && this.current?.locationId === undefined;
     },
+    hasNextPage(): boolean {
+      return this.nextCursor != 0;
+    },
+    hasPrevPage(): boolean {
+      return this.prevCursors.length > 0;
+    },
     getActionById: (state) => {
       return (
         actionId: number,
@@ -103,8 +118,11 @@ export const usePackageStore = defineStore("package", {
       ]);
     },
     async fetchPackages() {
-      const resp = await client.package.packageList();
+      const resp = await client.package.packageList({
+        cursor: this.cursor > 0 ? this.cursor.toString() : undefined,
+      });
       this.packages = resp.items;
+      this.nextCursor = Number(resp.nextCursor);
     },
     async fetchPackagesDebounced() {
       return this.fetchPackages();
@@ -156,6 +174,21 @@ export const usePackageStore = defineStore("package", {
         this.current.status = api.EnduroStoredPackageStatusEnum.InProgress;
       });
     },
+    nextPage() {
+      if (this.nextCursor == 0) {
+        return;
+      }
+      this.prevCursors.push(this.cursor);
+      this.cursor = this.nextCursor;
+      this.fetchPackages();
+    },
+    prevPage() {
+      let prev = this.prevCursors.pop();
+      if (prev !== undefined) {
+        this.cursor = prev;
+        this.fetchPackages();
+      }
+    },
   },
   debounce: {
     fetchPackagesDebounced: [500, { isImmediate: false }],

dashboard/src/styles/README.md

@@ -3,5 +3,5 @@ Notes:
 - `main.scss` is imported by `main.ts` - the global stylesheet for the app.
 - `bootstrap-base.scss` is also made available to all components using
   `<style lang=scss>` via `vite.config.ts`. It does not impact on the final
-  size of the stylesheets because `bootstra-base.scss` does not produce classes
+  size of the stylesheets because `bootstrap-base.scss` does not produce classes
   only variables and mixins.

dashboard/src/styles/bootstrap.scss

@@ -24,6 +24,7 @@
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/tooltip";
 @import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/pagination";
 
 // Utilities API last to generate classes based on the Sass map in `_utilities.scss`.
 @import "bootstrap/scss/utilities/api";