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> ` }