diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 4c8a82600113c0e5c60a4f2a142d7f11490a32f5..4ebbdc0b38bf52f9d4eac8c88b7e3bac354a1f32 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/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
+* * * * * * * * * * * * * * * * * */
diff --git a/resources/vue/components/courseware/CoursewareSharedItems.vue b/resources/vue/components/courseware/CoursewareSharedItems.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e68179c715322aa14c156a988890e26e53b5317b
--- /dev/null
+++ b/resources/vue/components/courseware/CoursewareSharedItems.vue
@@ -0,0 +1,88 @@
+<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
diff --git a/resources/vue/components/courseware/CoursewareUnitItems.vue b/resources/vue/components/courseware/CoursewareUnitItems.vue
index 1e8468f8a010e14fb8539751213e7514c8005c95..8aca4af56b1bc700d816ab7156922551e3c73819 100644
--- a/resources/vue/components/courseware/CoursewareUnitItems.vue
+++ b/resources/vue/components/courseware/CoursewareUnitItems.vue
@@ -1,5 +1,6 @@
<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>
diff --git a/resources/vue/components/courseware/ShelfApp.vue b/resources/vue/components/courseware/ShelfApp.vue
index e9f275d8d96d6e5be15b70fe4a4fed061ee5bd97..d9b37a448edaf8bdd91b51ef615d56e6dc867ffe 100644
--- a/resources/vue/components/courseware/ShelfApp.vue
+++ b/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: {
diff --git a/resources/vue/courseware-shelf-app.js b/resources/vue/courseware-shelf-app.js
index f175e587a6cad5d5e670588f1d77d19fbf267310..de8a438e416a7f99d162b35214d5c73eb288ac41 100644
--- a/resources/vue/courseware-shelf-app.js
+++ b/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({