Skip to content
Snippets Groups Projects
Verified Commit 4e3c407d authored by magicfelix's avatar magicfelix
Browse files

Switch to view-only LessonDocumentations list

parent 7f16131c
No related branches found
No related tags found
No related merge requests found
......@@ -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) {
......
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
}
}
}
}
}
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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment