feat: replace our home-grown gantt implementation with ganttastic #2180
|
|
@ -287,8 +287,7 @@
|
|||
"month": "Month",
|
||||
"day": "Day",
|
||||
"hour": "Hour",
|
||||
"from": "From",
|
||||
"to": "To",
|
||||
"range": "Range",
|
||||
"noDates": "This task has no dates set."
|
||||
},
|
||||
"table": {
|
||||
|
|
|
|||
|
|
@ -16,26 +16,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="fromDate">{{ $t('list.gantt.from') }}</label>
|
||||
<label class="label" for="range">{{ $t('list.gantt.range') }}</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"
|
||||
id="range"
|
||||
:placeholder="$t('list.gantt.range')"
|
||||
v-model="range"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,8 +75,13 @@ const showTaskswithoutDates = ref(false)
|
|||
const precision = ref('day')
|
||||
|
||||
const now = ref(new Date())
|
||||
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 defaultFrom = format(new Date((new Date()).setDate(now.value.getDate() - 15)), 'yyyy-LL-dd')
|
||||
|
konrad marked this conversation as resolved
Outdated
|
||||
const defaultTo = format(new Date((new Date()).setDate(now.value.getDate() + 30)), 'yyyy-LL-dd')
|
||||
const range = ref(`${defaultFrom} to ${defaultTo}`)
|
||||
|
||||
// TODO: only update once both dates are available (maybe use a watcher + refs instead?)
|
||||
const dateFrom = computed(() => range.value?.split(' to ')[0] ?? defaultFrom)
|
||||
dpschen
commented
Can you explain in a different way? Can you explain in a different way?
konrad
commented
The problem is the gantt chart already updates when only one date (the start or end date) is selected. Ideally, they would only update the prop when both of these dates are available to avoid these partial updates. The problem is the gantt chart already updates when only one date (the start or end date) is selected. Ideally, they would only update the prop when both of these dates are available to avoid these partial updates.
dpschen
commented
Maybe I'm still not getting this correctly, but can't we just update the value when both (start and end) are set? Maybe I'm still not getting this correctly, but can't we just update the value when both (start and end) are set?
konrad
commented
Currently the from and to dates get passed as individual props. That means if one changes, it changes directly in the chart. I think the way to go here would be to pass a single object with both dates instead? Currently the from and to dates get passed as individual props. That means if one changes, it changes directly in the chart.
I think the way to go here would be to pass a single object with both dates instead?
dpschen
commented
That seems like the right approach That seems like the right approach
dpschen
commented
Will check this out again. Shouldn't be too hard. Will check this out again. Shouldn't be too hard.
|
||||
const dateTo = computed(() => range.value?.split(' to ')[1] ?? defaultTo)
|
||||
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
const authStore = useAuthStore()
|
||||
|
|
@ -97,6 +90,7 @@ const flatPickerConfig = computed(() => ({
|
|||
altInput: true,
|
||||
dateFormat: 'Y-m-d',
|
||||
enableTime: false,
|
||||
mode: 'range',
|
||||
locale: {
|
||||
firstDayOfWeek: authStore.settings.weekStart,
|
||||
},
|
||||
|
|
|
|||
Reference in New Issue
Should this update?
No, doesn't even need to be ref.