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="plannedLessonperiodsDatetimes"
            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>
    <ApolloMutation
      :mutation="require('./LessonDocumentation.graphql')"
      :variables=lessonDocumentationEdit
      @done="onDone"
    >
      <template v-slot="{ mutate, loading, error }">
        <v-card elevation="2" :loading="loading">
          <v-form v-model="valid">
            <v-row class="ma-0">
              <v-col cols="12" md="4" lg="3" xl="2">
                <v-hover v-slot="{ hover }">
                  <div>
                    <v-menu
                      v-model="showPicker"
                      :close-on-content-click="false"
                      transition="scale-transition"
                      offset-y
                      min-width="auto"
                    >
                      <template v-slot:activator="{ on, attrs }">
                        <v-card-title>
                          <span v-text="new Date(lessonDocumentationEdit.date).toLocaleDateString($root.languageCode)" class="ma-1"></span>
                          <v-btn right v-bind="attrs" v-on="on" icon v-if="hover && dateAndPeriodEditable">
                            <v-icon>mdi-pencil-outline</v-icon>
                          </v-btn>
                        </v-card-title>
                      </template>
                      <v-date-picker
                        scrollable
                        no-title 
                        @input="showPicker = false; $emit('change-date', $event)"
                        v-model="lessonDocumentationEdit.date"
                      ></v-date-picker>
                    </v-menu>
                  </div>
                </v-hover>
                <v-hover v-slot="{ hover }"> 
                  <div>
                    <v-menu offset-y>
                      <template v-slot:activator="{ on, attrs }">
                        <v-card-title>
                          <span v-text="period" class="ma-1"></span>
                          <v-btn
                            right
                            v-bind="attrs"
                            v-on="on"
                            icon
                            v-if="hover && dateAndPeriodEditable"
                          >
                            <v-icon>mdi-pencil-outline</v-icon>
                          </v-btn>
                        </v-card-title>
                      </template>
                      <v-list>
                      <!-- Fixme: load valid lessons -->
                        <v-list-item
                          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
                          :key="index"
                        >
                          <v-list-item-title>{{ item }}</v-list-item-title>
                        </v-list-item>
                      </v-list>
                    </v-menu>
                  </div>
                </v-hover>
              </v-col>
              <v-col cols="12" md="4" lg="6" xl="7">
              <message-box type="error" v-if="error">Error updating data</message-box>
                <v-textarea
                  name="input-7-1"
                  :label="$root.django.gettext('Topic')"
                  rows="1"
                  auto-grow
                  required
                  
                  v-model="lessonDocumentationEdit.topic"
                  @change="mutate()"
                ></v-textarea>
                <v-textarea
                  name="input-7-1"
                  :label="$root.django.gettext('Homework')"
                  rows="1"
                  auto-grow
                  
                  v-model="lessonDocumentationEdit.homework"
                  @change="mutate()"
                ></v-textarea>
                <v-textarea
                  name="input-7-1"
                  :label="$root.django.gettext('Group note')"
                  rows="1"
                  auto-grow
                  
                  v-model="lessonDocumentationEdit.groupNote"
                  @change="mutate()"
                ></v-textarea>
              </v-col>
              <v-col cols="12" md="4" lg="3">
                <personal-notes
                  :lesson-documentation-id="lessonDocumentationEdit.id"
                  :groups="groups"
                  :excuse-types="excuseTypes"
                  :extra-marks="extraMarks"
                  
                  v-model="lessonDocumentationEdit.personalNotes"
                  @change="$emit('change-personal-notes', $event)"
                ></personal-notes>
              </v-col>
            </v-row>
          </v-form>
        </v-card>
      </template>
    </ApolloMutation>
  </v-dialog>
  <v-data-table
    :headers="headers"
    :items="lessonDocumentations"
    @click:row="editLessonDocumentation"
    class="elevation-1"
  ></v-data-table>
</div></template>

<script>
  import PersonalNotes from "./PersonalNotes.vue";
  export default {
    components: { PersonalNotes },
    props: [ "lessonDocumentations","plannedLessonperiodsDatetimes",  "groups", "excuseTypes", "extraMarks" ],
    name: "lesson-documentations",
    data () {
      return {
        dialog: false,
        headers: [
          { text: "Date", value: "date" },
          { text: "Period", value: "period" },
          { text: "Topic", value: "topic" },
          { text: "Homework", value: "homework" },
          { text: "Group note", value: "groupNote" }
        ],
        lessonDocumentationEdit: {},
        selectedLessonperiodDatetime: {}
      }
    },
    methods: {
      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
      },
    }
  }
</script>