Move class selection to sidebar, refactor it in the process

client/src/components/HeaderBar.vue

@@ -5,7 +5,8 @@
       <logo></logo>
     </router-link>
     <div class="user-header">
-      <class-selection-widget />
+      <a class="user-header__sidebar-link" @click="openSidebar()"><current-class class="user-header__current-class"/></a>
+
       <user-widget v-bind="me"></user-widget>
     </div>
     <book-navigation v-if="showSubnavigation">
@@ -19,18 +20,22 @@
   import UserWidget from '@/components/UserWidget.vue';
   import LogoutWidget from '@/components/LogoutWidget.vue';
   import Logo from '@/components/icons/Logo';
-  import ClassSelectionWidget from '@/components/ClassSelectionWidget';
+  import CurrentClass from '@/components/school-class/CurrentClass';
+
+  import openSidebar from '@/mixins/open-sidebar';
 
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
   export default {
+    mixins: [openSidebar],
+
     components: {
       ContentNavigation,
       UserWidget,
       LogoutWidget,
       BookNavigation,
       Logo,
-      ClassSelectionWidget
+      CurrentClass
     },
 
     computed: {
@@ -39,6 +44,7 @@
       }
     },
 
+
     data() {
       return {
         me: {}
@@ -127,5 +133,13 @@
 
   .user-header {
     display: flex;
+
+    &__current-class {
+      margin-right: $large-spacing;
+    }
+
+    &__sidebar-link {
+      cursor: pointer;
+    }
   }
 </style>

client/src/components/UserWidget.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-  import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
   import Avatar from '@/components/profile/Avatar';
+  import openSidebar from '@/mixins/open-sidebar';
 
   export default {
     // todo: clean up unneeded props
@@ -32,16 +32,7 @@
       }
     },
 
-    methods: {
+    mixins: [openSidebar],
-      openSidebar() {
-        this.$apollo.mutate({
-          mutation: TOGGLE_SIDEBAR,
-          variables: {
-            open: true
-          }
-        });
-      },
-    },
 
     components: {
       Avatar

client/src/components/book-navigation/MobileNavigation.vue

@@ -17,7 +17,7 @@
   import UserWidget from '@/components/UserWidget';
   import LogoutWidget from '@/components/LogoutWidget';
   import ContentNavigation from '@/components/ContentNavigation';
-  import ClassSelectionWidget from '@/components/ClassSelectionWidget';
+  import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
 
   import {meQuery} from '@/graphql/queries';
 

client/src/components/profile/ProfileSidebar.vue

@@ -7,7 +7,9 @@
     <div class="profile-sidebar__item" @click="closeSidebar">
       <router-link to="/me/activity" class="profile-sidebar__link">Meine Aktivitäten</router-link>
     </div>
-    <div class="profile-sidebar__item" @click="closeSidebar">
+    <div class="profile-sidebar__item">
+      <h3 class="profile-sidebar__subtitle">Klasse</h3>
+      <class-selection-widget></class-selection-widget>
       <router-link :to="{name: 'my-classes'}" class="profile-sidebar__link">Klassenliste</router-link>
     </div>
     <div class="profile-sidebar__item" @click="closeSidebar">
@@ -26,9 +28,11 @@
   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';
 
   export default {
     components: {
+      ClassSelectionWidget,
       ProfileWidget,
       Cross
     },
@@ -88,12 +92,18 @@
 
     &__item {
       border-bottom: 1px solid $color-silver-light;
+      padding: $large-spacing $medium-spacing;
+    }
+
+    &__subtitle {
+      @include small-text;
+      margin: 0;
+      margin-bottom: $small-spacing;
     }
 
     &__link {
       @include default-link;
-      displaY: block;
+      display: block;
-      padding: $large-spacing $medium-spacing;
     }
 
     &__close-link {

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

@@ -2,14 +2,14 @@
   <div class="class-selection" v-if="currentClassSelection">
     <div data-cy="class-selection" class="class-selection__selected-class selected-class"
          @click="showPopover = !showPopover">
-      <p class="selected-class__text">Klasse: {{currentClassSelection.name}}</p>
+      <current-class class="selected-class__text"></current-class> <chevron-down class="selected-class__dropdown-icon"></chevron-down>
     </div>
     <widget-popover v-if="showPopover"
                     @hide-me="showPopover = false"
                     :mobile="mobile"
                     class="class-selection__popover">
       <li data-cy="class-selection-entry" class="popover-links__link popover-links__link--large"
-          v-for="schoolClass in schoolClasses"
+          v-for="schoolClass in me.schoolClasses"
           :key="schoolClass.id"
           :label="schoolClass.name"
           :item="schoolClass"
@@ -22,12 +22,16 @@
 
 <script>
   import WidgetPopover from '@/components/WidgetPopover';
+  import ChevronDown from '@/components/icons/ChevronDown';
+  import CurrentClass from '@/components/school-class/CurrentClass';
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
   import UPDATE_USER_SETTING from '@/graphql/gql/mutations/updateUserSetting.gql';
 
   export default {
     components: {
-      WidgetPopover
+      WidgetPopover,
+      ChevronDown,
+      CurrentClass
     },
 
     props: {
@@ -39,7 +43,13 @@
 
     apollo: {
       me: {
-        query: ME_QUERY
+        query: ME_QUERY,
+        manual: true,
+        result({data, loading, networkStatus}) {
+          if (!loading) {
+            this.me = this.$getRidOfEdges(data).me;
+          }
+        }
       }
     },
 
@@ -67,7 +77,7 @@
           },
           update(store, data) {
             let meData = store.readQuery({query: ME_QUERY});
-            meData.me.selectedClass = selectedClass
+            meData.me.selectedClass = selectedClass;
             store.writeQuery({query: ME_QUERY, data: meData});
           }
         }).catch((error) => {
@@ -79,13 +89,10 @@
 
     computed: {
       currentClassSelection() {
-        let currentClass = this.schoolClasses.find(schoolClass => {
+        let currentClass = this.me.schoolClasses.find(schoolClass => {
           return schoolClass.id === this.me.selectedClass.id
         });
-        return currentClass || this.schoolClasses[0];
+        return currentClass || this.me.schoolClasses[0];
-      },
-      schoolClasses() {
-        return this.$getRidOfEdges(this.me.schoolClasses);
       }
     },
 
@@ -97,23 +104,40 @@
   @import "@/styles/_mixins.scss";
 
   .class-selection {
-
     position: relative;
     cursor: pointer;
-    margin-right: $large-spacing;
+    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;
-      top: 40px;
+      top: 100%;
+      left: 0;
+      transform: translateY($small-spacing);
     }
   }
 
   .selected-class {
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
     &__text {
       line-height: $large-spacing;
       @include regular-text;
       color: $color-silver-dark;
     }
+
+    &__dropdown-icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-brand;
+    }
   }
 
   .popover-links__link {

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

@@ -0,0 +1,54 @@
+<template>
+  <span class="current-class">Klasse: {{currentClassSelection.name}}</span>
+</template>
+
+<script>
+  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+
+  export default {
+    apollo: {
+      me: {
+        query: ME_QUERY,
+        manual: true,
+        result({data, loading, networkStatus}) {
+          if (!loading) {
+            this.me = this.$getRidOfEdges(data).me;
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        me: {
+          selectedClass: {
+            id: ''
+          },
+          permissions: [],
+          schoolClasses: []
+        },
+        showPopover: false
+      }
+    },
+
+    computed: {
+      currentClassSelection() {
+        let currentClass = this.me.schoolClasses.find(schoolClass => {
+          return schoolClass.id === this.me.selectedClass.id
+        });
+        return currentClass || this.me.schoolClasses[0];
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .current-class {
+    line-height: $large-spacing;
+    @include regular-text;
+    color: $color-silver-dark;
+  }
+</style>

client/src/mixins/open-sidebar.js

@@ -0,0 +1,14 @@
+import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
+
+export default {
+  methods: {
+    openSidebar() {
+      this.$apollo.mutate({
+        mutation: TOGGLE_SIDEBAR,
+        variables: {
+          open: true
+        }
+      });
+    },
+  },
+}