fix: task sorting in table

Resolves https://kolaente.dev/vikunja/frontend/issues/2118

src/composables/taskList.ts

@@ -108,5 +108,6 @@ export function useTaskList(listId) {
 		loadTasks,
 		searchTerm: search,
 		params,
+		sortByParam: sortBy,
 	}
 }

src/views/list/ListTable.vue

@@ -55,7 +55,7 @@
 							</card>
 						</template>
 					</popup>
-				<filter-popup v-model="params" />
+					<filter-popup v-model="params"/>
 				</div>
 			</div>
 		</template>
@@ -131,7 +131,7 @@
 									</router-link>
 								</td>
 								<td v-if="activeColumns.done">
-							<Done :is-done="t.done" variant="small" />
+									<Done :is-done="t.done" variant="small"/>
 								</td>
 								<td v-if="activeColumns.title">
 									<router-link :to="taskDetailRoutes[t.id]">{{ t.title }}</router-link>
@@ -180,9 +180,9 @@
 </template>
 
 <script setup lang="ts">
-import { toRef, computed, Ref } from 'vue'
+import {toRef, computed, Ref} from 'vue'
 
-import { useStorage } from '@vueuse/core'
+import {useStorage} from '@vueuse/core'
 
 import ListWrapper from './ListWrapper.vue'
 import Done from '@/components/misc/Done.vue'
@@ -196,7 +196,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
-import { useTaskList } from '@/composables/taskList'
+import {useTaskList} from '@/composables/taskList'
 import TaskModel from '@/models/task'
 
 const ACTIVE_COLUMNS_DEFAULT = {
@@ -225,24 +225,24 @@ const props = defineProps({
 type Order = 'asc' | 'desc' | 'none'
 
 interface SortBy {
-	id : Order
-	done? : Order 
-	title? : Order 
-	priority? : Order 
-	due_date? : Order 
-	start_date? : Order 
-	end_date? : Order 
-	percent_done? : Order 
-	created? : Order 
-	updated? : Order 
+	id: Order
+	done?: Order
+	title?: Order
+	priority?: Order
+	due_date?: Order
+	start_date?: Order
+	end_date?: Order
+	percent_done?: Order
+	created?: Order
+	updated?: Order
 }
 
-const SORT_BY_DEFAULT : SortBy = {
+const SORT_BY_DEFAULT: SortBy = {
 	id: 'desc',
 }
 
-const activeColumns = useStorage('tableViewColumns', { ...ACTIVE_COLUMNS_DEFAULT })
-const sortBy = useStorage<SortBy>('tableViewSortBy', { ...SORT_BY_DEFAULT })
+const activeColumns = useStorage('tableViewColumns', {...ACTIVE_COLUMNS_DEFAULT})
+const sortBy = useStorage<SortBy>('tableViewSortBy', {...SORT_BY_DEFAULT})
 
 const taskList = useTaskList(toRef(props, 'listId'))
 
@@ -251,8 +251,9 @@ const {
 	params,
 	totalPages,
 	currentPage,
+	sortByParam,
 } = taskList
-const tasks : Ref<TaskModel[]> = taskList.tasks
+const tasks: Ref<TaskModel[]> = taskList.tasks
 
 Object.assign(params.value, {
 	filter_by: [],
@@ -261,7 +262,7 @@ Object.assign(params.value, {
 })
 
 // FIXME: by doing this we can have multiple sort orders
-function sort(property : keyof SortBy) {
+function sort(property: keyof SortBy) {
 	const order = sortBy.value[property]
 	if (typeof order === 'undefined' || order === 'none') {
 		sortBy.value[property] = 'desc'
@@ -270,6 +271,7 @@ function sort(property : keyof SortBy) {
 	} else {
 		delete sortBy.value[property]
 	}
+	sortByParam.value = sortBy.value
 }
 
 // TODO: re-enable opening task detail in modal
@@ -279,7 +281,7 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 		id,
 		{
 			name: 'task.detail',
-			params: { id },
+			params: {id},
 			// state: { backdropView: router.currentRoute.value.fullPath },
 		},
 	])),