forked from vikunja/frontend
136 lines
3.8 KiB
Vue
136 lines
3.8 KiB
Vue
<template>
|
|
<create-edit
|
|
:title="$t('filters.edit.title')"
|
|
primary-icon=""
|
|
:primary-label="$t('misc.save')"
|
|
@primary="saveSavedFilter"
|
|
:tertiary="$t('misc.delete')"
|
|
@tertiary="$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 || undefined"
|
|
@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 lang="ts">
|
|
import {ref, shallowRef, computed, watch, unref } from 'vue'
|
|
import {useRouter, useRoute} from 'vue-router'
|
|
import {success} from '@/message'
|
|
import {useI18n} from 'vue-i18n'
|
|
import type {MaybeRef} from '@vueuse/core'
|
|
|
|
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'
|
|
import type {IList} from '@/modelTypes/IList'
|
|
|
|
import {useBaseStore} from '@/stores/base'
|
|
import {useNamespaceStore} from '@/stores/namespaces'
|
|
|
|
const {t} = useI18n({useScope: 'global'})
|
|
const baseStore = useBaseStore()
|
|
const namespaceStore = useNamespaceStore()
|
|
|
|
function useSavedFilter(listId: MaybeRef<IList['id']>) {
|
|
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(() => unref(listId), async () => {
|
|
// We assume the listId in the route is the pseudolist
|
|
const savedFilterId = getSavedFilterIdFromListId(Number(route.params.listId as string))
|
|
|
|
filter.value = new SavedFilterModel({id: savedFilterId})
|
|
const response = await filterService.value.get(filter.value)
|
|
response.filters = objectToSnakeCase(response.filters)
|
|
filter.value = response
|
|
}, {immediate: true})
|
|
|
|
async function save() {
|
|
filter.value.filters = filters.value
|
|
const response = await filterService.value.update(filter.value)
|
|
await namespaceStore.loadNamespaces()
|
|
success({message: t('filters.edit.success')})
|
|
response.filters = objectToSnakeCase(response.filters)
|
|
filter.value = response
|
|
}
|
|
|
|
return {
|
|
save,
|
|
filter,
|
|
filters,
|
|
filterService,
|
|
}
|
|
}
|
|
|
|
const route = useRoute()
|
|
const listId = computed(() => Number(route.params.listId as string))
|
|
|
|
const {
|
|
save,
|
|
filter,
|
|
filters,
|
|
filterService,
|
|
} = useSavedFilter(listId)
|
|
|
|
const router = useRouter()
|
|
|
|
async function saveSavedFilter() {
|
|
await save()
|
|
await baseStore.setCurrentList({list: filter})
|
|
router.back()
|
|
}
|
|
</script>
|