feat: move filter popup to a modal
continuous-integration/drone/push Build is passing Details

This commit is contained in:
kolaente 2022-05-08 22:39:23 +02:00
parent b2c2118c58
commit 0007c30672
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
3 changed files with 30 additions and 27 deletions

View File

@ -6,39 +6,34 @@
>
{{ $t('filters.clear') }}
</x-button>
<popup :has-overflow="true">
<template #trigger="{toggle}">
<x-button
@click.prevent.stop="toggle()"
variant="secondary"
icon="filter"
>
{{ $t('filters.title') }}
</x-button>
</template>
<template #content="{isOpen}">
<filters
v-model="value"
ref="filters"
class="filter-popup"
:class="{'is-open': isOpen}"
/>
</template>
</popup>
<x-button
@click="() => modalOpen = true"
variant="secondary"
icon="filter"
>
{{ $t('filters.title') }}
</x-button>
<modal @close="() => modalOpen = false" :enabled="modalOpen">
<filters
:has-title="true"
v-model="value"
ref="filters"
class="filter-popup"
:class="{'is-open': isOpen}"
/>
</modal>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {defineComponent, ref} from 'vue'
import Filters from '@/components/list/partials/filters'
import Popup from '@/components/misc/popup'
import Filters from '@/components/list/partials/filters.vue'
import {getDefaultParams} from '@/composables/taskList'
export default defineComponent({
name: 'filter-popup',
components: {
Popup,
Filters,
},
props: {
@ -82,6 +77,13 @@ export default defineComponent({
immediate: true,
},
},
setup() {
const modalOpen = ref(false)
return {
modalOpen,
}
},
methods: {
clearFilters() {
this.value = {...getDefaultParams()}

View File

@ -1,5 +1,5 @@
<template>
<card class="filters has-overflow">
<card class="filters has-overflow" :title="hasTitle ? $t('filters.title') : ''">
<div class="field">
<fancycheckbox v-model="params.filter_include_nulls">
{{ $t('filters.attributes.includeNulls') }}
@ -263,6 +263,10 @@ export default defineComponent({
modelValue: {
required: true,
},
hasTitle: {
type: Boolean,
default: false,
},
},
emits: ['update:modelValue', 'change'],
watch: {

View File

@ -91,9 +91,6 @@ watch(
scrollLock.value = enabled
store.commit('modalActive', enabled)
},
{
immediate: true,
},
)
</script>