forked from vikunja/frontend
konrad
fb3cf94cba
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: vikunja/frontend#308 Co-Authored-By: konrad <konrad@kola-entertainments.de> Co-Committed-By: konrad <konrad@kola-entertainments.de>
106 lines
2.0 KiB
Vue
106 lines
2.0 KiB
Vue
<template>
|
|
<div class="reminders">
|
|
<div
|
|
v-for="(r, index) in reminders"
|
|
:key="index"
|
|
:class="{ 'overdue': r < new Date()}"
|
|
class="reminder-input"
|
|
>
|
|
<datepicker
|
|
v-model="reminders[index]"
|
|
:disabled="disabled"
|
|
@close-on-change="() => addReminderDate(index)"
|
|
/>
|
|
<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
|
|
<icon icon="times"></icon>
|
|
</a>
|
|
</div>
|
|
<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 datepicker from '@/components/input/datepicker'
|
|
|
|
export default {
|
|
name: 'reminders',
|
|
data() {
|
|
return {
|
|
newReminder: null,
|
|
reminders: [],
|
|
}
|
|
},
|
|
props: {
|
|
value: {
|
|
default: () => [],
|
|
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: {
|
|
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
|
|
},
|
|
},
|
|
methods: {
|
|
updateData() {
|
|
this.$emit('input', this.reminders)
|
|
this.$emit('change')
|
|
},
|
|
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
|
|
}
|
|
|
|
this.updateData()
|
|
},
|
|
removeReminderByIndex(index) {
|
|
this.reminders.splice(index, 1)
|
|
this.updateData()
|
|
},
|
|
},
|
|
}
|
|
</script>
|