ami/tl-vikunja
1
0
Fork 0
Code

feat: move useGanttTaskList in separate file

Browse Source
This commit is contained in:
Dominik Pschenitschni 2022-10-18 16:26:35 +02:00 committed by kolaente
parent c7dd20ef57
commit 7f4114b703
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
7 changed files with 134 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/composables/taskList.ts
View File

@ -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 = () => ({

4
src/helpers/time/parseDateProp.ts
View File

@ -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 {

18
src/services/taskCollection.ts
View File

@ -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({

2
src/types/PartialWithId.ts
View File

@ -1 +1 @@
export type PartialWithId<T extends { id: any }> = Pick<T, 'id'> & Omit<Partial<T>, 'id'>
export type PartialWithId<T extends { id: unknown }> = Pick<T, 'id'> & Omit<Partial<T>, 'id'>

6
src/views/list/ListGantt.vue
View File

@ -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

107
src/views/list/helpers/useGanttFilter.ts
View File

@ -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,

89
src/views/list/helpers/useGanttTaskList.ts Normal file
View File

@ -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,
}
}