AmendLesson.vue

<template>
  <v-card-actions v-if="checkPermission('chronos.edit_substitution_rule')">
    <edit-button
      i18n-key="chronos.event.amend.edit_button"
      @click="edit = true"
      />
    <delete-button
      v-if="selectedEvent.meta.amended"
      i18n-key="chronos.event.amend.delete_button"
      @click="delete = true"
      />
    <dialog-object-form
      v-model="edit"
      :fields="fields"
      :is-create="!selectedEvent.meta.amended"
      createItemI18nKey="chronos.event.amend.title"
      :gql-create-mutation="gqlCreateMutation"
      :get-create-data="transformCreateData"
      :default-item="default"
      editItemI18nKey="chronos.event.amend.title"
      :gql-patch-mutation="gqlPatchMutation"
      :get-patch-data="transformPatchData"
      :edit-item="initPatchData"
      @cancel="open = false"
      @save="updateOnSave()"
      >
      <template #subject.field="{ attrs, on, item }">
        <v-autocomplete
          :disabled="item.cancelled"
          :items="amendableSubjects"
          item-text="name"
          item-value="id"
          v-bind="attrs"
          v-on="on"
          />
      </template>
      <template #teachers.field="{ attrs, on, item }">
        <v-autocomplete
          :disabled="item.cancelled"
          multiple
          :items="amendableTeachers"
          item-text="fullName"
          item-value="id"
          v-bind="attrs"
          v-on="on"
          chips
          deletable-chips
          />
      </template>
      <template #rooms.field="{ attrs, on, item }">
        <v-autocomplete
          :disabled="item.cancelled"
          multiple
          :items="amendableRooms"
          item-text="name"
          item-value="id"
          v-bind="attrs"
          v-on="on"
          chips
          deletable-chips
          />
      </template>
      <template #cancelled.field="{ attrs, on }">
        <v-checkbox v-bind="attrs" v-on="on" />
      </template>
      <template #comment.field="{ attrs, on }">
        <v-textarea v-bind="attrs" v-on="on" />
      </template>
    </dialog-object-form>
    <delete-dialog
      deleteSuccessMessageI18nKey="chronos.event.amend.delete_success"
      :gql-mutation="gqlDeleteMutation"
      v-model="delete"
      :item="selectedEvent.meta"
      @success="updateOnSave()"
      >
      <template #title>
        {{ $t("chronos.event.amend.delete_dialog") }}
      </template>
    </delete-dialog>
  </v-card-actions>
</template>

<script>
import permissionsMixin from "aleksis.core/mixins/permissions.js";
import EditButton from "aleksis.core/components/generic/buttons/EditButton.vue";
import DialogObjectForm from "aleksis.core/components/generic/dialogs/DialogObjectForm.vue";
import DeleteButton from "aleksis.core/components/generic/buttons/DeleteButton.vue";
import DeleteDialog from "aleksis.core/components/generic/dialogs/DeleteDialog.vue";
import {
  gqlSubjects,
  gqlPersons,
  gqlRooms,
  createAmendLesson,
  patchAmendLesson,
  deleteAmendLesson,
} from "./amendLesson.graphql";

export default {
  name: "AmendLesson",
  components: {
    EditButton,
    DialogObjectForm,
    DeleteButton,
    DeleteDialog,
  },
  mixins: [permissionsMixin],
  data() {
    return {
      edit: false,
      fields: [
        {
          text: this.$t("chronos.event.amend.subject"),
          value: "subject",
        },
        {
          text: this.$t("chronos.event.amend.teachers"),
          value: "teachers",
        },
        {
          text: this.$t("chronos.event.amend.rooms"),
          value: "rooms",
        },
        {
          text: this.$t("chronos.event.amend.cancelled"),
          value: "cancelled",
        },
        {
          text: this.$t("chronos.event.amend.comment"),
          value: "comment",
        },
      ],
      default: {
        cancelled: this.selectedEvent.meta.cancelled,
        comment: this.selectedEvent.meta.comment,
      },
      gqlCreateMutation: createAmendLesson,
      gqlPatchMutation: patchAmendLesson,
      delete: false,
      gqlDeleteMutation: deleteAmendLesson,
    };
  },
  methods: {
    transformCreateData(item) {
      return {
        ...item,
        amends: this.selectedEvent.meta.id,
        datetimeStart: this.selectedEvent.startDateTime.toUTC().toISO(),
        datetimeEnd: this.selectedEvent.endDateTime.toUTC().toISO(),
      };
    },
    transformPatchData(item) {
      let { id, __typename, cancelled, ...patchItem } = item;
      return {
        ...patchItem,
        // Normalize cancelled, v-checkbox returns null & does not
        // honor false-value.
        cancelled: cancelled ? true : false,
      };
    },
    updateOnSave() {
      this.$emit('refreshCalendar');
      this.model = false;
    },
  },
  computed: {
    initPatchData() {
      return {
        id: this.selectedEvent.meta.id,
        subject: this.selectedEvent.meta.subject?.id.toString(),
        teachers: this.selectedEvent.meta.teachers.map((teacher) => teacher.id.toString()),
        rooms: this.selectedEvent.meta.rooms.map((room) => room.id.toString()),
        cancelled: this.selectedEvent.meta.cancelled,
        comment: this.selectedEvent.meta.comment,
      };
    },
  },
  apollo: {
    amendableSubjects: gqlSubjects,
    amendableTeachers: gqlPersons,
    amendableRooms: gqlRooms,
  },
  mounted() {
    this.addPermissions(["chronos.edit_substitution_rule"]);
  },
};
</script>