AmendedLessonCard.vue

<script setup>
import DeleteButton from "aleksis.core/components/generic/buttons/DeleteButton.vue";
import LessonInformation from "./LessonInformation.vue";
import LessonRelatedObjectChip from "./LessonRelatedObjectChip.vue";

import { gqlPersons } from "./amendLesson.graphql";

import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
</script>

<template>
  <v-card class="my-2 full-width">
    <!-- flex-md-row zeile ab medium -->
    <!-- align-stretch - stretch full-width -->
    <div
      class="full-width d-flex flex-md-row flex-column align-center justify-space-between"
    >
      <lesson-information
        class="flex-grow-1"
        :lesson="$attrs['amended-lesson']"
      />

      <v-autocomplete
        v-model="teachers"
        multiple
        chips
        deletable-chips
        :items="amendableTeachers"
        item-text="fullName"
        item-value="id"
        class="flex-grow-1 flex-shrink-0 mx-2"
        @input="save"
      >
        <template #prepend-inner>
          <v-chip
            v-for="teacher in teachersWithStatus(
              $attrs['amended-lesson'],
            ).filter((t) => t.status === 'removed')"
            class="text-decoration-line-through text--secondary mb-2"
            >{{ teacher.fullName }}</v-chip
          >
        </template>
      </v-autocomplete>

      <delete-button
        class="flex-grow-1 mx-2"
        color="red white--text"
        outlined
        @click="toggleCancel"
        >{{
          $attrs["amended-lesson"].cancelled
            ? $t("chronos.amend_lesson.overview.cancel.decancel")
            : $t("chronos.amend_lesson.overview.cancel.cancel")
        }}</delete-button
      >
    </div>
    <v-divider />
    <!--<v-card-actions>-->
    <!--  <v-spacer/>-->
    <!--  <cancel-button @click="$emit('close')" :disabled="loading" />-->
    <!--  <save-button-->
    <!--    @click="save"-->
    <!--    :loading="loading"-->
    <!--  />-->
    <!--</v-card-actions>-->
  </v-card>
</template>

<script>
//import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
//import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
//import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";

//import { createOrUpdateDocumentations } from "../coursebook.graphql";

export default {
  name: "AmendedLessonCard",
  emits: ["open", "close"],
  mixins: [createOrPatchMixin],
  data() {
    return {
      loading: false,
      teachers: [],
    };
  },
  methods: {
    teachersWithStatus(lesson) {
      let oldIds = lesson.realAmends.teachers.map((teacher) => teacher.id);
      let newIds = lesson.teachers.map((teacher) => teacher.id);
      let teachersWithStatus = lesson.realAmends.teachers
        .concat(lesson.teachers)
        .map((teacher) => {
          let status = "regular";
          if (newIds.includes(teacher.id) && !oldIds.includes(teacher.id)) {
            status = "new";
          } else if (
            !newIds.includes(teacher.id) &&
            oldIds.includes(teacher.id)
          ) {
            status = "removed";
          }
          return { ...teacher, status: status };
        });
      return teachersWithStatus;
    },
    save() {
      this.createOrPatch([
        {
          id: this.$attrs["amended-lesson"].id,
          teachers: this.teachers,
        },
      ]);
    },
    toggleCancel() {
      this.createOrPatch([
        {
          id: this.$attrs["amended-lesson"].id,
          cancelled: !this.$attrs["amended-lesson"].cancelled,
        },
      ]);
    },
  },
  apollo: {
    amendableTeachers: gqlPersons,
  },
  mounted() {
    this.teachers = this.$attrs["amended-lesson"].teachers.map(
      (teacher) => teacher.id,
    );
  },
};
</script>