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

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
Conversation 41 Commits 78 Files Changed 48 +34 -64
2 changed files with 34 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 970a04d973 - Show all commits

8
src/components/tasks/gantt-chart.vue
View File

@ -4,7 +4,7 @@
<g-gantt-chart <g-gantt-chart
:chart-start="`${dateFrom} 00:00`" :chart-start="`${dateFrom} 00:00`"
:chart-end="`${dateTo} 23:59`" :chart-end="`${dateTo} 23:59`"
:precision="precision" precision="day"
bar-start="startDate" bar-start="startDate"
bar-end="endDate" bar-end="endDate"
:grid="true" :grid="true"
@ -54,7 +54,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {computed, nextTick, ref, watch, watchEffect} from 'vue' import {computed, nextTick, ref, watchEffect} from 'vue'
import TaskCollectionService from '@/services/taskCollection' import TaskCollectionService from '@/services/taskCollection'
import TaskService from '@/services/task' import TaskService from '@/services/task'
import {format, parse} from 'date-fns' import {format, parse} from 'date-fns'
@ -75,10 +75,6 @@ const props = defineProps({
type: Number, type: Number,
required: true, required: true,
}, },
precision: {
type: String,
default: 'day',
},
dateFrom: { dateFrom: {
type: String, type: String,
required: true, required: true,

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

@ -3,29 +3,16 @@
<template #header> <template #header>
<card> <card>
<div class="gantt-options"> <div class="gantt-options">
<div class="range-picker"> <div class="field">
<div class="field"> <label class="label" for="range">{{ $t('list.gantt.range') }}</label>
<label class="label" for="precision">{{ $t('list.gantt.size') }}</label> <div class="control">
<div class="control"> <flat-pickr
<div class="select"> :config="flatPickerConfig"
<select id="precision" v-model="precision"> class="input"
<option value="day">{{ $t('list.gantt.day') }}</option> id="range"
<option value="month">{{ $t('list.gantt.month') }}</option> :placeholder="$t('list.gantt.range')"
</select> v-model="range"
</div> />
</div>
</div>
<div class="field">
<label class="label" for="range">{{ $t('list.gantt.range') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="range"
:placeholder="$t('list.gantt.range')"
v-model="range"
/>
</div>
</div> </div>
</div> </div>
<fancycheckbox class="is-block" v-model="showTasksWithoutDates"> <fancycheckbox class="is-block" v-model="showTasksWithoutDates">
@ -42,7 +29,6 @@
<gantt-chart <gantt-chart
:date-from="dateFrom" :date-from="dateFrom"
:date-to="dateTo" :date-to="dateTo"
:precision="precision"
:list-id="props.listId" :list-id="props.listId"
:show-tasks-without-dates="showTasksWithoutDates" :show-tasks-without-dates="showTasksWithoutDates"
/> />
@ -73,7 +59,6 @@ const props = defineProps({
}) })
const showTasksWithoutDates = ref(false) const showTasksWithoutDates = ref(false)
const precision = ref('day')
const now = new Date() const now = new Date()
const defaultFrom = format(new Date((new Date()).setDate(now.getDate() - 15)), 'yyyy-LL-dd') const defaultFrom = format(new Date((new Date()).setDate(now.getDate() - 15)), 'yyyy-LL-dd')
@ -113,46 +98,35 @@ const flatPickerConfig = computed(() => ({
flex-direction: column; flex-direction: column;
} }
.range-picker { .field {
display: flex; margin-bottom: 0;
margin-bottom: 1rem; width: 33%;
width: 50%;
@media screen and (max-width: $tablet) { &:not(:last-child) {
flex-direction: column; padding-right: .5rem;
width: 100%;
} }
.field { @media screen and (max-width: $tablet) {
margin-bottom: 0; width: 100%;
width: 33%; max-width: 100%;
margin-top: .5rem;
padding-right: 0 !important;
}
&:not(:last-child) { &, .input {
padding-right: .5rem; font-size: .8rem;
} }
@media screen and (max-width: $tablet) { .select, .select select {
width: 100%; height: auto;
max-width: 100%; width: 100%;
margin-top: .5rem; font-size: .8rem;
padding-right: 0 !important; }
}
&, .input {
font-size: .8rem;
}
.select, .select select {
height: auto;
width: 100%;
font-size: .8rem;
}
.label { .label {
font-size: .9rem; font-size: .9rem;
padding-left: .4rem; padding-left: .4rem;
}
} }
} }
} }