From 7f4114b7032c24d9305c7c731ad1fef2f9390dcd Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 18 Oct 2022 16:26:35 +0200
Subject: [PATCH] feat: move useGanttTaskList in separate file

---
 src/composables/taskList.ts                |   2 +-
 src/helpers/time/parseDateProp.ts          |   4 +-
 src/services/taskCollection.ts             |  18 +++-
 src/types/PartialWithId.ts                 |   2 +-
 src/views/list/ListGantt.vue               |   6 +-
 src/views/list/helpers/useGanttFilter.ts   | 107 ++++-----------------
 src/views/list/helpers/useGanttTaskList.ts |  89 +++++++++++++++++
 7 files changed, 134 insertions(+), 94 deletions(-)
 create mode 100644 src/views/list/helpers/useGanttTaskList.ts

diff --git a/src/composables/taskList.ts b/src/composables/taskList.ts
index e23f10087..85fdc23b7 100644
--- a/src/composables/taskList.ts
+++ b/src/composables/taskList.ts
@@ -2,7 +2,7 @@ import {ref, shallowReactive, watch, computed} from 'vue'
 import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
-import type { ITask } from '@/modelTypes/ITask'
+import type {ITask} from '@/modelTypes/ITask'
 
 // FIXME: merge with DEFAULT_PARAMS in filters.vue
 export const getDefaultParams = () => ({
diff --git a/src/helpers/time/parseDateProp.ts b/src/helpers/time/parseDateProp.ts
index 4ee954f16..9e426df25 100644
--- a/src/helpers/time/parseDateProp.ts
+++ b/src/helpers/time/parseDateProp.ts
@@ -1,5 +1,5 @@
-import type {DateISO} from "@/types/DateISO"
-import type {DateKebab} from "@/types/DateKebab"
+import type {DateISO} from '@/types/DateISO'
+import type {DateKebab} from '@/types/DateKebab'
 
 export function parseDateProp(kebabDate: DateKebab | undefined): string | undefined {
 	try {
diff --git a/src/services/taskCollection.ts b/src/services/taskCollection.ts
index bc460e346..8533bd2a9 100644
--- a/src/services/taskCollection.ts
+++ b/src/services/taskCollection.ts
@@ -1,7 +1,21 @@
-import AbstractService from './abstractService'
-import TaskModel from '../models/task'
 import {formatISO} from 'date-fns'
 
+import AbstractService from '@/services/abstractService'
+import TaskModel from '@/models/task'
+
+import type {ITask} from '@/modelTypes/ITask'
+
+// FIXME: unite with other filter params types
+export interface GetAllTasksParams {
+	sort_by: ('start_date' | 'done' | 'id')[],
+	order_by: ('asc' | 'asc' | 'desc')[],
+	filter_by: 'start_date'[],
+	filter_comparator: ('greater_equals' | 'less_equals')[],
+	filter_value: [string, string] // [dateFrom, dateTo],
+	filter_concat: 'and',
+	filter_include_nulls: boolean,
+}
+
 export default class TaskCollectionService extends AbstractService<ITask> {
 	constructor() {
 		super({
diff --git a/src/types/PartialWithId.ts b/src/types/PartialWithId.ts
index e9c279ff5..3d72b8f40 100644
--- a/src/types/PartialWithId.ts
+++ b/src/types/PartialWithId.ts
@@ -1 +1 @@
-export type PartialWithId<T extends { id: any }> = Pick<T, 'id'> & Omit<Partial<T>, 'id'>
\ No newline at end of file
+export type PartialWithId<T extends { id: unknown }> = Pick<T, 'id'> & Omit<Partial<T>, 'id'>
\ No newline at end of file
diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue
index 738165b20..48159840d 100644
--- a/src/views/list/ListGantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -43,7 +43,6 @@
 
 <script setup lang="ts">
 import {computed, ref, toRefs} from 'vue'
-import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import type Flatpickr from 'flatpickr'
 import {useI18n} from 'vue-i18n'
 import type {RouteLocationNormalized} from 'vue-router'
@@ -51,6 +50,7 @@ import type {RouteLocationNormalized} from 'vue-router'
 import {useBaseStore} from '@/stores/base'
 import {useAuthStore} from '@/stores/auth'
 
+import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import ListWrapper from './ListWrapper.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import TaskForm from '@/components/tasks/TaskForm.vue'
@@ -58,7 +58,9 @@ import TaskForm from '@/components/tasks/TaskForm.vue'
 import {createAsyncComponent} from '@/helpers/createAsyncComponent'
 import {useGanttFilter} from './helpers/useGanttFilter'
 import {RIGHTS} from '@/constants/rights'
-import type { DateISO } from '@/types/DateISO'
+
+import type {DateISO} from '@/types/DateISO'
+import type {ITask} from '@/modelTypes/ITask'
 
 type Options = Flatpickr.Options.Options
 
diff --git a/src/views/list/helpers/useGanttFilter.ts b/src/views/list/helpers/useGanttFilter.ts
index f283e0fbc..9268c903c 100644
--- a/src/views/list/helpers/useGanttFilter.ts
+++ b/src/views/list/helpers/useGanttFilter.ts
@@ -1,24 +1,18 @@
-import {computed, ref, shallowReactive, watchEffect, type Ref} from 'vue'
+import type {Ref} from 'vue'
 import type {RouteLocationNormalized, RouteLocationRaw} from 'vue-router'
-import cloneDeep from 'lodash.clonedeep'
 
 import {isoToKebabDate} from '@/helpers/time/isoToKebabDate'
 import {parseDateProp} from '@/helpers/time/parseDateProp'
 import {parseBooleanProp} from '@/helpers/time/parseBooleanProp'
 import {useRouteFilter} from '@/composables/useRouteFilter'
+import {useGanttTaskList} from './useGanttTaskList'
 
 import type {IList} from '@/modelTypes/IList'
-import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask'
+import type {GetAllTasksParams} from '@/services/taskCollection'
 
 import type {DateISO} from '@/types/DateISO'
 import type {DateKebab} from '@/types/DateKebab'
 
-import TaskCollectionService from '@/services/taskCollection'
-import TaskService from '@/services/task'
-
-import TaskModel from '@/models/task'
-import {error, success} from '@/message'
-
 // convenient internal filter object
 export interface GanttFilter {
 	listId: IList['id']
@@ -27,17 +21,6 @@ export interface GanttFilter {
 	showTasksWithoutDates: boolean
 }
 
-// FIXME: unite with other filter params types
-interface GetAllTasksParams {
-	sort_by: ('start_date' | 'done' | 'id')[],
-	order_by: ('asc' | 'asc' | 'desc')[],
-	filter_by: 'start_date'[],
-	filter_comparator: ('greater_equals' | 'less_equals')[],
-	filter_value: [string, string] // [dateFrom, dateTo],
-	filter_concat: 'and',
-	filter_include_nulls: boolean,
-}
-
 const DEFAULT_SHOW_TASKS_WITHOUT_DATES = false
 
 const DEFAULT_DATEFROM_DAY_OFFSET = -15
@@ -85,77 +68,29 @@ function filterToRoute(filters: GanttFilter): RouteLocationRaw {
 	}
 }
 
+function ganttFiltersToApiParams(filters: GanttFilter): GetAllTasksParams {
+	return {
+		sort_by: ['start_date', 'done', 'id'],
+		order_by: ['asc', 'asc', 'desc'],
+		filter_by: ['start_date', 'start_date'],
+		filter_comparator: ['greater_equals', 'less_equals'],
+		filter_value: [isoToKebabDate(filters.dateFrom), isoToKebabDate(filters.dateTo)],
+		filter_concat: 'and',
+		filter_include_nulls: filters.showTasksWithoutDates,
+	}
+}
+
 export function useGanttFilter(route: Ref<RouteLocationNormalized>) {
 	const {filters} = useRouteFilter<GanttFilter>(route, routeToFilter, filterToRoute)
 
-	const taskCollectionService = shallowReactive(new TaskCollectionService())
-	const taskService = shallowReactive(new TaskService())
+	const {
+		tasks,
 
-	const isLoading = computed(() => taskCollectionService.loading)
+		isLoading,
+		addTask,
+		updateTask,
+	} = useGanttTaskList<GanttFilter>(filters, ganttFiltersToApiParams)
 
-	const tasks = ref<Map<ITask['id'], ITask>>(new Map())
-
-	async function getAllTasks(params: GetAllTasksParams, page = 1): Promise<ITask[]> {
-		const tasks = await taskCollectionService.getAll({listId: filters.listId}, params, page) as ITask[]
-		if (page < taskCollectionService.totalPages) {
-			const nextTasks = await getAllTasks(params, page + 1)
-			return tasks.concat(nextTasks)
-		}
-		return tasks
-	}
-
-	async function loadTasks(filters: GanttFilter) {
-		const params: GetAllTasksParams = {
-			sort_by: ['start_date', 'done', 'id'],
-			order_by: ['asc', 'asc', 'desc'],
-			filter_by: ['start_date', 'start_date'],
-			filter_comparator: ['greater_equals', 'less_equals'],
-			filter_value: [isoToKebabDate(filters.dateFrom), isoToKebabDate(filters.dateTo)],
-			filter_concat: 'and',
-			filter_include_nulls: filters.showTasksWithoutDates,
-		}
-
-		const loadedTasks = await getAllTasks(params)
-		tasks.value = new Map()
-		loadedTasks.forEach(t => tasks.value.set(t.id, t))
-	}
-
-	watchEffect(() => loadTasks(filters))
-
-	async function addTask(task: Partial<ITask>) {
-		const newTask = await taskService.create(
-			new TaskModel({...task})
-		)
-		tasks.value.set(newTask.id, newTask)
-	
-		return newTask
-	}
-
-	async function updateTask(task: ITaskPartialWithId) {
-		const oldTask = cloneDeep(tasks.value.get(task.id))
-
-		if (!oldTask) return
-
-		// we extend the task with potentially missing info
-		const newTask: ITask = {
-			...oldTask,
-			...task,
-		}
-
-		// set in expectation that server update works
-		tasks.value.set(newTask.id, newTask)
-
-		try {	
-			const updatedTask = await taskService.update(newTask)
-			// update the task with possible changes from server
-			tasks.value.set(updatedTask.id, updatedTask)
-			success('Saved')
-		} catch(e: any) {
-			error('Something went wrong saving the task')
-			// roll back changes
-			tasks.value.set(task.id, oldTask)
-		}
-	}
 
 	return {
 		filters,
diff --git a/src/views/list/helpers/useGanttTaskList.ts b/src/views/list/helpers/useGanttTaskList.ts
new file mode 100644
index 000000000..2ba854273
--- /dev/null
+++ b/src/views/list/helpers/useGanttTaskList.ts
@@ -0,0 +1,89 @@
+import {computed, ref, shallowReactive, watchEffect} from 'vue'
+import cloneDeep from 'lodash.clonedeep'
+
+import type {Filter} from '@/composables/useRouteFilter'
+import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask'
+
+import TaskCollectionService, { type GetAllTasksParams } from '@/services/taskCollection'
+import TaskService from '@/services/task'
+
+import TaskModel from '@/models/task'
+import {error, success} from '@/message'
+
+// FIXME: unify with general `useTaskList`
+export function useGanttTaskList<F extends Filter>(
+	filters: F,
+	filterToApiParams: (filters: F) => GetAllTasksParams,
+	options: {
+		loadAll?: boolean,
+	} = {
+		loadAll: true,
+	}) {
+	const taskCollectionService = shallowReactive(new TaskCollectionService())
+	const taskService = shallowReactive(new TaskService())
+
+	const isLoading = computed(() => taskCollectionService.loading)
+
+	const tasks = ref<Map<ITask['id'], ITask>>(new Map())
+
+	async function fetchTasks(params: GetAllTasksParams, page = 1): Promise<ITask[]> {
+		const tasks = await taskCollectionService.getAll({listId: filters.listId}, params, page) as ITask[]
+		if (options.loadAll && page < taskCollectionService.totalPages) {
+			const nextTasks = await fetchTasks(params, page + 1)
+			return tasks.concat(nextTasks)
+		}
+		return tasks
+	}
+
+	async function loadTasks(filters: F) {
+		const params: GetAllTasksParams = filterToApiParams(filters)
+
+		const loadedTasks = await fetchTasks(params)
+		tasks.value = new Map()
+		loadedTasks.forEach(t => tasks.value.set(t.id, t))
+	}
+
+	watchEffect(() => loadTasks(filters))
+
+	async function addTask(task: Partial<ITask>) {
+		const newTask = await taskService.create(new TaskModel({...task}))
+		tasks.value.set(newTask.id, newTask)
+	
+		return newTask
+	}
+
+	async function updateTask(task: ITaskPartialWithId) {
+		const oldTask = cloneDeep(tasks.value.get(task.id))
+
+		if (!oldTask) return
+
+		// we extend the task with potentially missing info
+		const newTask: ITask = {
+			...oldTask,
+			...task,
+		}
+
+		// set in expectation that server update works
+		tasks.value.set(newTask.id, newTask)
+
+		try {	
+			const updatedTask = await taskService.update(newTask)
+			// update the task with possible changes from server
+			tasks.value.set(updatedTask.id, updatedTask)
+			success('Saved')
+		} catch(e: any) {
+			error('Something went wrong saving the task')
+			// roll back changes
+			tasks.value.set(task.id, oldTask)
+		}
+	}
+
+
+	return {
+		tasks,
+
+		isLoading,
+		addTask,
+		updateTask,
+	}
+}
\ No newline at end of file