From d851b76083c4bb609bf371bc5728a2ff034b5392 Mon Sep 17 00:00:00 2001
From: David Juhasz <djjuhasz@gmail.com>
Date: Thu, 24 Oct 2024 12:14:56 -0700
Subject: [PATCH] Make package status filter a component

---
 .../src/components/PackageListFilters.vue     | 26 +++++++++++++++++++
 dashboard/src/pages/packages/index.vue        | 22 +++-------------
 2 files changed, 29 insertions(+), 19 deletions(-)
 create mode 100644 dashboard/src/components/PackageListFilters.vue

diff --git a/dashboard/src/components/PackageListFilters.vue b/dashboard/src/components/PackageListFilters.vue
new file mode 100644
index 00000000..3b399fa8
--- /dev/null
+++ b/dashboard/src/components/PackageListFilters.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { usePackageStore } from "@/stores/package";
+import { PackageListStatusEnum } from "@/openapi-generator";
+
+const packageStore = usePackageStore();
+</script>
+
+<template>
+  <div class="d-flex flex-wrap gap-3 mb-3 p-3 border bg-light">
+    <h3 class="mb-0 pe-3 border-end">Filters</h3>
+    <div class="d-flex gap-2">
+      <label for="filter-status" class="align-self-center">Status</label>
+      <select
+        id="filter-status"
+        v-model="packageStore.filters.status"
+        @change="packageStore.fetchPackages(1)"
+        class="form-select"
+      >
+        <option value="">any</option>
+        <option v-for="item of PackageListStatusEnum" :value="item">
+          {{ item }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
diff --git a/dashboard/src/pages/packages/index.vue b/dashboard/src/pages/packages/index.vue
index 0a41de27..d9c2e068 100644
--- a/dashboard/src/pages/packages/index.vue
+++ b/dashboard/src/pages/packages/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PackageListStatusEnum } from "@/openapi-generator";
+import PackageListFilters from "@/components/PackageListFilters.vue";
 import PackageListLegend from "@/components/PackageListLegend.vue";
 import PageLoadingAlert from "@/components/PageLoadingAlert.vue";
 import StatusBadge from "@/components/StatusBadge.vue";
@@ -53,26 +53,10 @@ const toggleLegend = () => {
       {{ packageStore.page.total }}
     </div>
 
-    <div class="d-flex flex-wrap gap-3 mb-3 p-3 border bg-light">
-      <h3 class="mb-0 pe-3 border-end">Filters</h3>
-      <div class="d-flex gap-2">
-        <label for="filter-status" class="align-self-center">Status</label>
-        <select
-          id="filter-status"
-          v-model="packageStore.filters.status"
-          @change="packageStore.fetchPackages(1)"
-          class="form-select"
-        >
-          <option value="">any</option>
-          <option v-for="item of PackageListStatusEnum" :value="item">
-            {{ item }}
-          </option>
-        </select>
-      </div>
-    </div>
-
+    <PackageListFilters />
     <PageLoadingAlert :execute="execute" :error="error" />
     <PackageListLegend v-model="showLegend" />
+
     <div class="table-responsive mb-3">
       <table class="table table-bordered mb-0">
         <thead>