use me query, add components

client/src/components/profile/Classlist.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="schoolclass">
+    <h2 class="schoolclass__name">{{name}}</h2>
+    <div class="schoolclass__members schoolclass-members">
+      <ul class="schoolclass-members__list members-list">
+        <li v-for="user in users" :key="user.id" class="members-list__item">
+          <p class="member-item"><span class="member-item__name">{{fullName(user)}}</span> <span class="member-item__role">{{role(user)}}</span></p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    props: ['users', 'name'],
+    methods: {
+      fullName (user) {
+        return `${user.firstName} ${user.lastName}`;
+      },
+      role ({permissions}) {
+        return permissions.indexOf('users.can_manage_school_class_content') > -1 ? 'Lehrperson' : '';
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  $height: 52px;
+
+  .members-list {
+    &__item {
+      line-height: $height;
+      height: $height;
+      border-bottom: 1px solid $color-grey;
+    }
+  }
+
+  .member-item {
+
+    line-height: $height;
+    height: $height;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    &__name {
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-bold;
+    }
+
+    &__role {
+      padding-right: $medium-spacing;
+    }
+  }
+</style>

client/src/graphql/gql/mySchoolClasses.gql

@@ -0,0 +1,23 @@
+query  {
+  me {
+    id
+    schoolClasses {
+      edges {
+        node {
+          id
+          name
+          users {
+            edges {
+              node {
+                id
+                firstName
+                lastName
+                permissions
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

client/src/pages/myClasses.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="myclasses">
+    <h1 class="myclasses__header">Klassenliste</h1>
+    <classlist v-for="schoolClass in schoolClasses" v-bind="schoolClass" :key="schoolClass.name" class="myclasses__class"></classlist>
+  </div>
+</template>
+
+<script>
+
+  import MY_SCHOOL_CLASSES_QUERY from '@/graphql/gql/mySchoolClasses.gql';
+  import Classlist from '@/components/profile/Classlist';
+
+  export default {
+    components: {
+      Classlist
+    },
+
+    apollo: {
+      schoolClasses: {
+        query: MY_SCHOOL_CLASSES_QUERY,
+        update(data) {
+          return this.$getRidOfEdges(data).me.schoolClasses
+        }
+      }
+    },
+
+    data() {
+      return {
+        schoolClasses: []
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .myclasses {
+    &__class {
+      margin-bottom: $large-spacing;
+    }
+  }
+
+</style>

client/src/pages/profile.vue

@@ -4,7 +4,7 @@
       <router-link to="/me/activity" active-class="top-navigation__link--active"
                   class="top-navigation__link profile-submenu__item submenu-item">Aktivität
       </router-link>
-      <router-link to="/me/classlist" active-class="top-navigation__link--active"
+      <router-link to="/me/myclasses" active-class="top-navigation__link--active"
                   class="top-navigation__link profile-submenu__item submenu-item">Klassenliste
       </router-link>
       <router-link to="/me/password-change" active-class="top-navigation__link--active"

client/src/router/index.js

@@ -20,6 +20,7 @@ import portfolio from '@/pages/portfolio'
 import project from '@/pages/project'
 import profilePage from '@/pages/profile'
 import passwordChange from '@/pages/passwordChange'
+import myClasses from '@/pages/myClasses'
 
 const routes = [
   {path: '/', component: start, meta: {layout: 'blank'}},
@@ -72,7 +73,8 @@ const routes = [
       isProfile: true
     },
     children: [
-      {path: 'password-change', name: 'pw-change', component: passwordChange, meta: {isProfile: true}}
+      {path: 'password-change', name: 'pw-change', component: passwordChange, meta: {isProfile: true}},
+      {path: 'myclasses', name: 'my-classes', component: myClasses, meta: {isProfile: true}},
     ]
   },
   {path: '*', component: p404}

server/api/schema.py

@@ -15,12 +15,12 @@ from objectives.mutations import ObjectiveMutations
 from objectives.schema import ObjectivesQuery
 from rooms.mutations import RoomMutations
 from rooms.schema import RoomsQuery
-from users.schema import UsersQuery, MySchoolClassesQuery
+from users.schema import UsersQuery
 from users.mutations import ProfileMutations
 
 
 class Query(UsersQuery, RoomsQuery, ObjectivesQuery, BookQuery, AssignmentsQuery, StudentSubmissionQuery,
-            BasicKnowledgeQuery, MySchoolClassesQuery, graphene.ObjectType):
+            BasicKnowledgeQuery, graphene.ObjectType):
     node = relay.Node.Field()
 
     if settings.DEBUG:

server/users/schema.py

@@ -46,10 +46,3 @@ class UsersQuery(object):
     def resolve_me(self, info, **kwargs):
         return info.context.user
 
-
-class MySchoolClassesQuery(object):
-    my_school_classes = DjangoFilterConnectionField(SchoolClassNode)
-
-    def resolve_my_school_classes(self, info):
-        user = info.context.user
-        return SchoolClass.objects.filter(users__id=user.id)

server/users/tests/test_my_school_classes.py

@@ -33,15 +33,20 @@ class PasswordUpdate(TestCase):
 
         query = '''
             query  {
-              mySchoolClasses {
-                edges {
-                  node {
-                    name
-                    users {
-                      edges {
-                        node {
-                          firstName
-                          lastName
+              me {
+                schoolClasses {
+                  edges {
+                    node {
+                      id
+                      name
+                      users {
+                        edges {
+                          node {
+                            id
+                            firstName
+                            lastName
+                            permissions
+                          }
                         }
                       }
                     }
@@ -56,7 +61,7 @@ class PasswordUpdate(TestCase):
 
         result = self.make_query()
 
-        classes = result.get('data').get('mySchoolClasses').get('edges')
+        classes = result.get('data').get('me').get('schoolClasses').get('edges')
         self.assertEqual(len(classes), 2)
 
         for school_class in classes: