forked from vikunja/frontend
117 lines
3.2 KiB
Vue
117 lines
3.2 KiB
Vue
<template>
|
|
<div class="modal-mask hint-modal">
|
|
<div @click.self="$router.back()" class="modal-container">
|
|
<div class="modal-content">
|
|
<card class="has-background-white has-no-shadow" :title="$t('filters.create.title')">
|
|
<p>
|
|
{{ $t('filters.create.description') }}
|
|
</p>
|
|
<div class="field">
|
|
<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
|
|
<div class="control">
|
|
<input
|
|
v-model="savedFilter.title"
|
|
:class="{ 'disabled': savedFilterService.loading}"
|
|
:disabled="savedFilterService.loading"
|
|
class="input"
|
|
id="Title"
|
|
:placeholder="$t('filters.attributes.titlePlaceholder')"
|
|
type="text"
|
|
v-focus
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
|
|
<div class="control">
|
|
<editor
|
|
v-model="savedFilter.description"
|
|
:class="{ 'disabled': savedFilterService.loading}"
|
|
:disabled="savedFilterService.loading"
|
|
:preview-is-default="false"
|
|
id="description"
|
|
:placeholder="$t('filters.attributes.descriptionPlaceholder')"
|
|
v-if="editorActive"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="filters">{{ $t('filters.title') }}</label>
|
|
<div class="control">
|
|
<filters
|
|
:class="{ 'disabled': savedFilterService.loading}"
|
|
:disabled="savedFilterService.loading"
|
|
class="has-no-shadow has-no-border"
|
|
v-model="filters"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<x-button
|
|
:loading="savedFilterService.loading"
|
|
:disabled="savedFilterService.loading"
|
|
@click="create()"
|
|
class="is-fullwidth"
|
|
>
|
|
{{ $t('filters.create.action') }}
|
|
</x-button>
|
|
</card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LoadingComponent from '@/components/misc/loading.vue'
|
|
import ErrorComponent from '@/components/misc/error.vue'
|
|
import Filters from '@/components/list/partials/filters.vue'
|
|
import SavedFilterService from '@/services/savedFilter'
|
|
import SavedFilterModel from '@/models/savedFilter'
|
|
|
|
export default {
|
|
name: 'CreateSavedFilter',
|
|
data() {
|
|
return {
|
|
editorActive: false,
|
|
filters: {
|
|
sort_by: ['done', 'id'],
|
|
order_by: ['asc', 'desc'],
|
|
filter_by: ['done'],
|
|
filter_value: ['false'],
|
|
filter_comparator: ['equals'],
|
|
filter_concat: 'and',
|
|
filter_include_nulls: true,
|
|
},
|
|
savedFilterService: SavedFilterService,
|
|
savedFilter: SavedFilterModel,
|
|
}
|
|
},
|
|
components: {
|
|
Filters,
|
|
editor: () => ({
|
|
component: import('../../components/input/editor'),
|
|
loading: LoadingComponent,
|
|
error: ErrorComponent,
|
|
timeout: 60000,
|
|
}),
|
|
},
|
|
created() {
|
|
this.editorActive = false
|
|
this.$nextTick(() => this.editorActive = true)
|
|
|
|
this.savedFilterService = new SavedFilterService()
|
|
this.savedFilter = new SavedFilterModel()
|
|
},
|
|
methods: {
|
|
create() {
|
|
this.savedFilter.filters = this.filters
|
|
this.savedFilterService.create(this.savedFilter)
|
|
.then(r => {
|
|
this.$store.dispatch('namespaces/loadNamespaces')
|
|
this.$router.push({name: 'list.index', params: {listId: r.getListId()}})
|
|
})
|
|
.catch(e => this.error(e))
|
|
},
|
|
},
|
|
}
|
|
</script>
|