feat: use script setup for filter views (#951)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: vikunja/frontend#951
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>

src/components/list/partials/filters.vue

@@ -189,6 +189,8 @@ import ListService from '@/services/list'
 import NamespaceService from '@/services/namespace'
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
+import {objectToSnakeCase} from '@/helpers/case'
+
 // FIXME: merge with DEFAULT_PARAMS in taskList.js
 const DEFAULT_PARAMS = {
 	sort_by: [],
@@ -261,7 +263,9 @@ export default {
 	watch: {
 		modelValue: {
 			handler(value) {
-				this.params = value
+				// FIXME: filters should only be converted to snake case in
+				// the last moment
+				this.params = objectToSnakeCase(value)
 				this.prepareFilters()
 			},
 			immediate: true,

src/router/index.js

@@ -35,15 +35,17 @@ import ListSettingDuplicate from '../views/list/settings/duplicate'
 import ListSettingShare from '../views/list/settings/share'
 import ListSettingDelete from '../views/list/settings/delete'
 import ListSettingArchive from '../views/list/settings/archive'
-import FilterSettingEdit from '../views/filters/settings/edit'
-import FilterSettingDelete from '../views/filters/settings/delete'
+
 // Namespace Settings
 import NamespaceSettingEdit from '../views/namespaces/settings/edit'
 import NamespaceSettingShare from '../views/namespaces/settings/share'
 import NamespaceSettingArchive from '../views/namespaces/settings/archive'
 import NamespaceSettingDelete from '../views/namespaces/settings/delete'
+
 // Saved Filters
-import CreateSavedFilter from '../views/filters/CreateSavedFilter'
+import FilterNew from '@/views/filters/FilterNew'
+import FilterEdit from '@/views/filters/FilterEdit'
+import FilterDelete from '@/views/filters/FilterDelete'
 
 const PasswordResetComponent = () => import('../views/user/PasswordReset')
 const GetPasswordResetComponent = () => import('../views/user/RequestPasswordReset')
@@ -279,14 +281,14 @@ const router = createRouter({
 			path: '/lists/:listId/settings/edit',
 			name: 'filter.settings.edit',
 			components: {
-				popup: FilterSettingEdit,
+				popup: FilterEdit,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/delete',
 			name: 'filter.settings.delete',
 			components: {
-				popup: FilterSettingDelete,
+				popup: FilterDelete,
 			},
 		},
 		{
@@ -337,12 +339,12 @@ const router = createRouter({
 						{
 							path: '/lists/:listId/settings/edit',
 							name: 'filter.list.settings.edit',
-							component: FilterSettingEdit,
+							component: FilterEdit,
 						},
 						{
 							path: '/lists/:listId/settings/delete',
 							name: 'filter.list.settings.delete',
-							component: FilterSettingDelete,
+							component: FilterDelete,
 						},
 					],
 				},
@@ -389,12 +391,12 @@ const router = createRouter({
 						{
 							path: '/lists/:listId/settings/edit',
 							name: 'filter.gantt.settings.edit',
-							component: FilterSettingEdit,
+							component: FilterEdit,
 						},
 						{
 							path: '/lists/:listId/settings/delete',
 							name: 'filter.gantt.settings.delete',
-							component: FilterSettingDelete,
+							component: FilterDelete,
 						},
 					],
 				},
@@ -436,12 +438,12 @@ const router = createRouter({
 						{
 							path: '/lists/:listId/settings/edit',
 							name: 'filter.table.settings.edit',
-							component: FilterSettingEdit,
+							component: FilterEdit,
 						},
 						{
 							path: '/lists/:listId/settings/delete',
 							name: 'filter.table.settings.delete',
-							component: FilterSettingDelete,
+							component: FilterDelete,
 						},
 					],
 				},
@@ -488,12 +490,12 @@ const router = createRouter({
 						{
 							path: '/lists/:listId/settings/edit',
 							name: 'filter.kanban.settings.edit',
-							component: FilterSettingEdit,
+							component: FilterEdit,
 						},
 						{
 							path: '/lists/:listId/settings/delete',
 							name: 'filter.kanban.settings.delete',
-							component: FilterSettingDelete,
+							component: FilterDelete,
 						},
 					],
 				},
@@ -542,7 +544,7 @@ const router = createRouter({
 			path: '/filters/new',
 			name: 'filters.create',
 			components: {
-				popup: CreateSavedFilter,
+				popup: FilterNew,
 			},
 		},
 		{

src/views/filters/FilterDelete.vue

@@ -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>

src/views/filters/FilterEdit.vue

@@ -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>

src/views/filters/FilterNew.vue

@@ -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>

src/views/filters/settings/delete.vue

@@ -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>

src/views/filters/settings/edit.vue

@@ -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>