LessonDocumentation.js

export default {
    props: ["id", "date", "period", "topic", "homework", "groupNote", "personalNotes", "groups", "excuseTypes", "extraMarks"],
    name: "lesson-documentation",
    data: () => {
        return {
            valid: false,
            showPicker: false,
            dateAndPeriodEditable: false,

            // We use reactive properties and set the values *once*.
            // Otherwise Vue won't allow this, as we aren't allowed to edit props via v-model.
            editTopic: "",
            editHomework: "",
            editGroupNote: "",
        }
    },
    created() {
        this.editTopic = this.topic;
        this.editHomework = this.homework;
        this.editGroupNote = this.groupNote;
    },
    computed: {
        lessonDocumentationMutationInputObject() {
            return {
                id: this.id,
                topic: this.editTopic,
                groupNote: this.editGroupNote,
                homework: this.editHomework,
            }
        }
    },
    methods: {
        onDone(data) {
            console.log("Hello")
            console.log(data)
        }
    },
    template: `
    <ApolloMutation
      :mutation="gql => gql\`
        mutation UpdateLessonDocumentation($input: LessonDocumentationMutationInput!) {
          updateLessonDocumentation(input: $input) {
            lessonDocumentation {
              id
              topic
              groupNote
              homework
            }
          }
        }
      \`"
      :variables="{ input: lessonDocumentationMutationInputObject }"
      @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(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="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="editTopic"
                  @change="mutate()"
                ></v-textarea>
                <v-textarea
                  name="input-7-1"
                  :label="$root.django.gettext('Homework')"
                  rows="1"
                  auto-grow
                  
                  v-model="editHomework"
                  @change="mutate()"
                ></v-textarea>
                <v-textarea
                  name="input-7-1"
                  :label="$root.django.gettext('Group note')"
                  rows="1"
                  auto-grow
                  
                  v-model="editGroupNote"
                  @change="mutate()"
                ></v-textarea>
              </v-col>
              <v-col cols="12" md="4" lg="3">
                <personal-notes
                  :groups="groups"
                  :excuse-types="excuseTypes"
                  :extra-marks="extraMarks"
                  
                  v-model="personalNotes"
                  @change="$emit('change-personal-notes', $event)"
                ></personal-notes>
              </v-col>
            </v-row>
          </v-form>
        </v-card>
      </template>
    </ApolloMutation>
`
}