Better reminders (#308)
Fix setting the new reminder component to null after adding a new date Add "close on change" event which only fires if the component closed and the value actually changed Hide the "today" option after 21:00 Add "confirm" button to close the component Use disabled in reminders Add a disabled property to the datepicker Cleanup workarounds for flatpickr Use the new datepicker for end dates Use the new datepicker for start date Use the new datepicker for due dates Mobile styling Format Sync flatpickr when clicking on choose a date Make sure to only hide the popup when not clicked something inside of it Make flatpickr dates work Use datepicker component for reminders Merge branch 'master' into feature/better-reminders Fix bottom padding of inline flatpickr Set time Add method to calculate the neares time Move time helpers in separate folder Remove separate flatpickr date Cleanup Set the flatpickr date when setting changing the date Better formatting of the chosen date Bubble Set date when choosing one Fix test Show correct weekday in preview Change hover background color Make label to show if selected date is null configurable Use a different icon for weekend Ignore test files when linting Add tests to dron Move day interval calculation to separate file and test it Add next date calculation Add basic date picker component Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/308 Co-Authored-By: konrad <konrad@kola-entertainments.de> Co-Committed-By: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
246
src/components/input/datepicker.vue
Normal file
246
src/components/input/datepicker.vue
Normal file
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="datepicker" :class="{'disabled': disabled}">
|
||||
<a @click.stop="toggleDatePopup" class="show">
|
||||
<template v-if="date === null">
|
||||
{{ chooseDateLabel }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatDateShort(date) }}
|
||||
</template>
|
||||
</a>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
|
||||
|
||||
<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
|
||||
<span class="icon">
|
||||
<icon :icon="['far', 'calendar-alt']"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Today
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('today') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('tomorrow')">
|
||||
<span class="icon">
|
||||
<icon :icon="['far', 'sun']"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Tomorrow
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('tomorrow') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('nextMonday')">
|
||||
<span class="icon">
|
||||
<icon icon="coffee"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Next Monday
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('nextMonday') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('thisWeekend')">
|
||||
<span class="icon">
|
||||
<icon icon="cocktail"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
This Weekend
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('thisWeekend') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('laterThisWeek')">
|
||||
<span class="icon">
|
||||
<icon icon="chess-knight"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Later This Week
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('laterThisWeek') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('nextWeek')">
|
||||
<span class="icon">
|
||||
<icon icon="forward"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Next Week
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('nextWeek') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<flat-pickr
|
||||
:config="flatPickerConfig"
|
||||
class="input"
|
||||
v-model="flatPickrDate"
|
||||
/>
|
||||
|
||||
<a
|
||||
class="button is-outlined is-primary has-no-shadow is-fullwidth"
|
||||
@click="close"
|
||||
>
|
||||
Confirm
|
||||
</a>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
|
||||
import {format} from 'date-fns'
|
||||
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
|
||||
|
||||
export default {
|
||||
name: 'datepicker',
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
show: false,
|
||||
changed: false,
|
||||
|
||||
flatPickerConfig: {
|
||||
altFormat: 'j M Y H:i',
|
||||
altInput: true,
|
||||
dateFormat: 'Y-m-d H:i',
|
||||
enableTime: true,
|
||||
time_24hr: true,
|
||||
inline: true,
|
||||
},
|
||||
// Since flatpickr dates are strings, we need to convert them to native date objects.
|
||||
// To make that work, we need a separate variable since flatpickr does not have a change event.
|
||||
flatPickrDate: null,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
validator: prop => prop instanceof Date || prop === null || typeof prop === 'string'
|
||||
},
|
||||
chooseDateLabel: {
|
||||
type: String,
|
||||
default: 'Choose a date'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.date = this.value
|
||||
document.addEventListener('click', this.hideDatePopup)
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('click', this.hideDatePopup)
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
if(newVal === null) {
|
||||
this.date = null
|
||||
return
|
||||
}
|
||||
this.date = new Date(newVal)
|
||||
},
|
||||
flatPickrDate(newVal) {
|
||||
this.date = new Date(newVal)
|
||||
this.updateData()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateData() {
|
||||
this.changed = true
|
||||
this.$emit('input', this.date)
|
||||
this.$emit('change', this.date)
|
||||
},
|
||||
toggleDatePopup() {
|
||||
if(this.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
this.show = !this.show
|
||||
},
|
||||
hideDatePopup(e) {
|
||||
if (this.show) {
|
||||
|
||||
// We walk up the tree to see if any parent of the clicked element is the datepicker element.
|
||||
// If it is not, we hide the popup. We're doing all this hassle to prevent the popup from closing when
|
||||
// clicking an element of flatpickr.
|
||||
let parent = e.target.parentElement
|
||||
while (parent !== this.$refs.datepickerPopup) {
|
||||
if (parent.parentElement === null) {
|
||||
parent = null
|
||||
break
|
||||
}
|
||||
|
||||
parent = parent.parentElement
|
||||
}
|
||||
|
||||
if (parent === this.$refs.datepickerPopup) {
|
||||
return
|
||||
}
|
||||
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
this.$emit('close', this.changed)
|
||||
if(this.changed) {
|
||||
this.changed = false
|
||||
this.$emit('close-on-change', this.changed)
|
||||
}
|
||||
},
|
||||
setDate(date) {
|
||||
if (this.date === null) {
|
||||
this.date = new Date()
|
||||
}
|
||||
|
||||
const interval = calculateDayInterval(date)
|
||||
const newDate = new Date()
|
||||
newDate.setDate(newDate.getDate() + interval)
|
||||
newDate.setHours(calculateNearestHours(newDate))
|
||||
newDate.setMinutes(0)
|
||||
newDate.setSeconds(0)
|
||||
this.date = newDate
|
||||
this.flatPickrDate = newDate
|
||||
this.updateData()
|
||||
},
|
||||
getDayIntervalFromString(date) {
|
||||
return calculateDayInterval(date)
|
||||
},
|
||||
getWeekdayFromStringInterval(date) {
|
||||
const interval = calculateDayInterval(date)
|
||||
const newDate = new Date()
|
||||
newDate.setDate(newDate.getDate() + interval)
|
||||
return format(newDate, 'E')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,70 +1,79 @@
|
||||
<template>
|
||||
<div class="reminders">
|
||||
<div
|
||||
:class="{ 'overdue': (r < nowUnix && index !== (reminders.length - 1))}"
|
||||
v-for="(r, index) in reminders"
|
||||
:key="index"
|
||||
:class="{ 'overdue': r < new Date()}"
|
||||
class="reminder-input"
|
||||
v-for="(r, index) in reminders">
|
||||
<flat-pickr
|
||||
:config="flatPickerConfig"
|
||||
:data-index="index"
|
||||
>
|
||||
<datepicker
|
||||
v-model="reminders[index]"
|
||||
:disabled="disabled"
|
||||
:value="r"
|
||||
@close-on-change="() => addReminderDate(index)"
|
||||
/>
|
||||
<a @click="removeReminderByIndex(index)" v-if="!disabled">
|
||||
<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
|
||||
<icon icon="times"></icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="reminder-input" v-if="showNewReminder">
|
||||
<flat-pickr
|
||||
:config="flatPickerConfig"
|
||||
:disabled="disabled"
|
||||
:value="null"
|
||||
placeholder="Add a new reminder..."
|
||||
<div class="reminder-input" v-if="!disabled">
|
||||
<datepicker
|
||||
v-model="newReminder"
|
||||
@close-on-change="() => addReminderDate()"
|
||||
choose-date-label="Add a new reminder..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
import datepicker from '@/components/input/datepicker'
|
||||
|
||||
export default {
|
||||
name: 'reminders',
|
||||
data() {
|
||||
return {
|
||||
newReminder: null,
|
||||
reminders: [],
|
||||
lastReminder: 0,
|
||||
nowUnix: new Date(),
|
||||
showNewReminder: true,
|
||||
flatPickerConfig: {
|
||||
altFormat: 'j M Y H:i',
|
||||
altInput: true,
|
||||
dateFormat: 'Y-m-d H:i',
|
||||
enableTime: true,
|
||||
onOpen: this.updateLastReminderDate,
|
||||
onClose: this.addReminderDate,
|
||||
},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
default: () => [],
|
||||
type: Array,
|
||||
validator: prop => {
|
||||
// This allows arrays of Dates and strings
|
||||
if (!(prop instanceof Array)) {
|
||||
return false
|
||||
}
|
||||
|
||||
for (const e of prop) {
|
||||
const isDate = e instanceof Date
|
||||
const isString = typeof e === 'string'
|
||||
if (!isDate && !isString) {
|
||||
console.log('validation failed', e, e instanceof Date)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
flatPickr,
|
||||
datepicker,
|
||||
},
|
||||
mounted() {
|
||||
this.reminders = this.value
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
for (const i in newVal) {
|
||||
if (typeof newVal[i] === 'string') {
|
||||
newVal[i] = new Date(newVal[i])
|
||||
}
|
||||
}
|
||||
this.reminders = newVal
|
||||
},
|
||||
},
|
||||
@ -73,40 +82,22 @@ export default {
|
||||
this.$emit('input', this.reminders)
|
||||
this.$emit('change')
|
||||
},
|
||||
updateLastReminderDate(selectedDates) {
|
||||
this.lastReminder = +new Date(selectedDates[0])
|
||||
},
|
||||
addReminderDate(selectedDates, dateStr, instance) {
|
||||
const newDate = +new Date(selectedDates[0])
|
||||
|
||||
// Don't update if nothing changed
|
||||
if (newDate === this.lastReminder) {
|
||||
addReminderDate(index = null) {
|
||||
// New Date
|
||||
if (index === null) {
|
||||
if (this.newReminder === null) {
|
||||
return
|
||||
}
|
||||
this.reminders.push(new Date(this.newReminder))
|
||||
this.newReminder = null
|
||||
} else if(this.reminders[index] === null) {
|
||||
return
|
||||
}
|
||||
|
||||
// No date selected
|
||||
if (isNaN(newDate)) {
|
||||
return
|
||||
}
|
||||
|
||||
const index = parseInt(instance.input.dataset.index)
|
||||
if (isNaN(index)) {
|
||||
this.reminders.push(newDate)
|
||||
// This is a workaround to recreate the flatpicker instance which essentially resets it.
|
||||
// Even though flatpickr itself has a reset event, the Vue component does not expose it.
|
||||
this.showNewReminder = false
|
||||
this.$nextTick(() => this.showNewReminder = true)
|
||||
} else {
|
||||
this.reminders[index] = newDate
|
||||
}
|
||||
|
||||
this.updateData()
|
||||
},
|
||||
removeReminderByIndex(index) {
|
||||
this.reminders.splice(index, 1)
|
||||
// Reset the last to 0 to have the "add reminder" button
|
||||
this.reminders[this.reminders.length - 1] = null
|
||||
|
||||
this.updateData()
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user