diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue index 436c4ab9e094490dff7df54c484572d5b8b1b2e3..b3682de4216f7694c3b6b1f9bb1a2d23ea9a855e 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue @@ -1,5 +1,6 @@ <script> import DateField from "aleksis.core/components/generic/forms/DateField.vue"; +import { DateTime } from "luxon"; export default { name: "CoursebookDateSelect", @@ -24,7 +25,28 @@ export default { required: false, default: false, }, - } + }, + data() { + return { + PREV: "prev", + NEXT: "next", + } + }, + methods: { + /** + * @param {"prev"|"next"} direction + */ + handleClick(direction) { + this.$emit("click", direction); + this.$emit(direction); + if (direction === this.PREV) { + this.$emit("input", DateTime.fromISO(this.value).minus({ days: 1 }).toISODate()); + } else { + this.$emit("input", DateTime.fromISO(this.value).plus({ days: 1 }).toISODate()); + } + } + }, + emits: ["input", "click", "prev", "next"], } </script> @@ -39,7 +61,7 @@ export default { <v-card> <v-card-title id="content"> <div class="d-flex align-center justify-space-between full-width"> - <v-btn icon large class="me-4"> + <v-btn icon large class="me-4" @click="handleClick(PREV)"> <v-icon>$prev</v-icon> </v-btn> <date-field @@ -47,10 +69,12 @@ export default { flat hide-details :value="value" + @input="$emit('input', $event)" :label="$t('alsijil.coursebook.date_select.label')" :disabled="loading" + readonly /> - <v-btn icon large class="ms-4"> + <v-btn icon large class="ms-4" @click="handleClick(NEXT)"> <v-icon>$next</v-icon> </v-btn> </div>