Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<script setup>
import DeleteButton from "aleksis.core/components/generic/buttons/DeleteButton.vue";
import LessonInformation from "./LessonInformation.vue";
import LessonRelatedObjectChip from "./LessonRelatedObjectChip.vue";
import { gqlPersons } from "./amendLesson.graphql";
import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
</script>
<template>
<v-card class="my-2 full-width">
<!-- flex-md-row zeile ab medium -->
<!-- align-stretch - stretch full-width -->
<div class="full-width d-flex flex-md-row flex-column align-center justify-space-between">
<lesson-information
class="flex-grow-1"
:lesson="$attrs['amended-lesson']"
/>
<v-autocomplete
v-model="teachers"
multiple
chips
deletable-chips
:items="amendableTeachers"
item-text="fullName"
item-value="id"
class="flex-grow-1 flex-shrink-0 mx-2"
@input="save"
>
<template #prepend-inner>
<v-chip v-for="teacher in teachersWithStatus($attrs['amended-lesson']).filter((t) => t.status === 'removed')" class="text-decoration-line-through text--secondary mb-2">{{ teacher.fullName }}</v-chip>
</template>
</v-autocomplete>
<delete-button class="flex-grow-1 mx-2" color="red white--text" @click="toggleCancel">{{ $attrs['amended-lesson'].cancelled ? "de-cancel" : "cancel" }}</delete-button>
</div>
<v-divider/>
<!--<v-card-actions>-->
<!-- <v-spacer/>-->
<!-- <cancel-button @click="$emit('close')" :disabled="loading" />-->
<!-- <save-button-->
<!-- @click="save"-->
<!-- :loading="loading"-->
<!-- />-->
<!--</v-card-actions>-->
</v-card>
</template>
<script>
//import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
//import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
//import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
//import { createOrUpdateDocumentations } from "../coursebook.graphql";
export default {
name: "AmendedLessonCard",
emits: ["open", "close"],
mixins: [createOrPatchMixin],
data() {
return {
loading: false,
teachers: [],
};
},
methods: {
teachersWithStatus(lesson) {
let oldIds = lesson.realAmends.teachers.map((teacher) => teacher.id);
let newIds = lesson.teachers.map((teacher) => teacher.id);
let teachersWithStatus = lesson.realAmends.teachers.concat(lesson.teachers).map((teacher) => {
let status = "regular";
if (newIds.includes(teacher.id) && !oldIds.includes(teacher.id)) {
status = "new";
} else if (
!newIds.includes(teacher.id) &&
oldIds.includes(teacher.id)
) {
status = "removed";
}
return { ...teacher, status: status };
});
return teachersWithStatus;
},
save() {
this.createOrPatch([{
id: this.$attrs["amended-lesson"].id,
teachers: this.teachers,
}]);
},
toggleCancel() {
this.createOrPatch([{
id: this.$attrs["amended-lesson"].id,
cancelled: !this.$attrs["amended-lesson"].cancelled,
}]);
},
},
apollo: {
amendableTeachers: gqlPersons,
},
mounted() {
this.teachers = this.$attrs["amended-lesson"].teachers.map((teacher) => teacher.id);
},
};
</script>