Add page to display the class code

client/src/graphql/gql/mySchoolClass.gql

@@ -5,6 +5,7 @@ query MySchoolClassQuery {
     selectedClass {
       id
       name
+      code
       members {
         id
         firstName

client/src/mixins/selected-class.js

@@ -0,0 +1,24 @@
+import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass';
+
+export default {
+  apollo: {
+      me: {
+        query: MY_SCHOOL_CLASS_QUERY,
+        update(data) {
+          return this.$getRidOfEdges(data).me
+        }
+      }
+    },
+
+    data() {
+      return {
+        me: {
+          isTeacher: false,
+          selectedClass: {
+            name: '',
+            members: []
+          }
+        }
+      }
+    }
+}

client/src/pages/myClass.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="my-class">
     <h1 class="my-class__header" data-cy="class-list-title">Klassenliste</h1>
+    <router-link class="my-class__code-link button button--primary"
+                 v-if="me.isTeacher"
+                 :to="{name: 'show-code'}">Zugangscode anzeigen
+    </router-link>
     <class-list
       class="my-class__class"
       :name="me.selectedClass.name"
@@ -18,8 +22,11 @@
 
   import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass.gql';
   import ADD_REMOVE_MEMBER_MUTATION from '@/graphql/gql/mutations/addRemoveMember.gql';
+  import selectedClassMixin from '@/mixins/selected-class';
 
   export default {
+    mixins: [selectedClassMixin],
+
     components: {
       ClassList
     },
@@ -57,27 +64,6 @@
         this.changeMember(member, false);
       }
     },
-
-    apollo: {
-      me: {
-        query: MY_SCHOOL_CLASS_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).me
-        }
-      }
-    },
-
-    data() {
-      return {
-        me: {
-          isTeacher: false,
-          selectedClass: {
-            name: '',
-            members: []
-          }
-        }
-      }
-    }
   }
 </script>
 
@@ -85,7 +71,24 @@
   @import "@/styles/_variables.scss";
 
   .my-class {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "h b" "c c";
+
+    &__header {
+      grid-area: h;
+    }
+
+    &__code-link {
+      grid-area: b;
+      justify-self: end;
+      align-self: center;
+    }
+
     &__class {
+      grid-area: c;
+      width: 100%;
       margin-bottom: $large-spacing;
     }
   }

client/src/pages/showCode.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="show-code">
+    <h2 class="show-code__title">Zugangscode Klasse {{me.selectedClass.name}}</h2>
+    <h1 class="show-code__code">{{me.selectedClass.code}}</h1>
+  </div>
+</template>
+
+<script>
+  import selectedClassMixin from '@/mixins/selected-class';
+
+  export default {
+    mixins: [selectedClassMixin],
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .show-code {
+    &__title {
+      @include regular-text;
+      margin-bottom: 2*$large-spacing;
+    }
+
+    &__code {
+      font-size: toRem(120px);
+      letter-spacing: toRem(20px);
+      font-weight: 600;
+    }
+  }
+</style>

client/src/router/index.js

@@ -33,6 +33,7 @@ import waitForClass from '@/pages/waitForClass'
 import joinClass from '@/pages/joinClass'
 import oldClasses from '@/pages/oldClasses';
 import createClass from '@/pages/createClass';
+import showCode from '@/pages/showCode';
 
 import store from '@/store/index';
 
@@ -120,6 +121,7 @@ const routes = [
         meta: {isProfile: true}
       },
       {path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
+      {path: 'show-code', name: 'show-code', component: showCode, meta: {layout: 'simple'}},
     ]
   },
   {path: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'simple'}},