From f4270b8243dc1aac4c0241f32b0c76147bc40e43 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 5 Mar 2020 16:41:07 +0100
Subject: [PATCH] Remove actions in class list for students

---
 client/cypress/fixtures/schema.json           | 12 +++++++
 .../fixtures/selected-school-class.json       |  1 +
 client/cypress/integration/join-class.spec.js |  2 +-
 client/src/components/profile/ClassList.vue   | 36 +++++++++++++++----
 client/src/graphql/gql/mySchoolClass.gql      |  1 +
 client/src/pages/myClass.vue                  | 21 ++++++-----
 server/users/schema.py                        |  3 ++
 7 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/client/cypress/fixtures/schema.json b/client/cypress/fixtures/schema.json
index e5af620f..df2ae845 100644
--- a/client/cypress/fixtures/schema.json
+++ b/client/cypress/fixtures/schema.json
@@ -3069,6 +3069,18 @@
                             },
                             "isDeprecated": false,
                             "deprecationReason": null
+                        },
+                        {
+                            "name": "isTeacher",
+                            "description": null,
+                            "args": [],
+                            "type": {
+                                "kind": "SCALAR",
+                                "name": "Boolean",
+                                "ofType": null
+                            },
+                            "isDeprecated": false,
+                            "deprecationReason": null
                         }
                     ],
                     "inputFields": null,
diff --git a/client/cypress/fixtures/selected-school-class.json b/client/cypress/fixtures/selected-school-class.json
index d9377a6d..b905ec95 100644
--- a/client/cypress/fixtures/selected-school-class.json
+++ b/client/cypress/fixtures/selected-school-class.json
@@ -1,6 +1,7 @@
 {
   "me": {
     "id": "VXNlck5vZGU6Mg==",
+    "isTeacher": true,
     "selectedClass": {
       "id": "U2Nob29sQ2xhc3NOb2RlOjE=",
       "name": "Moordale",
diff --git a/client/cypress/integration/join-class.spec.js b/client/cypress/integration/join-class.spec.js
index fb29736d..9e1f8cdf 100644
--- a/client/cypress/integration/join-class.spec.js
+++ b/client/cypress/integration/join-class.spec.js
@@ -53,7 +53,7 @@ describe('Class Management', () => {
     cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
   });
 
-  it('should leave and re-join class', () => {
+  it.only('should leave and re-join class', () => {
     const teacher = {
       ...me,
       permissions: ['users.can_manage_school_class_content']
diff --git a/client/src/components/profile/ClassList.vue b/client/src/components/profile/ClassList.vue
index cbe94307..d0b55c6f 100644
--- a/client/src/components/profile/ClassList.vue
+++ b/client/src/components/profile/ClassList.vue
@@ -2,7 +2,7 @@
   <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">
+      <ul class="school-class-members__list members-list members-list--active" data-cy="active-class-members-list">
         <li
           class="members-list__item member-item"
           data-cy="school-class-member"
@@ -10,11 +10,15 @@
           :key="member.id">
           <span class="member-item__name">{{fullName(member)}}</span>
           <span class="member-item__role">{{role(member)}}</span>
-          <a class="member-item__action" data-cy="remove-from-class" @click="$emit('remove', member)">Deaktivieren</a>
+          <a
+            class="member-item__action"
+            data-cy="remove-from-class"
+            v-if="teacher"
+            @click="$emit('remove', member)">Deaktivieren</a>
         </li>
       </ul>
-      <h3>Deaktivierte Benutzer</h3>
-      <ul data-cy="inactive-class-members-list">
+      <h3 class="school-class__inactive-heading">Deaktivierte Benutzer</h3>
+      <ul data-cy="inactive-class-members-list" class="members-list members-list--inactive">
         <li
           class="members-list__item member-item"
           data-cy="school-class-member"
@@ -22,7 +26,11 @@
           :key="member.id">
           <span class="member-item__name">{{fullName(member)}}</span>
           <span class="member-item__role">{{role(member)}}</span>
-          <a class="member-item__action" data-cy="add-to-class" @click="$emit('add', member)">Aktivieren</a>
+          <a
+            class="member-item__action"
+            data-cy="add-to-class"
+            v-if="teacher"
+            @click="$emit('add', member)">Aktivieren</a>
         </li>
       </ul>
     </div>
@@ -31,7 +39,7 @@
 
 <script>
   export default {
-    props: ['members', 'name'],
+    props: ['members', 'name', 'teacher'],
     methods: {
       fullName(member) {
         return `${member.firstName} ${member.lastName}`;
@@ -57,7 +65,20 @@
 
   $height: 52px;
 
+  .school-class {
+    &__inactive-heading {
+      @include heading-4;
+      margin-bottom: $small-spacing;
+    }
+  }
+
   .members-list {
+    border-top: 1px solid $color-silver-dark;
+
+    &--active {
+      margin-bottom: 2*$large-spacing;
+    }
+
     &__item {
       line-height: $height;
       height: $height;
@@ -79,14 +100,15 @@
     }
 
     &__role {
-      padding-right: $medium-spacing;
       flex: 0 1 110px;
+      text-align: right;
     }
 
     &__action {
       @include default-link;
       color: $color-brand;
       flex: 0 1 110px;
+      padding-left: $large-spacing;
     }
   }
 </style>
diff --git a/client/src/graphql/gql/mySchoolClass.gql b/client/src/graphql/gql/mySchoolClass.gql
index 4c0c0af0..646af945 100644
--- a/client/src/graphql/gql/mySchoolClass.gql
+++ b/client/src/graphql/gql/mySchoolClass.gql
@@ -1,6 +1,7 @@
 query MySchoolClassQuery {
   me {
     id
+    isTeacher
     selectedClass {
       id
       name
diff --git a/client/src/pages/myClass.vue b/client/src/pages/myClass.vue
index d5524841..3a9a9d10 100644
--- a/client/src/pages/myClass.vue
+++ b/client/src/pages/myClass.vue
@@ -3,8 +3,9 @@
     <h1 class="my-class__header" data-cy="class-list-title">Klassenliste</h1>
     <class-list
       class="my-class__class"
-      :name="selectedClass.name"
-      :members="selectedClass.members"
+      :name="me.selectedClass.name"
+      :members="me.selectedClass.members"
+      :teacher="me.isTeacher"
       @remove="remove"
       @add="add"
     ></class-list>
@@ -24,12 +25,13 @@
 
     methods: {
       changeMember(member, active) {
+        console.log()
         this.$apollo.mutate({
           mutation: ADD_REMOVE_MEMBER_MUTATION,
           variables: {
             input: {
               member: member.id,
-              schoolClass: this.selectedClass.id,
+              schoolClass: this.me.selectedClass.id,
               active
             }
           },
@@ -53,19 +55,22 @@
     },
 
     apollo: {
-      selectedClass: {
+      me: {
         query: MY_SCHOOL_CLASS_QUERY,
         update(data) {
-          return this.$getRidOfEdges(data).me.selectedClass
+          return this.$getRidOfEdges(data).me
         }
       }
     },
 
     data() {
       return {
-        selectedClass: {
-          name: '',
-          members: []
+        me: {
+          isTeacher: false,
+          selectedClass: {
+            name: '',
+            members: []
+          }
         }
       }
     }
diff --git a/server/users/schema.py b/server/users/schema.py
index 310290d4..042a1bd4 100644
--- a/server/users/schema.py
+++ b/server/users/schema.py
@@ -33,6 +33,7 @@ class UserNode(DjangoObjectType):
     pk = graphene.Int()
     permissions = graphene.List(graphene.String)
     selected_class = graphene.Field(SchoolClassNode)
+    is_teacher = graphene.Boolean()
 
     class Meta:
         model = User
@@ -50,6 +51,8 @@ class UserNode(DjangoObjectType):
     def resolve_selected_class(self, info):
         return self.selected_class()
 
+    def resolve_is_teacher(self, info):
+        return self.is_teacher()
 
 class ClassMemberNode(ObjectType):
     """