Saved filters (#239)
Fix saving Cleanup Fix single value prepare Add prepare percent done stub Fix populating filters with saved values when editing for single values Fix populating filters with saved values when editing Add edit filter view page Hide adding new tasks to pseudolists Make sure all filter values are passed as strings as per requirement from the api Add redirect to list after creating it Add creating saved filter Add filter by percent done Add end date filter Add start date filter Add extra checkbox to enable/disable priority filter Add changing priority Add more filter stubs Fix dates for filters Add saved filter create form Add include nulls and concat to filter options Add new saved filter component Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/239 Co-Authored-By: konrad <konrad@kola-entertainments.de> Co-Committed-By: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
121
src/views/filters/CreateSavedFilter.vue
Normal file
121
src/views/filters/CreateSavedFilter.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="modal-mask keyboard-shortcuts-modal">
|
||||
<div @click.self="$router.back()" class="modal-container">
|
||||
<div class="modal-content">
|
||||
<div class="card has-background-white has-no-shadow">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">Create A Saved Filter</p>
|
||||
</header>
|
||||
<div class="card-content content">
|
||||
<p>
|
||||
A saved filter is a virtual list which is computed from a set of filters each time it is
|
||||
accessed. Once created, it will appear in a special namespace.
|
||||
</p>
|
||||
<div class="field">
|
||||
<label class="label" for="title">Title</label>
|
||||
<div class="control">
|
||||
<input
|
||||
v-model="savedFilter.title"
|
||||
:class="{ 'disabled': savedFilterService.loading}"
|
||||
:disabled="savedFilterService.loading"
|
||||
class="input"
|
||||
id="Title"
|
||||
placeholder="The saved filter title goes here..."
|
||||
type="text"
|
||||
v-focus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="description">Description</label>
|
||||
<div class="control">
|
||||
<editor
|
||||
v-model="savedFilter.description"
|
||||
:class="{ 'disabled': savedFilterService.loading}"
|
||||
:disabled="savedFilterService.loading"
|
||||
:preview-is-default="false"
|
||||
id="description"
|
||||
placeholder="The description goes here..."
|
||||
v-if="editorActive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="filters">Filters</label>
|
||||
<div class="control">
|
||||
<filters
|
||||
:class="{ 'disabled': savedFilterService.loading}"
|
||||
:disabled="savedFilterService.loading"
|
||||
class="has-no-shadow has-no-border"
|
||||
v-model="filters"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
:class="{ 'disabled': savedFilterService.loading}"
|
||||
:disabled="savedFilterService.loading"
|
||||
@click="create()"
|
||||
class="button is-primary is-fullwidth">
|
||||
Create new saved filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoadingComponent from '@/components/misc/loading'
|
||||
import ErrorComponent from '@/components/misc/error'
|
||||
import Filters from '@/components/list/partials/filters'
|
||||
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(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../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, this))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
157
src/views/filters/EditSavedFilter.vue
Normal file
157
src/views/filters/EditSavedFilter.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div :class="{ 'is-loading': filterService.loading}" class="loader-container edit-list is-max-width-desktop">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Edit Saved Filter
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<form @submit.prevent="save()">
|
||||
<div class="field">
|
||||
<label class="label" for="listtext">Filter Name</label>
|
||||
<div class="control">
|
||||
<input
|
||||
:class="{ 'disabled': filterService.loading}"
|
||||
:disabled="filterService.loading"
|
||||
@keyup.enter="save"
|
||||
class="input"
|
||||
id="listtext"
|
||||
placeholder="The list title goes here..."
|
||||
type="text"
|
||||
v-focus
|
||||
v-model="filter.title"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="listdescription">Description</label>
|
||||
<div class="control">
|
||||
<editor
|
||||
:class="{ 'disabled': filterService.loading}"
|
||||
:disabled="filterService.loading"
|
||||
:preview-is-default="false"
|
||||
id="listdescription"
|
||||
placeholder="The lists description goes here..."
|
||||
v-model="filter.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="filters">Filters</label>
|
||||
<div class="control">
|
||||
<filters
|
||||
:class="{ 'disabled': filterService.loading}"
|
||||
:disabled="filterService.loading"
|
||||
class="has-no-shadow has-no-border"
|
||||
v-model="filters"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="columns bigbuttons">
|
||||
<div class="column">
|
||||
<button :class="{ 'is-loading': filterService.loading}" @click="save()"
|
||||
class="button is-primary is-fullwidth">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<button :class="{ 'is-loading': filterService.loading}" @click="showDeleteModal = true"
|
||||
class="button is-danger is-fullwidth">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal
|
||||
@close="showDeleteModal = false"
|
||||
@submit="deleteList()"
|
||||
v-if="showDeleteModal">
|
||||
<span slot="header">Delete this saved filter</span>
|
||||
<p slot="text">
|
||||
Are you sure you want to delete this saved filter?
|
||||
</p>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ErrorComponent from '../../components/misc/error'
|
||||
import LoadingComponent from '../../components/misc/loading'
|
||||
|
||||
import SavedFilterModel from '@/models/savedFilter'
|
||||
import SavedFilterService from '@/services/savedFilter'
|
||||
import ListModel from '@/models/list'
|
||||
import Filters from '@/components/list/partials/filters'
|
||||
import {objectToSnakeCase} from '@/helpers/case'
|
||||
|
||||
export default {
|
||||
name: 'EditFilter',
|
||||
data() {
|
||||
return {
|
||||
filter: SavedFilterModel,
|
||||
filterService: SavedFilterService,
|
||||
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,
|
||||
},
|
||||
|
||||
showDeleteModal: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Filters,
|
||||
editor: () => ({
|
||||
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
|
||||
loading: LoadingComponent,
|
||||
error: ErrorComponent,
|
||||
timeout: 60000,
|
||||
}),
|
||||
},
|
||||
created() {
|
||||
this.filterService = new SavedFilterService()
|
||||
this.loadSavedFilter()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadSavedFilter',
|
||||
},
|
||||
methods: {
|
||||
loadSavedFilter() {
|
||||
// We assume the listId in the route is the pseudolist
|
||||
const list = new ListModel({id: this.$route.params.id})
|
||||
|
||||
this.filter = new SavedFilterModel({id: list.getSavedFilterId()})
|
||||
this.filterService.get(this.filter)
|
||||
.then(r => {
|
||||
this.filter = r
|
||||
this.filters = objectToSnakeCase(this.filter.filters)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
save() {
|
||||
this.filter.filters = this.filters
|
||||
this.filterService.update(this.filter)
|
||||
.then(r => {
|
||||
this.$store.dispatch('namespaces/loadNamespaces')
|
||||
this.success({message: 'The filter was saved successfully.'}, this)
|
||||
this.filter = r
|
||||
this.filters = objectToSnakeCase(this.filter.filters)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user