local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: allow clicking on confirm for a date without requiring to click on another input field

Browse source
This commit is contained in:
kolaente 2022-05-15 22:17:26 +02:00
parent c5c980e1b1
commit 138b06752f
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/input/datepicker.vue
View file

@ -115,7 +115,7 @@ import {defineComponent} from 'vue'
import flatPickr from 'vue-flatpickr-component' import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css' import 'flatpickr/dist/flatpickr.css'
import { i18n } from '@/i18n' import {i18n} from '@/i18n'
import {format} from 'date-fns' import {format} from 'date-fns'
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval' import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
@ -185,7 +185,7 @@ export default defineComponent({
this.updateData() this.updateData()
}, },
get() { get() {
if(!this.date) { if (!this.date) {
return '' return ''
} }
@ -195,7 +195,7 @@ export default defineComponent({
}, },
methods: { methods: {
setDateValue(newVal) { setDateValue(newVal) {
if(newVal === null) { if (newVal === null) {
this.date = null this.date = null
return return
} }
@ -207,7 +207,7 @@ export default defineComponent({
this.$emit('change', this.date) this.$emit('change', this.date)
}, },
toggleDatePopup() { toggleDatePopup() {
if(this.disabled) { if (this.disabled) {
return return
} }
@ -219,12 +219,16 @@ export default defineComponent({
} }
}, },
close() { close() {
this.show = false // Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
this.$emit('close', this.changed) // having to click on another input field before it is actually used.
if(this.changed) { setTimeout(() => {
this.changed = false this.show = false
this.$emit('close-on-change', this.changed) this.$emit('close', this.changed)
} if (this.changed) {
this.changed = false
this.$emit('close-on-change', this.changed)
}
}, 200)
}, },
setDate(date) { setDate(date) {
if (this.date === null) { if (this.date === null) {
@ -311,7 +315,7 @@ export default defineComponent({
text-align: center; text-align: center;
} }
} }
a.button { a.button {
margin: 1rem; margin: 1rem;
width: calc(100% - 2rem); width: calc(100% - 2rem);