konrad
724275e653
All checks were successful
continuous-integration/drone/push Build is passing
Save sort order to local storage Save selected columns to localStorage Loading spinner More sorting Add sorting Styling and hiding of column filter Add checkbox to show/hide columns Use fancycheckbox everywhere Fix is done badge Change sort order in table view Add is done column to table Better text handling Refactor is done into seperate component Add pagination to table view Add assignees to table view Fix redirecting to table view Add date tooltip to date field Add date tooltip to date field labels for table view Styling Add basic table view Extend priority label Split list view in mixins Co-authored-by: kolaente <k@knt.li> Reviewed-on: #76
94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="gantt-options">
|
|
<fancycheckbox v-model="showTaskswithoutDates" class="is-block">
|
|
Show tasks which don't have dates set
|
|
</fancycheckbox>
|
|
<div class="range-picker">
|
|
<div class="field">
|
|
<label class="label" for="dayWidth">Size</label>
|
|
<div class="control">
|
|
<div class="select">
|
|
<select id="dayWidth" v-model.number="dayWidth">
|
|
<option value="35">Default</option>
|
|
<option value="10">Month</option>
|
|
<option value="80">Day</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="fromDate">From</label>
|
|
<div class="control">
|
|
<flat-pickr
|
|
class="input"
|
|
v-model="dateFrom"
|
|
:config="flatPickerConfig"
|
|
id="fromDate"
|
|
placeholder="From"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="toDate">To</label>
|
|
<div class="control">
|
|
<flat-pickr
|
|
class="input"
|
|
v-model="dateTo"
|
|
:config="flatPickerConfig"
|
|
id="toDate"
|
|
placeholder="To"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<gantt-chart
|
|
:list="list"
|
|
:show-taskswithout-dates="showTaskswithoutDates"
|
|
:date-from="dateFrom"
|
|
:date-to="dateTo"
|
|
:day-width="dayWidth"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import GanttChart from './gantt-component'
|
|
import flatPickr from 'vue-flatpickr-component'
|
|
import ListModel from '../../models/list'
|
|
import Fancycheckbox from '../global/fancycheckbox'
|
|
|
|
export default {
|
|
name: 'Gantt',
|
|
components: {
|
|
Fancycheckbox,
|
|
flatPickr,
|
|
GanttChart
|
|
},
|
|
data() {
|
|
return {
|
|
showTaskswithoutDates: false,
|
|
dayWidth: 35,
|
|
dateFrom: null,
|
|
dateTo: null,
|
|
flatPickerConfig:{
|
|
altFormat: 'j M Y',
|
|
altInput: true,
|
|
dateFormat: 'Y-m-d',
|
|
enableTime: false,
|
|
},
|
|
}
|
|
},
|
|
beforeMount() {
|
|
this.dateFrom = new Date((new Date()).setDate((new Date()).getDate() - 15))
|
|
this.dateTo = new Date((new Date()).setDate((new Date()).getDate() + 30))
|
|
},
|
|
props: {
|
|
list: {
|
|
type: ListModel,
|
|
required: true,
|
|
}
|
|
},
|
|
}
|
|
</script> |