refactor of filtering code

frontend/src/components/Packages.vue

@@ -16,9 +16,10 @@
         <v-select
           v-model="selectRepo"
           :items="selectRepoItems"
+          clearable
           color="primary"
           item-title="title"
-          item-value="value" clearable
+          item-value="value"
           placeholder="Any Repo"
           return-object
           single-line
@@ -29,20 +30,20 @@
         <v-select
           v-model="selectStatus"
           :items="selectStatusItems"
+          chips
+          closable-chips
           color="primary"
+          density="default"
           item-title="title"
           item-value="value"
-          density="default"
           multiple
-          closable-chips
           placeholder="Any Status"
           return-object
-          chips
           variant="outlined"></v-select>
       </v-col>
 
       <v-col class="v-col-12 v-col-sm-4 v-col-lg-2 mt-n6 mt-sm-0">
-        <v-switch v-model="enableExact" label="Exact search" color="primary"></v-switch>
+        <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">
@@ -171,6 +172,12 @@ import { useDisplay } from 'vuetify'
 
 const OFFSET = 50
 
+const page = ref(0)
+const pagesMax = ref(1)
+const packages = ref<Array<Package>>([])
+const noPackagesFound = ref(false)
+const init = ref(false)
+
 const { mobile } = useDisplay()
 
 const inputPkgBase = ref('')
@@ -186,7 +193,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 selectStatus = ref<Array<{ title: string; value: string }>>([])
 const selectStatusItems = [
   { title: 'Latest', value: 'latest' },
   { title: 'Built', value: 'built' },
@@ -200,33 +207,62 @@ const selectStatusItems = [
 ]
 const enableExact = ref(false)
 
-const page = ref(0)
-const pagesMax = ref(1)
-const packages = ref<Array<Package>>([])
-const noPackagesFound = ref(false)
-
 const searchPackages = () => {
   const offset = OFFSET * (page.value > 0 ? page.value - 1 : page.value)
   noPackagesFound.value = false
 
-  const params = new URLSearchParams({
+  // init params
-    limit: OFFSET.toString(),
+  const params = new URLSearchParams()
-    offset: offset.toString()
-  })
 
-  if (inputPkgBase.value) params.append('pkgbase', inputPkgBase.value.toLowerCase())
+  // set params
-  if (selectRepo.value) params.append('repo', selectRepo.value.value)
+  if (offset > 0) {
+    url.searchParams.set('offset', offset.toString())
+  } else {
+    url.searchParams.delete('offset')
+  }
+  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 (selectStatus.value.length > 0) {
-    selectStatus.value.forEach((status) => params.append('status', status.value))
+    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)
+      }
+    })
   } else {
     params.delete('status')
+    url.searchParams.delete('status')
   }
   if (enableExact.value) {
-    params.append('exact', '')
+    params.set('exact', '')
+    url.searchParams.set('exact', '')
   } else {
     params.delete('exact')
+    url.searchParams.delete('exact')
   }
 
+  // push params to url
+  window.history.pushState(null, '', url.toString())
+  console.log(url.toString())
+
+  // add limit to query params
+  params.set('limit', OFFSET.toString())
+  params.set('offset', offset.toString())
+
   fetch('https://api.alhp.dev/packages?' + params, {
     method: 'GET'
   })
@@ -362,88 +398,48 @@ const getDs = (ds: UnwrapRef<Package['debug_symbols']>) => {
 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 = parseInt(url.searchParams.get('offset') || '0'))
-    : page.value = 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')}
+    ? (selectRepo.value = {
+        value: url.searchParams.get('repo'),
+        title: url.searchParams.get('repo')
+      })
     : undefined
   url.searchParams.has('status')
-    ? url.searchParams.getAll('status').forEach(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,
   () => {
-    url.searchParams.set('offset', (OFFSET * (page.value > 0 ? page.value - 1 : page.value)).toString())
-    window.history.pushState(null, '', url.toString())
-    searchPackages()
-  }
-)
-
-watch(() => enableExact.value, () => {
-  if (enableExact.value) {
-    url.searchParams.set('exact', '')
-  } else {
-    url.searchParams.delete('exact', '')
-  }
-  window.history.pushState(null, '', url.toString())
-  searchPackages()
-})
-
-// @ts-ignore
-let delayTimer = null
-watch(
-  () => inputPkgBase.value,
-  () => {
-    // @ts-ignore
-    if (delayTimer) clearTimeout(delayTimer)
-    delayTimer = setTimeout(function () {
-      if (inputPkgBase.value) {
-        url.searchParams.set('pkgbase', inputPkgBase.value.toLowerCase())
-      } else {
-        url.searchParams.delete('pkgbase')
-      }
-      window.history.pushState(null, '', url.toString())
-      searchPackages()
-    }, 250)
-  }
-)
-
-watch(
-  () => selectRepo.value,
-  () => {
-    if (selectRepo.value) {
-      url.searchParams.set('repo', selectRepo.value.value)
-    } else {
-      url.searchParams.delete('repo')
-    }
-    window.history.pushState(null, '', url.toString())
-
-    searchPackages()
-  }
-)
-
-watch(
-  () => selectStatus.value,
-  () => {
-    if (selectStatus.value.length > 0) {
-      selectStatus.value.forEach((status) => {
-        url.searchParams.set('status', status.value)
-      })
-    } else {
-      url.searchParams.delete('status')
-    }
-    window.history.pushState(null, '', url.toString())
     searchPackages()
   }
 )