encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix due hour selection when event ends on next day

Browse Source
This commit is contained in:
lesion
2022-08-30 11:51:58 +02:00
parent 1f42fc00f1
commit fcae78f427
2 changed files with 68 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/DateInput.vue
View File

@@ -13,8 +13,7 @@ v-col(cols=12)
client-only client-only
.datePicker.mt-3 .datePicker.mt-3
v-input(:value='fromDate' v-input(:value='fromDate' :rules="[$validators.required('common.when')]")
:rules="[$validators.required('common.when')]")
vc-date-picker( vc-date-picker(
v-model='fromDate' v-model='fromDate'
:is-range='type === "multidate"' :is-range='type === "multidate"'
@@ -42,6 +41,9 @@ v-col(cols=12)
transition="scale-transition") transition="scale-transition")
template(v-slot:activator="{ on, attrs }") template(v-slot:activator="{ on, attrs }")
v-text-field( v-text-field(
clearable
:clear-icon='mdiClose'
@click:clear='() => change("fromHour")'
:label="$t('event.from')" :label="$t('event.from')"
:value="fromHour" :value="fromHour"
:disabled='!value.from' :disabled='!value.from'
@@ -68,6 +70,9 @@ v-col(cols=12)
transition="scale-transition") transition="scale-transition")
template(v-slot:activator="{ on, attrs }") template(v-slot:activator="{ on, attrs }")
v-text-field( v-text-field(
clearable
:clear-icon='mdiClose'
@click:clear='() => change("dueHour")'
:label="$t('event.due')" :label="$t('event.due')"
:value="dueHour" :value="dueHour"
:disabled='!fromHour' :disabled='!fromHour'
@@ -91,7 +96,7 @@ import dayjs from 'dayjs'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import List from '@/components/List' import List from '@/components/List'
import { attributesFromEvents } from '../assets/helper' import { attributesFromEvents } from '../assets/helper'
import { mdiClockTimeFourOutline, mdiClockTimeEightOutline } from '@mdi/js' import { mdiClockTimeFourOutline, mdiClockTimeEightOutline, mdiClose } from '@mdi/js'
export default { export default {
name: 'DateInput', name: 'DateInput',
@@ -110,7 +115,7 @@ export default {
} }
} }
return { return {
mdiClockTimeFourOutline, mdiClockTimeEightOutline, mdiClockTimeFourOutline, mdiClockTimeEightOutline, mdiClose,
allowedMinutes: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55], allowedMinutes: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55],
menuFromHour: false, menuFromHour: false,
fromDate, fromDate,
@@ -222,31 +227,35 @@ export default {
} else if (what === 'recurrentType') { } else if (what === 'recurrentType') {
this.$emit('input', { ...this.value, recurrent: { ...this.value.recurrent, type: value } }) this.$emit('input', { ...this.value, recurrent: { ...this.value.recurrent, type: value } })
} else if (what === 'fromHour') { } else if (what === 'fromHour') {
if (value) { // if (value) {
const [hour, minute] = value.split(':') const [hour, minute] = value ? value.split(':') : [0, 0]
let from = dayjs.tz(this.value.from).hour(hour).minute(minute).second(0) let from = dayjs.tz(this.value.from).hour(hour).minute(minute).second(0).toDate()
this.$emit('input', { ...this.value, from, fromHour: true }) this.$emit('input', { ...this.value, from })
} else { if (!value) {
this.$emit('input', { ...this.value, fromHour: false }) this.fromHour = null
} }
// } else {
// this.$emit('input', { ...this.value })
// }
} else if (what === 'dueHour') { } else if (what === 'dueHour') {
if (value) { if (value) {
const [hour, minute] = value.split(':') const [hour, minute] = value.split(':')
let due = dayjs.tz(this.value.due).hour(hour).minute(minute).second(0) let due = dayjs.tz(this.value.due || this.value.from).hour(Number(hour)).minute(Number(minute)).second(0)
// add a day // add a day
if (dayjs.tz(this.value.from).hour() > Number(hour) && !this.value.multidate) { if (dayjs(this.value.from).hour() > Number(hour) && !this.value.multidate) {
due = due.add(1, 'day') due = due.add(1, 'day')
} }
due = due.hour(hour).minute(minute).second(0) due = due.hour(hour).minute(minute).second(0)
this.$emit('input', { ...this.value, due, dueHour: true }) this.$emit('input', { ...this.value, due: due.toDate() })
} else { } else {
this.$emit('input', { ...this.value, due: null, dueHour: false }) this.$emit('input', { ...this.value, due: null })
this.dueHour = null
} }
// change date in calendar (could be a range or a recurrent event...) // change date in calendar (could be a range or a recurrent event...)
} else if (what === 'date') { } else if (what === 'date') {
if (value === null) { if (value === null) {
this.$emit('input', { ...this.value, from: null, fromHour: false }) this.$emit('input', { ...this.value, from: null, due: null })
return return
} }
if (this.value.multidate) { if (this.value.multidate) {
@@ -254,23 +263,23 @@ export default {
let due = value.end let due = value.end
if (this.fromHour) { if (this.fromHour) {
const [hour, minute] = this.fromHour.split(':') const [hour, minute] = this.fromHour.split(':')
from = dayjs.tz(from).hour(hour).minute(minute) from = dayjs.tz(from).hour(hour).minute(minute).second(0).toDate()
} }
if (this.dueHour) { if (this.dueHour) {
const [hour, minute] = this.dueHour.split(':') const [hour, minute] = this.dueHour.split(':')
due = dayjs.tz(due).hour(hour).minute(minute) due = dayjs.tz(due).hour(hour).minute(minute).second(0).toDate()
} }
this.$emit('input', { ...this.value, from, due }) this.$emit('input', { ...this.value, from, due })
} else { } else {
let from = value let from = value
let due = this.value.due let due = this.value.due || from
if (this.fromHour) { if (this.fromHour) {
const [hour, minute] = this.fromHour.split(':') const [hour, minute] = this.fromHour.split(':')
from = dayjs.tz(value).hour(hour).minute(minute) from = dayjs.tz(value).hour(hour).minute(minute).second(0).toDate()
} }
if (this.dueHour) { if (this.dueHour) {
const [hour, minute] = this.dueHour.split(':') const [hour, minute] = this.dueHour.split(':')
due = dayjs.tz(value).hour(hour).minute(minute) due = dayjs.tz(value).hour(hour).minute(minute).second(0).toDate()
} }
this.$emit('input', { ...this.value, from, due }) this.$emit('input', { ...this.value, from, due })
} }

2
pages/add/_edit.vue
View File

@@ -217,7 +217,7 @@ export default {
formData.append('description', this.event.description) formData.append('description', this.event.description)
formData.append('multidate', !!this.date.multidate) formData.append('multidate', !!this.date.multidate)
formData.append('start_datetime', dayjs(this.date.from).unix()) formData.append('start_datetime', dayjs(this.date.from).unix())
formData.append('end_datetime', this.date.due ? dayjs(this.date.due).unix() : this.date.from.add(2, 'hour').unix()) formData.append('end_datetime', this.date.due ? dayjs(this.date.due).unix() : dayjs(this.date.from).add(2, 'hour').unix())
if (this.edit) { if (this.edit) {
formData.append('id', this.event.id) formData.append('id', this.event.id)