diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue
index cbbb82f14..42f84f95c 100644
--- a/src/components/list/partials/filters.vue
+++ b/src/components/list/partials/filters.vue
@@ -191,7 +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'
+import {getDefaultParams} from '@/composables/taskList'
// FIXME: merge with DEFAULT_PARAMS in taskList.js
const DEFAULT_PARAMS = {
diff --git a/src/components/tasks/mixins/taskList.js b/src/components/tasks/mixins/taskList.js
deleted file mode 100644
index a9b2e5878..000000000
--- a/src/components/tasks/mixins/taskList.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import TaskCollectionService from '@/services/taskCollection'
-
-// FIXME: merge with DEFAULT_PARAMS in filters.vue
-export const getDefaultParams = () => ({
- sort_by: ['position', 'id'],
- order_by: ['asc', 'desc'],
- filter_by: ['done'],
- filter_value: ['false'],
- filter_comparator: ['equals'],
- filter_concat: 'and',
-})
-
-/**
- * This mixin provides a base set of methods and properties to get tasks on a list.
- */
-export default {
- data() {
- return {
- taskCollectionService: new TaskCollectionService(),
- tasks: [],
-
- currentPage: 0,
-
- loadedList: null,
-
- searchTerm: '',
-
- showTaskFilter: false,
- params: {...getDefaultParams()},
- }
- },
- watch: {
- // Only listen for query path changes
- '$route.query': {
- handler: 'loadTasksForPage',
- immediate: true,
- },
- '$route.path': 'loadTasksOnSavedFilter',
- },
- methods: {
- async loadTasks(
- page,
- search = '',
- 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 (
- this.$route.name !== 'list.list' &&
- this.$route.name !== 'list.table' &&
- !forceLoading
- ) {
- return
- }
-
- if (params === null) {
- params = this.params
- }
-
- if (search !== '') {
- params.s = search
- }
-
- const list = {listId: parseInt(this.$route.params.listId)}
-
- const currentList = {
- id: list.listId,
- params,
- search,
- page,
- }
- if (JSON.stringify(currentList) === JSON.stringify(this.loadedList) && !forceLoading) {
- return
- }
-
- this.tasks = []
- this.tasks = await this.taskCollectionService.getAll(list, params, page)
- this.currentPage = page
- this.loadedList = JSON.parse(JSON.stringify(currentList))
- },
-
- loadTasksForPage(e) {
- // The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
- let page = Number(e.page)
- if (typeof e.page === 'undefined') {
- page = 1
- }
- let search = e.search
- if (typeof e.search === 'undefined') {
- search = ''
- }
- this.initTasks(page, search)
- },
- loadTasksOnSavedFilter() {
- if (typeof this.$route.params.listId !== 'undefined' && parseInt(this.$route.params.listId) < 0) {
- this.loadTasks(1, '', null, true)
- }
- },
- },
-}
\ No newline at end of file
diff --git a/src/composables/taskList.js b/src/composables/taskList.js
new file mode 100644
index 000000000..85d9cddf9
--- /dev/null
+++ b/src/composables/taskList.js
@@ -0,0 +1,112 @@
+import { ref, watch, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import TaskCollectionService from '@/services/taskCollection'
+
+// FIXME: merge with DEFAULT_PARAMS in filters.vue
+export const getDefaultParams = () => ({
+ sort_by: ['position', 'id'],
+ order_by: ['asc', 'desc'],
+ filter_by: ['done'],
+ filter_value: ['false'],
+ filter_comparator: ['equals'],
+ filter_concat: 'and',
+})
+
+/**
+ * This mixin provides a base set of methods and properties to get tasks on a list.
+ */
+export function createTaskList(initTasks) {
+ const taskCollectionService = ref(new TaskCollectionService())
+ const loading = computed(() => taskCollectionService.value.loading)
+ const totalPages = computed(() => taskCollectionService.value.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 loadTasksForPage(query) {
+ const { page, search } = query
+ initTasks(params)
+ 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)
+ }
+ }
+
+ function initTaskList() {
+ // Only listen for query path changes
+ watch(() => route.query, loadTasksForPage, { immediate: true })
+ watch(() => route.path, loadTasksOnSavedFilter)
+ }
+
+ return {
+ tasks,
+ initTaskList,
+ loading,
+ totalPages,
+ currentPage,
+ showTaskFilter,
+ loadTasks,
+ searchTerm,
+ params,
+ }
+}
\ No newline at end of file
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index c5e41ff9e..e663759dd 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -8,28 +8,28 @@
{{ $t('list.list.title') }}
{{ $t('list.gantt.title') }}
{{ $t('list.table.title') }}
{{ $t('list.kanban.title') }}
@@ -69,11 +69,6 @@ export default {
},
},
computed: {
- currentListType() {
- // default: 'list',
- return ''
- },
-
// Computed property to let "listId" always have a value
listId() {
return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index ff59e46e6..299de6c7d 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -1,6 +1,6 @@