fix: Logs page now remembers filters between page navigation
This commit is contained in:
parent
663103ad0a
commit
07f7e12991
|
|
@ -5,7 +5,7 @@
|
|||
>
|
||||
<template #toolbar>
|
||||
<router-link
|
||||
to="/logs"
|
||||
:to="logsListLocation"
|
||||
class="button neutral"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -44,6 +44,7 @@ import { useRouter } from 'vue-router'
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import Calendar from 'picocrank/vue/components/Calendar.vue'
|
||||
import Section from 'picocrank/vue/components/Section.vue'
|
||||
import { loadStoredLogsFilter } from '../utils/logsFilterStorage.js'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
|
|
@ -54,6 +55,11 @@ const error = ref(null)
|
|||
const currentMonthIndex = ref(new Date().getMonth())
|
||||
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
|
||||
const calendarEvents = computed(() => {
|
||||
return logs.value
|
||||
|
|
@ -147,7 +153,13 @@ function handleDayClick (date) {
|
|||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -221,12 +221,24 @@ import ActionStatusDisplay from '../components/ActionStatusDisplay.vue'
|
|||
import ActionIconGlyph from '../components/ActionIconGlyph.vue'
|
||||
import LogActionTitle from '../components/LogActionTitle.vue'
|
||||
import { getExecutionLogEntry, updateLogEntryInList } from '../utils/executionLogEvents.js'
|
||||
import { loadStoredLogsFilter, storeLogsFilter } from '../utils/logsFilterStorage.js'
|
||||
|
||||
const route = useRoute()
|
||||
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 searchText = ref('')
|
||||
const searchText = ref(readInitialFilter())
|
||||
const pageSize = ref(10)
|
||||
const currentPage = ref(1)
|
||||
const loading = ref(false)
|
||||
|
|
@ -260,8 +272,9 @@ watch(() => route.query.date, () => {
|
|||
updateDateFromRoute()
|
||||
})
|
||||
|
||||
watch(searchText, () => {
|
||||
watch(searchText, (value) => {
|
||||
currentPage.value = 1
|
||||
storeLogsFilter(value)
|
||||
scheduleFetchLogs()
|
||||
})
|
||||
|
||||
|
|
@ -313,6 +326,14 @@ function scheduleFetchLogs () {
|
|||
|
||||
function clearSearch () {
|
||||
searchText.value = ''
|
||||
|
||||
if (route.query.filter == null) {
|
||||
return
|
||||
}
|
||||
|
||||
const query = { ...route.query }
|
||||
delete query.filter
|
||||
router.replace({ path: route.path, query })
|
||||
}
|
||||
|
||||
function clearDateFilter () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue