Remove and add members in client

client/cypress/fixtures/selected-school-class.json

@@ -0,0 +1,29 @@
+{
+  "me": {
+    "id": "VXNlck5vZGU6Mg==",
+    "selectedClass": {
+      "id": "U2Nob29sQ2xhc3NOb2RlOjE=",
+      "name": "Moordale",
+      "members": [
+        {
+          "id": "VXNlck5vZGU6Mw==",
+          "firstName": "Otis",
+          "lastName": "Milburn",
+          "isTeacher": false,
+          "active": true,
+          "__typename": "ClassMemberNode"
+        },
+        {
+          "id": "VXNlck5vZGU6NA==",
+          "firstName": "Maeve",
+          "lastName": "Wiley",
+          "isTeacher": false,
+          "active": true,
+          "__typename": "ClassMemberNode"
+        }
+      ],
+      "__typename": "SchoolClassNode"
+    },
+    "__typename": "UserNode"
+  }
+}

client/cypress/integration/join-class.spec.js

@@ -1,7 +1,8 @@
 const schema = require('../fixtures/schema.json');
 const me = require('../fixtures/me.join-class.json');
+const selectedClass = require('../fixtures/selected-school-class.json');
 
-describe('Join Class', () => {
+describe('Class Management', () => {
   beforeEach(() => {
     cy.server();
 
@@ -31,7 +32,6 @@ describe('Join Class', () => {
       }
     });
 
-
     cy.visit('/me/profile');
 
     cy.get('[data-cy=header-user-widget]').within(() => {
@@ -51,5 +51,49 @@ describe('Join Class', () => {
 
     cy.get('[data-cy=class-selection]').click();
     cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
-  })
+  });
-})
+
+  it('should leave and re-join class', () => {
+    const teacher = {
+      ...me,
+      permissions: ['users.can_manage_school_class_content']
+    };
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: teacher,
+        AddRemoveMember: {
+          addRemoveMember: {
+            success: true
+          }
+        },
+        MySchoolClassQuery: selectedClass
+      }
+    });
+
+    cy.visit('/me/my-class');
+    cy.get('[data-cy=active-class-members-list]').within(() => {
+      cy.get('[data-cy=school-class-member]').should('have.length', 2)
+    });
+    cy.get('[data-cy=inactive-class-members-list]').within(() => {
+      cy.get('[data-cy=school-class-member]').should('have.length', 0)
+    });
+
+    cy.get('[data-cy=remove-from-class]').first().click();
+
+    cy.get('[data-cy=active-class-members-list]').within(() => {
+      cy.get('[data-cy=school-class-member]').should('have.length', 1)
+    });
+    cy.get('[data-cy=inactive-class-members-list]').within(() => {
+      cy.get('[data-cy=school-class-member]').should('have.length', 1)
+    });
+
+    cy.get('[data-cy=add-to-class]').first().click();
+
+    cy.get('[data-cy=active-class-members-list]').within(() => {
+      cy.get('[data-cy=school-class-member]').should('have.length', 2)
+    });
+    cy.get('[data-cy=inactive-class-members-list]').within(() => {
+      cy.get('[data-cy=school-class-member]').should('have.length', 0)
+    });
+  });
+});

client/src/components/profile/ClassList.vue

@@ -22,7 +22,7 @@
           :key="member.id">
           <span class="member-item__name">{{fullName(member)}}</span>
           <span class="member-item__role">{{role(member)}}</span>
-          <a class="member-item__action" @click="$emit('add', member)">Aktivieren</a>
+          <a class="member-item__action" data-cy="add-to-class" @click="$emit('add', member)">Aktivieren</a>
         </li>
       </ul>
     </div>
@@ -30,7 +30,6 @@
 </template>
 
 <script>
-
   export default {
     props: ['members', 'name'],
     methods: {

client/src/pages/myClass.vue

@@ -1,18 +1,55 @@
 <template>
   <div class="my-class">
     <h1 class="my-class__header" data-cy="class-list-title">Klassenliste</h1>
-    <classlist class="my-class__class" :name="selectedClass.name" :members="selectedClass.members"></classlist>
+    <class-list
+      class="my-class__class"
+      :name="selectedClass.name"
+      :members="selectedClass.members"
+      @remove="remove"
+      @add="add"
+    ></class-list>
   </div>
 </template>
 
 <script>
+  import ClassList from '@/components/profile/ClassList';
 
   import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass.gql';
-  import Classlist from '@/components/profile/Classlist';
+  import ADD_REMOVE_MEMBER_MUTATION from '@/graphql/gql/mutations/addRemoveMember.gql';
 
   export default {
     components: {
-      Classlist
+      ClassList
+    },
+
+    methods: {
+      changeMember(member, active) {
+        this.$apollo.mutate({
+          mutation: ADD_REMOVE_MEMBER_MUTATION,
+          variables: {
+            input: {
+              member: member.id,
+              schoolClass: this.selectedClass.id,
+              active
+            }
+          },
+          update(store, {data: {addRemoveMember: {success}}}) {
+            if (success) {
+              const query = MY_SCHOOL_CLASS_QUERY;
+              const data = store.readQuery({query});
+              let memberIndex = data.me.selectedClass.members.findIndex(m => m.id === member.id);
+              data.me.selectedClass.members.splice(memberIndex, 1, {...member, active});
+              store.writeQuery({query, data});
+            }
+          }
+        });
+      },
+      add(member) {
+        this.changeMember(member, true);
+      },
+      remove(member) {
+        this.changeMember(member, false);
+      }
     },
 
     apollo: {

client/src/styles/_mixins.scss

@@ -146,6 +146,7 @@
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   color: $color-silver-dark;
+  cursor: pointer;
 
   &--active {
     color: $color-brand;