Persist list pagination and search in the URL
All checks were successful
CI / backend (push) Successful in 1m25s
CI / naming (push) Successful in 1s
CI / frontend (push) Successful in 7s

List pages kept the current page in local state, so clicking into an
asset and hitting Back remounted the list at page 1. A shared
useListQuery composable now mirrors the page (and search term) into the
URL query via router.replace across all 18 list pages, so Back restores
the page you were on and lists are deep-linkable. Page 1 with no search
stays a bare path; changing a filter resets to page 1; unrelated query
keys are preserved.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
2026-07-12 14:19:50 -04:00
parent b2e1827e5d
commit f6dcaef4c0
20 changed files with 198 additions and 85 deletions

View File

@@ -90,14 +90,14 @@
import { ref, onMounted } from 'vue'
import { notificationsApi } from '@/api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useListQuery } from '@/composables/listQuery'
const notifications = ref([])
const types = ref([])
const loading = ref(true)
const searchQuery = ref('')
const { page, search: searchQuery, setPage, setSearch } = useListQuery({ onChange: loadNotifications })
const selectedType = ref('')
const currentFilter = ref('')
const page = ref(1)
const perPage = ref(20)
const total = ref(0)
const totalPages = ref(1)
@@ -152,19 +152,19 @@ async function loadNotifications() {
function debouncedSearch() {
clearTimeout(searchTimeout)
searchTimeout = setTimeout(() => {
page.value = 1
setSearch(searchQuery.value)
loadNotifications()
}, 300)
}
function goToPage(p) {
page.value = p
setPage(p)
loadNotifications()
}
function changePerPage(newPerPage) {
perPage.value = newPerPage
page.value = 1
setPage(1)
loadNotifications()
}