feat: replace our home-grown gantt implementation with ganttastic #2180
|
@ -1,15 +1,16 @@
|
|||
<template>
|
||||
<g-gantt-chart
|
||||
konrad marked this conversation as resolved
Outdated
|
||||
: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"
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Is it possible to use here simply Is it possible to use here simply `inherit` as value?
konrad
commented
Seems to work, yes. Seems to work, yes.
dpschen
commented
Not necessary with lates release. Removed. Not necessary with lates release. Removed.
|
||||
: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.
|
||||
|
|
|
@ -286,6 +286,7 @@
|
|||
"default": "Default",
|
||||
"month": "Month",
|
||||
"day": "Day",
|
||||
"hour": "Hour",
|
||||
"from": "From",
|
||||
"to": "To",
|
||||
"noDates": "This task has no dates set."
|
||||
|
|
|
@ -1,19 +1,16 @@
|
|||
<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>
|
||||
<card>
|
||||
<div class="gantt-options">
|
||||
<div class="range-picker">
|
||||
<div class="field">
|
||||
<label class="label" for="dayWidth">{{ $t('list.gantt.size') }}</label>
|
||||
<label class="label" for="precision">{{ $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 id="precision" v-model="precision">
|
||||
<option value="day">{{ $t('list.gantt.day') }}</option>
|
||||
<option value="month">{{ $t('list.gantt.month') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -43,6 +40,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
|
||||
{{ $t('list.gantt.showTasksWithoutDates') }}
|
||||
</fancycheckbox>
|
||||
</div>
|
||||
</card>
|
||||
</template>
|
||||
|
||||
|
@ -53,7 +54,7 @@
|
|||
<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 {useAuthStore} from '@/stores/auth'
|
|||
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'
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Should this update? Should this update?
konrad
commented
No, doesn't even need to be ref. No, doesn't even need to be ref.
|
||||
|
||||
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 authStore = useAuthStore()
|
||||
|
|
Reference in New Issue
Block a user
Use loading component. This way it's easier for us to refactor the
is-loading
styles from bulma later.Done.