ami/tl-vikunja
1
0
Fork 0
Code

feat: unify savedFilter logic in service (#2491)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2491
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-10-27 19:56:14 +00:00 committed by konrad
parent 9ded3d0cd6
commit 9807858436
10 changed files with 155 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/list/list-settings-dropdown.vue
View File

@ -78,12 +78,13 @@
<script setup lang="ts">
import {ref, computed, watchEffect, type PropType} from 'vue'
import {isSavedFilter} from '@/helpers/savedFilter'
import Dropdown from '@/components/misc/dropdown.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
import Subscription from '@/components/misc/subscription.vue'
import type {IList} from '@/modelTypes/IList'
import type {ISubscription} from '@/modelTypes/ISubscription'
import {isSavedFilter} from '@/services/savedFilter'
import {useConfigStore} from '@/stores/config'
import {useListStore} from '@/stores/lists'
import {useNamespaceStore} from '@/stores/namespaces'

14
src/helpers/savedFilter.ts
View File

@ -1,14 +0,0 @@
import type {IList} from '@/modelTypes/IList'
export function getSavedFilterIdFromListId(listId: IList['id']) {
let filterId = listId * -1 - 1
// FilterIds from listIds are always positive
if (filterId < 0) {
filterId = 0
}
return filterId
}
export function isSavedFilter(list: IList) {
return getSavedFilterIdFromListId(list.id) > 0
}

13
src/models/savedFilter.ts
View File

@ -31,17 +31,4 @@ export default class SavedFilterModel extends AbstractModel<ISavedFilter> implem
this.created = new Date(this.created)
this.updated = new Date(this.updated)
}
/**
* Calculates the corresponding list id to this saved filter.
* This function matches the one in the api.
* @returns {number}
*/
getListId() {
let listId = this.id * -1 - 1
if (listId > 0) {
listId = 0
}
return listId
}
}

2
src/router/index.ts
View File

@ -332,6 +332,7 @@ const router = createRouter({
meta: {
showAsModal: true,
},
props: route => ({ listId: Number(route.params.listId as string) }),
},
{
path: '/lists/:listId/settings/delete',
@ -340,6 +341,7 @@ const router = createRouter({
meta: {
showAsModal: true,
},
props: route => ({ listId: Number(route.params.listId as string) }),
},
{
path: '/lists/:listId/info',

113
src/services/savedFilter.ts
View File

@ -1,7 +1,46 @@
import AbstractService from '@/services/abstractService'
import SavedFilterModel from '@/models/savedFilter'
import {computed, ref, shallowReactive, unref, watch} from 'vue'
import {useRouter} from 'vue-router'
import {useI18n} from 'vue-i18n'
import type {MaybeRef} from '@vueuse/core'
import type {IList} from '@/modelTypes/IList'
import type {ISavedFilter} from '@/modelTypes/ISavedFilter'
import {objectToCamelCase} from '@/helpers/case'
import AbstractService from '@/services/abstractService'
import SavedFilterModel from '@/models/savedFilter'
import {useBaseStore} from '@/stores/base'
import {useNamespaceStore} from '@/stores/namespaces'
import {objectToSnakeCase, objectToCamelCase} from '@/helpers/case'
import {success} from '@/message'
import ListModel from '@/models/list'
/**
* Calculates the corresponding list id to this saved filter.
* This function matches the one in the api.
*/
function getListId(savedFilter: ISavedFilter) {
let listId = savedFilter.id * -1 - 1
if (listId > 0) {
listId = 0
}
return listId
}
export function getSavedFilterIdFromListId(listId: IList['id']) {
let filterId = listId * -1 - 1
// FilterIds from listIds are always positive
if (filterId < 0) {
filterId = 0
}
return filterId
}
export function isSavedFilter(list: IList) {
return getSavedFilterIdFromListId(list.id) > 0
}
export default class SavedFilterService extends AbstractService<ISavedFilter> {
constructor() {
@ -37,3 +76,71 @@ export default class SavedFilterService extends AbstractService<ISavedFilter> {
return this.processModel(model)
}
}
export function useSavedFilter(listId?: MaybeRef<IList['id']>) {
const router = useRouter()
const {t} = useI18n({useScope:'global'})
const namespaceStore = useNamespaceStore()
const filterService = shallowReactive(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 (watchedListId) => {
if (watchedListId === undefined) {
return
}
// We assume the listId in the route is the pseudolist
const savedFilterId = getSavedFilterIdFromListId(watchedListId)
filter.value = new SavedFilterModel({id: savedFilterId})
const response = await filterService.get(filter.value)
response.filters = objectToSnakeCase(response.filters)
filter.value = response
}, {immediate: true})
async function createFilter() {
filter.value = await filterService.create(filter.value)
await namespaceStore.loadNamespaces()
router.push({name: 'list.index', params: {listId: getListId(filter.value)}})
}
async function saveFilter() {
const response = await filterService.update(filter.value)
await namespaceStore.loadNamespaces()
success({message: t('filters.edit.success')})
response.filters = objectToSnakeCase(response.filters)
filter.value = response
await useBaseStore().setCurrentList(new ListModel({
id: getListId(filter.value),
title: filter.value.title,
}))
router.back()
}
async function deleteFilter() {
await filterService.delete(filter.value)
await namespaceStore.loadNamespaces()
success({message: t('filters.delete.success')})
router.push({name: 'namespaces.index'})
}
return {
createFilter,
saveFilter,
deleteFilter,
filter,
filters,
filterService,
}
}

35
src/views/filters/FilterDelete.vue
View File

@ -1,9 +1,11 @@
<template>
<modal
@close="$router.back()"
@submit="deleteSavedFilter()"
@submit="deleteFilter()"
>
<template #header><span>{{ $t('filters.delete.header') }}</span></template>
<template #header>
<span>{{ $t('filters.delete.header') }}</span>
</template>
<template #text>
<p>{{ $t('filters.delete.text') }}</p>
@ -12,30 +14,11 @@
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
import {success} from '@/message'
import {toRef} from 'vue'
import type {IList} from '@/modelTypes/IList'
import {useSavedFilter} from '@/services/savedFilter'
import SavedFilterModel from '@/models/savedFilter'
import SavedFilterService from '@/services/savedFilter'
import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
import {useNamespaceStore} from '@/stores/namespaces'
const props = defineProps<{ listId: IList['id'] }>()
const { t } = useI18n({useScope: 'global'})
const router = useRouter()
const route = useRoute()
const namespaceStore = useNamespaceStore()
async function deleteSavedFilter() {
// We assume the listId in the route is the pseudolist
const savedFilterId = getSavedFilterIdFromListId(Number((route.params.listId as string)))
const filterService = new SavedFilterService()
const filter = new SavedFilterModel({id: savedFilterId})
await filterService.delete(filter)
await namespaceStore.loadNamespaces()
success({message: t('filters.delete.success')})
router.push({name: 'namespaces.index'})
}
const {deleteFilter} = useSavedFilter(toRef(props, 'listId'))
</script>

82
src/views/filters/FilterEdit.vue
View File

@ -3,18 +3,18 @@
:title="$t('filters.edit.title')"
primary-icon=""
:primary-label="$t('misc.save')"
@primary="saveSavedFilter"
@primary="saveFilter"
:tertiary="$t('misc.delete')"
@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: listId } })"
>
<form @submit.prevent="saveSavedFilter()">
<form @submit.prevent="saveFilter()">
<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"
@keyup.enter="saveFilter"
class="input"
id="title"
:placeholder="$t('filters.attributes.titlePlaceholder')"
@ -52,84 +52,22 @@
</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 {toRef} from 'vue'
import {default as Editor} from '@/components/input/AsyncEditor'
import 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 {useSavedFilter} 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 props = defineProps<{ listId: IList['id'] }>()
const {
save,
saveFilter,
filter,
filters,
filterService,
} = useSavedFilter(listId)
const router = useRouter()
async function saveSavedFilter() {
await save()
await baseStore.setCurrentList({list: filter})
router.back()
}
} = useSavedFilter(toRef(props, 'listId'))
</script>

56
src/views/filters/FilterNew.vue
View File

@ -11,9 +11,9 @@
<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 || undefined"
v-model="filter.title"
:class="{ 'disabled': filterService.loading}"
:disabled="filterService.loading || undefined"
class="input"
id="Title"
:placeholder="$t('filters.attributes.titlePlaceholder')"
@ -26,10 +26,10 @@
<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"
:key="filter.id"
v-model="filter.description"
:class="{ 'disabled': filterService.loading}"
:disabled="filterService.loading"
:preview-is-default="false"
id="description"
:placeholder="$t('filters.attributes.descriptionPlaceholder')"
@ -40,8 +40,8 @@
<label class="label" for="filters">{{ $t('filters.title') }}</label>
<div class="control">
<Filters
:class="{ 'disabled': savedFilterService.loading}"
:disabled="savedFilterService.loading"
:class="{ 'disabled': filterService.loading}"
:disabled="filterService.loading"
class="has-no-shadow has-no-border"
v-model="filters"
/>
@ -50,9 +50,9 @@
<template #footer>
<x-button
:loading="savedFilterService.loading"
:disabled="savedFilterService.loading"
@click="create()"
:loading="filterService.loading"
:disabled="filterService.loading"
@click="createFilter()"
class="is-fullwidth"
>
{{ $t('filters.create.action') }}
@ -63,31 +63,15 @@
</template>
<script setup lang="ts">
import { ref, shallowRef, computed } from 'vue'
import { useRouter } from 'vue-router'
import {default as Editor} from '@/components/input/AsyncEditor'
import Editor from '@/components/input/AsyncEditor'
import Filters from '@/components/list/partials/filters.vue'
import SavedFilterService from '@/services/savedFilter'
import SavedFilterModel from '@/models/savedFilter'
import {useNamespaceStore} from '@/stores/namespaces'
import {useSavedFilter} from '@/services/savedFilter'
const namespaceStore = useNamespaceStore()
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 namespaceStore.loadNamespaces()
router.push({name: 'list.index', params: {listId: savedFilter.value.getListId()}})
}
const {
filter,
filters,
createFilter,
filterService,
} = useSavedFilter()
</script>

2
src/views/list/ListKanban.vue
View File

@ -238,7 +238,7 @@ import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveC
import {calculateItemPosition} from '../../helpers/calculateItemPosition'
import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
import {isSavedFilter} from '@/helpers/savedFilter'
import {isSavedFilter} from '@/services/savedFilter'
import {useBaseStore} from '@/stores/base'
import {useTaskStore} from '@/stores/tasks'

2
src/views/list/ListList.vue
View File

@ -158,7 +158,7 @@ import {useTaskList} from '@/composables/useTaskList'
import {RIGHTS as Rights} from '@/constants/rights'
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
import type {ITask} from '@/modelTypes/ITask'
import {isSavedFilter} from '@/helpers/savedFilter'
import {isSavedFilter} from '@/services/savedFilter'
import {useBaseStore} from '@/stores/base'
import {useTaskStore} from '@/stores/tasks'