Newer
Older
<script setup>
import DeleteButton from "aleksis.core/components/generic/buttons/DeleteButton.vue";
import SubstitutionInformation from "./SubstitutionInformation.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-1 full-width" :loading="loading">
<!-- flex-md-row zeile ab medium -->
<!-- align-stretch - stretch full-width -->
<v-card-text
class="full-width main-body pa-2"
:class="{
<substitution-information :substitution="substitution" />
<v-autocomplete
v-model="teachers"
multiple
chips
deletable-chips
:items="amendableTeachers"
item-text="fullName"
item-value="id"
:disabled="loading"
v-for="teacher in teachersWithStatus.filter(
outlined
color="error"
class="mb-2"
<div class="text-decoration-line-through">
{{ teacher.fullName }}
</div>
</v-chip>
</template>
<template #selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
close
:outlined="getTeacherStatus(data.item) === 'new'"
:color="getTeacherStatus(data.item) === 'new' ? 'success' : ''"
@click:close="removeTeacher(data.item)"
>
<v-icon left v-if="getTeacherStatus(data.item) === 'new'">
</v-icon>
{{ data.item.fullName }}
</v-chip>
</template>
</v-autocomplete>
<v-chip-group
v-model="cancelled"
column
mandatory
:disabled="loading"
>
<v-chip
filter
outlined
color="success"
:value="false"
>
{{ $t("chronos.substitutions.overview.cancel.not_cancelled") }}
</v-chip>
<v-chip
filter
outlined
color="error"
:value="true"
>
{{ $t("chronos.substitutions.overview.cancel.cancelled") }}
</v-chip>
</v-chip-group>
</v-card>
</template>
<script>
export default {
name: "SubstitutionCard",
emits: ["open", "close"],
mixins: [createOrPatchMixin],
data() {
return {
loading: false,
teachers: [],
substitution: {
type: Object,
required: true,
},
},
handleUpdateAfterCreateOrPatch(itemId) {
return (cached, incoming) => {
for (const object of incoming) {
console.log("summary: handleUpdateAfterCreateOrPatch", object);
// Replace the current substitution
const index = cached.findIndex(
(o) => o[itemId] === this.substitution.id,
);
// merged with the incoming partial substitution
// if creation of proper substitution from dummy one, set ID of substitution currently being edited as oldID so that key in overview doesn't change
cached[index] = {
...this.substitution,
...object,
oldId:
this.substitution.id !== object.id
? this.substitution.id
: this.substitution.oldId,
};
}
return cached;
};
},
getTeacherStatus(teacher) {
return this.teachersWithStatus.find((t) => t.id === teacher.id)?.status;
},
addTeacher(teacher) {
this.teachers.push(teacher.id);
this.saveTeachers();
removeTeacher(teacher) {
const index = this.teachers.indexOf(teacher.id);
if (index >= 0) {
this.teachers.splice(index, 1);
this.saveTeachers();
}
},
saveTeachers() {
id: this.substitution.id,
teachers: this.teachers,
},
]);
if (this.ready) {
this.createOrPatch([
{
id: this.substitution.id,
cancelled: this.cancelled,
},
]);
}
const oldIds = this.substitution.amends.teachers.map(
(teacher) => teacher.id,
);
const newIds = this.substitution.teachers.map((teacher) => teacher.id);
const allTeachers = new Set(
this.substitution.amends.teachers.concat(this.substitution.teachers),
);
let teachersWithStatus = Array.from(allTeachers).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;
},
},
apollo: {
amendableTeachers: gqlPersons,
},
mounted() {
this.teachers = this.substitution.teachers.map((teacher) => teacher.id);
this.cancelled = this.substitution.cancelled;
gap: 1em;
}
.vertical {
grid-template-columns: 1fr;
}
.justify-self-end {
justify-self: end;
}