Fix some minor issues

client/cypress/integration/join-class.spec.js

@@ -121,7 +121,7 @@ describe('Class Management', () => {
     });
   });
 
-  it.only('should display old classes', () => {
+  it('should display old classes', () => {
     let oldClasses = me.me.schoolClasses;
     let OldClassesQuery = {
       me: {

client/src/components/profile/ProfileSidebar.vue

@@ -15,7 +15,9 @@
       </div>
     </div>
     <div class="profile-sidebar__item" @click="closeSidebar">
-      <router-link :to="{name:'join-class'}" data-cy="join-class-link" class="profile-sidebar__link">Zugangscode eingeben</router-link>
+      <router-link :to="{name:'join-class'}" data-cy="join-class-link" class="profile-sidebar__link">Zugangscode
+        eingeben
+      </router-link>
     </div>
     <div class="profile-sidebar__item" @click="logout">
       <a class="profile-sidebar__link">Logout</a>
@@ -27,11 +29,12 @@
   import ProfileWidget from '@/components/profile/ProfileWidget';
   import Cross from '@/components/icons/Cross';
 
-  import SIDEBAR from '@/graphql/gql/local/sidebar.gql';
-  import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
   import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
+
   import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
 
+  import sidebarMixin from '@/mixins/sidebar';
+
   export default {
     components: {
       ClassSelectionWidget,
@@ -39,15 +42,9 @@
       Cross
     },
 
+    mixins: [sidebarMixin],
+
     methods: {
-      closeSidebar() {
-        this.$apollo.mutate({
-          mutation: TOGGLE_SIDEBAR,
-          variables: {
-            open: false
-          }
-        });
-      },
       logout() {
         this.$apollo.mutate({
           mutation: LOGOUT_MUTATION,
@@ -59,17 +56,6 @@
       }
     },
 
-    apollo: {
-      sidebar: {
-        query: SIDEBAR
-      }
-    },
-
-    data: () => ({
-      sidebar: {
-        open: false
-      }
-    })
   }
 </script>
 

client/src/components/profile/ProfileWidget.vue

@@ -38,6 +38,7 @@
     &__name {
       @include heading-3;
       text-align: center;
+      margin-bottom: $small-spacing;
     }
 
     &__avatar {

client/src/components/school-class/ClassSelectionWidget.vue

@@ -14,11 +14,11 @@
           :key="schoolClass.id"
           :label="schoolClass.name"
           :item="schoolClass"
-          @click="updateSelectedClass(schoolClass)">
+          @click="updateSelectedClassAndHidePopover(schoolClass)">
         {{schoolClass.name}}
       </li>
       <li class="popover-links__link popover-links__link--large popover-links__divider">Klasse erfassen</li>
-      <li class="popover-links__link popover-links__link--large popover-links__divider">
+      <li class="popover-links__link popover-links__link--large popover-links__divider" @click="closeSidebar">
         <router-link :to="{name: 'old-classes'}">Alte Klassen anzeigen</router-link>
       </li>
     </widget-popover>
@@ -33,6 +33,7 @@
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
   import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
+  import sidebarMixin from '@/mixins/sidebar';
 
   export default {
     components: {
@@ -48,7 +49,7 @@
       }
     },
 
-    mixins: [updateSelectedClassMixin],
+    mixins: [updateSelectedClassMixin, sidebarMixin],
 
     apollo: {
       me: {
@@ -79,6 +80,7 @@
       updateSelectedClassAndHidePopover(selectedClass) {
         this.updateSelectedClass(selectedClass);
         this.showPopover = false;
+        this.closeSidebar();
       }
     },
 
@@ -104,8 +106,6 @@
     margin-bottom: $medium-spacing;
     border: 1px solid $color-silver;
     border-radius: 4px;
-    padding: $small-spacing $medium-spacing;
-    /*justify-self: space-between;*/
 
     &__popover {
       white-space: nowrap;
@@ -117,6 +117,8 @@
 
   .selected-class {
     width: 100%;
+    box-sizing: border-box;
+    padding: $small-spacing $medium-spacing;
 
     display: flex;
     align-items: center;

client/src/components/school-class/CurrentClass.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="current-class">Klasse: {{currentClassName}}</span>
+  <span class="current-class">{{currentClassName}}</span>
 </template>
 
 <script>

client/src/mixins/sidebar.js

@@ -0,0 +1,29 @@
+import SIDEBAR from '@/graphql/gql/local/sidebar.gql';
+import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
+
+export default {
+  methods: {
+    closeSidebar() {
+      if (this.sidebar.open) {
+        this.$apollo.mutate({
+          mutation: TOGGLE_SIDEBAR,
+          variables: {
+            open: false
+          }
+        });
+      }
+    },
+  },
+
+  apollo: {
+    sidebar: {
+      query: SIDEBAR
+    }
+  },
+
+  data: () => ({
+    sidebar: {
+      open: false
+    }
+  })
+}

client/src/mixins/updateSelectedClass.js

@@ -1,5 +1,6 @@
 import ME_QUERY from '@/graphql/gql/meQuery.gql';
 import UPDATE_USER_SETTING from '@/graphql/gql/mutations/updateUserSetting.gql';
+import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass.gql';
 
 export default {
   methods: {
@@ -13,9 +14,14 @@ export default {
         },
         update(store, data) {
           let meData = store.readQuery({query: ME_QUERY});
+
           meData.me.selectedClass = selectedClass;
+
           store.writeQuery({query: ME_QUERY, data: meData});
-        }
+        },
+        refetchQueries: [{
+          query: MY_SCHOOL_CLASS_QUERY
+        }]
       }).catch((error) => {
         console.warn('failed to update selected class', error)
       });