Emit events in CoursebookDateSelect.vue

aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue

 <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>