local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: loading animation

Browse source
This commit is contained in:
kolaente 2022-07-21 00:38:03 +02:00
parent 4e0c69d751
commit f142d72da1
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/tasks/gantt-chart.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="gantt-container"> <div class="gantt-container loading-container" :class="{'is-loading': taskService.loading || taskCollectionService.loading}">
<g-gantt-chart <g-gantt-chart
:chart-start="`${dateFrom} 00:00`" :chart-start="`${dateFrom} 00:00`"
:chart-end="`${dateTo} 23:59`" :chart-end="`${dateTo} 23:59`"
@ -55,9 +55,9 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, nextTick, ref, watch} from 'vue' import {computed, nextTick, ref, watch} from 'vue'
import TaskCollectionService from '@/services/taskCollection' import TaskCollectionService from '@/services/taskCollection'
import TaskService from '@/services/task'
import {format, parse} from 'date-fns' import {format, parse} from 'date-fns'
import {colorIsDark} from '@/helpers/color/colorIsDark' import {colorIsDark} from '@/helpers/color/colorIsDark'
import TaskService from '@/services/task'
import {useStore} from 'vuex' import {useStore} from 'vuex'
import Rights from '../../models/constants/rights.json' import Rights from '../../models/constants/rights.json'
import TaskModel from '@/models/task' import TaskModel from '@/models/task'
@ -92,6 +92,9 @@ const props = defineProps({
}, },
}) })
const taskCollectionService = ref(new TaskCollectionService())
const taskService = ref(new TaskService())
const dateFromDate = computed(() => parse(props.dateFrom, 'yyyy-LL-dd', new Date())) const dateFromDate = computed(() => parse(props.dateFrom, 'yyyy-LL-dd', new Date()))
const dateToDate = computed(() => parse(props.dateTo, 'yyyy-LL-dd', new Date())) const dateToDate = computed(() => parse(props.dateTo, 'yyyy-LL-dd', new Date()))
@ -150,11 +153,10 @@ async function loadTasks() {
filter_include_nulls: props.showTasksWithoutDates, filter_include_nulls: props.showTasksWithoutDates,
} }
const taskCollectionService = new TaskCollectionService()
const getAllTasks = async (page = 1) => { const getAllTasks = async (page = 1) => {
const tasks = await taskCollectionService.getAll({listId: props.listId}, params, page) const tasks = await taskCollectionService.value.getAll({listId: props.listId}, params, page)
if (page < taskCollectionService.totalPages) { if (page < taskCollectionService.value.totalPages) {
const nextTasks = await getAllTasks(page + 1) const nextTasks = await getAllTasks(page + 1)
return tasks.concat(nextTasks) return tasks.concat(nextTasks)
} }
@ -181,9 +183,7 @@ async function updateTask(e) {
const task = tasks.value.get(e.bar.ganttBarConfig.id) const task = tasks.value.get(e.bar.ganttBarConfig.id)
task.startDate = e.bar.startDate task.startDate = e.bar.startDate
task.endDate = e.bar.endDate task.endDate = e.bar.endDate
const taskService = new TaskService() const r = await taskService.value.update(task)
const r = await taskService.update(task)
// TODO: Loading animation
for (const i in ganttBars.value) { for (const i in ganttBars.value) {
if (ganttBars.value[i][0].ganttBarConfig.id === task.id) { if (ganttBars.value[i][0].ganttBarConfig.id === task.id) {
ganttBars.value[i] = transformTaskToGanttBar(r) ganttBars.value[i] = transformTaskToGanttBar(r)
@ -221,8 +221,7 @@ async function createTask() {
startDate: defaultStartDate, startDate: defaultStartDate,
endDate: defaultEndDate, endDate: defaultEndDate,
}) })
const taskService = new TaskService() const r = await taskService.value.create(task)
const r = await taskService.create(task)
tasks.value.set(r.id, r) tasks.value.set(r.id, r)
mapGanttBars() mapGanttBars()
newTaskTitle.value = '' newTaskTitle.value = ''