56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<div class="old-classes">
|
|
<h1 class="old-classes__title">Alte Klassen</h1>
|
|
<ul class="old-classes__list simple-list">
|
|
<li class="simple-list__item" v-for="schoolClass in me.oldClasses" :key="schoolClass.id" data-cy="old-class-item"><span
|
|
class="old-classes__class-name">{{schoolClass.name}}</span> <a
|
|
class="simple-list__action" @click="updateSelectedClassAndGoToClassList(schoolClass)">Anzeigen</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import OLD_CLASSES_QUERY from '@/graphql/gql/oldClasses.gql';
|
|
|
|
import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
|
|
|
|
export default {
|
|
mixins: [updateSelectedClassMixin],
|
|
|
|
methods: {
|
|
updateSelectedClassAndGoToClassList(selectedClass) {
|
|
this.updateSelectedClass(selectedClass).then(() => {
|
|
this.$router.push({name: 'my-class'});
|
|
});
|
|
}
|
|
},
|
|
|
|
// todo: test this in front- and backend
|
|
apollo: {
|
|
me: {
|
|
query: OLD_CLASSES_QUERY,
|
|
update(data) {
|
|
return this.$getRidOfEdges(data).me;
|
|
}
|
|
}
|
|
},
|
|
|
|
data: () => ({
|
|
me: {
|
|
oldClasses: []
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
.old-classes {
|
|
&__class-name {
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
}
|
|
</style>
|