From f6dcaef4c09c0d1bd0be57cfb8162a031b7d69c3 Mon Sep 17 00:00:00 2001 From: cproudlock Date: Sun, 12 Jul 2026 14:19:50 -0400 Subject: [PATCH] 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 --- CHANGELOG.md | 4 + frontend/src/composables/listQuery.js | 102 ++++++++++++++++++ .../views/applications/ApplicationsList.vue | 10 +- .../views/knowledgebase/KnowledgeBaseList.vue | 10 +- frontend/src/views/machines/MachinesList.vue | 10 +- .../measuringtools/MeasuringToolsList.vue | 15 +-- .../src/views/network/NetworkDevicesList.vue | 12 +-- .../views/notifications/NotificationsList.vue | 10 +- frontend/src/views/pcs/PCsList.vue | 10 +- frontend/src/views/printers/PrintersList.vue | 12 +-- .../src/views/settings/BusinessUnitsList.vue | 7 +- frontend/src/views/settings/LocationsList.vue | 10 +- .../src/views/settings/ModelTypesList.vue | 7 +- frontend/src/views/settings/ModelsList.vue | 10 +- .../views/settings/OperatingSystemsList.vue | 7 +- frontend/src/views/settings/StatusesList.vue | 7 +- frontend/src/views/settings/SubnetsList.vue | 10 +- frontend/src/views/settings/VLANsList.vue | 10 +- frontend/src/views/usb/USBList.vue | 10 +- frontend/src/views/vendors/VendorsList.vue | 10 +- 20 files changed, 198 insertions(+), 85 deletions(-) create mode 100644 frontend/src/composables/listQuery.js diff --git a/CHANGELOG.md b/CHANGELOG.md index df8239a..c801a94 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,10 @@ ADR-007 and ADR-002. ### Fixed +- List pages keep the current page (and search term) in the URL query, so + paging to page 9, opening an item, and hitting browser Back returns to page 9 + instead of resetting to page 1. Applies to all 18 list views via a shared + useListQuery composable; page 1 with no search stays a bare path. - PC detail Installed Applications no longer 500s and silently disappears on real PCs (ComputerInstalledApp had no to_dict); the section renders app name, version, and description again. diff --git a/frontend/src/composables/listQuery.js b/frontend/src/composables/listQuery.js new file mode 100644 index 0000000..cee6155 --- /dev/null +++ b/frontend/src/composables/listQuery.js @@ -0,0 +1,102 @@ +import { ref, watch } from 'vue' +import { useRoute, useRouter } from 'vue-router' + +// Keep a list page's current page and search term in the URL query so the +// browser Back button restores them. Without this a list keeps page in local +// state and remounts at page 1 after visiting a detail page and going Back. +// +// Usage in a list view: +// const { page, search, setPage, setSearch } = useListQuery({ onChange: loadRows }) +// goToPage(p) -> setPage(p); loadRows() +// debouncedSearch -> setSearch(search.value); loadRows() +// filter reset -> setPage(1); loadRows() +// +// Options: +// onChange callback run when the query changes from outside (Back/Forward, +// deep link) so the list reloads at the restored page. +// extraKeys optional extra query keys to persist (e.g. ['typeid']); each +// gets a ref exposed under the returned `extras` object. +export function useListQuery(options = {}) { + const route = useRoute() + const router = useRouter() + const onChange = options.onChange || (() => {}) + const extraKeys = options.extraKeys || [] + + const page = ref(parseInt(route.query.page, 10) || 1) + const search = ref(route.query.q || '') + + const extras = {} + for (const key of extraKeys) { + extras[key] = ref(route.query[key] || '') + } + + // Build the next query. Keep unrelated keys intact. Write page only when > 1 + // and search only when non-empty so the clean state is a bare path. + function buildQuery() { + const query = { ...route.query } + if (page.value > 1) query.page = String(page.value) + else delete query.page + if (search.value) query.q = search.value + else delete query.q + for (const key of extraKeys) { + if (extras[key].value) query[key] = String(extras[key].value) + else delete query[key] + } + return query + } + + // replace (not push) so paging does not spam history; Back leaves the list. + function syncUrl() { + const query = buildQuery() + const current = route.query + const keys = new Set([...Object.keys(query), ...Object.keys(current)]) + let same = true + for (const key of keys) { + if (String(query[key] ?? '') !== String(current[key] ?? '')) { + same = false + break + } + } + if (!same) router.replace({ query }) + } + + function setPage(newPage) { + page.value = newPage + syncUrl() + } + + // Changing the search resets to page 1. + function setSearch(term) { + search.value = term + page.value = 1 + syncUrl() + } + + // Changing an extra filter resets to page 1. + function setExtra(key, value) { + extras[key].value = value + page.value = 1 + syncUrl() + } + + // Re-sync refs when the query changes from outside (Back/Forward, deep link). + // Fire onChange only when page/search/extras actually changed so a self + // syncUrl() call does not trigger a redundant reload. + watch(() => route.query, (newQuery) => { + const newPage = parseInt(newQuery.page, 10) || 1 + const newSearch = newQuery.q || '' + let changed = false + if (newPage !== page.value) { page.value = newPage; changed = true } + if (newSearch !== search.value) { search.value = newSearch; changed = true } + for (const key of extraKeys) { + const newValue = newQuery[key] || '' + if (newValue !== String(extras[key].value || '')) { + extras[key].value = newValue + changed = true + } + } + if (changed) onChange() + }) + + return { page, search, extras, setPage, setSearch, setExtra } +} diff --git a/frontend/src/views/applications/ApplicationsList.vue b/frontend/src/views/applications/ApplicationsList.vue index e91c3e3..a8b7ab5 100644 --- a/frontend/src/views/applications/ApplicationsList.vue +++ b/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() } diff --git a/frontend/src/views/knowledgebase/KnowledgeBaseList.vue b/frontend/src/views/knowledgebase/KnowledgeBaseList.vue index a9e16f1..fd20ebd 100644 --- a/frontend/src/views/knowledgebase/KnowledgeBaseList.vue +++ b/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() } diff --git a/frontend/src/views/machines/MachinesList.vue b/frontend/src/views/machines/MachinesList.vue index 322c2e5..0b2ba52 100644 --- a/frontend/src/views/machines/MachinesList.vue +++ b/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() } diff --git a/frontend/src/views/measuringtools/MeasuringToolsList.vue b/frontend/src/views/measuringtools/MeasuringToolsList.vue index 9dacb51..8dcaffe 100644 --- a/frontend/src/views/measuringtools/MeasuringToolsList.vue +++ b/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() } diff --git a/frontend/src/views/network/NetworkDevicesList.vue b/frontend/src/views/network/NetworkDevicesList.vue index 91aa7d4..613407e 100644 --- a/frontend/src/views/network/NetworkDevicesList.vue +++ b/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() } diff --git a/frontend/src/views/notifications/NotificationsList.vue b/frontend/src/views/notifications/NotificationsList.vue index 6dd41f0..7540c47 100644 --- a/frontend/src/views/notifications/NotificationsList.vue +++ b/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() } diff --git a/frontend/src/views/pcs/PCsList.vue b/frontend/src/views/pcs/PCsList.vue index ff64cd0..4ba419c 100644 --- a/frontend/src/views/pcs/PCsList.vue +++ b/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() } diff --git a/frontend/src/views/printers/PrintersList.vue b/frontend/src/views/printers/PrintersList.vue index bc39ed4..2b0fa82 100644 --- a/frontend/src/views/printers/PrintersList.vue +++ b/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() } diff --git a/frontend/src/views/settings/BusinessUnitsList.vue b/frontend/src/views/settings/BusinessUnitsList.vue index 327b80a..f4efed7 100644 --- a/frontend/src/views/settings/BusinessUnitsList.vue +++ b/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() } diff --git a/frontend/src/views/settings/LocationsList.vue b/frontend/src/views/settings/LocationsList.vue index 492ff07..6cb4f43 100644 --- a/frontend/src/views/settings/LocationsList.vue +++ b/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() } diff --git a/frontend/src/views/settings/ModelTypesList.vue b/frontend/src/views/settings/ModelTypesList.vue index 8fd1dad..80b65d9 100644 --- a/frontend/src/views/settings/ModelTypesList.vue +++ b/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() } diff --git a/frontend/src/views/settings/ModelsList.vue b/frontend/src/views/settings/ModelsList.vue index 71e57a2..7312051 100644 --- a/frontend/src/views/settings/ModelsList.vue +++ b/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() } diff --git a/frontend/src/views/settings/OperatingSystemsList.vue b/frontend/src/views/settings/OperatingSystemsList.vue index 9dd56d0..420418f 100644 --- a/frontend/src/views/settings/OperatingSystemsList.vue +++ b/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() } diff --git a/frontend/src/views/settings/StatusesList.vue b/frontend/src/views/settings/StatusesList.vue index 4309395..1eb6143 100644 --- a/frontend/src/views/settings/StatusesList.vue +++ b/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() } diff --git a/frontend/src/views/settings/SubnetsList.vue b/frontend/src/views/settings/SubnetsList.vue index 7c24d7d..b32e025 100644 --- a/frontend/src/views/settings/SubnetsList.vue +++ b/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() } diff --git a/frontend/src/views/settings/VLANsList.vue b/frontend/src/views/settings/VLANsList.vue index 66f505e..71b2eb8 100644 --- a/frontend/src/views/settings/VLANsList.vue +++ b/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() } diff --git a/frontend/src/views/usb/USBList.vue b/frontend/src/views/usb/USBList.vue index 36bc780..40027c6 100644 --- a/frontend/src/views/usb/USBList.vue +++ b/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() } diff --git a/frontend/src/views/vendors/VendorsList.vue b/frontend/src/views/vendors/VendorsList.vue index 3697352..6238a6d 100644 --- a/frontend/src/views/vendors/VendorsList.vue +++ b/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() }