Add class selection widget

client/src/components/ClassSelectionWidget.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="class-selection" v-if="isTeacher">
+    <div class="class-selection__selected-class" @click="showPopover = !showPopover">{{currentClassSelection}}
+    </div>
+      <widget-popover v-if="showPopover"
+                      @hide-me="showPopover == false"
+                      class="user-widget__popover">
+        <li class="popover-links__link" v-for="schoolClass in schoolClasses"
+          :key="schoolClass.id"
+          :label="schoolClass.name"
+          :item="schoolClass"
+          @click="updateFilter(schoolClass.id)">
+          {{schoolClass.name}}
+        </li>
+    </widget-popover>
+  </div>
+</template>
+
+<script>
+  import {mapActions} from 'vuex';
+  import WidgetPopover from '@/components/WidgetPopover';
+  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+
+  export default {
+    components: {
+      WidgetPopover
+    },
+
+    apollo: {
+      me: {
+        query: ME_QUERY
+      }
+    },
+
+    data() {
+      return {
+        me: {
+          permissions: []
+        },
+        showPopover: false
+      }
+    },
+
+    computed: {
+      currentClassSelection() {
+        let currentClass = this.schoolClasses.find(schoolClass => {
+          return schoolClass.id === this.$store.state.filterForSchoolClass;
+        })
+        return currentClass ? currentClass.name : 'Alle';
+      },
+      schoolClasses() {
+        return this.$getRidOfEdges(this.me.schoolClasses);
+      },
+      isTeacher() {
+        return this.me.permissions.includes('users.can_manage_school_class_content');
+      }
+    },
+
+    methods: {
+      ...mapActions({
+        updateFilter: 'setfilterForSchoolClass'
+      })
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .filter-bar {
+    position: sticky;
+    top: -1px;
+    z-index: 9;
+    padding: 0 24px;
+    height: 50px;
+    background-color: $color-silver-light;
+    display: flex;
+    align-items: center;
+    justify-items: left;
+    border: 1px solid rgba(228, 228, 228, 0.9);
+    border-left: 0;
+    border-right: 0;
+  }
+</style>

client/src/components/HeaderBar.vue

@@ -5,8 +5,8 @@
       <logo></logo>
     </router-link>
     <div class="user-header">
+      <class-selection-widget />
       <user-widget v-bind="me"></user-widget>
-      <logout-widget></logout-widget>
     </div>
     <book-navigation v-if="showSubnavigation">
     </book-navigation>
@@ -19,6 +19,7 @@
   import UserWidget from '@/components/UserWidget.vue';
   import LogoutWidget from '@/components/LogoutWidget.vue';
   import Logo from '@/components/icons/Logo';
+  import ClassSelectionWidget from '@/components/ClassSelectionWidget';
 
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
@@ -28,7 +29,8 @@
       UserWidget,
       LogoutWidget,
       BookNavigation,
-      Logo
+      Logo,
+      ClassSelectionWidget
     },
 
     computed: {