CoursebookDateSelect.vue

<script>
import DateField from "aleksis.core/components/generic/forms/DateField.vue";
import { DateTime } from "luxon";

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,
    },
  },
  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-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" @click="handleClick(PREV)">
            <v-icon>$prev</v-icon>
          </v-btn>
          <date-field
            solo-inverted
            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" @click="handleClick(NEXT)">
            <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>