From 692eb13a9bab449e10d28f2b5f901d94280d8973 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 4 Aug 2021 16:52:38 +0200
Subject: [PATCH] Update cache when leaving school class

---
 .../frontend/read-only/leave-class.spec.js    | 50 +++++++++++++++++++
 .../src/graphql/gql/queries/mySchoolClass.gql |  1 +
 client/src/pages/myClass.vue                  | 24 +++++----
 3 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 client/cypress/integration/frontend/read-only/leave-class.spec.js

diff --git a/client/cypress/integration/frontend/read-only/leave-class.spec.js b/client/cypress/integration/frontend/read-only/leave-class.spec.js
new file mode 100644
index 00000000..a08a93f7
--- /dev/null
+++ b/client/cypress/integration/frontend/read-only/leave-class.spec.js
@@ -0,0 +1,50 @@
+import {getMinimalMe} from '../../../support/helpers';
+
+const MeQuery = getMinimalMe({readOnly: false});
+const me = MeQuery.me;
+
+const getOperations = () => ({
+  MeQuery,
+  MySchoolClassQuery: {
+    me: {
+      ...me,
+      id: 'meId',
+      selectedClass: {
+        ...me.selectedClass,
+        members: [
+          {
+            id: 'meId',
+            firstName: 'Helge',
+            lastName: 'Schneider',
+            isTeacher: true,
+            isMe: true,
+            active: true
+          }
+        ]
+      }
+    },
+  },
+  AddRemoveMember: {
+    addRemoveMember: {
+      success: true
+    }
+  }
+});
+
+describe('Leave School Class', () => {
+  beforeEach(() => {
+    cy.setup();
+  });
+
+  it('leaves class', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations(),
+    });
+
+    cy.visit('/me/class');
+
+    cy.getByDataCy('leave-group').click();
+    cy.getByDataCy('modal-save-button').click();
+    cy.getByDataCy('read-only-banner').should('exist');
+  });
+});
diff --git a/client/src/graphql/gql/queries/mySchoolClass.gql b/client/src/graphql/gql/queries/mySchoolClass.gql
index 4805e761..31ded4f5 100644
--- a/client/src/graphql/gql/queries/mySchoolClass.gql
+++ b/client/src/graphql/gql/queries/mySchoolClass.gql
@@ -7,6 +7,7 @@ query MySchoolClassQuery {
       id
       name
       code
+      readOnly
       members {
         id
         firstName
diff --git a/client/src/pages/myClass.vue b/client/src/pages/myClass.vue
index f5d5cb30..bb2e54a1 100644
--- a/client/src/pages/myClass.vue
+++ b/client/src/pages/myClass.vue
@@ -63,6 +63,10 @@
                 {...member, active},
                 ...data.me.selectedClass.members.slice(memberIndex + 1),
               ];
+              if (member.isMe) {
+                // if we changed the currently selected class of the logged in user, we need to change this property too
+                data.me.selectedClass.readOnly = !active;
+              }
               store.writeQuery({query, data});
             }
           },
@@ -73,19 +77,19 @@
       },
       remove(member) {
         this.$modal.open('deactivate-person', {
-              myself: member.id === this.me.id,
-              name: `${member.firstName} ${member.lastName}`,
-              className: this.me.selectedClass.name,
-            })
-            .then(() => {
-              this.changeMember(member, false);
-            })
-            .catch(() => {
-            });
+            myself: member.id === this.me.id,
+            name: `${member.firstName} ${member.lastName}`,
+            className: this.me.selectedClass.name,
+          })
+          .then(() => {
+            this.changeMember(member, false);
+          })
+          .catch(() => {
+          });
       },
       editClassName() {
         this.$store.dispatch('editClassName');
-      }
+      },
     },
   };
 </script>