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

feat: scroll

Browse source
This commit is contained in:
kolaente 2022-07-20 21:50:59 +02:00
parent c9c9056baf
commit 40f7871f1b
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 41 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,25 @@
<template> <template>
<g-gantt-chart <div class="gantt-container">
:chart-start="`${dateFrom} 00:00`" <div :style="{'width': ganttChartWidth + 'px'}">
:chart-end="`${dateTo} 23:59`" <g-gantt-chart
:precision="precision" :chart-start="`${dateFrom} 00:00`"
bar-start="startDate" :chart-end="`${dateTo} 23:59`"
bar-end="endDate" :precision="precision"
:grid="true" bar-start="startDate"
@dragend-bar="updateTask" bar-end="endDate"
@dblclick-bar="openTask" :grid="true"
> @dragend-bar="updateTask"
<g-gantt-row @dblclick-bar="openTask"
v-for="(bar, k) in ganttBars" >
:key="k" <g-gantt-row
label="" v-for="(bar, k) in ganttBars"
:bars="bar" :key="k"
/> label=""
</g-gantt-chart> :bars="bar"
/>
</g-gantt-chart>
</div>
</div>
<form <form
@submit.prevent="createTask()" @submit.prevent="createTask()"
class="add-new-task" class="add-new-task"
@ -41,7 +45,7 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, nextTick, ref} from 'vue' import {computed, nextTick, ref} from 'vue'
import TaskCollectionService from '@/services/taskCollection' import TaskCollectionService from '@/services/taskCollection'
import {format} 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 TaskService from '@/services/task'
import {useStore} from 'vuex' import {useStore} from 'vuex'
@ -73,6 +77,15 @@ const props = defineProps({
}, },
}) })
const DAY_WIDTH_PIXELS = 30
const ganttChartWidth = computed(() => {
const from = parse(props.dateFrom, 'yyyy-LL-dd', new Date())
const to = parse(props.dateTo, 'yyyy-LL-dd', new Date())
const dateDiff = Math.floor((to - from) / (1000 * 60 * 60 * 24))
return dateDiff * DAY_WIDTH_PIXELS
})
const canWrite = computed(() => store.state.currentList.maxRight > Rights.READ) const canWrite = computed(() => store.state.currentList.maxRight > Rights.READ)
const tasks = ref([]) const tasks = ref([])
@ -188,8 +201,8 @@ function openTask(e) {
console.log('open', e.bar.ganttBarConfig.id) console.log('open', e.bar.ganttBarConfig.id)
router.push({ router.push({
name: 'task.detail', name: 'task.detail',
params: { id: e.bar.ganttBarConfig.id }, params: {id: e.bar.ganttBarConfig.id},
state: { backdropView: router.currentRoute.value.fullPath }, state: {backdropView: router.currentRoute.value.fullPath},
}) })
} }
</script> </script>
@ -201,6 +214,14 @@ function openTask(e) {
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
.gantt-container {
overflow-x: auto;
#g-gantt-chart {
width: 2000px;
}
}
.add-new-task { .add-new-task {
padding: 1rem .7rem .4rem .7rem; padding: 1rem .7rem .4rem .7rem;
display: flex; display: flex;