kolaente
6e5b31f1e0
Some checks failed
continuous-integration/drone/push Build is failing
Previously, when using the filter query as a search input, it would load the search as requested but the filter query parameter in the url would be empty, which meant the search would not be loaded correctly when reloading (or otherwise newly accessing) the page. We're now persisting the filter and search in the task loading logic, to make sure they are always populated correctly.
90 lines
1.7 KiB
Vue
90 lines
1.7 KiB
Vue
<template>
|
|
<x-button
|
|
variant="secondary"
|
|
icon="filter"
|
|
:class="{'has-filters': hasFilters}"
|
|
@click="() => modalOpen = true"
|
|
>
|
|
{{ $t('filters.title') }}
|
|
</x-button>
|
|
<modal
|
|
:enabled="modalOpen"
|
|
transition-name="fade"
|
|
:overflow="true"
|
|
variant="hint-modal"
|
|
@close="() => modalOpen = false"
|
|
>
|
|
<Filters
|
|
ref="filters"
|
|
v-model="value"
|
|
:has-title="true"
|
|
class="filter-popup"
|
|
@update:modelValue="emitChanges"
|
|
@showResultsButtonClicked="() => modalOpen = false"
|
|
/>
|
|
</modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed, ref, watch} from 'vue'
|
|
|
|
import Filters from '@/components/project/partials/filters.vue'
|
|
|
|
import {type TaskFilterParams} from '@/services/taskCollection'
|
|
|
|
const props = defineProps(['modelValue'])
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const value = ref<TaskFilterParams>({})
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(modelValue: TaskFilterParams) => {
|
|
value.value = modelValue
|
|
},
|
|
{immediate: true},
|
|
)
|
|
|
|
function emitChanges(newValue: TaskFilterParams) {
|
|
emit('update:modelValue', {
|
|
...value.value,
|
|
filter: newValue.filter,
|
|
s: newValue.s,
|
|
})
|
|
}
|
|
|
|
const hasFilters = computed(() => {
|
|
return value.value.filter !== '' ||
|
|
value.value.s !== ''
|
|
})
|
|
|
|
const modalOpen = ref(false)
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.filter-popup {
|
|
margin: 0;
|
|
|
|
&.is-open {
|
|
margin: 2rem 0 1rem;
|
|
}
|
|
}
|
|
|
|
$filter-bubble-size: .75rem;
|
|
.has-filters {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: math.div($filter-bubble-size, -2);
|
|
right: math.div($filter-bubble-size, -2);
|
|
|
|
width: $filter-bubble-size;
|
|
height: $filter-bubble-size;
|
|
border-radius: 100%;
|
|
background: var(--primary);
|
|
}
|
|
}
|
|
</style>
|