feat: mount list views as route-views
This commit is contained in:
Dominik Pschenitschni
parent
16b0d03601
commit
7eed0628d0
6 changed files with 104 additions and 72 deletions
165
src/views/list/ListGantt.vue
Normal file
165
src/views/list/ListGantt.vue
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<template>
|
||||
<ListWrapper>
|
||||
<template #header>
|
||||
<div class="gantt-options p-4">
|
||||
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
|
||||
{{ $t('list.gantt.showTasksWithoutDates') }}
|
||||
</fancycheckbox>
|
||||
<div class="range-picker">
|
||||
<div class="field">
|
||||
<label class="label" for="dayWidth">{{ $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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div class="gantt-chart-container">
|
||||
<card :padding="false" class="has-overflow">
|
||||
|
||||
<gantt-chart
|
||||
:date-from="dateFrom"
|
||||
:date-to="dateTo"
|
||||
:day-width="dayWidth"
|
||||
:list-id="Number($route.params.listId)"
|
||||
:show-taskswithout-dates="showTaskswithoutDates"
|
||||
/>
|
||||
|
||||
</card>
|
||||
</div>
|
||||
</template>
|
||||
</ListWrapper>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
|
||||
import { i18n } from '@/i18n'
|
||||
import { store } from '@/store'
|
||||
|
||||
import ListWrapper from './ListWrapper'
|
||||
import GanttChart from '@/components/tasks/gantt-component'
|
||||
import Fancycheckbox from '@/components/input/fancycheckbox'
|
||||
|
||||
import {saveListView} from '@/helpers/saveListView'
|
||||
|
||||
const route = useRoute()
|
||||
// Save the current list view to local storage
|
||||
// We use local storage and not vuex here to make it persistent across reloads.
|
||||
saveListView(route.params.listId, route.name)
|
||||
|
||||
const showTaskswithoutDates = ref(false)
|
||||
const dayWidth = ref(35)
|
||||
const dateFrom = ref(new Date((new Date()).setDate((new Date()).getDate() - 15)))
|
||||
const dateTo = ref(new Date((new Date()).setDate((new Date()).getDate() + 30)))
|
||||
|
||||
|
||||
const flatPickerConfig = computed(() => ({
|
||||
altFormat: i18n.global.t('date.altFormatShort'),
|
||||
altInput: true,
|
||||
dateFormat: 'Y-m-d',
|
||||
enableTime: false,
|
||||
locale: {
|
||||
firstDayOfWeek: store.state.auth.settings.weekStart,
|
||||
},
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gantt-chart-container {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.gantt-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.range-picker {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
width: 50%;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0;
|
||||
width: 33%;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: .5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-top: .5rem;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
&, .input {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.select, .select select {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
|
||||
.label {
|
||||
font-size: .9rem;
|
||||
padding-left: .4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// vue-draggable overwrites
|
||||
.vdr.active::before {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in a new issue