skillbox/client/src/pages/createClass.vue

74 lines
1.6 KiB
Vue

<template>
<join-form
:value="name"
class="create-class"
title="Klasse erfassen"
ok-text="Klasse erfassen"
label-text="Name"
cancel-text="Abbrechen"
@input="updateName"
@cancel="cancel"
@confirm="createClass"
/>
</template>
<script>
import addSchoolClassMixin from '@/mixins/add-school-class';
import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass';
import JoinForm from '@/components/profile/JoinForm';
export default {
mixins: [addSchoolClassMixin],
components: {
JoinForm
},
data: () => ({
name: '',
error: '',
}),
methods: {
updateName(event) {
this.name = event.target.value;
this.error = '';
// todo: display error
throw new Error('Not Implemented');
},
createClass(name) {
let self = this;
this.$apollo.mutate({
mutation: CREATE_CLASS_MUTATION,
variables: {
input: {
name,
},
},
update(store, {data: {createSchoolClass: {schoolClass}}}) {
self.addSchoolClass(store, schoolClass);
self.$router.push({
name: 'my-class',
});
},
refetchQueries: [{
query: MY_SCHOOL_CLASS_QUERY,
}],
});
},
cancel() {
this.$router.go(-1);
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.create-class {
}
</style>