From db9c7ee5239781e23efb3c99037dd3c4ab075475 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Mon, 7 Apr 2025 20:51:32 +0200
Subject: [PATCH] Refactor Packages component for better readability and
 maintainability

Simplified logic by extracting helper functions and constants, and improved state management with more descriptive variable names. Enhanced URL parameter handling and adjusted watchers to dynamically update based on changes, ensuring cleaner and more modular code.
---
 frontend/src/components/Packages.vue | 391 ++++++++++++---------------
 1 file changed, 170 insertions(+), 221 deletions(-)

diff --git a/frontend/src/components/Packages.vue b/frontend/src/components/Packages.vue
index ab12321..60a0b52 100644
--- a/frontend/src/components/Packages.vue
+++ b/frontend/src/components/Packages.vue
@@ -1,8 +1,7 @@
 <template>
-  <v-sheet class="mt-6" color="transparent" width="100%">
+  <v-sheet :color="TRANSPARENT_COLOR" class="mt-6" width="100%">
     <h5 class="text-h5 mb-4">Packages</h5>
-
-    <v-row :style="mobile ? '' : 'height: 60px'" width="100%">
+    <v-row :style="mobile ? '' : `height: ${ROW_HEIGHT}px`" width="100%">
       <v-col class="v-col-12 v-col-sm-2 v-col-lg-2">
         <v-text-field
           v-model="inputPkgBase"
@@ -11,10 +10,9 @@
           placeholder="Search Pkgbase"
           variant="outlined"></v-text-field>
       </v-col>
-
       <v-col class="v-col-12 v-col-sm-2 v-col-lg-2 mt-n6 mt-sm-0">
         <v-select
-          v-model="selectRepo"
+          v-model="selectedRepo"
           :items="selectRepoItems"
           clearable
           color="primary"
@@ -25,10 +23,9 @@
           single-line
           variant="outlined"></v-select>
       </v-col>
-
       <v-col class="v-col-12 v-col-sm-2 v-col-lg-3 mt-n6 mt-sm-0">
         <v-select
-          v-model="selectStatus"
+          v-model="selectedStatuses"
           :items="selectStatusItems"
           chips
           closable-chips
@@ -41,11 +38,9 @@
           return-object
           variant="outlined"></v-select>
       </v-col>
-
       <v-col class="v-col-12 v-col-sm-2 v-col-lg-2 mt-n6 mt-sm-0">
         <v-switch v-model="enableExact" color="primary" label="Exact search"></v-switch>
       </v-col>
-
       <v-col :class="mobile ? 'mt-n6' : ''" :cols="mobile ? 12 : 'auto'" class="ms-auto">
         <v-pagination
           v-model="page"
@@ -57,7 +52,6 @@
           variant="text"></v-pagination>
       </v-col>
     </v-row>
-
     <v-table class="mt-2 mt-sm-6" style="width: 100%; background: transparent; font-size: 1rem">
       <thead>
         <tr>
@@ -84,7 +78,6 @@
           <th class="text-end" scope="col" style="width: 30px">Info</th>
         </tr>
       </thead>
-
       <tbody id="main-tbody">
         <tr v-if="noPackagesFound">
           No Packages found
@@ -93,16 +86,16 @@
           <tr
             v-for="(pkg, index) in packages"
             :key="index"
-            :style="`background-color: ${getStatus(pkg.status)};`">
+            :style="`background-color: ${getStatusColor(pkg.status)};`">
             <td class="font-weight-bold text-no-wrap">
-              {{ pkg.repo.split('-')[0] }}
+              {{ repoName(pkg.repo) }}
               <v-chip
-                :color="getVersionColor(pkg.repo.split('-')[pkg.repo.split('-').length - 1])"
+                :color="getVersionColor(repoVersion(pkg.repo))"
                 class="ms-2"
                 density="comfortable"
                 label
                 variant="flat">
-                {{ pkg.repo.split('-')[pkg.repo.split('-').length - 1] }}
+                {{ repoVersion(pkg.repo) }}
               </v-chip>
             </td>
             <td class="text-no-wrap">{{ pkg.pkgbase }}</td>
@@ -165,23 +158,31 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, UnwrapRef, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { type Package } from '@/types/Package'
 import { type Packages } from '@/types/Packages'
 import { useDisplay } from 'vuetify'
 
+// Constants
 const OFFSET = 50
+const ROW_HEIGHT = 60
+const TRANSPARENT_COLOR = 'transparent'
 
+// Refs
 const page = ref(0)
 const pagesMax = ref(1)
 const packages = ref<Array<Package>>([])
 const noPackagesFound = ref(false)
 const init = ref(false)
+const inputPkgBase = ref('')
+const selectedRepo = ref<{ title: string; value: string } | undefined>(undefined)
+const selectedStatuses = ref<Array<{ title: string; value: string }>>([])
+const enableExact = ref(false)
 
+// Display
 const { mobile } = useDisplay()
 
-const inputPkgBase = ref('')
-const selectRepo = ref()
+// Select Items
 const selectRepoItems = [
   { title: 'core-x86-64-v2', value: 'core-x86-64-v2' },
   { title: 'extra-x86-64-v2', value: 'extra-x86-64-v2' },
@@ -193,7 +194,7 @@ const selectRepoItems = [
   { title: 'extra-x86-64-v4', value: 'extra-x86-64-v4' },
   { title: 'multilib-x86-64-v4', value: 'multilib-x86-64-v4' }
 ]
-const selectStatus = ref<Array<{ title: string; value: string }>>([])
+
 const selectStatusItems = [
   { title: 'Latest', value: 'latest' },
   { title: 'Built', value: 'built' },
@@ -205,63 +206,142 @@ const selectStatusItems = [
   { title: 'Signing', value: 'signing' },
   { title: 'Unknown', value: 'unknown' }
 ]
-const enableExact = ref(false)
 
-const searchPackages = () => {
-  const offset = OFFSET * (page.value > 0 ? page.value - 1 : page.value)
-  noPackagesFound.value = false
+// Computed properties
+const repoName = (repo: string) => repo.split('-')[0]
+const repoVersion = (repo: string) => repo.split('-')[repo.split('-').length - 1]
 
-  // init params
+// Helper function for getting the color associated with a version
+const getVersionColor = (version: string) => {
+  switch (version) {
+    case 'v2':
+      return '#3498db'
+    case 'v3':
+      return '#f39c12'
+    case 'v4':
+      return '#2ecc71'
+    default:
+      return 'grey'
+  }
+}
+
+// Helper function for getting the status color
+const getStatusColor = (status: Package['status']) => {
+  switch (status) {
+    case 'skipped':
+      return '#373737'
+    case 'queued':
+      return '#5d2f03'
+    case 'latest':
+      return ''
+    case 'failed':
+      return '#4f140f'
+    case 'signing':
+      return '#093372'
+    case 'building':
+      return '#084f46'
+    case 'unknown':
+      return '#191919'
+    default:
+      return ''
+  }
+}
+
+const getLto = (lto: Package['lto']) => {
+  switch (lto) {
+    case 'enabled':
+      return {
+        title: 'built with LTO',
+        class: 'fa fa-check fa-lg text-success'
+      }
+    case 'unknown':
+      return {
+        title: 'not built with LTO yet',
+        class: 'fa fa-hourglass-o fa-lg text-grey'
+      }
+    case 'disabled':
+      return {
+        title: 'LTO explicitly disabled',
+        class: 'fa fa-times fa-lg text-red'
+      }
+    case 'auto_disabled':
+      return {
+        title: 'LTO automatically disabled',
+        class: 'fa fa-times-circle-o fa-lg text-amber'
+      }
+    default:
+      return { title: '', class: '' }
+  }
+}
+
+const getDs = (ds: Package['debug_symbols']) => {
+  switch (ds) {
+    case 'available':
+      return {
+        title: 'Debug symbols available',
+        class: 'fa fa-check fa-lg text-success'
+      }
+    case 'unknown':
+      return {
+        title: 'Not built yet',
+        class: 'fa fa-hourglass-o fa-lg text-grey'
+      }
+    case 'not_available':
+      return {
+        title: 'Not built with debug symbols',
+        class: 'fa fa-times fa-lg text-red'
+      }
+    default:
+      return { title: '', class: '' }
+  }
+}
+
+// Helper function for updating URL params dynamically
+const updateUrlParams = () => {
   const params = new URLSearchParams()
-
-  // set params
-  if (offset > 0) {
-    url.searchParams.set('offset', offset.toString())
-  } else {
-    url.searchParams.delete('offset')
+  if (page.value > 0) {
+    params.set('offset', (page.value * OFFSET).toString())
   }
   if (inputPkgBase.value) {
     params.set('pkgbase', inputPkgBase.value.toLowerCase())
-    url.searchParams.set('pkgbase', inputPkgBase.value.toLowerCase())
-  } else {
-    params.delete('pkgbase')
-    url.searchParams.delete('pkgbase')
   }
-  if (selectRepo.value) {
-    params.set('repo', selectRepo.value.value)
-    url.searchParams.set('repo', selectRepo.value.value)
-  } else {
-    params.delete('repo')
-    url.searchParams.delete('repo')
+  if (selectedRepo.value) {
+    params.set('repo', selectedRepo.value.value)
   }
-  if (selectStatus.value.length > 0) {
-    selectStatus.value.forEach((status) => {
-      if (!params.has('status', status.value)) {
-        params.append('status', status.value)
-      }
-      if (!url.searchParams.has('status', status.value)) {
-        url.searchParams.append('status', status.value)
-      }
+  if (selectedStatuses.value.length > 0) {
+    selectedStatuses.value.forEach((status) => {
+      params.append('status', status.value)
     })
-  } else {
-    params.delete('status')
-    url.searchParams.delete('status')
   }
   if (enableExact.value) {
     params.set('exact', '')
-    url.searchParams.set('exact', '')
-  } else {
-    params.delete('exact')
-    url.searchParams.delete('exact')
   }
+  window.history.pushState(null, '', `${window.location.pathname}?${params}`)
+}
 
-  // push params to url
-  window.history.pushState(null, '', url.toString())
-
-  // add limit to query params
+const searchPackages = () => {
+  const offset = OFFSET * page.value
+  noPackagesFound.value = false
+  const params = new URLSearchParams()
+  if (page.value > 0) {
+    params.set('offset', offset.toString())
+  }
+  if (inputPkgBase.value) {
+    params.set('pkgbase', inputPkgBase.value.toLowerCase())
+  }
+  if (selectedRepo.value) {
+    params.set('repo', selectedRepo.value.value)
+  }
+  if (selectedStatuses.value.length > 0) {
+    selectedStatuses.value.forEach((status) => {
+      params.append('status', status.value)
+    })
+  }
+  if (enableExact.value) {
+    params.set('exact', '')
+  }
   params.set('limit', OFFSET.toString())
   params.set('offset', offset.toString())
-
   fetch('https://api.alhp.dev/packages?' + params, {
     method: 'GET'
   })
@@ -276,174 +356,43 @@ const searchPackages = () => {
     })
     .then((json: Packages) => {
       if (!json) return
-
-      if (pagesMax.value !== json.total) {
-        pagesMax.value = json.total / OFFSET + 1
-      }
-
+      pagesMax.value = json.total / OFFSET + 1
       packages.value = json.packages
     })
     .catch((error) => {
       console.error(error)
     })
 }
-
-const getVersionColor = (version: string) => {
-  let color = 'grey'
-  switch (version) {
-    case 'v2':
-      color = '#3498db'
-      break
-    case 'v3':
-      color = '#f39c12'
-      break
-    case 'v4':
-      color = '#2ecc71'
-      break
-  }
-  return color
-}
-
-const getStatus = (status: UnwrapRef<Package['status']>) => {
-  let color = ''
-  switch (status) {
-    case 'skipped':
-      color = '#373737'
-      break
-    case 'queued':
-      color = '#5d2f03'
-      break
-    case 'latest':
-      color = ''
-      break
-    case 'failed':
-      color = '#4f140f'
-      break
-    case 'signing':
-      color = '#093372'
-      break
-    case 'building':
-      color = '#084f46'
-      break
-    case 'unknown':
-      color = '#191919'
-      break
-  }
-  return color
-}
-
-const getLto = (lto: UnwrapRef<Package['lto']>) => {
-  let icon = {
-    title: '',
-    class: ''
-  }
-  switch (lto) {
-    case 'enabled':
-      icon = {
-        title: 'built with LTO',
-        class: 'fa fa-check fa-lg text-success'
-      }
-      break
-    case 'unknown':
-      icon = {
-        title: 'not built with LTO yet',
-        class: 'fa fa-hourglass-o fa-lg text-grey'
-      }
-      break
-    case 'disabled':
-      icon = {
-        title: 'LTO explicitly disabled',
-        class: 'fa fa-times fa-lg text-red'
-      }
-      break
-    case 'auto_disabled':
-      icon = {
-        title: 'LTO automatically disabled',
-        class: 'fa fa-times-circle-o fa-lg text-amber'
-      }
-      break
-  }
-  return icon
-}
-
-const getDs = (ds: UnwrapRef<Package['debug_symbols']>) => {
-  let icon = {
-    title: '',
-    class: ''
-  }
-  switch (ds) {
-    case 'available':
-      icon = {
-        title: 'Debug symbols available',
-        class: 'fa fa-check fa-lg text-success'
-      }
-      break
-    case 'unknown':
-      icon = {
-        title: 'Not built yet',
-        class: 'fa fa-hourglass-o fa-lg text-grey'
-      }
-      break
-    case 'not_available':
-      icon = {
-        title: 'Not built with debug symbols',
-        class: 'fa fa-times fa-lg text-red'
-      }
-      break
-  }
-  return icon
-}
-
-const url = new URL(window.location.href)
-
-window.addEventListener('load', () => {
-  init.value = true
-
-  url.searchParams.has('offset')
-    ? (page.value = parseInt(url.searchParams.get('offset') || '0'))
-    : (page.value = 0)
-  inputPkgBase.value = url.searchParams.has('pkgbase')
-    ? (url.searchParams.get('pkgbase') || '').toLowerCase()
-    : ''
-  url.searchParams.has('repo')
-    ? (selectRepo.value = {
-        value: url.searchParams.get('repo'),
-        title: url.searchParams.get('repo')
-      })
-    : undefined
-  url.searchParams.has('status')
-    ? url.searchParams.getAll('status').forEach((status) => {
-        selectStatus.value.push({ value: status, title: status.toLocaleUpperCase() })
-      })
-    : undefined
-  enableExact.value = url.searchParams.has('exact')
-
-  searchPackages()
-  init.value = false
-})
-
-watch(
-  [
-    () => enableExact.value,
-    () => inputPkgBase.value,
-    () => selectRepo.value,
-    () => selectStatus.value
-  ],
-  () => {
-    page.value = 0
-
-    searchPackages()
-  }
-)
-
-watch(
-  () => page.value,
-  () => {
-    searchPackages()
-  }
-)
-
+// Properly set the initial values from URL params
 onMounted(() => {
+  const urlParams = new URLSearchParams(window.location.search)
+  page.value = urlParams.has('offset')
+    ? Math.floor(parseInt(urlParams.get('offset') || '0') / OFFSET)
+    : 0
+  inputPkgBase.value = urlParams.get('pkgbase') || ''
+  const repoValue = urlParams.get('repo')
+  if (repoValue) {
+    selectedRepo.value = { title: repoValue, value: repoValue }
+  } else {
+    selectedRepo.value = undefined
+  }
+  const statuses = urlParams.getAll('status')
+  selectedStatuses.value = statuses.map((status) => ({
+    title: status.toUpperCase(),
+    value: status
+  }))
+  enableExact.value = urlParams.has('exact')
   searchPackages()
 })
+
+// Watchers
+watch(
+  [page, inputPkgBase, selectedRepo, selectedStatuses, enableExact],
+  () => {
+    if (init.value) return
+    updateUrlParams()
+    searchPackages()
+  },
+  { deep: true }
+)
 </script>