feat(filters): show when the current view has a filter as well and both will be used

This should make it clear when a filter does not bring the expected results - maybe because it contradicts with the one set in the view.
Related to https://github.com/go-vikunja/vikunja/issues/296
This commit is contained in:
kolaente 2024-10-30 15:27:33 +01:00
parent 7f5f5a4b8d
commit 796199827e
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
6 changed files with 45 additions and 1 deletions

View File

@ -20,6 +20,7 @@
:has-title="true"
class="filter-popup"
:change-immediately="false"
:filter-from-view="filterFromView"
@showResults="showResults"
/>
</Modal>
@ -31,14 +32,22 @@ import {computed, ref, watch} from 'vue'
import Filters from '@/components/project/partials/Filters.vue'
import {type TaskFilterParams} from '@/services/taskCollection'
import {type IProjectView} from '@/modelTypes/IProjectView'
import {type IProject} from '@/modelTypes/IProject'
import {useProjectStore} from '@/stores/projects'
const props = defineProps<{
modelValue: TaskFilterParams,
projectId?: IProject['id'],
viewId?: IProjectView['id'],
}>()
const emit = defineEmits<{
'update:modelValue': [value: TaskFilterParams]
}>()
const projectStore = useProjectStore()
const value = ref<TaskFilterParams>({})
watch(
@ -67,6 +76,19 @@ function showResults() {
})
modalOpen.value = false
}
const filterFromView = computed(() => {
if (!props.projectId || !props.viewId) {
return
}
const project = projectStore.projects[props.projectId]
if (!project) {
return
}
const view = project.views.find(v => v.id === props.viewId)
return view?.filter
})
</script>
<style scoped lang="scss">

View File

@ -10,6 +10,15 @@
@update:modelValue="() => change('modelValue')"
@blur="() => change('blur')"
/>
<div
v-if="filterFromView"
class="tw-text-sm tw-mb-2"
>
{{ $t('filters.fromView') }}
<code>{{ filterFromView }}</code><br>
{{ $t('filters.fromViewBoth') }}
</div>
<div class="field is-flex is-flex-direction-column">
<FancyCheckbox
@ -64,6 +73,7 @@ const props = withDefaults(defineProps<{
hasTitle?: boolean,
hasFooter?: boolean,
changeImmediately?: boolean,
filterFromView?: string,
}>(), {
hasTitle: false,
hasFooter: true,

View File

@ -9,6 +9,8 @@
<FilterPopup
v-if="!isSavedFilter(project)"
v-model="params"
:view-id="viewId"
:project-id="projectId"
/>
</div>
</template>

View File

@ -9,6 +9,8 @@
<FilterPopup
v-if="!isSavedFilter(project)"
v-model="params"
:view-id="viewId"
:project-id="projectId"
@update:modelValue="prepareFiltersAndLoadTasks()"
/>
</div>

View File

@ -67,7 +67,12 @@
</Card>
</template>
</Popup>
<FilterPopup v-model="params" />
<FilterPopup
v-if="!isSavedFilter({id: projectId})"
v-model="params"
:view-id="viewId"
:project-id="projectId"
/>
</div>
</template>
@ -290,6 +295,7 @@ import type {IProject} from '@/modelTypes/IProject'
import AssigneeList from '@/components/tasks/partials/AssigneeList.vue'
import type {IProjectView} from '@/modelTypes/IProjectView'
import { camelCase } from 'change-case'
import {isSavedFilter} from '@/services/savedFilter'
const props = defineProps<{
projectId: IProject['id'],

View File

@ -410,6 +410,8 @@
"title": "Filters",
"clear": "Clear Filters",
"showResults": "Show results",
"fromView": "The current view has a filter set as well:",
"fromViewBoth": "It will be used in combination with what you enter here.",
"attributes": {
"title": "Title",
"titlePlaceholder": "The saved filter title goes here…",