feat: provide listId prop via router

src/composables/taskList.js

@@ -1,5 +1,5 @@
-import { ref, watch, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, shallowReactive, watch, computed } from 'vue'
+import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
 
@@ -13,102 +13,104 @@ export const getDefaultParams = () => ({
 	filter_concat: 'and',
 })
 
+
+const filters = {
+	done: {
+		value: false,
+		comparator: 'equals',
+		concat: 'and',
+	},
+}
+
+const SORT_BY_DEFAULT = {
+	id: 'desc',
+}
+
 /**
  * This mixin provides a base set of methods and properties to get tasks on a list.
  */
-export function useTaskList(initTasks) {
-	const taskCollectionService = ref(new TaskCollectionService())
-	const loading = computed(() => taskCollectionService.value.loading)
-	const totalPages = computed(() => taskCollectionService.value.totalPages)
+export function useTaskList(listId) {
+	const params = ref({...getDefaultParams()})
+	
+	const search = ref('')
+	const page = ref(1)
+
+	const sortBy = ref({ ...SORT_BY_DEFAULT })
+
+
+	// This makes sure an id sort order is always sorted last.
+	// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
+	// precedence over everything else, making any other sort columns pretty useless.
+	function formatSortOrder(params) {
+		let hasIdFilter = false
+		const sortKeys = Object.keys(sortBy.value)
+		for (const s of sortKeys) {
+			if (s === 'id') {
+				sortKeys.splice(s, 1)
+				hasIdFilter = true
+				break
+			}
+		}
+		if (hasIdFilter) {
+			sortKeys.push('id')
+		}
+		params.sort_by = sortKeys
+		params.order_by = sortKeys.map(s => sortBy.value[s])
+
+		return params
+	}
+
+	const getAllTasksParams = computed(() => {
+		let loadParams = {...params.value}
+
+		if (search.value !== '') {
+			loadParams.s = search.value
+		}
+
+		loadParams = formatSortOrder(loadParams)
+
+		return [
+			{listId: listId.value},
+			loadParams,
+			page.value || 1,
+		]
+	})
+
+	const taskCollectionService = shallowReactive(new TaskCollectionService())
+	const loading = computed(() => taskCollectionService.loading)
+	const totalPages = computed(() => taskCollectionService.totalPages)
 
 	const tasks = ref([])
-	const currentPage = ref(0)
-	const loadedList = ref(null)
-	const searchTerm = ref('')
-	const showTaskFilter = ref(false)
-	const params = ref({...getDefaultParams()})
-
-	const route = useRoute()
-
-	async function loadTasks(
-		page = 1,
-		search = '',
-		loadParams = { ...params.value },
-		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 (
-			route.name !== 'list.list' &&
-			route.name !== 'list.table' &&
-			!forceLoading
-		) {
-			return
-		}
-
-		if (search !== '') {
-			loadParams.s = search
-		}
-
-		const list = {listId: parseInt(route.params.listId)}
-
-		const currentList = {
-			id: list.listId,
-			params: loadParams,
-			search,
-			page,
-		}
-		if (
-			JSON.stringify(currentList) === JSON.stringify(loadedList.value) &&
-			!forceLoading
-		) {
-			return
-		}
-
-		tasks.value = []
-		tasks.value = await taskCollectionService.value.getAll(list, loadParams, page)
-		currentPage.value = page
-		loadedList.value = JSON.parse(JSON.stringify(currentList))
-
+	async function loadTasks() {
+		tasks.value = await taskCollectionService.getAll(...getAllTasksParams.value)
 		return tasks.value
 	}
 
-	async function loadTasksForPage(query) {
-		const { page, search } = query
-		initTasks(params)
-		return await loadTasks(
-			// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
-			typeof page === 'undefined' ? 1 : Number(page),
-			search,
-			params.value,
-		)
-	}
-		
-	async function loadTasksOnSavedFilter() {
-		if (
-			typeof route.params.listId !== 'undefined' &&
-			parseInt(route.params.listId) < 0
-		) {
-			await loadTasks(1, '', null, true)
-		}
-	}
+	const route = useRoute()
+	watch(() => route.query, (query) => {
+		const { page: pageQuery, search: searchQuery } = query
+		search.value = searchQuery
+		page.value = pageQuery
 
-	function initTaskList() {
-		// Only listen for query path changes
-		watch(() => route.query, loadTasksForPage, { immediate: true })
-		watch(() => route.path, loadTasksOnSavedFilter)
-	}
+	}, { immediate: true })
+
+
+	// Only listen for query path changes
+	watch(() => JSON.stringify(getAllTasksParams.value), (newParams, oldParams) => {
+		if (oldParams === newParams) {
+			return
+		}
+
+		loadTasks()
+	}, { immediate: true })
 
 	return {
 		tasks,
-		initTaskList,
 		loading,
 		totalPages,
-		currentPage,
-		showTaskFilter,
+		currentPage: page,
 		loadTasks,
-		searchTerm,
+		searchTerm: search,
 		params,
 	}
 }