From f69a3082123db28f5156d02a884756cef4e0825f Mon Sep 17 00:00:00 2001
From: Marcus Eibrink-Lunzenauer <lunzenauer@elan-ev.de>
Date: Tue, 13 May 2025 11:51:42 +0000
Subject: Courseware-Freigaben laufen in "vue-router" Fehler

Closes #5609

Merge request studip/studip!4227
---
 app/controllers/courseware/public.php              |   1 +
 resources/vue/components/courseware/PublicApp.vue  |   4 +-
 .../PublicCoursewareStructuralElement.vue          | 120 +++++++++++----------
 resources/vue/courseware-public-app.js             |   5 +-
 .../store/courseware/public-structure.module.js    |  27 +++++
 5 files changed, 95 insertions(+), 62 deletions(-)

diff --git a/app/controllers/courseware/public.php b/app/controllers/courseware/public.php
index 55cf3f4..e5f7aec 100644
--- a/app/controllers/courseware/public.php
+++ b/app/controllers/courseware/public.php
@@ -11,6 +11,7 @@ class Courseware_PublicController extends StudipController
         parent::before_filter($action, $args);
         PageLayout::setTitle(_('Courseware'));
         PageLayout::setHelpKeyword('Basis.Courseware');
+        PageLayout::disableSidebar();
     }
 
     public function index_action()
diff --git a/resources/vue/components/courseware/PublicApp.vue b/resources/vue/components/courseware/PublicApp.vue
index ffaf834..dad35d3 100644
--- a/resources/vue/components/courseware/PublicApp.vue
+++ b/resources/vue/components/courseware/PublicApp.vue
@@ -87,7 +87,7 @@ export default {
      },
         methods: {
         ...mapActions({
-            loadElements: 'courseware-structural-elements/loadAll',
+            loadStructure: 'courseware-structure/load',
             buildStructure: 'courseware-structure/build',
             loadStructuralElement: 'loadStructuralElement',
             validatePassword: 'validatePassword',
@@ -120,7 +120,7 @@ export default {
         }
     },
     async mounted() {
-        await this.loadElements();
+        await this.loadStructure();
         await this.buildStructure();
         const selectedId = this.$route.params?.id;
         await this.selectStructuralElement(selectedId);
diff --git a/resources/vue/components/courseware/structural-element/PublicCoursewareStructuralElement.vue b/resources/vue/components/courseware/structural-element/PublicCoursewareStructuralElement.vue
index 7e5ef49..ddea23f 100644
--- a/resources/vue/components/courseware/structural-element/PublicCoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/structural-element/PublicCoursewareStructuralElement.vue
@@ -1,22 +1,27 @@
 <template>
-    <focus-trap v-model="consumModeTrap">
-        <div
-            :class="{ 'cw-structural-element-consumemode': consumeMode }"
-            class="cw-structural-element"
-        >
-            <div v-if="structuralElement" class="cw-structural-element-content">
-                <ContentBar isContentBar>
-                    <template #buttons-left>
-                        <router-link v-if="prevElement" :to="'/structural_element/' + prevElement.id">
-                            <div class="cw-ribbon-button cw-ribbon-button-prev" :title="textRibbon.perv" />
-                        </router-link>
-                        <div v-else class="cw-ribbon-button cw-ribbon-button-prev-disabled" :title="$gettext('keine vorherige Seite')"/>
-                        <router-link v-if="nextElement" :to="'/structural_element/' + nextElement.id">
-                            <div class="cw-ribbon-button cw-ribbon-button-next" :title="textRibbon.next" />
-                        </router-link>
-                        <div v-else class="cw-ribbon-button cw-ribbon-button-next-disabled" :title="$gettext('keine nächste Seite')"/>
-                    </template>
-                    <template #breadcrumb-list>
+    <div :class="{ 'cw-structural-element-consumemode': consumeMode }" class="cw-structural-element">
+        <div v-if="structuralElement" class="cw-structural-element-content">
+            <ContentBar isContentBar>
+                <template #buttons-left>
+                    <router-link v-if="prevElement" :to="'/structural_element/' + prevElement.id">
+                        <div class="cw-ribbon-button cw-ribbon-button-prev" :title="textRibbon.perv" />
+                    </router-link>
+                    <div
+                        v-else
+                        class="cw-ribbon-button cw-ribbon-button-prev-disabled"
+                        :title="$gettext('keine vorherige Seite')"
+                    />
+                    <router-link v-if="nextElement" :to="'/structural_element/' + nextElement.id">
+                        <div class="cw-ribbon-button cw-ribbon-button-next" :title="textRibbon.next" />
+                    </router-link>
+                    <div
+                        v-else
+                        class="cw-ribbon-button cw-ribbon-button-next-disabled"
+                        :title="$gettext('keine nächste Seite')"
+                    />
+                </template>
+                <template #breadcrumb-list>
+                    <ul>
                         <li
                             v-for="ancestor in ancestors"
                             :key="ancestor.id"
@@ -24,52 +29,52 @@
                             class="cw-ribbon-breadcrumb-item"
                         >
                             <span>
-                                <router-link :to="'/structural_element/' + ancestor.id">{{ ancestor.attributes.title || "–" }}</router-link>
+                                <router-link :to="'/structural_element/' + ancestor.id">{{
+                                    ancestor.attributes.title || '–'
+                                }}</router-link>
                             </span>
                         </li>
                         <li
                             class="cw-ribbon-breadcrumb-item cw-ribbon-breadcrumb-item-current"
                             :title="structuralElement.attributes.title"
                         >
-                            <span>{{ structuralElement.attributes.title || "–" }}</span>
+                            <span>{{ structuralElement.attributes.title || '–' }}</span>
                         </li>
-                    </template>
-                    <template #breadcrumb-fallback>
+                    </ul>
+                </template>
+                <template #breadcrumb-fallback>
+                    <ul>
                         <li
                             class="cw-ribbon-breadcrumb-item cw-ribbon-breadcrumb-item-current"
                             :title="structuralElement.attributes.title"
                         >
                             <span>{{ structuralElement.attributes.title }}</span>
                         </li>
-                    </template>
-                </ContentBar>
-
-                <div
-                    class="cw-container-wrapper"
-                    :class="{
-                        'cw-container-wrapper-consume': consumeMode,
-                    }"
-                >
-                    <div v-if="structuralElementLoaded" class="cw-companion-box-wrapper">
-                        <courseware-empty-element-box
-                            v-if="noContainers"
-                            :noContainers="noContainers"
-                        />
-                    </div>
-                    <component
-                        v-for="container in containers"
-                        :key="container.id"
-                        :is="containerComponent(container)"
-                        :container="container"
-                        :canEdit="false"
-                        :canAddElements="false"
-                        :isTeacher="false"
-                        class="cw-container-item"
-                    />
+                    </ul>
+                </template>
+            </ContentBar>
+            <div
+                class="cw-container-wrapper"
+                :class="{
+                    'cw-container-wrapper-consume': consumeMode,
+                }"
+            >
+                <div v-if="structuralElementLoaded" class="cw-companion-box-wrapper">
+                    <courseware-empty-element-box v-if="noContainers" :noContainers="noContainers" />
                 </div>
+                <component
+                    v-for="container in containers"
+                    :key="container.id"
+                    :is="containerComponent(container)"
+                    :container="container"
+                    :canEdit="false"
+                    :canAddElements="false"
+                    :isTeacher="false"
+                    class="cw-container-item"
+                />
             </div>
         </div>
-    </focus-trap>
+    </div>
 </template>
 
 <script>
@@ -79,8 +84,8 @@ import CoursewarePluginComponents from '../plugin-components.js';
 import CoursewareCompanionOverlay from '../layouts/CoursewareCompanionOverlay.vue';
 
 import { mapActions, mapGetters } from 'vuex';
-import ContentBar from "../../ContentBar.vue";
-import { store } from "../../../../assets/javascripts/chunks/vue";
+import ContentBar from '../../ContentBar.vue';
+import { store } from '../../../../assets/javascripts/chunks/vue';
 
 export default {
     name: 'public-courseware-structural-element',
@@ -99,12 +104,12 @@ export default {
                 perv: this.$gettext('zurück'),
                 next: this.$gettext('weiter'),
             },
-        }
+        };
     },
 
     computed: {
         consumeMode() {
-          return store.state.studip.consumeMode;
+            return store.state.studip.consumeMode;
         },
         ...mapGetters({
             courseware: 'courseware',
@@ -125,11 +130,10 @@ export default {
         },
 
         structuralElementLoaded() {
-            return this.structuralElement !== null
-                && !(
-                    this.structuralElement.constructor === Object
-                    && Object.keys(this.structuralElement).length === 0
-                );
+            return (
+                this.structuralElement !== null &&
+                !(this.structuralElement.constructor === Object && Object.keys(this.structuralElement).length === 0)
+            );
         },
 
         ancestors() {
@@ -195,7 +199,7 @@ export default {
 
             if (relatedContainers) {
                 for (const container of relatedContainers) {
-                    containers.push(this.containerById({ id: container.id}));
+                    containers.push(this.containerById({ id: container.id }));
                 }
             }
 
diff --git a/resources/vue/courseware-public-app.js b/resources/vue/courseware-public-app.js
index c458522..5bd9a96 100644
--- a/resources/vue/courseware-public-app.js
+++ b/resources/vue/courseware-public-app.js
@@ -3,7 +3,7 @@ import CoursewarePublicModule from './store/courseware/courseware-public.module'
 import PublicCoursewareStructuralElement from './components/courseware/structural-element/PublicCoursewareStructuralElement.vue';
 import CoursewarePublicStructureModule from './store/courseware/public-structure.module';
 import PluginManager from './components/courseware/plugin-manager.js';
-import { createRouter } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import { h } from "vue";
 
 const mountApp = (STUDIP, createApp, store, element) => {
@@ -76,13 +76,14 @@ const mountApp = (STUDIP, createApp, store, element) => {
 
     const router = createRouter({
         base: `${base.pathname}${base.search}`,
+        history: createWebHashHistory(),
         routes,
     });
 
     const app = createApp({
         render: () => h(PublicApp),
-        router,
     });
+    app.use(router);
     app.mount(element);
 
     return app;
diff --git a/resources/vue/store/courseware/public-structure.module.js b/resources/vue/store/courseware/public-structure.module.js
index af8f262..fba2384 100644
--- a/resources/vue/store/courseware/public-structure.module.js
+++ b/resources/vue/store/courseware/public-structure.module.js
@@ -52,8 +52,35 @@ const actions = {
         commit('setChildren', children);
 
         const ordered = [...visitTree(children, context.rootId)];
+
         commit('setOrdered', ordered);
     },
+    async load({ dispatch, rootGetters }) {
+        const context = rootGetters['context'];
+
+        await dispatch('courseware-structural-elements/loadById', {
+            id: context.rootId,
+            options: {
+                include: 'containers,containers.blocks',
+            },
+        }, { root: true });
+        const root = rootGetters['courseware-structural-elements/byId']({id: context.rootId});
+        await dispatch('loadDescendants', { root });
+    },
+    loadDescendants({ dispatch }, { root }) {
+        const parent = { id: root.id, type: root.type };
+        const relationship = 'descendants';
+        const options = {
+            'page[offset]': 0,
+            'page[limit]': 10000,
+        };
+
+        return dispatch(
+            'courseware-structural-elements/loadRelated',
+            { parent, relationship, options },
+            { root: true }
+        );
+    },
 };
 
 function* visitTree(tree, current) {
-- 
cgit v1.0