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

@@ -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']
   }
 }

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: () => []
   }

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() })
+      }
     }
   }
 }

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;

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 {

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'

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,
+      status: undefined,
-      pkgbase: undefined as components['schemas']['Package']['pkgbase'] | undefined,
+      pkgbase: undefined,
-      exact: undefined as boolean | undefined,
+      exact: undefined,
-      repo: undefined as components['schemas']['Package']['repo'] | 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) => {
+      state.filters.status.forEach((status: components['schemas']['Package']['status']) => {
-        params.append('status', 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')) {