fix #2108

Closes #2108

Merge request studip/studip!1368

resources/assets/stylesheets/scss/courseware.scss

@@ -5362,3 +5362,18 @@ w i z a r d  e l e m e n t s
 /* * * * * * * * * * * * * * * * * *
 w i z a r d  e l e m e n t s  e n d
 * * * * * * * * * * * * * * * * * */
+
+
+/* * * * * * * * * * * * * * *
+s h e l f  i t e m s
+* * * * * * * * * * * * * * */
+.cw-unit-items,
+.cw-shared-items {
+    margin-bottom: 10px;
+    h2 {
+        margin-top: 0;
+    }
+}
+/* * * * * * * * * * * * * * * * * *
+s h e l f  i t e m s  e n d 
+* * * * * * * * * * * * * * * * * */

resources/vue/components/courseware/CoursewareSharedItems.vue

+<template>
+    <div class="cw-shared-items">
+        <h2 v-if="sharedElements.length > 0">{{ $gettext('Geteilte Lernmaterialien') }}</h2>
+        <ul class="cw-tiles">
+            <li
+                v-for="element in sharedElements"
+                :key="element.id"
+                class="tile"
+                :class="[element.attributes.payload.color, sharedElements.length > 3 ? '':  'cw-tile-margin']"
+            >
+                <a :href="getSharedElementUrl(element.id)" :title="element.attributes.title">
+                    <div
+                        class="preview-image"
+                        :class="[hasImage(element) ? '' : 'default-image']"
+                        :style="getChildStyle(element)"
+                    >
+                        <div class="overlay-text">{{ getOwnerName(element) }}</div>
+                    </div>
+                    <div class="description">
+                        <header
+                            :class="[element.attributes.purpose !== '' ? 'description-icon-' + element.attributes.purpose : '']"
+                        >
+                            {{ element.attributes.title }}
+                        </header>
+                        <div class="description-text-wrapper">
+                            <p>{{ element.attributes.payload.description }}</p>
+                        </div>
+                        <footer>
+                            {{ countChildren(element) + 1 }}
+                            <translate
+                                :translate-n="countChildren(element) + 1"
+                                translate-plural="Seiten"
+                            >
+                                Seite
+                            </translate>
+                        </footer>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+    name: 'courseware-shared-items',
+    computed: {
+        ...mapGetters({
+            sharedElements: 'courseware-structural-elements-shared/all',
+            userById: 'users/byId',
+        }),
+    },
+    methods: {
+        getChildStyle(child) {
+            let url = child.relationships?.image?.meta?.['download-url'];
+
+            if(url) {
+                return {'background-image': 'url(' + url + ')'};
+            } else {
+                return {};
+            }
+        },
+        hasImage(child) {
+            return child.relationships?.image?.data !== null;
+        },
+        getElementUrl(elementId) {
+            return STUDIP.URLHelper.base_url + 'dispatch.php/contents/courseware/courseware#/structural_element/' + elementId;
+        },
+        getSharedElementUrl(elementId) {
+            return STUDIP.URLHelper.base_url + 'dispatch.php/contents/courseware/shared_content_courseware/' + elementId;
+        },
+        getOwnerName(element) {
+            const ownerId = element.relationships.owner.data.id;
+            const owner = this.userById({ id: ownerId });
+
+            return owner.attributes['formatted-name']; 
+        },
+        countChildren(element) {
+            let data = element.relationships.children.data;
+            if (data) {
+                return data.length;
+            }
+            return 0;
+        },
+    },
+}
+</script>
\ No newline at end of file

resources/vue/components/courseware/CoursewareUnitItems.vue

 <template>
     <div class="cw-unit-items">
+        <h2 v-if="!inCourseContext && hasUnits">{{ $gettext('Persönliche Lernmaterialien') }}</h2>
         <ul v-if="hasUnits" class="cw-tiles">
             <courseware-unit-item v-for="unit in units" :key="unit.id" :unit="unit"/>
         </ul>

resources/vue/components/courseware/ShelfApp.vue

@@ -2,6 +2,7 @@
     <div>
         <div class="cw-shelf">
             <courseware-unit-items />
+            <courseware-shared-items v-if="!inCourseContext" />
         </div>
         <courseware-shelf-dialog-add v-if="showUnitAddDialog" />
         <courseware-shelf-dialog-copy v-if="showUnitCopyDialog" />
@@ -23,6 +24,7 @@ import CoursewareShelfDialogAdd from './CoursewareShelfDialogAdd.vue';
 import CoursewareShelfDialogCopy from './CoursewareShelfDialogCopy.vue';
 import CoursewareShelfDialogImport from './CoursewareShelfDialogImport.vue';
 import CoursewareUnitItems from './CoursewareUnitItems.vue';
+import CoursewareSharedItems from './CoursewareSharedItems.vue';
 import CoursewareCompanionOverlay from './CoursewareCompanionOverlay.vue';
 
 import { mapActions, mapGetters } from 'vuex';
@@ -35,6 +37,7 @@ export default {
         CoursewareShelfDialogCopy,
         CoursewareShelfDialogImport,
         CoursewareUnitItems,
+        CoursewareSharedItems,
         CoursewareCompanionOverlay,
     },
     computed: {

resources/vue/courseware-shelf-app.js

@@ -50,6 +50,7 @@ const mountApp = async (STUDIP, createApp, element) => {
                     'courseware-user-data-fields',
                     'courseware-user-progresses',
                     'courseware-structural-elements',
+                    'courseware-structural-elements-shared',
                     'files',
                     'file-refs',
                     'folders',
@@ -79,6 +80,7 @@ const mountApp = async (STUDIP, createApp, element) => {
         await store.dispatch('loadCourseUnits', entry_id);
     } else {
         await store.dispatch('loadUserUnits', entry_id);
+        await store.dispatch('courseware-structural-elements-shared/loadAll', { options: { include: 'owner' } });
     }
 
     const app = createApp({