fix: Logs page now remembers filters between page navigation
This commit is contained in:
parent
663103ad0a
commit
07f7e12991
|
|
@ -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) {
|
||||||
|
|
|
||||||
|
|
@ -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 () {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue