feat/alphabetical-sort (#1162)

Alphabetical sorting.
Disables re-ordering when applied.
Does not work with the search button as expected, but neither do the filters tbh... Works fine with the search in the filters menu.

I know we talked about having a dropdown but since this is pretty much finished I thought I'd submit a PR. I am a bit short on time these days but may submit a new PR to add the dropdown ( should be simple enough )

Co-authored-by: Stefan Genov <stefantigro@gmail.com>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1162
Reviewed-by: konrad <k@knt.li>
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-authored-by: Michaelpalacce <stefantigro@gmail.com>
Co-committed-by: Michaelpalacce <stefantigro@gmail.com>

src/components/list/partials/filters.vue

@@ -1,23 +1,24 @@
 <template>
 	<card class="filters has-overflow">
-		<fancycheckbox v-model="params.filter_include_nulls">
-			{{ $t('filters.attributes.includeNulls') }}
-		</fancycheckbox>
-		<fancycheckbox
-			v-model="filters.requireAllFilters"
-			@change="setFilterConcat()"
-		>
-			{{ $t('filters.attributes.requireAll') }}
-		</fancycheckbox>
 		<div class="field">
-			<label class="label">
+			<fancycheckbox v-model="params.filter_include_nulls">
+				{{ $t('filters.attributes.includeNulls') }}
+			</fancycheckbox>
+			<fancycheckbox
+				v-model="filters.requireAllFilters"
+				@change="setFilterConcat()"
+			>
+				{{ $t('filters.attributes.requireAll') }}
+			</fancycheckbox>
+			<fancycheckbox @change="setDoneFilter" v-model="filters.done">
 				{{ $t('filters.attributes.showDoneTasks') }}
-			</label>
-			<div class="control">
-				<fancycheckbox @change="setDoneFilter" v-model="filters.done">
-					{{ $t('filters.attributes.showDoneTasks') }}
-				</fancycheckbox>
-			</div>
+			</fancycheckbox>
+			<fancycheckbox
+				v-if="!$route.name.includes('list.kanban') || !$route.name.includes('list.table')"
+				v-model="sortAlphabetically"
+			>
+				{{ $t('filters.attributes.sortAlphabetically') }}
+			</fancycheckbox>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('misc.search') }}</label>
@@ -190,6 +191,7 @@ import NamespaceService from '@/services/namespace'
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
 import {objectToSnakeCase} from '@/helpers/case'
+import {getDefaultParams} from '@/components/tasks/mixins/taskList'
 
 // FIXME: merge with DEFAULT_PARAMS in taskList.js
 const DEFAULT_PARAMS = {
@@ -220,6 +222,8 @@ const DEFAULT_FILTERS = {
 	namespace: '',
 }
 
+export const ALPHABETICAL_SORT	= 'title'
+
 export default {
 	name: 'filters',
 	components: {
@@ -272,6 +276,18 @@ export default {
 		},
 	},
 	computed: {
+		sortAlphabetically: {
+			get() {
+				return this.params?.sort_by?.find(sortBy => sortBy === ALPHABETICAL_SORT) !== undefined
+			},
+			set(sortAlphabetically) {
+				this.params.sort_by	= sortAlphabetically
+					? [ALPHABETICAL_SORT]
+					: getDefaultParams().sort_by
+
+				this.change()
+			},
+		},
 		foundLabels() {
 			return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
 		},

src/components/tasks/mixins/taskList.js

@@ -44,7 +44,6 @@ export default {
 			params = null,
 			forceLoading = false,
 		) {
-
 			// Because this function is triggered every time on topNavigation, we're putting a condition here to only load it when we actually want to show tasks
 			// FIXME: This is a bit hacky -> Cleanup.
 			if (

src/i18n/lang/en.json

@@ -374,6 +374,7 @@
       "includeNulls": "Include Tasks which don't have a value set",
       "requireAll": "Require all filters to be true for a task to show up",
       "showDoneTasks": "Show Done Tasks",
+      "sortAlphabetically": "Sort Alphabetically",
       "enablePriority": "Enable Filter By Priority",
       "enablePercentDone": "Enable Filter By Percent Done",
       "dueDateRange": "Due Date Range",

src/views/list/views/List.vue

@@ -81,7 +81,7 @@
 						:disabled="!canWrite"
 						item-key="id"
 						:component-data="{
-							class: { 'dragging-disabled': !canWrite },
+							class: { 'dragging-disabled': !canWrite || isAlphabeticalSorting },
 						}"
 					>
 						<template #item="{element: t}">
@@ -148,6 +148,7 @@ import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup'
+import { ALPHABETICAL_SORT } from '@/components/list/partials/filters'
 
 import draggable from 'vuedraggable'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
@@ -206,6 +207,9 @@ export default {
 		saveListView(this.$route.params.listId, this.$route.name)
 	},
 	computed: {
+		isAlphabeticalSorting() {
+			return this.params.sort_by.find( sortBy => sortBy === ALPHABETICAL_SORT ) !== undefined
+		},
 		firstNewPosition() {
 			if (this.tasks.length === 0) {
 				return 0
@@ -254,12 +258,18 @@ export default {
 		focusNewTaskInput() {
 			this.$refs.newTaskInput.$refs.newTaskInput.focus()
 		},
-		updateTaskList(task) {
-			const tasks = [
-				task,
-				...this.tasks,
-			]
-			this.tasks = tasks
+		updateTaskList( task ) {
+			if ( this.isAlphabeticalSorting ) {
+				// reload tasks with current filter and sorting
+				this.loadTasks(1, undefined, undefined, true)
+			}
+			else {
+				this.tasks = [
+					task,
+					...this.tasks,
+				]
+			}
+
 			this.$store.commit(HAS_TASKS, true)
 		},
 		editTask(id) {