Courseware: Strukturelemente nur einmal laden

resources/vue/components/courseware/CoursewareActionWidget.vue

 <template>
-    <ul class="widget-list widget-links cw-action-widget">
-        <li v-show="canEdit" class="cw-action-widget-edit" @click="editElement"><translate>Seite bearbeiten</translate></li>
-        <li v-show="canEdit" class="cw-action-widget-add" @click="addElement"><translate>Seite hinzufügen</translate></li>
+    <ul class="widget-list widget-links cw-action-widget" v-if="structuralElement">
+        <li v-show="canEdit" class="cw-action-widget-edit" @click="editElement">
+            <translate>Seite bearbeiten</translate>
+        </li>
+        <li v-show="canEdit" class="cw-action-widget-add" @click="addElement">
+            <translate>Seite hinzufügen</translate>
+        </li>
         <li class="cw-action-widget-info" @click="showElementInfo"><translate>Informationen anzeigen</translate></li>
         <li class="cw-action-widget-star" @click="createBookmark"><translate>Lesezeichen setzen</translate></li>
-        <li v-show="canEdit" @click="exportElement" class="cw-action-widget-export"><translate>Seite exportieren</translate></li>
-        <li v-show="canEdit && oerEnabled" @click="oerElement" class="cw-action-widget-oer"><translate>Seite auf %{oerTitle} veröffentlichen</translate></li>
-        <li v-show="!isRoot && canEdit" class="cw-action-widget-trash" @click="deleteElement"><translate>Seite löschen</translate></li>
+        <li v-show="canEdit" @click="exportElement" class="cw-action-widget-export">
+            <translate>Seite exportieren</translate>
+        </li>
+        <li v-show="canEdit && oerEnabled" @click="oerElement" class="cw-action-widget-oer">
+            <translate>Seite auf %{oerTitle} veröffentlichen</translate>
+        </li>
+        <li v-show="!isRoot && canEdit" class="cw-action-widget-trash" @click="deleteElement">
+            <translate>Seite löschen</translate>
+        </li>
     </ul>
 </template>
 
@@ -17,29 +27,16 @@ import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'courseware-action-widget',
+    props: ['structuralElement'],
     components: {
-        StudipIcon
+        StudipIcon,
     },
     mixins: [CoursewareExport],
-    data() {
-        return {
-            currentId: null,
-            currentElement: {},
-        }
-    },
     computed: {
-         ...mapGetters({
-            structuralElementById: 'courseware-structural-elements/byId',
+        ...mapGetters({
             oerEnabled: 'oerEnabled',
             oerTitle: 'oerTitle',
         }),
-        structuralElement() {
-            if (!this.currentId) {
-                return null;
-            }
-
-            return this.structuralElementById({ id: this.currentId });
-        },
         isRoot() {
             if (!this.structuralElement) {
                 return true;
@@ -53,15 +50,12 @@ export default {
             }
             return this.structuralElement.attributes['can-edit'];
         },
-    },
-    async mounted() {
-        if (!this.currentId) {
-            this.setCurrentId(this.$route.params.id);
-        }
+        currentId() {
+            return this.structuralElement?.id;
+        },
     },
     methods: {
         ...mapActions({
-            loadStructuralElement: 'loadStructuralElement',
             showElementEditDialog: 'showElementEditDialog',
             showElementAddDialog: 'showElementAddDialog',
             showElementDeleteDialog: 'showElementDeleteDialog',
@@ -70,19 +64,8 @@ export default {
             showElementOerDialog: 'showElementOerDialog',
             companionInfo: 'companionInfo',
             addBookmark: 'addBookmark',
-            lockObject: 'lockObject'
+            lockObject: 'lockObject',
         }),
-        async setCurrentId(id) {
-            this.currentId = id;
-            await this.loadStructuralElement(this.currentId);
-            this.initCurrent();
-        },
-        initCurrent() {
-            this.currentElement = JSON.parse(JSON.stringify(this.structuralElement));
-            if (!this.currentElement.attributes.payload.meta) {
-                this.currentElement.attributes.payload.meta = {};
-            }
-        },
         async editElement() {
             await this.lockObject({ id: this.currentId, type: 'courseware-structural-elements' });
             this.showElementEditDialog(true);
@@ -106,12 +89,7 @@ export default {
         },
         oerElement() {
             this.showElementOerDialog(true);
-        }
-    },
-    watch: {
-        $route(to) {
-            this.setCurrentId(to.params.id);
         },
     },
-}
-</script>
+};
+</script>
\ No newline at end of file

resources/vue/components/courseware/IndexApp.vue

 <template>
     <div v-if="courseware">
         <courseware-structural-element
+            :structural-element="selected"
             :ordered-structural-elements="orderedStructuralElements"
+            @select="selectStructuralElement"
         ></courseware-structural-element>
         <MountingPortal mountTo="#courseware-action-widget" name="sidebar-actions">
-            <courseware-action-widget></courseware-action-widget>
+            <courseware-action-widget :structural-element="selected"></courseware-action-widget>
         </MountingPortal>
         <MountingPortal mountTo="#courseware-view-widget" name="sidebar-views">
             <courseware-view-widget></courseware-view-widget>
         </MountingPortal>
     </div>
-    <div v-else>
-        <translate>Inhalte werden geladen</translate>...
-    </div>
+    <div v-else><translate>Inhalte werden geladen</translate>...</div>
 </template>
 
 <script>
@@ -27,25 +27,48 @@ export default {
         CoursewareViewWidget,
         CoursewareActionWidget,
     },
-    data: () => ({ orderedStructuralElements: [] }),
+    data: () => ({
+        selected: null,
+        orderedStructuralElements: [],
+    }),
     computed: {
         ...mapGetters({
             courseware: 'courseware',
             relatedStructuralElement: 'courseware-structural-elements/related',
             structuralElements: 'courseware-structural-elements/all',
+            structuralElementById: 'courseware-structural-elements/byId',
             userId: 'userId',
         }),
     },
     methods: {
-        ...mapActions(['loadCoursewareStructure', 'loadTeacherStatus', 'coursewareBlockAdder']),
+        ...mapActions([
+            'coursewareBlockAdder',
+            'loadCoursewareStructure',
+            'loadStructuralElement',
+            'loadTeacherStatus',
+        ]),
+        async selectStructuralElement(id) {
+            if (!id) {
+                return;
+            }
+
+            await this.loadStructuralElement(id);
+            this.selected = this.structuralElementById({ id });
+        },
     },
     async mounted() {
         await this.loadCoursewareStructure();
         await this.loadTeacherStatus(this.userId);
+        const selectedId = this.$route.params?.id;
+        await this.selectStructuralElement(selectedId);
     },
     watch: {
-        $route() {
-            this.coursewareBlockAdder({}); //reset block adder on navigate
+        $route(to) {
+            // reset block adder on navigate
+            this.coursewareBlockAdder({});
+
+            const selectedId = to.params?.id;
+            this.selectStructuralElement(selectedId);
         },
         structuralElements(newElements, oldElements) {
             const nodes = buildNodes(this.structuralElements, this.relatedStructuralElement.bind(this));