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

feat: allow passing props down to the gantt component

Browse source
This commit is contained in:
kolaente 2022-07-20 18:35:18 +02:00
parent a0e6b9643b
commit 9501592719
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
3 changed files with 60 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,16 @@
<template>
<g-gantt-chart
:chart-start="dateFromFormatted"
:chart-end="dateToFormatted"
precision="day"
:chart-start="`${dateFrom} 00:00`"
:chart-end="`${dateTo} 23:59`"
:precision="precision"
bar-start="startDate"
bar-end="endDate"
:grid="true"
@dragend-bar="updateTask"
>
<g-gantt-row
v-for="bar in ganttBars"
v-for="(bar, k) in ganttBars"
:key="k"
label=""
:bars="bar"
/>
@ -17,7 +18,7 @@
</template>
<script setup lang="ts">
import {computed, ref} from 'vue'
import {ref} from 'vue'
import TaskCollectionService from '@/services/taskCollection'
import {format} from 'date-fns'
import {colorIsDark} from '@/helpers/color/colorIsDark'
@ -30,19 +31,21 @@ const props = defineProps({
type: Number,
required: true,
},
precision: {
type: String,
default: 'day',
},
dateFrom: {
default: () => new Date(new Date().setDate(new Date().getDate() - 15)),
type: String,
required: true,
},
dateTo: {
default: () => new Date(new Date().setDate(new Date().getDate() + 30)),
type: String,
required: true,
},
})
const dateFromFormatted = computed(() => format(props.dateFrom, dateFormat))
const dateToFormatted = computed(() => format(props.dateTo, dateFormat))
const tasks = ref([])
const ganttBars = ref([])
// We need a "real" ref object for the gantt bars to instantly update the tasks when they are dragged on the chart.

1
src/i18n/lang/en.json
View file

@ -285,6 +285,7 @@
"default": "Default",
"month": "Month",
"day": "Day",
"hour": "Hour",
"from": "From",
"to": "To",
"noDates": "This task has no dates set."

90
src/views/list/ListGantt.vue
View file

@ -1,47 +1,48 @@
<template>
<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
<template #header>
<card class="gantt-options">
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
{{ $t('list.gantt.showTasksWithoutDates') }}
</fancycheckbox>
<div class="range-picker">
<div class="field">
<label class="label" for="dayWidth">{{ $t('list.gantt.size') }}</label>
<div class="control">
<div class="select">
<select id="dayWidth" v-model.number="dayWidth">
<option value="35">{{ $t('list.gantt.default') }}</option>
<option value="10">{{ $t('list.gantt.month') }}</option>
<option value="80">{{ $t('list.gantt.day') }}</option>
</select>
<card>
<div class="gantt-options">
<div class="range-picker">
<div class="field">
<label class="label" for="precision">{{ $t('list.gantt.size') }}</label>
<div class="control">
<div class="select">
<select id="precision" v-model="precision">
<option value="day">{{ $t('list.gantt.day') }}</option>
<option value="month">{{ $t('list.gantt.month') }}</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label" for="fromDate">{{ $t('list.gantt.from') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="fromDate"
:placeholder="$t('list.gantt.from')"
v-model="dateFrom"
/>
</div>
</div>
<div class="field">
<label class="label" for="toDate">{{ $t('list.gantt.to') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="toDate"
:placeholder="$t('list.gantt.to')"
v-model="dateTo"
/>
</div>
</div>
</div>
<div class="field">
<label class="label" for="fromDate">{{ $t('list.gantt.from') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="fromDate"
:placeholder="$t('list.gantt.from')"
v-model="dateFrom"
/>
</div>
</div>
<div class="field">
<label class="label" for="toDate">{{ $t('list.gantt.to') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="toDate"
:placeholder="$t('list.gantt.to')"
v-model="dateTo"
/>
</div>
</div>
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
{{ $t('list.gantt.showTasksWithoutDates') }}
</fancycheckbox>
</div>
</card>
</template>
@ -49,11 +50,11 @@
<template #default>
<div class="gantt-chart-container">
<card :padding="false" class="has-overflow">
<gantt-chart
:date-from="dateFrom"
:date-to="dateTo"
:day-width="dayWidth"
:precision="precision"
:list-id="props.listId"
:show-taskswithout-dates="showTaskswithoutDates"
/>
@ -74,6 +75,7 @@ import {useStore} from 'vuex'
import ListWrapper from './ListWrapper.vue'
import GanttChart from '@/components/tasks/gantt-chart.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import {format} from 'date-fns'
const props = defineProps({
listId: {
@ -82,14 +84,12 @@ const props = defineProps({
},
})
const DEFAULT_DAY_COUNT = 35
const showTaskswithoutDates = ref(false)
const dayWidth = ref(DEFAULT_DAY_COUNT)
const precision = ref('day')
const now = ref(new Date())
const dateFrom = ref(new Date((new Date()).setDate(now.value.getDate() - 15)))
const dateTo = ref(new Date((new Date()).setDate(now.value.getDate() + 30)))
const dateFrom = ref(format(new Date((new Date()).setDate(now.value.getDate() - 15)), 'yyyy-LL-dd'))
const dateTo = ref(format(new Date((new Date()).setDate(now.value.getDate() + 30)), 'yyyy-LL-dd'))
const {t} = useI18n({useScope: 'global'})
const store = useStore()