Create date select for coursebook

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

@@ -51,7 +51,7 @@
         </v-list-item-content>
       </v-list-item>
 
-
+      <coursebook-date-select :value="dateStart"/>
     </template>
     <template #loading>
       <CoursebookLoader />
@@ -78,10 +78,12 @@ import {DateTime} from "luxon";
 import {coursesOfTeacher, documentationsForCoursebook, groupsByOwner,} from "./coursebook.graphql";
 import CoursebookLoader from "./CoursebookLoader.vue";
 import CoursebookEmptyMessage from "./CoursebookEmptyMessage.vue";
+import CoursebookDateSelect from "./CoursebookDateSelect.vue";
 
 export default {
   name: "Coursebook",
   components: {
+    CoursebookDateSelect,
     CoursebookEmptyMessage,
     CoursebookLoader,
     CRUDIterator,

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

+<script>
+import DateField from "aleksis.core/components/generic/forms/DateField.vue";
+
+export default {
+  name: "CoursebookDateSelect",
+  components: {
+    DateField,
+  },
+  mounted() {
+    // Vuetify uses the hideScroll method to disable scrolling by setting an event listener
+    // to the window. As event listeners can only be removed by referencing the listener
+    // method and because vuetify this method is called on every state change of the dialog,
+    // we simply replace the method in this component instance
+    // https://edugit.org/AlekSIS/official/AlekSIS-Core/-/commit/c6048ba9ad8345e98d896801424f5292bb307e2e
+    this.$refs.sheet.hideScroll = this.$refs.sheet.showScroll;
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  }
+}
+</script>
+
+<template>
+<v-bottom-sheet
+    :value="true"
+    persistent
+    hide-overlay
+    ref="sheet"
+    class="rounded-t-xl rounded-b-0"
+  >
+  <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-icon>$prev</v-icon>
+        </v-btn>
+        <date-field
+          solo-inverted
+          flat
+          hide-details
+          :value="value"
+          :label="$t('alsijil.coursebook.date_select.label')"
+          :disabled="loading"
+        />
+        <v-btn icon large class="ms-4">
+          <v-icon>$next</v-icon>
+        </v-btn>
+      </div>
+    </v-card-title>
+  </v-card>
+</v-bottom-sheet>
+</template>
+
+<style scoped>
+#content {
+  margin: auto;
+  max-width: 500px;
+}
+</style>
\ No newline at end of file