Persist list pagination and search in the URL

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>

frontend/src/views/applications/ApplicationsList.vue

@@ -101,12 +101,12 @@
 import { ref, onMounted } from 'vue'
 import { applicationsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
+import { useListQuery } from '@/composables/listQuery'
 
 const applications = ref([])
 const loading = ref(true)
-const search = ref('')
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadApplications })
 const filter = ref('installable')
-const page = ref(1)
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -145,19 +145,19 @@ async function loadApplications() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadApplications()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadApplications()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadApplications()
 }
 </script>

frontend/src/views/knowledgebase/KnowledgeBaseList.vue

@@ -111,15 +111,15 @@
 import { ref, onMounted } from 'vue'
 import { knowledgebaseApi, applicationsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
+import { useListQuery } from '@/composables/listQuery'
 
 const loading = ref(true)
 const articles = ref([])
 const topics = ref([])
 const stats = ref(null)
-const page = ref(1)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadArticles })
 const perPage = ref(20)
 const totalPages = ref(1)
-const search = ref('')
 const topicFilter = ref('')
 const sort = ref('clicks')
 const order = ref('desc')
@@ -177,19 +177,19 @@ async function loadStats() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadArticles()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadArticles()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadArticles()
 }
 

frontend/src/views/machines/MachinesList.vue

@@ -87,11 +87,11 @@ import { ref, onMounted } from 'vue'
 import { colorStyle } from "@/utils/colorStyle"
 import { machinesApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
+import { useListQuery } from '@/composables/listQuery'
 
 const machines = ref([])
 const loading = ref(true)
-const search = ref('')
-const page = ref(1)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadMachines })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -123,19 +123,19 @@ async function loadMachines() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadMachines()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadMachines()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadMachines()
 }
 </script>

frontend/src/views/measuringtools/MeasuringToolsList.vue

@@ -96,14 +96,14 @@ import { ref, onMounted } from 'vue'
 import { colorStyle } from '@/utils/colorStyle'
 import { measuringtoolsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
+import { useListQuery } from '@/composables/listQuery'
 
 const tools = ref([])
 const types = ref([])
 const loading = ref(true)
-const search = ref('')
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadTools })
 const typeid = ref('')
 const calibrationstatus = ref('')
-const page = ref(1)
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -142,23 +142,26 @@ async function loadTools() {
 }
 
 function reload() {
-  page.value = 1
+  setPage(1)
   loadTools()
 }
 
 function debouncedSearch() {
   clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(reload, 300)
+  searchTimeout = setTimeout(() => {
+    setSearch(search.value)
+    loadTools()
+  }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadTools()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadTools()
 }
 </script>

frontend/src/views/network/NetworkDevicesList.vue

@@ -121,17 +121,17 @@ import { ref, onMounted } from 'vue'
 import { colorStyle } from "@/utils/colorStyle"
 import { networkApi, vendorsApi, locationsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
+import { useListQuery } from '@/composables/listQuery'
 
 const devices = ref([])
 const deviceTypes = ref([])
 const vendors = ref([])
 const locations = ref([])
 const loading = ref(true)
-const search = ref('')
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadDevices })
 const selectedType = ref(null)
 const vendorFilter = ref('')
 const locationFilter = ref('')
-const page = ref(1)
 const totalPages = ref(1)
 const perPage = ref(25)
 const totalCount = ref(0)
@@ -217,28 +217,28 @@ async function loadDevices() {
 
 function selectType(typeId) {
   selectedType.value = typeId
-  page.value = 1
+  setPage(1)
   loadDevices()
 }
 
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadDevices()
   }, 300)
 }
 
 function goToPage(p) {
   if (p >= 1 && p <= totalPages.value) {
-    page.value = p
+    setPage(p)
     loadDevices()
   }
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadDevices()
 }
 

frontend/src/views/notifications/NotificationsList.vue

@@ -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()
 }
 

frontend/src/views/pcs/PCsList.vue

@@ -90,11 +90,11 @@ import { ref, onMounted } from 'vue'
 import { computersApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { colorStyle } from '@/utils/colorStyle'
+import { useListQuery } from '@/composables/listQuery'
 
 const computers = ref([])
 const loading = ref(true)
-const search = ref('')
-const page = ref(1)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadComputers })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -126,19 +126,19 @@ async function loadComputers() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadComputers()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadComputers()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadComputers()
 }
 

frontend/src/views/printers/PrintersList.vue

@@ -90,13 +90,13 @@
 import { ref, onMounted } from 'vue'
 import { printersApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
+import { useListQuery } from '@/composables/listQuery'
 
 const printers = ref([])
 const printerTypes = ref([])
 const typeFilter = ref('')
 const loading = ref(true)
-const search = ref('')
-const page = ref(1)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadPrinters })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -135,24 +135,24 @@ async function loadPrinters() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadPrinters()
   }, 300)
 }
 
 function onFilterChange() {
-  page.value = 1
+  setPage(1)
   loadPrinters()
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadPrinters()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadPrinters()
 }
 

frontend/src/views/settings/BusinessUnitsList.vue

@@ -103,11 +103,12 @@ import { businessunitsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const items = ref([])
 const loading = ref(true)
-const page = ref(1)
+const { page, setPage } = useListQuery({ onChange: loadData })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -136,11 +137,11 @@ async function loadData() {
   }
 }
 
-function goToPage(p) { page.value = p; loadData() }
+function goToPage(p) { setPage(p); loadData() }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadData()
 }
 

frontend/src/views/settings/LocationsList.vue

@@ -213,14 +213,14 @@ import { locationsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const locations = ref([])
 const locationTypes = ref([])
 const allLocations = ref([])
 const loading = ref(true)
-const search = ref('')
-const page = ref(1)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadLocations })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -286,19 +286,19 @@ async function loadLocations() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadLocations()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadLocations()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadLocations()
 }
 

frontend/src/views/settings/ModelTypesList.vue

@@ -147,11 +147,12 @@ import { modeltypesApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const modelTypes = ref([])
 const loading = ref(true)
-const page = ref(1)
+const { page, setPage } = useListQuery({ onChange: loadTypes })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -192,13 +193,13 @@ async function loadTypes() {
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadTypes()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadTypes()
 }
 

frontend/src/views/settings/ModelsList.vue

@@ -209,15 +209,15 @@ import { modelsApi, vendorsApi, modeltypesApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const models = ref([])
 const vendors = ref([])
 const modelTypes = ref([])
 const loading = ref(true)
-const search = ref('')
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadModels })
 const vendorFilter = ref('')
-const page = ref(1)
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -290,19 +290,19 @@ async function loadModelTypes() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadModels()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadModels()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadModels()
 }
 

frontend/src/views/settings/OperatingSystemsList.vue

@@ -121,11 +121,12 @@ import { operatingsystemsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const items = ref([])
 const loading = ref(true)
-const page = ref(1)
+const { page, setPage } = useListQuery({ onChange: loadData })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -154,11 +155,11 @@ async function loadData() {
   }
 }
 
-function goToPage(p) { page.value = p; loadData() }
+function goToPage(p) { setPage(p); loadData() }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadData()
 }
 

frontend/src/views/settings/StatusesList.vue

@@ -141,11 +141,12 @@ import PaginationBar from '../../components/PaginationBar.vue'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const statuses = ref([])
 const loading = ref(true)
-const page = ref(1)
+const { page, setPage } = useListQuery({ onChange: loadStatuses })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -186,13 +187,13 @@ async function loadStatuses() {
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadStatuses()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadStatuses()
 }
 

frontend/src/views/settings/SubnetsList.vue

@@ -287,6 +287,7 @@ import { networkApi, locationsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const route = useRoute()
@@ -295,10 +296,9 @@ const subnets = ref([])
 const vlans = ref([])
 const locations = ref([])
 const loading = ref(true)
-const search = ref('')
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadSubnets })
 const vlanFilter = ref('')
 const typeFilter = ref('')
-const page = ref(1)
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -383,19 +383,19 @@ async function loadSubnets() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadSubnets()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadSubnets()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadSubnets()
 }
 

frontend/src/views/settings/VLANsList.vue

@@ -189,13 +189,13 @@ import { networkApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const vlans = ref([])
 const loading = ref(true)
-const search = ref('')
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadVLANs })
 const typeFilter = ref('')
-const page = ref(1)
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -243,19 +243,19 @@ async function loadVLANs() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadVLANs()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadVLANs()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadVLANs()
 }
 

frontend/src/views/usb/USBList.vue

@@ -149,12 +149,12 @@ import EmployeeSearch from '../../components/EmployeeSearch.vue'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const devices = ref([])
 const loading = ref(true)
-const search = ref('')
-const page = ref(1)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadDevices })
 const totalPages = ref(1)
 const perPage = ref(20)
 const showAvailableOnly = ref(false)
@@ -195,19 +195,19 @@ async function loadDevices() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadDevices()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadDevices()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadDevices()
 }
 

frontend/src/views/vendors/VendorsList.vue

@@ -188,12 +188,12 @@ import { vendorsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
 const vendors = ref([])
 const loading = ref(true)
-const search = ref('')
-const page = ref(1)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadVendors })
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -243,19 +243,19 @@ async function loadVendors() {
 function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    page.value = 1
+    setSearch(search.value)
     loadVendors()
   }, 300)
 }
 
 function goToPage(p) {
-  page.value = p
+  setPage(p)
   loadVendors()
 }
 
 function changePerPage(newPerPage) {
   perPage.value = newPerPage
-  page.value = 1
+  setPage(1)
   loadVendors()
 }