diff --git a/frontend/src/components/Packages.vue b/frontend/src/components/Packages.vue index c44fb49..2142330 100644 --- a/frontend/src/components/Packages.vue +++ b/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"> - + @@ -44,7 +49,7 @@ >([]) 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>([]) 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) => { 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() })