Add optional chaining operator to selectedClass access calls

client/src/components/ReadOnlyBanner.vue

@@ -2,7 +2,7 @@
   <div
     class="read-only-banner"
     data-cy="read-only-banner"
-    v-if="me.readOnly || me.selectedClass.readOnly"
+    v-if="isReadOnly"
   >
     <div class="read-only-banner__content">
       <p class="read-only-banner__text">{{ readOnlyText }} Sie können Inhalte lesen, aber nicht bearbeiten.</p>
@@ -76,6 +76,9 @@ export default {
     readOnlyText() {
       return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
     },
+    isReadOnly() {
+      return this.me.readOnly || this.me.selectedClass?.readOnly;
+    },
   },
 };
 </script>

client/src/components/content-blocks/assignment/Assignment.vue

@@ -21,7 +21,7 @@
         :spellcheck-loading="spellcheckLoading"
         :saved="!unsaved"
         :spellcheck="true"
-        :read-only="me.readOnly || me.selectedClass.readOnly"
+        :read-only="me.readOnly || me.selectedClass?.readOnly"
         placeholder="Ergebnis erfassen"
         action="Ergebnis mit Lehrperson teilen"
         shared-msg="Das Ergebnis wurde mit der Lehrperson geteilt."

client/src/components/modules/ModuleNavigation.vue

@@ -13,7 +13,7 @@
     <div
       class="module-navigation__toggle-menu"
       data-cy="module-teacher-menu"
-      v-if="canManageContent && !me.readOnly && !me.selectedClass.readOnly"
+      v-if="canManageContent && !me.readOnly && !me.selectedClass?.readOnly"
     >
       <snapshot-menu class="module-navigation__actions" />
       <router-link

client/src/components/rooms/RoomWidget.vue

@@ -57,7 +57,7 @@ export default {
       return `room-widget--${this.appearance}`;
     },
     canEditRoom() {
-      return this.me.isTeacher && !this.me.readOnly && !this.me.selectedClass.readOnly;
+      return this.me.isTeacher && !this.me.readOnly && !this.me.selectedClass?.readOnly;
     },
   },
 

client/src/mixins/me.ts

@@ -66,7 +66,7 @@ const getCanManageContent = (me: Me): boolean => {
 };
 
 const getIsReadOnly = (me: Me): boolean => {
-  return me.readOnly || me.selectedClass.readOnly;
+  return me.readOnly || me.selectedClass?.readOnly;
 };
 
 const getCurrentClassName = (me: Me) => {

client/src/pages/myClass.vue

@@ -8,7 +8,7 @@
       :show-code-route="showCodeRoute"
       :read-only="me.readOnly"
       :can-edit="me.isTeacher"
-      :enable-deactivate="!me.readOnly && !me.selectedClass.readOnly"
+      :enable-deactivate="!me.readOnly && !me.selectedClass?.readOnly"
       title="Klassenliste"
       class="my-class__class"
       @add="add"
@@ -72,7 +72,7 @@ export default {
             ];
 
             // if we changed the currently selected class of the logged in user, we need to change this property too
-            const readOnly = member.isMe ? !active : me.selectedClass.readOnly;
+            const readOnly = member.isMe ? !active : me.selectedClass?.readOnly;
             const data = {
               me: {
                 ...me,

client/src/pages/portfolio/project.vue

@@ -46,7 +46,7 @@
         :project="project.slug"
         class="project__add-entry"
         data-cy="add-project-entry"
-        v-if="isOwner && !me.readOnly && !me.selectedClass.readOnly"
+        v-if="canEdit"
       />
       <project-entry
         v-bind="entry"
@@ -115,7 +115,7 @@ export default {
       return this.project.entries ? this.project.entries.length : 0;
     },
     canEdit() {
-      return !this.me.readOnly && !this.me.selectedClass.readOnly && this.isOwner;
+      return !this.me.readOnly && !this.me.selectedClass?.readOnly && this.isOwner;
     },
   },
 

client/src/pages/studentSubmission.vue

@@ -108,7 +108,7 @@ export default {
           };
     },
     readOnly() {
-      return this.me.readOnly || this.me.selectedClass.readOnly;
+      return this.me.readOnly || this.me.selectedClass?.readOnly;
     },
     assignmentText() {
       const text = this.studentSubmission.assignment.assignment;