fix(filters): persist filters in url
continuous-integration/drone/push Build is failing Details

This allows us to keep the filters when navigating back from a task or other url.
This commit is contained in:
kolaente 2024-03-13 19:03:23 +01:00
parent ccb708a56f
commit 7bf2664e55
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 22 additions and 4 deletions

View File

@ -30,21 +30,39 @@ import {computed, ref, watch} from 'vue'
import Filters from '@/components/project/partials/filters.vue' import Filters from '@/components/project/partials/filters.vue'
import {type TaskFilterParams} from '@/services/taskCollection' import {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection'
import {useRouteQuery} from '@vueuse/router'
const modelValue = defineModel<TaskFilterParams>({}) const modelValue = defineModel<TaskFilterParams>({})
const value = ref<TaskFilterParams>({}) const value = ref<TaskFilterParams>({})
const filter = useRouteQuery('filter')
watch( watch(
() => modelValue.value, () => modelValue.value,
(modelValue: TaskFilterParams) => { (modelValue: TaskFilterParams) => {
value.value = modelValue value.value = modelValue
if (value.value.filter !== '' && value.value.filter !== getDefaultTaskFilterParams().filter) {
filter.value = value.value.filter
}
},
{immediate: true},
)
watch(
() => filter.value,
val => {
if (modelValue.value?.filter === val || typeof val === 'undefined') {
return
}
modelValue.value.filter = val
}, },
{immediate: true}, {immediate: true},
) )
function emitChanges(newValue: TaskFilterParams) { function emitChanges(newValue: TaskFilterParams) {
filter.value = newValue.filter
if (modelValue.value?.filter === newValue.filter && modelValue.value?.s === newValue.s) { if (modelValue.value?.filter === newValue.filter && modelValue.value?.s === newValue.s) {
return return
} }
@ -54,7 +72,7 @@ function emitChanges(newValue: TaskFilterParams) {
} }
const hasFilters = computed(() => { const hasFilters = computed(() => {
return value.value.filter !== '' || return value.value.filter !== '' ||
value.value.s !== '' value.value.s !== ''
}) })
@ -73,13 +91,13 @@ const modalOpen = ref(false)
$filter-bubble-size: .75rem; $filter-bubble-size: .75rem;
.has-filters { .has-filters {
position: relative; position: relative;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: math.div($filter-bubble-size, -2); top: math.div($filter-bubble-size, -2);
right: math.div($filter-bubble-size, -2); right: math.div($filter-bubble-size, -2);
width: $filter-bubble-size; width: $filter-bubble-size;
height: $filter-bubble-size; height: $filter-bubble-size;
border-radius: 100%; border-radius: 100%;