biest-615

resources/vue/components/courseware/IndexApp.vue

 <template>
+    <div>
         <div v-if="structureLoadingState === 'done'">
             <courseware-structural-element
                 :canVisit="canVisit"
@@ -14,16 +15,23 @@
             </MountingPortal>
         </div>
         <studip-progress-indicator
-        v-else
+            v-if="structureLoadingState === 'loading'"
             class="cw-loading-indicator-content"
             :description="$gettext('Lade Lernmaterial...')"
         />
+        <courseware-companion-box
+            v-if="structureLoadingState === 'error'"
+            mood="sad"
+            :msgCompanion="loadingErrorMessage"
+        />
+    </div>
 </template>
 
 <script>
 import CoursewareStructuralElement from './CoursewareStructuralElement.vue';
 import CoursewareViewWidget from './CoursewareViewWidget.vue';
 import CoursewareActionWidget from './CoursewareActionWidget.vue';
+import CoursewareCompanionBox from './CoursewareCompanionBox.vue';
 import StudipProgressIndicator from '../StudipProgressIndicator.vue';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -32,12 +40,14 @@ export default {
         CoursewareStructuralElement,
         CoursewareViewWidget,
         CoursewareActionWidget,
+        CoursewareCompanionBox,
         StudipProgressIndicator,
     },
     data: () => ({
         canVisit: null,
         selected: null,
         structureLoadingState: 'idle',
+        loadingErrorStatus: null
     }),
     computed: {
         ...mapGetters({
@@ -49,6 +59,16 @@ export default {
             structuralElementById: 'courseware-structural-elements/byId',
             userId: 'userId',
         }),
+        loadingErrorMessage() {
+            switch (this.loadingErrorStatus) {
+                case 404:
+                    return this.$gettext('Die Seite konnte nicht gefunden werden.');
+                case 403:
+                    return this.$gettext('Diese Seite steht Ihnen leider nicht zur Verfügung.');
+                default:
+                    return this.$gettext('Beim Laden der Seite ist ein Fehler aufgetreten.');
+            }
+        }
     },
     methods: {
         ...mapActions({
@@ -71,7 +91,14 @@ export default {
     },
     async mounted() {
         this.structureLoadingState = 'loading';
+        try {
             await this.loadCoursewareStructure();
+        }
+        catch (error) {
+            this.loadingErrorStatus = error.status;
+            this.structureLoadingState = 'error';
+            return;
+        }
         await this.loadTeacherStatus(this.userId);
         this.structureLoadingState = 'done';
         const selectedId = this.$route.params?.id;