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

feat: allow passing props down to the gantt component

This commit is contained in:
kolaente 2022-07-20 18:35:18 +02:00
parent 2b0df8c237
commit 49a24977f9
Signed by: konrad
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> <template>
<g-gantt-chart <g-gantt-chart
:chart-start="dateFromFormatted" :chart-start="`${dateFrom} 00:00`"
:chart-end="dateToFormatted" :chart-end="`${dateTo} 23:59`"
precision="day" :precision="precision"
bar-start="startDate" bar-start="startDate"
bar-end="endDate" bar-end="endDate"
:grid="true" :grid="true"
@dragend-bar="updateTask" @dragend-bar="updateTask"
> >
<g-gantt-row <g-gantt-row
v-for="bar in ganttBars" v-for="(bar, k) in ganttBars"
:key="k"
label="" label=""
:bars="bar" :bars="bar"
/> />
@ -17,7 +18,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref} from 'vue' import {ref} from 'vue'
import TaskCollectionService from '@/services/taskCollection' import TaskCollectionService from '@/services/taskCollection'
import {format} from 'date-fns' import {format} from 'date-fns'
import {colorIsDark} from '@/helpers/color/colorIsDark' import {colorIsDark} from '@/helpers/color/colorIsDark'
@ -30,19 +31,21 @@ const props = defineProps({
type: Number, type: Number,
required: true, required: true,
}, },
precision: {
type: String,
default: 'day',
},
dateFrom: { dateFrom: {
default: () => new Date(new Date().setDate(new Date().getDate() - 15)), type: String,
required: true,
}, },
dateTo: { 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 tasks = ref([])
const ganttBars = 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. // 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

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

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

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