Update cache when leaving school class

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');
+  });
+});

client/src/graphql/gql/queries/mySchoolClass.gql

@@ -7,6 +7,7 @@ query MySchoolClassQuery {
       id
       name
       code
+      readOnly
       members {
         id
         firstName

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,
+            myself: member.id === this.me.id,
-              name: `${member.firstName} ${member.lastName}`,
+            name: `${member.firstName} ${member.lastName}`,
-              className: this.me.selectedClass.name,
+            className: this.me.selectedClass.name,
-            })
+          })
-            .then(() => {
+          .then(() => {
-              this.changeMember(member, false);
+            this.changeMember(member, false);
-            })
+          })
-            .catch(() => {
+          .catch(() => {
-            });
+          });
       },
       editClassName() {
         this.$store.dispatch('editClassName');
-      }
+      },
     },
   };
 </script>