Refactored FilterBar to only show school-classes of logged in user

client/src/components/FilterBar.vue

@@ -3,20 +3,20 @@
 
     <radiobutton label="Alles" :checked="!currentFilter" v-on:input="updateFilter(false)"></radiobutton>
     <radiobutton
-      v-for="group in userGroups"
-      :key="group.id"
-      :label="group.name"
-      :item="group"
-      :checked="group.id === currentFilter"
-      v-on:input="updateFilter(group.id)"
+      v-for="schoolClass in schoolClasses"
+      :key="schoolClass.id"
+      :label="schoolClass.name"
+      :item="schoolClass"
+      :checked="schoolClass.id === currentFilter"
+      v-on:input="updateFilter(schoolClass.id)"
     ></radiobutton>
   </div>
 </template>
 
 <script>
-  import {userGroupsQuery} from '@/helpers/user-groups'
   import {mapActions} from 'vuex';
   import Radiobutton from '@/components/Radiobutton';
+  import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
   export default {
     components: {
@@ -24,18 +24,23 @@
     },
 
     apollo: {
-      userGroupsQuery: userGroupsQuery
+      me: {
+        query: ME_QUERY
+      }
     },
 
     data() {
       return {
-        userGroups: []
+        me: {}
       }
     },
 
     computed: {
       currentFilter() {
         return this.$store.state.filterForGroup;
+      },
+      schoolClasses() {
+        return this.$getRidOfEdges(this.me.schoolclassSet);
       }
     },
 

client/src/components/VisibilityPopover.vue

@@ -13,10 +13,9 @@
 
 <script>
   import CHANGE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/mutateContentBlock.gql';
-  // import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
-
   import Checkbox from '@/components/Checkbox';
-  import {userGroupsQuery} from '@/helpers/user-groups'
+  import ME_QUERY from '@/graphql/gql/meQuery.gql'
+  // import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
 
   // import store from '@/store/index';
 
@@ -28,12 +27,14 @@
     },
 
     apollo: {
-      userGroupsQuery: userGroupsQuery
+      me: {
+        query: ME_QUERY,
+      },
     },
 
     data() {
       return {
-        userGroups: []
+        me: {}
       }
     },
 
@@ -56,15 +57,6 @@
               }
             }
           }
-          // refetchQueries: [{
-          //   query: MODULE_DETAILS_QUERY,
-          //   variables: {
-          //     slug: store.state.moduleSlug
-          //   }
-          // }]
-          // update: (store, {data: {mutateContentBlock: {contentBlock}}}) => {
-          //   this.$store.dispatch('updateContentBlocks');
-          // }
         });
       }
     },

client/src/components/rooms/RoomForm.vue

@@ -42,7 +42,7 @@
 <script>
   import RoomColors from '@/components/rooms/RoomColors';
 
-  import {userGroupsQuery} from '@/helpers/user-groups'
+  // import {userGroupsQuery} from '@/helpers/user-groups'
 
   export default {
     props: ['room'],
@@ -66,7 +66,7 @@
     },
 
     apollo: {
-      userGroupsQuery: userGroupsQuery
+      // userGroupsQuery: userGroupsQuery
     },
 
     created() {

client/src/helpers/user-groups.js

@@ -1,12 +0,0 @@
-import USER_GROUPS_QUERY from '@/graphql/gql/userGroupsQuery.gql';
-
-export const userGroupsQuery = {
-  query: USER_GROUPS_QUERY,
-  manual: true,
-  result({data, loading, networkStatus}) {
-    if (!loading) {
-      const cleanedData = this.$getRidOfEdges(data)
-      this.userGroups = cleanedData.userGroups || {};
-    }
-  }
-};