Update frontend error handling for school class form

client/src/mixins/add-school-class.js

@@ -12,12 +12,10 @@ export default {
             ...me.schoolClasses,
             schoolClass
           ];
-          // me.schoolClasses.edges
            const selectedClass = {
             id: schoolClass.id,
             __typename: 'SchoolClassNode'
           };
-           //me.selectedClass
           const data = {
             me: {
               ...me,

client/src/pages/createClass.vue

@@ -5,6 +5,7 @@
     title="Klasse erfassen"
     ok-text="Klasse erfassen"
     label-text="Name"
+    :error="error"
     cancel-text="Abbrechen"
     @input="updateName"
     @cancel="cancel"
@@ -16,14 +17,13 @@
   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
+      JoinForm,
     },
 
     data: () => ({
@@ -35,11 +35,8 @@
       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: {
@@ -47,15 +44,16 @@
               name,
             },
           },
-          update(store, {data: {createSchoolClass: {schoolClass}}}) {
-            self.addSchoolClass(store, schoolClass);
-            self.$router.push({
-              name: 'my-class',
-            });
+          update: (store, {data: {createSchoolClass: {result}}}) => {
+            if (result.__typename === 'DuplicateName') {
+              this.error = result.reason;
+            } else {
+              this.addSchoolClass(store, result);
+              this.$router.push({
+                name: 'my-class',
+              });
+            }
           },
-          refetchQueries: [{
-            query: MY_SCHOOL_CLASS_QUERY,
-          }],
         });
       },
       cancel() {
@@ -66,7 +64,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
 
   .create-class {
   }