feat: replace our home-grown gantt implementation with ganttastic #2180

Merged
konrad merged 78 commits from feature/ganttastic into main 2022-10-27 16:03:27 +00:00
1 changed files with 29 additions and 31 deletions
Showing only changes of commit aefda38bdd - Show all commits

View File

@ -1,33 +1,32 @@
<template>
<div>
<Loading
v-if="props.isLoading && tasks.size || dayjsLanguageLoading"
class="gantt-container"
/>
<div class="gantt-container" v-else>
<GGanttChart
:date-format="DAYJS_ISO_DATE_FORMAT"
:chart-start="isoToKebabDate(filters.dateFrom)"
:chart-end="isoToKebabDate(filters.dateTo)"
precision="day"
bar-start="startDate"
bar-end="endDate"
:grid="true"
@dragend-bar="updateGanttTask"
@dblclick-bar="openTask"
:width="ganttChartWidth + 'px'"
>
<template #timeunit="{label, value}">
<div
class="timeunit-wrapper"
:class="{'today': dayIsToday(label)}"
>
<span>{{ value }}</span>
<span class="weekday">
{{ weekdayFromTimeLabel(label) }}
</span>
</div>
</template>
<Loading
konrad marked this conversation as resolved Outdated

Use loading component. This way it's easier for us to refactor the is-loading styles from bulma later.

Use loading component. This way it's easier for us to refactor the `is-loading` styles from bulma later.

Done.

Done.
v-if="props.isLoading && tasks.size || dayjsLanguageLoading"
class="gantt-container"
/>
<div class="gantt-container" v-else>
<GGanttChart
:date-format="DAYJS_ISO_DATE_FORMAT"
:chart-start="isoToKebabDate(filters.dateFrom)"
:chart-end="isoToKebabDate(filters.dateTo)"
precision="day"
bar-start="startDate"
konrad marked this conversation as resolved Outdated

Is it possible to use here simply inherit as value?

Is it possible to use here simply `inherit` as value?

Seems to work, yes.

Seems to work, yes.

Not necessary with lates release. Removed.

Not necessary with lates release. Removed.
bar-end="endDate"
:grid="true"
@dragend-bar="updateGanttTask"
@dblclick-bar="openTask"
:width="ganttChartWidth + 'px'"
>
<template #timeunit="{label, value}">
<div
class="timeunit-wrapper"
:class="{'today': dayIsToday(label)}"
>
<span>{{ value }}</span>
<span class="weekday">
{{ weekdayFromTimeLabel(label) }}
</span>
</div>
</template>
<GGanttRow
v-for="(bar, k) in ganttBars"
:key="k"
@ -35,7 +34,6 @@
:bars="bar"
/>
</GGanttChart>
</div>
</div>
</template>
@ -181,7 +179,7 @@ function dayIsToday(label: string): boolean {
<style lang="scss">
// Not scoped because we need to style the elements inside the gantt chart component
.g-gantt-chart {
width: 2000px;
width: max-content;
}
.g-gantt-row-label {