modulplaner-frontend/src/components/modals/PersonalEventEdit.vue

import BaseModal from './BaseModal.vue';

<template>
  <BaseModal
    :show="stateStore.inspectingPersonalEvent != null"
    @close="stateStore.inspectingPersonalEvent = null"
  >
    <h1 class="text-3xl mb-5">
      Persönlicher Event
    </h1>

    <form
      @submit.prevent="updateEntry"
      @keydown.enter="$event.preventDefault()"
    >
      <div class="mb-5">
        <label>Bezeichnung</label>
        <input
          v-model="name"
          type="text"
          placeholder="Verein, Musik, ..."
          required
        >
      </div>

      <div class="mb-5">
        <label>ECTS</label>
        <input
          v-model="ects"
          type="number"
          required
        >
      </div>

      <div class="flex items-end w-full gap-4">
        <div class="w-2/3">
          <label>Wochentag</label>
          <select
            v-model="weekday"
            class="h-10 w-full"
          >
            <option
              v-for="(day, idx) in dayMap"
              :key="day"
              :value="idx"
            >
              {{ day }}
            </option>
          </select>
        </div>

        <div class="w-2/3">
          <label>Von</label>
          <input
            v-model="from"
            type="time"
            class="h-10"
            required
          >
        </div>

        <div class="w-2/3">
          <label>Bis</label>
          <input
            v-model="to"
            type="time"
            class="h-10"
            required
            :class="[toTimeValid ? '' : 'border-red-500']"
          >
        </div>
      </div>

      <div class="flex justify-end mt-10 gap-4">
        <button
          v-if="!isNew"
          class="bg-red-500 text-white py-2 px-5 rounded"
          @click.prevent="deleteEntry"
        >
          Entfernen
        </button>
        <input
          type="submit"
          class="bg-green-500 text-white py-2 px-5 rounded active:bg-green-600"
          :value="isNew ? 'Einfügen' : 'Speichern'"
        >
      </div>
    </form>
  </BaseModal>
</template>

<script lang="ts">
import BaseModal from "./BaseModal.vue";
import { useStateStore } from "../../stores/state";
import { usePlanningStore } from "../../stores/planning";
import { dayMap, fromTime, toTime } from "../../helpers";
import { PersonalEvent } from "../../types";

export default {
  name: "PersonalEventEdit",
  components: { BaseModal },
  setup() {
    const stateStore = useStateStore();
    const planningStore = usePlanningStore();
    return {
      stateStore,
      planningStore,
      dayMap,
    };
  },
  data() {
    return {
      name: "",
      ects: 0,
      weekday: 0,
      from: "",
      to: "",
    };
  },
  computed: {
    personalEvent(): PersonalEvent | null | boolean {
      return this.stateStore.inspectingPersonalEvent;
    },
    isNew(): boolean {
      return this.stateStore.inspectingPersonalEvent == true;
    },
    toTimeValid(): boolean {
      if (this.from.length == 0 || this.to.length == 0) return true;
      return fromTime(this.from) < fromTime(this.to);
    },
  },
  watch: {
    personalEvent() {
      this.updateFields();
    },
  },
  mounted() {
    this.updateFields();
  },
  methods: {
    deleteEntry() {
      const pe = this.stateStore.inspectingPersonalEvent;
      if (pe === false || pe === true) return;
      this.planningStore.removePersonalEvent(pe);
      this.stateStore.inspectingPersonalEvent = null;

      this.resetFields();
    },
    updateEntry() {
      if (!this.toTimeValid) {
        return;
      }

      const from = fromTime(this.from);
      const to = fromTime(this.to);
      const event = {
        name: this.name,
        ects: this.ects,
        weekday: this.weekday,
        from: from,
        to: to,
        id: `personal-${this.name}-${this.weekday}-${from}-${to}`,
      } as PersonalEvent;

      const pe = this.personalEvent;
      if (pe === false || pe === true || pe === null)
        this.planningStore.addPersonalEvent(event);
      else this.planningStore.updatePersonalEvent(pe, event);

      this.stateStore.inspectingPersonalEvent = null;
      this.resetFields();
    },
    resetFields() {
      this.name = "";
      this.ects = 0;
      this.weekday = 0;
      this.from = "";
      this.to = "";
    },
    updateFields() {
      const pe = this.personalEvent;
      if (pe === null || pe === false || pe === true) {
        this.resetFields();
        return;
      }
      this.name = pe.name;
      this.ects = pe.ects ?? 0;
      this.weekday = pe.weekday;
      this.from = toTime(pe.from);
      this.to = toTime(pe.to);
    },
  },
};
</script>

<style scoped></style>