vantzs/corrosion-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

fix: Add pagination controls to uMod browse tab
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Details

Browse Source 
Prev/Next buttons at top and bottom of results table. New search
resets to page 1. Buttons disable at bounds and during loading.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-21 23:41:07 -05:00
parent 57efc6a5d2
commit 7acdd3654f
1 changed files with 53 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/views/admin/PluginsView.vue
View File

@@ -12,6 +12,7 @@ const toast = useToastStore()
const searchQuery = ref('')
const tab = ref<'installed' | 'browse' | 'upload'>('installed')
const browseQuery = ref('')
const browsePage = ref(1)
const browseDebounce = ref<ReturnType<typeof setTimeout> | null>(null)
const installing = ref<string | null>(null)
@@ -71,10 +72,11 @@ async function handleUninstall(plugin: PluginEntry) {
}
}
async function handleBrowseSearch() {
async function handleBrowseSearch(page = 1) {
if (!browseQuery.value.trim()) return
browsePage.value = page
try {
await pluginStore.browseUmod(browseQuery.value.trim())
await pluginStore.browseUmod(browseQuery.value.trim(), page)
} catch {
toast.error('Failed to search uMod plugins')
}
@@ -82,7 +84,17 @@ async function handleBrowseSearch() {
function scheduleBrowseSearch() {
if (browseDebounce.value) clearTimeout(browseDebounce.value)
browseDebounce.value = setTimeout(handleBrowseSearch, 400)
browseDebounce.value = setTimeout(() => handleBrowseSearch(1), 400)
}
function browsePrev() {
if (browsePage.value > 1) handleBrowseSearch(browsePage.value - 1)
}
function browseNext() {
if (pluginStore.browseResults && browsePage.value < pluginStore.browseResults.last_page) {
handleBrowseSearch(browsePage.value + 1)
}
}
async function installFromBrowse(result: UmodPlugin) {
@@ -325,6 +337,22 @@ onMounted(() => {
{{ pluginStore.browseResults.total.toLocaleString() }} plugins found
&bull; Page {{ pluginStore.browseResults.current_page }} of {{ pluginStore.browseResults.last_page }}
</p>
<div class="flex items-center gap-1">
<button
@click="browsePrev"
:disabled="browsePage <= 1 || pluginStore.isBrowseLoading"
class="px-2.5 py-1 text-xs font-medium rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
>
&larr; Prev
</button>
<button
@click="browseNext"
:disabled="!pluginStore.browseResults || browsePage >= pluginStore.browseResults.last_page || pluginStore.isBrowseLoading"
class="px-2.5 py-1 text-xs font-medium rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
>
Next &rarr;
</button>
</div>
</div>
<table class="w-full">
<thead>
@@ -366,6 +394,28 @@ onMounted(() => {
</tr>
</tbody>
</table>
<!-- Bottom pagination -->
<div v-if="pluginStore.browseResults && pluginStore.browseResults.last_page > 1" class="px-4 py-3 border-t border-neutral-800 flex items-center justify-between">
<p class="text-xs text-neutral-500">
Page {{ pluginStore.browseResults.current_page }} of {{ pluginStore.browseResults.last_page }}
</p>
<div class="flex items-center gap-1">
<button
@click="browsePrev"
:disabled="browsePage <= 1 || pluginStore.isBrowseLoading"
class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700"
>
&larr; Previous
</button>
<button
@click="browseNext"
:disabled="!pluginStore.browseResults || browsePage >= pluginStore.browseResults.last_page || pluginStore.isBrowseLoading"
class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700"
>
Next &rarr;
</button>
</div>
</div>
</div>
</div>