Updated filter options

frontend/src/components/Packages.vue

@@ -18,21 +18,26 @@
           :items="selectRepoItems"
           color="primary"
           item-title="title"
-          item-value="value"
+          item-value="value" clearable
+          placeholder="Any Repo"
           return-object
           single-line
           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-col class="v-col-12 v-col-sm-4 v-col-lg-3 mt-n6 mt-sm-0">
         <v-select
           v-model="selectStatus"
           :items="selectStatusItems"
           color="primary"
           item-title="title"
           item-value="value"
+          density="default"
+          multiple
+          closable-chips
+          placeholder="Any Status"
           return-object
-          single-line
+          chips
           variant="outlined"></v-select>
       </v-col>
 
@@ -44,7 +49,7 @@
         <v-pagination
           v-model="page"
           :length="pagesMax"
-          :total-visible="mobile ? undefined : 6"
+          :total-visible="mobile ? undefined : 4"
           active-color="primary"
           density="comfortable"
           start="1"
@@ -164,12 +169,13 @@ import { type Package } from '@/types/Package'
 import { type Packages } from '@/types/Packages'
 import { useDisplay } from 'vuetify'
 
+const OFFSET = 50
+
 const { mobile } = useDisplay()
 
 const inputPkgBase = ref('')
-const selectRepo = ref({ title: 'Repository (any)', value: 'any' })
+const selectRepo = ref()
 const selectRepoItems = [
-  { title: 'Repository (any)', value: 'any' },
   { title: 'core-x86-64-v2', value: 'core-x86-64-v2' },
   { title: 'extra-x86-64-v2', value: 'extra-x86-64-v2' },
   { title: 'multilib-x86-64-v2', value: 'multilib-x86-64-v2' },
@@ -180,9 +186,8 @@ 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({ title: 'Status (any)', value: 'any' })
+const selectStatus = ref<Array<{title: string, value: string}>>([])
 const selectStatusItems = [
-  { title: 'Status (any)', value: 'any' },
   { title: 'Latest', value: 'latest' },
   { title: 'Built', value: 'built' },
   { title: 'Failed', value: 'failed' },
@@ -195,23 +200,27 @@ const selectStatusItems = [
 ]
 const enableExact = ref(false)
 
-const page = ref(1)
+const page = ref(0)
 const pagesMax = ref(1)
 const packages = ref<Array<Package>>([])
 const noPackagesFound = ref(false)
 
-const searchPackages = (offset: number) => {
+const searchPackages = () => {
+  const offset = OFFSET * (page.value > 0 ? page.value - 1 : page.value)
   noPackagesFound.value = false
 
   const params = new URLSearchParams({
-    limit: '50',
+    limit: OFFSET.toString(),
     offset: offset.toString()
   })
 
   if (inputPkgBase.value) params.append('pkgbase', inputPkgBase.value.toLowerCase())
-  if (selectRepo.value.value !== 'any') params.append('repo', selectRepo.value.value)
-  if (selectStatus.value.value !== 'any') params.append('status', selectStatus.value.value)
-
+  if (selectRepo.value) params.append('repo', selectRepo.value.value)
+  if (selectStatus.value.length > 0) {
+    selectStatus.value.forEach((status) => params.append('status', status.value))
+  } else {
+    params.delete('status')
+  }
   if (enableExact.value) {
     params.append('exact', '')
   } else {
@@ -234,7 +243,7 @@ const searchPackages = (offset: number) => {
       if (!json) return
 
       if (pagesMax.value !== json.total) {
-        pagesMax.value = json.total / 50 + 1
+        pagesMax.value = json.total / OFFSET + 1
       }
 
       packages.value = json.packages
@@ -353,37 +362,30 @@ const getDs = (ds: UnwrapRef<Package['debug_symbols']>) => {
 const url = new URL(window.location.href)
 
 window.addEventListener('load', () => {
+  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()
     : ''
-  selectRepo.value = {
-    value: url.searchParams.has('repo')
-      ? (url.searchParams.get('repo') || '').toLowerCase()
-      : 'any',
-    title: url.searchParams.has('repo')
-      ? (url.searchParams.get('repo') || '').toLowerCase()
-      : 'Repository (any)'
-  }
-  selectStatus.value = {
-    value: url.searchParams.has('status')
-      ? (url.searchParams.get('status') || '').toLowerCase()
-      : 'any',
-    title: url.searchParams.has('status')
-      ? (url.searchParams.get('status') || '').substring(0, 1).toLocaleUpperCase() +
-        (url.searchParams.get('status') || '')
-          .substring(1, url.searchParams.get('status')!!.length)
-          .toLowerCase()
-      : 'Status (any)'
-  }
+  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(0)
+  searchPackages()
 })
 
 watch(
   () => page.value,
   () => {
-    searchPackages(page.value)
+    url.searchParams.set('offset', page.value.toString())
+    searchPackages()
   }
 )
 
@@ -394,7 +396,7 @@ watch(() => enableExact.value, () => {
     url.searchParams.delete('exact', '')
   }
   window.history.pushState(null, '', url.toString())
-  searchPackages(0)
+  searchPackages()
 })
 
 // @ts-ignore
@@ -411,7 +413,7 @@ watch(
         url.searchParams.delete('pkgbase')
       }
       window.history.pushState(null, '', url.toString())
-      searchPackages(0)
+      searchPackages()
     }, 250)
   }
 )
@@ -420,33 +422,32 @@ watch(
   () => selectRepo.value,
   () => {
     if (selectRepo.value) {
-      if (selectRepo.value.value === 'any') {
-        url.searchParams.delete('repo')
-      } else {
-        url.searchParams.set('repo', selectRepo.value.value)
-      }
-      window.history.pushState(null, '', url.toString())
+      url.searchParams.set('repo', selectRepo.value.value)
+    } else {
+      url.searchParams.delete('repo')
     }
-    searchPackages(0)
+    window.history.pushState(null, '', url.toString())
+
+    searchPackages()
   }
 )
 
 watch(
   () => selectStatus.value,
   () => {
-    if (selectStatus.value) {
-      if (selectStatus.value.value === 'any') {
-        url.searchParams.delete('status')
-      } else {
-        url.searchParams.set('status', selectStatus.value.value)
-      }
-      window.history.pushState(null, '', url.toString())
+    if (selectStatus.value.length > 0) {
+      selectStatus.value.forEach((status) => {
+        url.searchParams.set('status', status.value)
+      })
+    } else {
+      url.searchParams.delete('status')
     }
-    searchPackages(0)
+    window.history.pushState(null, '', url.toString())
+    searchPackages()
   }
 )
 
 onMounted(() => {
-  searchPackages(0)
+  searchPackages()
 })
 </script>