diff --git a/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue b/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
index 51902b05ffce0b7947f8db4a1f361e4cae771178..e0bd7ab5b6f59c58ee0d8162d2de4f38efa807a8 100644
--- a/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
+++ b/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
@@ -24,35 +24,13 @@
></v-select>
</v-col>
<v-row v-if="data.lessonDocumentations.length > 0">
- <v-col v-for="item in data.lessonDocumentations" cols="12" v-bind:key="item.id">
- <lesson-documentation
- v-bind:key="item.id"
- :id="item.id"
- :year="item.year"
- :week="item.week"
- :lessonPeriod="item.lessonPeriod"
- :event="item.event"
- :extraLesson="item.extraLesson"
+ <v-col cols="12">
+ <lesson-documentations
+ :lessonDocumentations="data.lessonDocumentations"
:groups="data.lesson.groups"
- :excuse-types="data.excuseTypes"
- :extra-marks="data.extraMarks"
- :period="item.period"
-
- :personal-notes="item.personalNotes"
- @change-personal-notes="processDataChange"
-
- :date="item.date"
- @change-date="processDataChange"
-
- :topic="item.topic"
- @change-topic="processDataChange"
-
- :homework="item.homework"
- @change-homework="processDataChange"
-
- :group-note="item.groupNote"
- @change-group-note="processDataChange"
- ></lesson-documentation>
+ :excuseTypes="data.excuseTypes"
+ :extraMarks="data.extraMarks"
+ />
</v-col>
</v-row>
<message-box v-else type="info">No coursebook for you :(</message-box>
@@ -72,12 +50,12 @@
<script>
import {CHANGES, SAVED, UPDATING} from "../../UpdateStatuses.js";
import UpdateIndicator from "./UpdateIndicator.js";
-import LessonDocumentation from "./LessonDocumentation.js";
+import LessonDocumentations from "./LessonDocumentations.vue";
export default {
components: {
UpdateIndicator,
- LessonDocumentation
+ LessonDocumentations
},
methods: {
getLessonText(item) {
diff --git a/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.graphql b/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..ee2ec13a30cbeb019915bf8bdd83770bb1b15363
--- /dev/null
+++ b/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.graphql
@@ -0,0 +1,30 @@
+mutation UpdateOrCreateLessonDocumentation($year:Int!, $week:Int!, $lessonPeriodId:ID, $topic:String, $homework:String, $groupNote:String) {
+ updateOrCreateLessonDocumentation(year:$year, week:$week, lessonPeriodId:$lessonPeriodId, topic:$topic, homework:$homework, groupNote:$groupNote) {
+ lessonDocumentation{
+ id
+ topic
+ homework
+ groupNote
+ date
+ personalNotes {
+ id
+ person {
+ id
+ fullName
+ }
+ late
+ absent
+ excused
+ excuseType {
+ name
+ shortName
+ }
+ remarks
+ extraMarks {
+ name
+ shortName
+ }
+ }
+ }
+ }
+}
diff --git a/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js b/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentations.vue
similarity index 58%
rename from aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
rename to aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentations.vue
index 5c96a81766dbc47761da121d2f6cff10229b5ded..8fa6dfbbb1df64691a94c5f93929d09cb0b8cce5 100644
--- a/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
+++ b/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentations.vue
@@ -1,80 +1,11 @@
-import PersonalNotes from "./PersonalNotes.vue";
-
-export default {
- components: {
- PersonalNotes
- },
- props: [
- "id",
- "year",
- "week",
- "lessonPeriod",
- "event",
- "extraLesson",
- "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 {
- year: this.year,
- week: this.week,
- lessonPeriodId: this.lessonPeriod ? this.lessonPeriod.id : null,
- eventId: this.event ? this.event.id : null,
- extraLessonId: this.extraLesson ? this.extraLesson.id : null,
- topic: this.editTopic,
- groupNote: this.editGroupNote,
- homework: this.editHomework,
- }
- }
- },
- methods: {
- onDone(data) {
- console.log("Hello")
- console.log(data)
- }
- },
- template: `
+<template><div>
+ <v-dialog
+ v-model="dialog"
+ max-width="800"
+ >
<ApolloMutation
- :mutation="gql => gql\`
- mutation UpdateLessonDocumentation($year:Int!, $week:Int!, $lessonPeriodId:ID, $topic:String, $homework:String, $groupNote:String){
- updateOrCreateLessonDocumentation(year:$year, week:$week, lessonPeriodId:$lessonPeriodId, topic:$topic, homework:$homework, groupNote:$groupNote){
- lessonDocumentation{
- id
- topic
- homework
- groupNote
- }
- }
- }
- \`"
- :variables=lessonDocumentationMutationInputObject
+ :mutation="require('./LessonDocumentation.graphql')"
+ :variables=lessonDocumentationEdit
@done="onDone"
>
<template v-slot="{ mutate, loading, error }">
@@ -93,7 +24,7 @@ export default {
>
<template v-slot:activator="{ on, attrs }">
<v-card-title>
- <span v-text="new Date(date).toLocaleDateString($root.languageCode)" class="ma-1"></span>
+ <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>
@@ -103,7 +34,7 @@ export default {
scrollable
no-title
@input="showPicker = false; $emit('change-date', $event)"
- v-model="date"
+ v-model="lessonDocumentationEdit.date"
></v-date-picker>
</v-menu>
</div>
@@ -147,7 +78,7 @@ export default {
auto-grow
required
- v-model="editTopic"
+ v-model="lessonDocumentationEdit.topic"
@change="mutate()"
></v-textarea>
<v-textarea
@@ -156,7 +87,7 @@ export default {
rows="1"
auto-grow
- v-model="editHomework"
+ v-model="lessonDocumentationEdit.homework"
@change="mutate()"
></v-textarea>
<v-textarea
@@ -165,18 +96,18 @@ export default {
rows="1"
auto-grow
- v-model="editGroupNote"
+ v-model="lessonDocumentationEdit.groupNote"
@change="mutate()"
></v-textarea>
</v-col>
<v-col cols="12" md="4" lg="3">
<personal-notes
- :lesson-documentation-id="id"
+ :lesson-documentation-id="lessonDocumentationEdit.id"
:groups="groups"
:excuse-types="excuseTypes"
:extra-marks="extraMarks"
- v-model="personalNotes"
+ v-model="lessonDocumentationEdit.personalNotes"
@change="$emit('change-personal-notes', $event)"
></personal-notes>
</v-col>
@@ -185,5 +116,68 @@ export default {
</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", "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: {}
+ }
+ },
+ 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,
+ }
+ console.log(result)
+ console.log(this.lessonDocumentationEdit)
+ },
+
+ editLessonDocumentation(item) {
+ this.loadLessonDocumentation(item)
+ this.dialog = true
+ }
+ }
+ }
+</script>