From 020cbd3a7926b7abb8ff316dba8883456ab7a5d0 Mon Sep 17 00:00:00 2001 From: vikingowl Date: Sun, 23 Mar 2025 02:59:00 +0100 Subject: [PATCH] refactor of filtering code --- frontend/src/components/Packages.vue | 166 +++++++++++++-------------- 1 file changed, 81 insertions(+), 85 deletions(-) diff --git a/frontend/src/components/Packages.vue b/frontend/src/components/Packages.vue index f3ee52c..783a080 100644 --- a/frontend/src/components/Packages.vue +++ b/frontend/src/components/Packages.vue @@ -16,9 +16,10 @@ - + @@ -171,6 +172,12 @@ import { useDisplay } from 'vuetify' const OFFSET = 50 +const page = ref(0) +const pagesMax = ref(1) +const packages = ref>([]) +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>([]) +const selectStatus = ref>([]) 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>([]) -const noPackagesFound = ref(false) - const searchPackages = () => { const offset = OFFSET * (page.value > 0 ? page.value - 1 : page.value) noPackagesFound.value = false - const params = new URLSearchParams({ - limit: OFFSET.toString(), - offset: offset.toString() - }) + // init params + const params = new URLSearchParams() - if (inputPkgBase.value) params.append('pkgbase', inputPkgBase.value.toLowerCase()) - if (selectRepo.value) params.append('repo', selectRepo.value.value) + // set params + 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) => { 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 + ? (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')} + ? (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()}) - }) + ? 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() } )