Distinguish between active and inactive users in class list

client/src/components/profile/Classlist.vue

@@ -1,10 +1,18 @@
 <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>
+  <div class="school-class">
+    <h2 class="school-class__name">{{name}}</h2>
+    <div class="school-class__members school-class-members">
+      <ul class="school-class-members__list members-list" data-cy="active-class-members-list">
+        <li v-for="member in activeMembers" :key="member.id" class="members-list__item" data-cy="school-class-member">
+          <p class="member-item"><span class="member-item__name">{{fullName(member)}}</span> <span
+            class="member-item__role">{{role(member)}}</span></p>
+        </li>
+      </ul>
+      <h3>Deaktivierte Benutzer</h3>
+      <ul data-cy="inactive-class-members-list">
+        <li v-for="member in inactiveMembers" :key="member.id" class="members-list__item" data-cy="school-class-member">
+          <p class="member-item"><span class="member-item__name">{{fullName(member)}}</span> <span
+            class="member-item__role">{{role(member)}}</span></p>
         </li>
       </ul>
     </div>
@@ -14,13 +22,21 @@
 <script>
 
   export default {
-    props: ['users', 'name'],
+    props: ['members', 'name'],
     methods: {
-      fullName (user) {
-        return `${user.firstName} ${user.lastName}`;
+      fullName(member) {
+        return `${member.firstName} ${member.lastName}`;
       },
-      role ({permissions}) {
-        return permissions.indexOf('users.can_manage_school_class_content') > -1 ? 'Lehrperson' : '';
+      role({isTeacher}) {
+        return isTeacher ? 'Lehrperson' : '';
+      }
+    },
+    computed: {
+      activeMembers() {
+        return this.members.filter(member => member.active)
+      },
+      inactiveMembers() {
+        return this.members.filter(member => !member.active)
       }
     }
   }
@@ -40,7 +56,6 @@
   }
 
   .member-item {
-
     line-height: $height;
     height: $height;
 

client/src/graphql/gql/mySchoolClass.gql

@@ -1,18 +1,15 @@
-query  {
+query MySchoolClassQuery {
   me {
     id
     selectedClass {
       id
       name
-      users {
-        edges {
-          node {
+      members {
         id
         firstName
         lastName
-            permissions
-          }
-        }
+        isTeacher
+        active
       }
     }
   }

client/src/pages/myClass.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="my-class">
     <h1 class="my-class__header" data-cy="class-list-title">Klassenliste</h1>
-    <classlist v-bind="selectedClass" class="my-class__class"></classlist>
+    <classlist class="my-class__class" :name="selectedClass.name" :members="selectedClass.members"></classlist>
   </div>
 </template>
 
@@ -27,7 +27,8 @@
     data() {
       return {
         selectedClass: {
-          name: ''
+          name: '',
+          members: []
         }
       }
     }