From 7445919003d23cca394b83a14a5834f7c739fea3 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Sun, 4 May 2025 23:32:51 +0200
Subject: [PATCH] Refactor package types and improve filter handling

Switch to API schema-defined types for package properties, replacing custom typings for consistency. Streamline filter initialization, validation, and URL parameter handling, while adding safeguards for null values. Simplify components by removing unused exports and types.
---
 frontend/components.d.ts                      |  2 -
 .../CurrentlyBuilding/QueuedPackagesList.vue  |  4 +-
 .../components/Packages/PackageFilters.vue    |  9 +++-
 .../src/components/Packages/PackageTable.vue  | 12 ++---
 .../composables/Packages/usePackageDisplay.ts |  8 ++--
 frontend/src/stores/index.ts                  |  3 --
 frontend/src/stores/packagesStore.ts          | 44 +++++++++++--------
 7 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index e20a7c7..8eddc1b 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -8,7 +8,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    ApiExample: typeof import('./src/components/ApiExample.vue')['default']
     BuildServerStats: typeof import('./src/components/BuildServerStats.vue')['default']
     BuildStats: typeof import('./src/components/MainNav/BuildStats.vue')['default']
     CurrentlyBuilding: typeof import('./src/components/CurrentlyBuilding.vue')['default']
@@ -19,6 +18,5 @@ declare module 'vue' {
     QueuedPackagesList: typeof import('./src/components/CurrentlyBuilding/QueuedPackagesList.vue')['default']
     StatItem: typeof import('./src/components/MainNav/BuildStats/StatItem.vue')['default']
     StatsListSection: typeof import('./src/components/MainNav/BuildStats/StatsListSection.vue')['default']
-    StoreExample: typeof import('./src/components/StoreExample.vue')['default']
   }
 }
diff --git a/frontend/src/components/CurrentlyBuilding/QueuedPackagesList.vue b/frontend/src/components/CurrentlyBuilding/QueuedPackagesList.vue
index 05123f6..49ebe06 100644
--- a/frontend/src/components/CurrentlyBuilding/QueuedPackagesList.vue
+++ b/frontend/src/components/CurrentlyBuilding/QueuedPackagesList.vue
@@ -39,11 +39,11 @@
 
 <script lang="ts" setup>
 import { defineProps } from 'vue'
-import type { Package } from '@/types/Package'
+import { components } from '@/api'
 
 defineProps({
   packages: {
-    type: Array<Package>,
+    type: Array<components['schemas']['Package']>,
     required: true,
     default: () => []
   }
diff --git a/frontend/src/components/Packages/PackageFilters.vue b/frontend/src/components/Packages/PackageFilters.vue
index f05864c..8acfa3d 100644
--- a/frontend/src/components/Packages/PackageFilters.vue
+++ b/frontend/src/components/Packages/PackageFilters.vue
@@ -53,6 +53,7 @@ import { useDisplay } from 'vuetify'
 import { REPO_ITEMS, ROW_HEIGHT, STATUS_ITEMS } from '@/config/constants'
 import { usePackagesStore } from '@/stores'
 import { computed, onMounted, ref, watch } from 'vue'
+import { components } from '@/api'
 
 const { mobile } = useDisplay()
 const packagesStore = usePackagesStore()
@@ -77,7 +78,9 @@ const updateFilter = (pageVal?: number) => {
   packagesStore.setFilters(
     {
       exact: exact.value,
-      status: status.value?.map((state) => state.value),
+      status: status.value.map(
+        (state) => state.value as components['schemas']['Package']['status']
+      ),
       pkgbase: pkgbase.value !== null ? pkgbase.value : undefined,
       repo: repo.value
     },
@@ -92,7 +95,9 @@ const initFilters = () => {
   exact.value = packagesStore.state.filters.exact
   if (packagesStore.state.filters.status) {
     for (const state of packagesStore.state.filters.status) {
-      status.value.push({ title: state.toUpperCase(), value: state.toLowerCase() })
+      if (state) {
+        status.value.push({ title: state.toUpperCase(), value: state.toLowerCase() })
+      }
     }
   }
 }
diff --git a/frontend/src/components/Packages/PackageTable.vue b/frontend/src/components/Packages/PackageTable.vue
index c19ebdc..26f48ef 100644
--- a/frontend/src/components/Packages/PackageTable.vue
+++ b/frontend/src/components/Packages/PackageTable.vue
@@ -26,7 +26,7 @@
       </tr>
     </thead>
     <tbody id="main-tbody">
-      <tr v-if="noResults">
+      <tr v-if="packagesStore.state.packages.length === 0">
         No Packages found
       </tr>
       <template v-else>
@@ -36,17 +36,17 @@
           :style="`background-color: ${getStatusColor(pkg.status)};`">
           <td class="font-weight-bold text-no-wrap">
             <v-chip
-              :color="getVersionColor(repoVersion(pkg.repo))"
+              :color="getVersionColor(repoVersion(pkg.repo || ''))"
               class="me-2"
               density="comfortable"
               label
               variant="flat">
-              {{ repoVersion(pkg.repo) }}
+              {{ repoVersion(pkg.repo || '') }}
             </v-chip>
-            {{ repoName(pkg.repo) }}
+            {{ repoName(pkg.repo || '') }}
           </td>
           <td class="text-no-wrap">{{ pkg.pkgbase }}</td>
-          <td>{{ pkg.status.toLocaleUpperCase() }}</td>
+          <td>{{ (pkg.status || '').toLocaleUpperCase() }}</td>
           <td>{{ pkg.skip_reason || '' }}</td>
           <td><i :class="getLto(pkg.lto).class" :title="getLto(pkg.lto).title"></i></td>
           <td>
@@ -57,7 +57,7 @@
           <td class="d-flex align-center" style="gap: 3px">
             <a
               v-if="pkg.status === 'failed'"
-              :href="`https://alhp.dev/logs/${pkg.repo.slice(pkg.repo.indexOf('-') + 1)}/${pkg.pkgbase}.log`"
+              :href="`https://alhp.dev/logs/${(pkg.repo || '').slice((pkg.repo || '').indexOf('-') + 1)}/${pkg.pkgbase}.log`"
               class="text-decoration-none"
               style="
                 color: darkgrey;
diff --git a/frontend/src/composables/Packages/usePackageDisplay.ts b/frontend/src/composables/Packages/usePackageDisplay.ts
index e5d90e2..6e8f33b 100644
--- a/frontend/src/composables/Packages/usePackageDisplay.ts
+++ b/frontend/src/composables/Packages/usePackageDisplay.ts
@@ -1,4 +1,4 @@
-import { type Package } from '@/types/Package'
+import { components } from '@/api'
 
 export function usePackageDisplay() {
   const repoName = (repo: string) => repo.split('-')[0]
@@ -17,7 +17,7 @@ export function usePackageDisplay() {
     }
   }
 
-  const getStatusColor = (status: Package['status']) => {
+  const getStatusColor = (status: components['schemas']['Package']['status']) => {
     switch (status) {
       case 'skipped':
         return '#373737'
@@ -38,7 +38,7 @@ export function usePackageDisplay() {
     }
   }
 
-  const getLto = (lto: Package['lto']) => {
+  const getLto = (lto: components['schemas']['Package']['lto']) => {
     switch (lto) {
       case 'enabled':
         return {
@@ -65,7 +65,7 @@ export function usePackageDisplay() {
     }
   }
 
-  const getDs = (ds: Package['debug_symbols']) => {
+  const getDs = (ds: components['schemas']['Package']['debug_symbols']) => {
     switch (ds) {
       case 'available':
         return {
diff --git a/frontend/src/stores/index.ts b/frontend/src/stores/index.ts
index 33e595d..284f04f 100644
--- a/frontend/src/stores/index.ts
+++ b/frontend/src/stores/index.ts
@@ -1,6 +1,3 @@
 // Export all stores
 export { useStatsStore } from './statsStore'
 export { usePackagesStore } from './packagesStore'
-
-// Export types
-export type { PackageFilters, PaginationOptions } from './packagesStore'
diff --git a/frontend/src/stores/packagesStore.ts b/frontend/src/stores/packagesStore.ts
index 8ab8604..411b63f 100644
--- a/frontend/src/stores/packagesStore.ts
+++ b/frontend/src/stores/packagesStore.ts
@@ -2,10 +2,10 @@ import { defineStore } from 'pinia'
 import { reactive } from 'vue'
 import { components, getPackages } from '@/api'
 
-export interface PackageFilters {
+interface PackageFilters {
   status?: components['schemas']['Package']['status'][]
   pkgbase?: components['schemas']['Package']['pkgbase']
-  exact?: boolean | undefined
+  exact?: boolean
   repo?: components['schemas']['Package']['repo']
 }
 
@@ -20,10 +20,10 @@ export const usePackagesStore = defineStore('packages', () => {
     error: null as string | null,
     lastUpdated: Date.now(),
     filters: {
-      status: undefined as components['schemas']['Package']['status'][] | undefined,
-      pkgbase: undefined as components['schemas']['Package']['pkgbase'] | undefined,
-      exact: undefined as boolean | undefined,
-      repo: undefined as components['schemas']['Package']['repo'] | undefined
+      status: undefined,
+      pkgbase: undefined,
+      exact: undefined,
+      repo: undefined
     } as PackageFilters
   })
 
@@ -36,20 +36,21 @@ export const usePackagesStore = defineStore('packages', () => {
       initFromUrl()
     }
 
-    const filter = {}
+    const filter: PackageFilters = {}
     if (state.filters.status && state.filters.status.length > 0) {
-      filter['status'] = state.filters.status
+      filter.status = state.filters.status
     }
     if (state.filters.pkgbase) {
-      filter['pkgbase'] = state.filters.pkgbase
+      filter.pkgbase = state.filters.pkgbase
     }
     if (state.filters.exact === true) {
-      filter['exact'] = ''
+      filter.exact = state.filters.exact
     }
     if (state.filters.repo) {
-      filter['repo'] = state.filters.repo
+      filter.repo = state.filters.repo
     }
 
+    // @ts-ignore
     getPackages({
       limit: state.limit,
       offset: state.offset,
@@ -139,14 +140,16 @@ export const usePackagesStore = defineStore('packages', () => {
     const params = new URLSearchParams()
 
     let page = state.offset / state.limit + 1
-    // Only add page parameter if it's not the first page
+    // Only add a page parameter if it's not the first page
     if (page > 1) {
       params.set('page', page.toString())
     }
 
     if (state.filters.status && state.filters.status.length > 0) {
-      state.filters.status.forEach((status) => {
-        params.append('status', status)
+      state.filters.status.forEach((status: components['schemas']['Package']['status']) => {
+        if (status) {
+          params.append('status', status)
+        }
       })
     }
 
@@ -179,19 +182,24 @@ export const usePackagesStore = defineStore('packages', () => {
       const pageParam = urlParams.get('page') || '1'
       const parsedPage = parseInt(pageParam, 10)
       const page = !isNaN(parsedPage) && parsedPage > 0 ? parsedPage : 1
-      state.offset = (page - 1) * state.limitq
+      state.offset = (page - 1) * state.limit
     }
 
     if (urlParams.has('status')) {
-      state.filters.status = urlParams.getAll('status')
+      const status = urlParams.getAll('status')
+      state.filters.status = status as components['schemas']['Package']['status'][]
     }
 
     if (urlParams.has('pkgbase')) {
-      state.filters.pkgbase = urlParams.get('pkgbase')
+      const pkgbase = urlParams.get('pkgbase')
+      if (pkgbase === null) return
+      state.filters.pkgbase = pkgbase as components['schemas']['Package']['pkgbase']
     }
 
     if (urlParams.has('repo')) {
-      state.filters.repo = urlParams.get('repo')
+      const repo = urlParams.get('repo')
+      if (repo === null) return
+      state.filters.repo = repo as components['schemas']['Package']['repo']
     }
 
     if (urlParams.has('exact')) {