Add a package list status filter

Fixes #989.

Add a package status filter select box to the Dashboard package list
page to allow filtering packages by status.

Changes:
- Add a "filters" section to the package list page
- Add a "status" selector to the filters section
- Filter package list results when the "status" filter is changed

dashboard/src/pages/packages/index.vue

@@ -15,6 +15,7 @@ import IconSkipEndFill from "~icons/bi/skip-end-fill";
 import IconSkipStartFill from "~icons/bi/skip-start-fill";
 import IconCaretRightFill from "~icons/bi/caret-right-fill";
 import IconCaretLeftFill from "~icons/bi/caret-left-fill";
+import { PackageListStatusEnum } from "@/openapi-generator";
 
 const authStore = useAuthStore();
 const layoutStore = useLayoutStore();
@@ -38,6 +39,19 @@ const toggleLegend = () => {
   showLegend = !showLegend;
   if (tooltip) tooltip.hide();
 };
+
+const statusFilter = $ref("");
+function changeSelectFilter(event: Event) {
+  if (event) {
+    let v = (event.target as HTMLOptionElement).value;
+    let status = undefined as PackageListStatusEnum | undefined;
+    if (v != "") {
+      status = v as PackageListStatusEnum;
+    }
+    packageStore.filters.status = status;
+    packageStore.fetchPackages(1);
+  }
+}
 </script>
 
 <template>
@@ -46,12 +60,32 @@ const toggleLegend = () => {
       <IconBundleLine class="me-3 text-dark" />Packages
     </h1>
 
-    <div class="text-muted mb-3">
-      Showing {{ packageStore.page.offset + 1 }} -
+    <div class="text-muted mb-3 text-center">
+      Showing packages {{ packageStore.page.offset + 1 }} -
       {{ packageStore.lastResultOnPage }} of
       {{ packageStore.page.total }}
     </div>
 
+    <div class="row mx-0 align-items-left bg-secondary border-secondary">
+      <div class="col-auto"><h3 class="text-white my-2">Filters</h3></div>
+    </div>
+    <div class="row mx-0 align-items-left border p-2 mb-3">
+      <div class="col-auto">
+        <label for="filter-status" class="form-label mb-0"> Status </label>
+        <select
+          id="filter-status"
+          v-model="statusFilter"
+          @change="changeSelectFilter"
+          class="form-select border rounded-2"
+        >
+          <option value="">any</option>
+          <option v-for="item of PackageListStatusEnum" :value="item">
+            {{ item }}
+          </option>
+        </select>
+      </div>
+    </div>
+
     <PageLoadingAlert :execute="execute" :error="error" />
     <PackageListLegend v-model="showLegend" />
     <div class="table-responsive mb-3">

dashboard/src/stores/package.ts

@@ -1,5 +1,8 @@
 import { api, client } from "@/client";
-import { MonitorEventEventTypeEnum } from "@/openapi-generator";
+import {
+  MonitorEventEventTypeEnum,
+  PackageListStatusEnum,
+} from "@/openapi-generator";
 import { useLayoutStore } from "@/stores/layout";
 import router from "@/router";
 import { defineStore, acceptHMRUpdate } from "pinia";
@@ -44,6 +47,10 @@ export const usePackageStore = defineStore("package", {
     ui: {
       download: new UIRequest(),
     },
+
+    filters: {
+      status: undefined as PackageListStatusEnum | undefined,
+    },
   }),
   getters: {
     isPending(): boolean {
@@ -164,6 +171,7 @@ export const usePackageStore = defineStore("package", {
       const resp = await client.package.packageList({
         offset: page > 1 ? (page - 1) * this.page.limit : undefined,
         limit: this.page?.limit || undefined,
+        status: this.filters.status,
       });
       this.packages = resp.items;
       this.page = resp.page;

dashboard/src/styles/bootstrap-base.scss

@@ -7,9 +7,6 @@ $offcanvas-horizontal-width: 300px;
 $offcanvas-padding-x: 0;
 $headings-color: $primary;
 $headings-font-weight: 400;
-$border-radius: 0;
-$border-radius-sm: 0;
-$border-radius-lg: 0;
 
 // Custom variables.
 $header-height: 64px;

dashboard/src/styles/bootstrap.scss

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