fix: Logs page now remembers filters between page navigation

This commit is contained in:
jamesread 2026-07-28 12:47:55 +01:00
parent 663103ad0a
commit 07f7e12991
2 changed files with 37 additions and 4 deletions

View File

@ -5,7 +5,7 @@
> >
<template #toolbar> <template #toolbar>
<router-link <router-link
to="/logs" :to="logsListLocation"
class="button neutral" class="button neutral"
> >
<svg <svg
@ -44,6 +44,7 @@ import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Calendar from 'picocrank/vue/components/Calendar.vue' import Calendar from 'picocrank/vue/components/Calendar.vue'
import Section from 'picocrank/vue/components/Section.vue' import Section from 'picocrank/vue/components/Section.vue'
import { loadStoredLogsFilter } from '../utils/logsFilterStorage.js'
const router = useRouter() const router = useRouter()
const { t } = useI18n() const { t } = useI18n()
@ -54,6 +55,11 @@ const error = ref(null)
const currentMonthIndex = ref(new Date().getMonth()) const currentMonthIndex = ref(new Date().getMonth())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const logsListLocation = computed(() => {
const filter = loadStoredLogsFilter()
return filter ? { path: '/logs', query: { filter } } : '/logs'
})
// Convert logs to calendar events format // Convert logs to calendar events format
const calendarEvents = computed(() => { const calendarEvents = computed(() => {
return logs.value return logs.value
@ -147,7 +153,13 @@ function handleDayClick (date) {
const month = String(date.getMonth() + 1).padStart(2, '0') const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0') const day = String(date.getDate()).padStart(2, '0')
const dateString = `${year}-${month}-${day}` const dateString = `${year}-${month}-${day}`
router.push({ path: '/logs', query: { date: dateString } }) const query = { date: dateString }
const storedFilter = loadStoredLogsFilter()
if (storedFilter) {
query.filter = storedFilter
}
router.push({ path: '/logs', query })
} }
function handleMonthChange (month, year) { function handleMonthChange (month, year) {

View File

@ -221,12 +221,24 @@ import ActionStatusDisplay from '../components/ActionStatusDisplay.vue'
import ActionIconGlyph from '../components/ActionIconGlyph.vue' import ActionIconGlyph from '../components/ActionIconGlyph.vue'
import LogActionTitle from '../components/LogActionTitle.vue' import LogActionTitle from '../components/LogActionTitle.vue'
import { getExecutionLogEntry, updateLogEntryInList } from '../utils/executionLogEvents.js' import { getExecutionLogEntry, updateLogEntryInList } from '../utils/executionLogEvents.js'
import { loadStoredLogsFilter, storeLogsFilter } from '../utils/logsFilterStorage.js'
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
function readInitialFilter () {
// Prefer ?filter= when present (e.g. calendar keeps it while adding ?date=).
// Otherwise restore from sessionStorage so sidebar / breadcrumb returns keep the filter.
if (typeof route.query.filter === 'string' && route.query.filter !== '') {
storeLogsFilter(route.query.filter)
return route.query.filter
}
return loadStoredLogsFilter()
}
const logs = ref([]) const logs = ref([])
const searchText = ref('') const searchText = ref(readInitialFilter())
const pageSize = ref(10) const pageSize = ref(10)
const currentPage = ref(1) const currentPage = ref(1)
const loading = ref(false) const loading = ref(false)
@ -260,8 +272,9 @@ watch(() => route.query.date, () => {
updateDateFromRoute() updateDateFromRoute()
}) })
watch(searchText, () => { watch(searchText, (value) => {
currentPage.value = 1 currentPage.value = 1
storeLogsFilter(value)
scheduleFetchLogs() scheduleFetchLogs()
}) })
@ -313,6 +326,14 @@ function scheduleFetchLogs () {
function clearSearch () { function clearSearch () {
searchText.value = '' searchText.value = ''
if (route.query.filter == null) {
return
}
const query = { ...route.query }
delete query.filter
router.replace({ path: route.path, query })
} }
function clearDateFilter () { function clearDateFilter () {