vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: scroll

Browse Source
This commit is contained in:
kolaente 2022-07-20 21:50:59 +02:00
parent d2c40926de
commit c8eac914d1
Signed by: konrad
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

23
src/components/tasks/gantt-chart.vue
View File

@ -1,4 +1,6 @@
<template>
<div class="gantt-container">
<div :style="{'width': ganttChartWidth + 'px'}">
<g-gantt-chart
:chart-start="`${dateFrom} 00:00`"
:chart-end="`${dateTo} 23:59`"
@ -16,6 +18,8 @@
:bars="bar"
/>
</g-gantt-chart>
</div>
</div>
<form
@submit.prevent="createTask()"
class="add-new-task"
@ -41,7 +45,7 @@
<script setup lang="ts">
import {computed, nextTick, ref} from 'vue'
import TaskCollectionService from '@/services/taskCollection'
import {format} from 'date-fns'
import {format, parse} from 'date-fns'
import {colorIsDark} from '@/helpers/color/colorIsDark'
import TaskService from '@/services/task'
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 tasks = ref([])
@ -201,6 +214,14 @@ function openTask(e) {
</style>
<style scoped lang="scss">
.gantt-container {
overflow-x: auto;
#g-gantt-chart {
width: 2000px;
}
}
.add-new-task {
padding: 1rem .7rem .4rem .7rem;
display: flex;