Adapt to moved date select footer

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

@@ -80,7 +80,7 @@
         </v-list-item-content>
       </v-list-item>
 
-      <coursebook-date-select :value="date" @click="handleDateMove" />
+      <date-select-footer :value="date" @click="handleDateMove" />
     </template>
     <template #loading>
       <CoursebookLoader />
@@ -104,6 +104,7 @@
 
 <script>
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
+import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.vue";
 import DocumentationModal from "./documentation/DocumentationModal.vue";
 import { DateTime } from "luxon";
 import {
@@ -113,15 +114,14 @@ import {
 } 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,
+    DateSelectFooter,
     DocumentationModal,
   },
   props: {

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",
-  components: {
-    DateField,
-  },
-  props: {
-    value: {
-      type: String,
-      required: true,
-    },
-    loading: {
-      type: Boolean,
-      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>
-
-<template>
-  <v-footer app inset padless class="date-select-footer">
-    <v-card tile class="full-width">
-      <v-card-title class="auto-margin">
-        <div class="d-flex align-center justify-center full-width">
-          <v-btn icon large class="me-4" @click="handleClick(PREV)">
-            <v-icon>$prev</v-icon>
-          </v-btn>
-          <div class="flex-grow-0">
-            <date-field
-              solo-inverted
-              flat
-              hide-details
-              :value="value"
-              @input="$emit('input', $event)"
-              :label="$t('alsijil.coursebook.date_select.label')"
-              :disabled="loading"
-              readonly
-            />
-          </div>
-          <v-btn icon large class="ms-4" @click="handleClick(NEXT)">
-            <v-icon>$next</v-icon>
-          </v-btn>
-        </div>
-      </v-card-title>
-    </v-card>
-  </v-footer>
-</template>
-
-<style scoped>
-.auto-margin {
-  margin: auto;
-}
-.date-select-footer {
-  z-index: 5;
-}
-</style>