LessonDocumentations.vue

<template><div>
  <v-dialog
    v-model="dialog"
    max-width="800"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-row>
        <v-col cols="6">
          <v-select
            :items="emptyLessonperiods"
            label="Choose Lesson date"
            :item-text="getLessonText"
            v-model="selectedLessonperiodDatetime"
            return-object
          ></v-select>
        </v-col>
        <v-col>
          <v-btn
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
            @click="createLessonDocumentation()"
          >
            Create Lesson Documentation
          </v-btn>
        </v-col>
      </v-row>
    </template>
    <lesson-documentation
      :lessonDocumentationEdit="lessonDocumentationEdit"
      :groups="groups"
      :excuse-types="excuseTypes"
      :extra-marks="extraMarks"
    />
  </v-dialog>
  <v-data-table
    :headers="headers"
    :items="computedLessonDocumentations"
    @click:row="editLessonDocumentation"
    class="elevation-1"
  >
    <template v-slot:item.period="{ item }">
      <span class="text-no-wrap">{{ item.date }} Period {{ item.period }}</span>
    </template>
    <template v-slot:item.personalNotes="{ item }">
      <template v-for="personalNote in item.personalNotes">
        <v-chip class="ma-1" close v-if="personalNoteString(personalNote)">
          {{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
        </v-chip>
      </template>
    </template>
</v-data-table>
</div></template>

<script>
  import LessonDocumentation from "./LessonDocumentation.vue";
  export default {
    components: { LessonDocumentation },
    props: [ "lessonDocumentations","plannedLessonperiodsDatetimes",  "groups", "excuseTypes", "extraMarks", "documentLessonTopicsByWeek" ],
    name: "lesson-documentations",
    data () {
      return {
        dialog: false,
        headers: [
          { text: "Period", value: "period" },
          { text: "Topic", value: "topic" },
          { text: "Homework", value: "homework" },
          { text: "Group note", value: "groupNote" },
          { text: "Personal notes", value: "personalNotes" }
        ],
        lessonDocumentationEdit: {},
        selectedLessonperiodDatetime: {},
        recordedWeeks: [],
      }
    },
    computed: {
      emptyLessonperiods() {
        let currentDatetime = new Date()
        return this.plannedLessonperiodsDatetimes.filter(lp => new Date(lp.datetimeStart) > currentDatetime)
      },
      computedLessonDocumentations() {
        return this.lessonDocumentations.filter(ld => this.recordDocumentation(ld))
      },
    },
    methods: {
      recordDocumentation(item) {
        if (this.documentLessonTopicsByWeek === "True") {
          if (this.recordedWeeks.includes(item.week)) {
            return false
          }
          this.recordedWeeks.push(item.week)
        }
        return true
      },
      async loadLessonDocumentation(item) {
        const result = await this.$apollo.mutate({
          mutation: require("./LessonDocumentation.graphql"),
          variables: {
            year: item.year,
            week: item.week,
            lessonPeriodId: item.lessonPeriod ? item.lessonPeriod.id : null,
            eventId: item.event ? item.event.id : null,
            extraLessonId: item.extraLesson ? item.extraLesson.id : null,
          },
        })
        let lessonDocumentation = result.data.updateOrCreateLessonDocumentation.lessonDocumentation
        this.lessonDocumentationEdit = {
          id: lessonDocumentation.id,
          year: item.year,
          week: item.week,
          date: lessonDocumentation.date,
          lessonPeriodId: item.lessonPeriod ? item.lessonPeriod.id : null,
          eventId: item.event ? item.event.id : null,
          extraLessonId: item.extraLesson ? item.extraLesson.id : null,
          topic: lessonDocumentation.topic,
          homework: lessonDocumentation.homework,
          groupNote: lessonDocumentation.groupNote,
          personalNotes: lessonDocumentation.personalNotes,
        }
      },

      editLessonDocumentation(item) {
        this.loadLessonDocumentation(item)
        this.dialog = true
      },

      createLessonDocumentation() { // FIXME: Update cache to show newly created LessonDocumentation in table
        let lessonDocumentation = this.selectedLessonperiodDatetime
        lessonDocumentation["event"] = null
        lessonDocumentation["extraLesson"] = null
        this.loadLessonDocumentation(lessonDocumentation)
        this.dialog = true
      },

      getLessonText(item) {
          let date_obj = new Date(item.datetimeStart)
          let period = item.lessonPeriod ? ", Period " + item.lessonPeriod.period.period : "" // FIXME: Cases without lessonPeriod
          return date_obj.toLocaleDateString(this.$root.languageCode) + period
      },
      personalNoteString(personalNote) {
          let personalNoteString = "";
          if (personalNote.late > 0) {
              personalNoteString += personalNote.late + " min. ";
          }
          if (personalNote.absent) {
              personalNoteString += "abwesend ";
          }
          if (personalNote.excused) {
              personalNoteString += "entschuldigt ";
          }
          if (personalNote.excuseType) {
              personalNoteString += personalNote.excuseType.name;
          }
          if (personalNote.extraMarks.length > 0) {
              personalNoteString += " (";
              personalNote.extraMarks.forEach(item => {
                  personalNoteString += item.name + ", ";
              });
              personalNoteString = personalNoteString.substring(0, personalNoteString.length - 2);
              personalNoteString += ") ";
          }
          if (personalNote.remarks) {
              personalNoteString += "\"" + personalNote.remarks + "\" ";
          }
          return personalNoteString;
      },
    }
  }
</script>