diff --git a/assets/js/vue/components/alsijil/LessonDocumentation.js b/assets/js/vue/components/alsijil/LessonDocumentation.js
index 610555a3592ac4fb85413757b0f39ccc297fa6d9..48e8b81233ff109a5aa55454abe21895ec1e8008 100644
--- a/assets/js/vue/components/alsijil/LessonDocumentation.js
+++ b/assets/js/vue/components/alsijil/LessonDocumentation.js
@@ -6,112 +6,158 @@ export default {
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: `
- <v-card elevation="2">
- <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>
-<!-- (this.$root.django.gettext('%s. Period'), period)-->
- <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"
+ <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"
>
- <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">
- <v-textarea
- name="input-7-1"
- :label="this.$root.django.gettext('Topic')"
- rows="1"
- auto-grow
- required
-
- :value="topic"
- @input="$emit('change-topic', $event)"
- ></v-textarea>
- <v-textarea
- name="input-7-1"
- :label="this.$root.django.gettext('Homework')"
- rows="1"
- auto-grow
-
- :value="homework"
- @input="$emit('change-homework', $event)"
- ></v-textarea>
- <v-textarea
- name="input-7-1"
- :label="this.$root.django.gettext('Group note')"
- rows="1"
- auto-grow
-
- :value="groupNote"
- @input="$emit('change-group-note', $event)"
- ></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 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>
`
}