feat: use script setup for filter views (#951)
Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/951 Reviewed-by: konrad <k@knt.li> Co-authored-by: dpschen <dpschen@noreply.kolaente.de> Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen
40
src/views/filters/FilterDelete.vue
Normal file
40
src/views/filters/FilterDelete.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<modal
|
||||
@close="$router.back()"
|
||||
@submit="deleteSavedFilter()"
|
||||
>
|
||||
<template #header><span>{{ $t('filters.delete.header') }}</span></template>
|
||||
|
||||
<template #text>
|
||||
<p>{{ $t('filters.delete.text') }}</p>
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { store } from '@/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import {success} from '@/message'
|
||||
|
||||
import SavedFilterModel from '@/models/savedFilter'
|
||||
import SavedFilterService from '@/services/savedFilter'
|
||||
import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
async function deleteSavedFilter() {
|
||||
// We assume the listId in the route is the pseudolist
|
||||
const savedFilterId = getSavedFilterIdFromListId(route.params.listId)
|
||||
|
||||
const filterService = new SavedFilterService()
|
||||
const filter = new SavedFilterModel({id: savedFilterId})
|
||||
|
||||
await filterService.delete(filter)
|
||||
await store.dispatch('namespaces/loadNamespaces')
|
||||
success({message: t('filters.delete.success')})
|
||||
router.push({name: 'namespaces.index'})
|
||||
}
|
||||
</script>
|
||||
127
src/views/filters/FilterEdit.vue
Normal file
127
src/views/filters/FilterEdit.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<create-edit
|
||||
:title="$t('filters.edit.title')"
|
||||
primary-icon=""
|
||||
:primary-label="$t('misc.save')"
|
||||
@primary="saveSavedFilter"
|
||||
:tertary="$t('misc.delete')"
|
||||
@tertary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
|
||||
>
|
||||
<form @submit.prevent="saveSavedFilter()">
|
||||
<div class="field">
|
||||
<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
:class="{ 'disabled': filterService.loading}"
|
||||
:disabled="filterService.loading || null"
|
||||
@keyup.enter="saveSavedFilter"
|
||||
class="input"
|
||||
id="title"
|
||||
:placeholder="$t('filters.attributes.titlePlaceholder')"
|
||||
type="text"
|
||||
v-focus
|
||||
v-model="filter.title"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
|
||||
<div class="control">
|
||||
<editor
|
||||
:class="{ 'disabled': filterService.loading}"
|
||||
:disabled="filterService.loading"
|
||||
:preview-is-default="false"
|
||||
id="description"
|
||||
:placeholder="$t('filters.attributes.descriptionPlaceholder')"
|
||||
v-model="filter.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="filters">{{ $t('filters.title') }}</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>
|
||||
</create-edit>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, shallowRef, computed, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { store } from '@/store'
|
||||
import { success } from '@/message'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import {default as Editor} from '@/components/input/AsyncEditor'
|
||||
import CreateEdit from '@/components/misc/create-edit.vue'
|
||||
import Filters from '@/components/list/partials/filters.vue'
|
||||
|
||||
import SavedFilterModel from '@/models/savedFilter'
|
||||
import SavedFilterService from '@/services/savedFilter'
|
||||
|
||||
import {objectToSnakeCase} from '@/helpers/case'
|
||||
import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
function useSavedFilter(listId) {
|
||||
const filterService = shallowRef(new SavedFilterService())
|
||||
|
||||
const filter = ref(new SavedFilterModel())
|
||||
const filters = computed({
|
||||
get: () => filter.value.filters,
|
||||
set(value) {
|
||||
filter.value.filters = value
|
||||
},
|
||||
})
|
||||
|
||||
// loadSavedFilter
|
||||
watch(listId, async () => {
|
||||
// We assume the listId in the route is the pseudolist
|
||||
const savedFilterId = getSavedFilterIdFromListId(route.params.listId)
|
||||
|
||||
filter.value = new SavedFilterModel({id: savedFilterId })
|
||||
const response = await filterService.value.get(filter.value)
|
||||
response.filters = objectToSnakeCase(filter.value.filters)
|
||||
filter.value = response
|
||||
}, { immediate: true })
|
||||
|
||||
async function save() {
|
||||
filter.value.filters = filters.value
|
||||
const response = await filterService.value.update(filter.value)
|
||||
await store.dispatch('namespaces/loadNamespaces')
|
||||
success({message: t('filters.edit.success')})
|
||||
response.filters = objectToSnakeCase(filter.value.filters)
|
||||
filter.value = response
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
filter,
|
||||
filters,
|
||||
filterService,
|
||||
}
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const listId = computed(() => route.params.listId)
|
||||
|
||||
const {
|
||||
save,
|
||||
filter,
|
||||
filters,
|
||||
filterService,
|
||||
} = useSavedFilter(listId)
|
||||
|
||||
const router = useRouter()
|
||||
async function saveSavedFilter() {
|
||||
await save()
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
@ -26,20 +26,20 @@
|
||||
<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
|
||||
<div class="control">
|
||||
<editor
|
||||
:key="savedFilter.id"
|
||||
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
|
||||
<Filters
|
||||
:class="{ 'disabled': savedFilterService.loading}"
|
||||
:disabled="savedFilterService.loading"
|
||||
class="has-no-shadow has-no-border"
|
||||
@ -59,46 +59,30 @@
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AsyncEditor from '@/components/input/AsyncEditor'
|
||||
<script setup>
|
||||
import { ref, shallowRef, computed } from 'vue'
|
||||
|
||||
import { store } from '@/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import {default as Editor} from '@/components/input/AsyncEditor'
|
||||
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: new SavedFilterService(),
|
||||
savedFilter: new SavedFilterModel(),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Filters,
|
||||
editor: AsyncEditor,
|
||||
},
|
||||
created() {
|
||||
this.editorActive = false
|
||||
this.$nextTick(() => this.editorActive = true)
|
||||
},
|
||||
methods: {
|
||||
async create() {
|
||||
this.savedFilter.filters = this.filters
|
||||
const savedFilter = await this.savedFilterService.create(this.savedFilter)
|
||||
await this.$store.dispatch('namespaces/loadNamespaces')
|
||||
this.$router.push({name: 'list.index', params: {listId: savedFilter.getListId()}})
|
||||
},
|
||||
},
|
||||
const savedFilterService = shallowRef(new SavedFilterService())
|
||||
|
||||
const savedFilter = ref(new SavedFilterModel())
|
||||
const filters = computed({
|
||||
get: () => savedFilter.value.filters,
|
||||
set: (value) => (savedFilter.value.filters = value),
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
async function create() {
|
||||
savedFilter.value = await savedFilterService.value.create(savedFilter.value)
|
||||
await store.dispatch('namespaces/loadNamespaces')
|
||||
router.push({name: 'list.index', params: {listId: savedFilter.value.getListId()}})
|
||||
}
|
||||
</script>
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<modal
|
||||
@close="$router.back()"
|
||||
@submit="deleteSavedFilter()"
|
||||
>
|
||||
<template #header><span>{{ $t('filters.delete.header') }}</span></template>
|
||||
|
||||
<template #text>
|
||||
<p>{{ $t('filters.delete.text') }}</p>
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SavedFilterModel from '@/models/savedFilter'
|
||||
import SavedFilterService from '@/services/savedFilter'
|
||||
import ListModel from '@/models/list'
|
||||
|
||||
export default {
|
||||
name: 'filter-settings-delete',
|
||||
data() {
|
||||
return {
|
||||
filterService: new SavedFilterService(),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async deleteSavedFilter() {
|
||||
// We assume the listId in the route is the pseudolist
|
||||
const list = new ListModel({id: this.$route.params.listId})
|
||||
const filter = new SavedFilterModel({id: list.getSavedFilterId()})
|
||||
|
||||
await this.filterService.delete(filter)
|
||||
await this.$store.dispatch('namespaces/loadNamespaces')
|
||||
this.$message.success({message: this.$t('filters.delete.success')})
|
||||
this.$router.push({name: 'namespaces.index'})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<create-edit
|
||||
:title="$t('filters.edit.title')"
|
||||
primary-icon=""
|
||||
:primary-label="$t('misc.save')"
|
||||
@primary="save"
|
||||
:tertary="$t('misc.delete')"
|
||||
@tertary="$router.push({ name: 'filter.list.settings.delete', params: { id: $route.params.listId } })"
|
||||
>
|
||||
<form @submit.prevent="save()">
|
||||
<div class="field">
|
||||
<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
:class="{ 'disabled': filterService.loading}"
|
||||
:disabled="filterService.loading || null"
|
||||
@keyup.enter="save"
|
||||
class="input"
|
||||
id="title"
|
||||
:placeholder="$t('filters.attributes.titlePlaceholder')"
|
||||
type="text"
|
||||
v-focus
|
||||
v-model="filter.title"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
|
||||
<div class="control">
|
||||
<editor
|
||||
:class="{ 'disabled': filterService.loading}"
|
||||
:disabled="filterService.loading"
|
||||
:preview-is-default="false"
|
||||
id="description"
|
||||
:placeholder="$t('filters.attributes.descriptionPlaceholder')"
|
||||
v-model="filter.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="filters">{{ $t('filters.title') }}</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>
|
||||
</create-edit>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AsyncEditor from '@/components/input/AsyncEditor'
|
||||
|
||||
import CreateEdit from '@/components/misc/create-edit.vue'
|
||||
|
||||
import SavedFilterModel from '@/models/savedFilter'
|
||||
import SavedFilterService from '@/services/savedFilter'
|
||||
import ListModel from '@/models/list'
|
||||
import Filters from '@/components/list/partials/filters.vue'
|
||||
import {objectToSnakeCase} from '@/helpers/case'
|
||||
|
||||
export default {
|
||||
name: 'filter-settings-edit',
|
||||
data() {
|
||||
return {
|
||||
filter: SavedFilterModel,
|
||||
filterService: new 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: {
|
||||
CreateEdit,
|
||||
Filters,
|
||||
editor: AsyncEditor,
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': {
|
||||
handler: 'loadSavedFilter',
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async loadSavedFilter() {
|
||||
// We assume the listId in the route is the pseudolist
|
||||
const list = new ListModel({id: this.$route.params.listId})
|
||||
|
||||
this.filter = new SavedFilterModel({id: list.getSavedFilterId()})
|
||||
this.filter = await this.filterService.get(this.filter)
|
||||
this.filters = objectToSnakeCase(this.filter.filters)
|
||||
},
|
||||
async save() {
|
||||
this.filter.filters = this.filters
|
||||
const filter = await this.filterService.update(this.filter)
|
||||
await this.$store.dispatch('namespaces/loadNamespaces')
|
||||
this.$message.success({message: this.$t('filters.edit.success')})
|
||||
this.filter = filter
|
||||
this.filters = objectToSnakeCase(this.filter.filters)
|
||||
this.$router.back()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user