forked from vikunja/frontend
141 lines
3.1 KiB
Vue
141 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
:class="{ 'is-loading': taskService.loading }"
|
|
class="defer-task loading-container"
|
|
>
|
|
<label class="label">{{ $t('task.deferDueDate.title') }}</label>
|
|
<div class="defer-days">
|
|
<x-button
|
|
@click.prevent.stop="() => deferDays(1)"
|
|
:shadow="false"
|
|
type="secondary"
|
|
>
|
|
{{ $t('task.deferDueDate.1day') }}
|
|
</x-button>
|
|
<x-button
|
|
@click.prevent.stop="() => deferDays(3)"
|
|
:shadow="false"
|
|
type="secondary"
|
|
>
|
|
{{ $t('task.deferDueDate.3days') }}
|
|
</x-button>
|
|
<x-button
|
|
@click.prevent.stop="() => deferDays(7)"
|
|
:shadow="false"
|
|
type="secondary"
|
|
>
|
|
{{ $t('task.deferDueDate.1week') }}
|
|
</x-button>
|
|
</div>
|
|
<flat-pickr
|
|
:class="{ disabled: taskService.loading }"
|
|
:config="flatPickerConfig"
|
|
:disabled="taskService.loading"
|
|
class="input"
|
|
v-model="dueDate"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TaskService from '../../../services/task'
|
|
import flatPickr from 'vue-flatpickr-component'
|
|
|
|
export default {
|
|
name: 'defer-task',
|
|
data() {
|
|
return {
|
|
taskService: TaskService,
|
|
task: null,
|
|
// We're saving the due date seperately to prevent null errors in very short periods where the task is null.
|
|
dueDate: null,
|
|
lastValue: null,
|
|
changeInterval: null,
|
|
}
|
|
},
|
|
components: {
|
|
flatPickr,
|
|
},
|
|
props: {
|
|
value: {
|
|
required: true,
|
|
},
|
|
},
|
|
created() {
|
|
this.taskService = new TaskService()
|
|
},
|
|
mounted() {
|
|
this.task = this.value
|
|
this.dueDate = this.task.dueDate
|
|
this.lastValue = this.dueDate
|
|
|
|
// Because we don't really have other ways of handling change since if we let flatpickr
|
|
// change events trigger updates, it would trigger a flatpickr change event which would trigger
|
|
// an update which would trigger a change event and so on...
|
|
// This is either a bug in flatpickr or in the vue component of it.
|
|
// To work around that, we're only updating if something changed and check each second and when closing the popup.
|
|
if (this.changeInterval) {
|
|
clearInterval(this.changeInterval)
|
|
}
|
|
|
|
this.changeInterval = setInterval(this.updateDueDate, 1000)
|
|
},
|
|
beforeDestroy() {
|
|
if (this.changeInterval) {
|
|
clearInterval(this.changeInterval)
|
|
}
|
|
this.updateDueDate()
|
|
},
|
|
watch: {
|
|
value(newVal) {
|
|
this.task = newVal
|
|
this.dueDate = this.task.dueDate
|
|
this.lastValue = this.dueDate
|
|
},
|
|
},
|
|
computed: {
|
|
flatPickerConfig() {
|
|
return {
|
|
altFormat: this.$t('date.altFormatLong'),
|
|
altInput: true,
|
|
dateFormat: 'Y-m-d H:i',
|
|
enableTime: true,
|
|
time_24hr: true,
|
|
inline: true,
|
|
locale: {
|
|
firstDayOfWeek: this.$store.state.auth.settings.weekStart,
|
|
},
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
deferDays(days) {
|
|
this.dueDate = new Date(this.dueDate)
|
|
this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
|
|
this.updateDueDate()
|
|
},
|
|
updateDueDate() {
|
|
if (!this.dueDate) {
|
|
return
|
|
}
|
|
|
|
if (+new Date(this.dueDate) === +this.lastValue) {
|
|
return
|
|
}
|
|
|
|
this.task.dueDate = new Date(this.dueDate)
|
|
this.taskService
|
|
.update(this.task)
|
|
.then((r) => {
|
|
this.lastValue = r.dueDate
|
|
this.task = r
|
|
this.$emit('input', r)
|
|
})
|
|
.catch((e) => {
|
|
this.error(e)
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|