[alphabetical-sort] Done with checkbox

src/components/list/partials/filters.vue

@@ -18,6 +18,23 @@
 					{{ $t('filters.attributes.showDoneTasks') }}
 				</fancycheckbox>
 			</div>
+			<div class="field">
+				<label class="label">{{ $t('task.attributes.sortAlphabetically') }}</label>
+				<div class="control">
+					<flat-pickr
+							:config="flatPickerConfig"
+							@on-close="setStartDateFilter"
+							class="input"
+							:placeholder="$t('filters.attributes.sortAlphabetically')"
+							v-model="filters.startDate"
+					/>
+				</div>
+			</div>
+			<div class="control">
+				<fancycheckbox @change="setSortAlphabetically" v-model="sortAlphabetically">
+					{{ $t('filters.attributes.sortAlphabetically') }}
+				</fancycheckbox>
+			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('misc.search') }}</label>
@@ -190,6 +207,7 @@ import NamespaceService from '@/services/namespace'
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
 import {objectToSnakeCase} from '@/helpers/case'
+import {getDefaultParams} from "../../tasks/mixins/taskList"
 
 // FIXME: merge with DEFAULT_PARAMS in taskList.js
 const DEFAULT_PARAMS = {
@@ -234,6 +252,7 @@ export default {
 		return {
 			params: DEFAULT_PARAMS,
 			filters: DEFAULT_FILTERS,
+			sortAlphabetically: false,
 
 			usersService: new UserService(),
 			foundusers: [],
@@ -490,6 +509,16 @@ export default {
 			}
 			this.change()
 		},
+		setSortAlphabetically() {
+			if ( ! this.sortAlphabetically) {
+				this.params.sort_by	= getDefaultParams().sort_by
+				this.sortAlphabetically	= false
+			} else {
+				this.params.sort_by	= ['title']
+				this.sortAlphabetically	= true
+			}
+			this.change()
+		},
 		setFilterConcat() {
 			if (this.filters.requireAllFilters) {
 				this.params.filter_concat = 'and'

src/components/tasks/mixins/taskList.js

@@ -27,6 +27,8 @@ export default {
 
 			showTaskFilter: false,
 			params: {...getDefaultParams()},
+
+			sorting: getDefaultParams().sort_by,
 		}
 	},
 	watch: {
@@ -44,7 +46,10 @@ export default {
 			params = null,
 			forceLoading = false,
 		) {
-
+			console.log( page )
+			console.log( search )
+			console.log( params )
+			console.log( forceLoading )
 			// 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 (
@@ -59,10 +64,15 @@ export default {
 				params = this.params
 			}
 
+			console.log( this.params )
+			
 			if (search !== '') {
 				params.s = search
 			}
 
+			//Save current sort
+			this.sorting	= params.sort_by
+
 			const list = {listId: parseInt(this.$route.params.listId)}
 
 			const currentList = {

src/i18n/lang/en.json

@@ -373,6 +373,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 || !canDrag },
 						}"
 					>
 						<template #item="{element: t}">
@@ -216,6 +216,9 @@ export default {
 		canWrite() {
 			return this.list.maxRight > Rights.READ && this.list.id > 0
 		},
+		canDrag() {
+			return ! this.isAlphabeticalSorting()
+		},
 		list() {
 			return this.$store.state.currentList
 		},
@@ -224,6 +227,9 @@ export default {
 		this.$nextTick(() => (this.ctaVisible = true))
 	},
 	methods: {
+		isAlphabeticalSorting() {
+			return this.sorting.find( sortBy => sortBy === 'title' ) !== undefined
+		},
 		searchTasks() {
 			// Only search if the search term changed
 			if (this.$route.query === this.searchTerm) {
@@ -254,13 +260,17 @@ export default {
 		focusNewTaskInput() {
 			this.$refs.newTaskInput.$refs.newTaskInput.focus()
 		},
-		updateTaskList(task) {
-			const tasks = [
-				task,
-				...this.tasks,
-			]
-			this.tasks = tasks
+		updateTaskList() {
+			// const tasks = [
+			// 	task,
+			// 	...this.tasks,
+			// ]
+			// this.tasks = tasks
 			this.$store.commit(HAS_TASKS, true)
+			this.reloadTasksWithCurrentFilterAndSorting()
+		},
+		reloadTasksWithCurrentFilterAndSorting(){
+			this.loadTasks(undefined, undefined, undefined, true)
 		},
 		editTask(id) {
 			// Find the selected task and set it to the current object

vite.config.js

@@ -125,6 +125,9 @@ export default defineConfig({
 		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
 	},
 	server: {
+		watch: {
+			usePolling: true,
+		},
 		port: 5000,
 		strictPort: true,
 	},