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.
2025-05-04 23:32:51 +02:00
parent 3886c7bcbd
commit 7445919003
7 changed files with 45 additions and 37 deletions
--- 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']
  }
 }
--- 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: () => []
  }
--- 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() })
+      }
    }
  }
 }
--- 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;
--- 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 {
--- 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'
--- 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')) {