From 2ba898859c58b7538f51a257c281a70d42452390 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Wed, 22 Mar 2023 11:50:00 +0000
Subject: [PATCH] fix #2385
Closes #2385
Merge request studip/studip!1581
---
.../CoursewareAccordionContainer.vue | 91 ++++++++--------
.../courseware/CoursewareDefaultBlock.vue | 3 +-
.../courseware/CoursewareDefaultContainer.vue | 5 +-
.../courseware/CoursewareListContainer.vue | 101 +++++++++---------
.../courseware/CoursewareRibbonToolbar.vue | 3 +-
.../CoursewareStructuralElement.vue | 22 ++--
.../courseware/CoursewareTabsContainer.vue | 83 +++++++-------
.../vue/store/courseware/courseware.module.js | 3 +
8 files changed, 161 insertions(+), 150 deletions(-)
diff --git a/resources/vue/components/courseware/CoursewareAccordionContainer.vue b/resources/vue/components/courseware/CoursewareAccordionContainer.vue
index b297c8bf0e1..0cb3b430021 100644
--- a/resources/vue/components/courseware/CoursewareAccordionContainer.vue
+++ b/resources/vue/components/courseware/CoursewareAccordionContainer.vue
@@ -9,7 +9,7 @@
@closeEdit="initCurrentData"
>
<template v-slot:containerContent>
- <template v-if="showEditMode && canEdit">
+ <template v-if="showEditMode && canEdit && !currentElementisLink">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
{{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
@@ -22,7 +22,7 @@
:icon="section.icon"
:open="index === 0 || sortInSlots.includes(index)"
>
- <ul v-if="!showEditMode" class="cw-container-accordion-block-list">
+ <ul v-if="!showEditMode || currentElementisLink" class="cw-container-accordion-block-list">
<li v-for="block in section.blocks" :key="block.id" class="cw-block-item">
<component
:is="component(block)"
@@ -32,47 +32,51 @@
/>
</li>
</ul>
- <draggable
- v-if="showEditMode && canEdit && !processing"
- class="cw-container-list-block-list cw-container-list-sort-mode"
- :class="[section.blocks.length === 0 ? 'cw-container-list-sort-mode-empty' : '']"
- tag="ol"
- role="listbox"
- v-model="section.blocks"
- v-bind="dragOptions"
- handle=".cw-sortable-handle"
- group="blocks"
- @start="isDragging = true"
- @end="dropBlock"
- :containerId="container.id"
- :sectionId="index"
- >
- <li v-for="block in section.blocks" :key="block.id" class="cw-block-item cw-block-item-sortable">
- <span
- :class="{ 'cw-sortable-handle-dragging': isDragging }"
- class="cw-sortable-handle"
- tabindex="0"
- role="option"
- aria-describedby="operation"
- :ref="'sortableHandle' + block.id"
- @keydown="keyHandler($event, block.id, index)"
- ></span>
- <component
- :is="component(block)"
- :block="block"
- :canEdit="canEdit"
- :isTeacher="isTeacher"
- :class="{ 'cw-block-item-selected': keyboardSelected === block.id}"
- :blockId="block.id"
- />
- </li>
- </draggable>
- <template v-if="showEditMode && canAddElements && !processing">
- <courseware-block-adder-area :container="container" :section="index" @updateContainerContent="updateContent"/>
+ <template v-else>
+ <template v-if="!processing">
+ <draggable
+ v-if="canEdit"
+ class="cw-container-list-block-list cw-container-list-sort-mode"
+ :class="[section.blocks.length === 0 ? 'cw-container-list-sort-mode-empty' : '']"
+ tag="ol"
+ role="listbox"
+ v-model="section.blocks"
+ v-bind="dragOptions"
+ handle=".cw-sortable-handle"
+ group="blocks"
+ @start="isDragging = true"
+ @end="dropBlock"
+ :containerId="container.id"
+ :sectionId="index"
+ >
+ <li v-for="block in section.blocks" :key="block.id" class="cw-block-item cw-block-item-sortable">
+ <span
+ :class="{ 'cw-sortable-handle-dragging': isDragging }"
+ class="cw-sortable-handle"
+ tabindex="0"
+ role="option"
+ aria-describedby="operation"
+ :ref="'sortableHandle' + block.id"
+ @keydown="keyHandler($event, block.id, index)"
+ ></span>
+ <component
+ :is="component(block)"
+ :block="block"
+ :canEdit="canEdit"
+ :isTeacher="isTeacher"
+ :class="{ 'cw-block-item-selected': keyboardSelected === block.id}"
+ :blockId="block.id"
+ />
+ </li>
+ </draggable>
+ <template v-if="canAddElements">
+ <courseware-block-adder-area :container="container" :section="index" @updateContainerContent="updateContent"/>
+ </template>
+ </template>
+ <div v-else class="progress-wrapper">
+ <studip-progress-indicator :description="$gettext('Vorgang wird bearbeitet...')" />
+ </div>
</template>
- <div v-if="showEditMode && processing" class="progress-wrapper">
- <studip-progress-indicator :description="$gettext('Vorgang wird bearbeitet...')" />
- </div>
</courseware-collapsible-box>
</template>
<template v-slot:containerEditDialog>
@@ -157,7 +161,8 @@ export default {
computed: {
...mapGetters({
blockById: 'courseware-blocks/byId',
- viewMode: 'viewMode'
+ viewMode: 'viewMode',
+ currentElementisLink: 'currentElementisLink'
}),
showEditMode() {
return this.viewMode === 'edit';
diff --git a/resources/vue/components/courseware/CoursewareDefaultBlock.vue b/resources/vue/components/courseware/CoursewareDefaultBlock.vue
index 248c0690af6..ff9701986c3 100644
--- a/resources/vue/components/courseware/CoursewareDefaultBlock.vue
+++ b/resources/vue/components/courseware/CoursewareDefaultBlock.vue
@@ -144,9 +144,10 @@ export default {
userId: 'userId',
userById: 'users/byId',
viewMode: 'viewMode',
+ currentElementisLink: 'currentElementisLink'
}),
showEditMode() {
- let show = this.viewMode === 'edit' || this.blockedByThisUser;
+ let show = (this.viewMode === 'edit' || this.blockedByThisUser) && !this.currentElementisLink;
if (!show) {
this.displayFeature(false);
}
diff --git a/resources/vue/components/courseware/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/CoursewareDefaultContainer.vue
index fd89439b355..e1fa87bf548 100644
--- a/resources/vue/components/courseware/CoursewareDefaultContainer.vue
+++ b/resources/vue/components/courseware/CoursewareDefaultContainer.vue
@@ -108,10 +108,11 @@ export default {
blockAdder: 'blockAdder',
userId: 'userId',
userById: 'users/byId',
- viewMode: 'viewMode'
+ viewMode: 'viewMode',
+ currentElementisLink: 'currentElementisLink'
}),
showEditMode() {
- return this.viewMode === 'edit';
+ return this.viewMode === 'edit' && !this.currentElementisLink;
},
colSpan() {
return this.container.attributes.payload.colspan ? this.container.attributes.payload.colspan : 'full';
diff --git a/resources/vue/components/courseware/CoursewareListContainer.vue b/resources/vue/components/courseware/CoursewareListContainer.vue
index 3ee4538dc46..74c890ba4b0 100644
--- a/resources/vue/components/courseware/CoursewareListContainer.vue
+++ b/resources/vue/components/courseware/CoursewareListContainer.vue
@@ -7,60 +7,62 @@
@storeContainer="storeContainer"
>
<template v-slot:containerContent>
- <ul v-if="!showEditMode" class="cw-container-list-block-list">
+ <ul v-if="!showEditMode || currentElementisLink" class="cw-container-list-block-list">
<li v-for="block in blocks" :key="block.id" class="cw-block-item">
<component :is="component(block)" :block="block" :canEdit="canEdit" :isTeacher="isTeacher" />
</li>
</ul>
- <template v-if="showEditMode && !processing">
- <span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
- <span id="operation" class="assistive-text">
- {{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
- </span>
- <draggable
- v-if="showEditMode && canEdit"
- class="cw-container-list-block-list cw-container-list-sort-mode"
- tag="ol"
- role="listbox"
- v-model="blockList"
- v-bind="dragOptions"
- handle=".cw-sortable-handle"
- group="blocks"
- @start="isDragging = true"
- @end="dropBlock"
- ref="sortables"
- :containerId="container.id"
- sectionId="0"
- >
- <li
- v-for="block in blockList"
- :key="block.id"
- class="cw-block-item cw-block-item-sortable"
+ <template v-else>
+ <template v-if="!processing">
+ <span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
+ <span id="operation" class="assistive-text">
+ {{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
+ </span>
+ <draggable
+ v-if="showEditMode && canEdit"
+ class="cw-container-list-block-list cw-container-list-sort-mode"
+ tag="ol"
+ role="listbox"
+ v-model="blockList"
+ v-bind="dragOptions"
+ handle=".cw-sortable-handle"
+ group="blocks"
+ @start="isDragging = true"
+ @end="dropBlock"
+ ref="sortables"
+ :containerId="container.id"
+ sectionId="0"
>
- <span
- :class="{ 'cw-sortable-handle-dragging': isDragging }"
- class="cw-sortable-handle"
- tabindex="0"
- role="option"
- aria-describedby="operation"
- :ref="'sortableHandle' + block.id"
- @keydown="keyHandler($event, block.id)"
- ></span>
- <component
- :is="component(block)"
- :block="block"
- :canEdit="canEdit"
- :isTeacher="isTeacher"
- :class="{ 'cw-block-item-selected': keyboardSelected === block.id}"
- :blockId="block.id"
- />
- </li>
- </draggable>
- <courseware-block-adder-area :container="container" :section="0" />
+ <li
+ v-for="block in blockList"
+ :key="block.id"
+ class="cw-block-item cw-block-item-sortable"
+ >
+ <span
+ :class="{ 'cw-sortable-handle-dragging': isDragging }"
+ class="cw-sortable-handle"
+ tabindex="0"
+ role="option"
+ aria-describedby="operation"
+ :ref="'sortableHandle' + block.id"
+ @keydown="keyHandler($event, block.id)"
+ ></span>
+ <component
+ :is="component(block)"
+ :block="block"
+ :canEdit="canEdit"
+ :isTeacher="isTeacher"
+ :class="{ 'cw-block-item-selected': keyboardSelected === block.id}"
+ :blockId="block.id"
+ />
+ </li>
+ </draggable>
+ <courseware-block-adder-area :container="container" :section="0" />
+ </template>
+ <div v-else class="progress-wrapper" :style="{ height: contentHeight + 'px' }">
+ <studip-progress-indicator :description="$gettext('Vorgang wird bearbeitet...')" />
+ </div>
</template>
- <div v-if="showEditMode && processing" class="progress-wrapper" :style="{ height: contentHeight + 'px' }">
- <studip-progress-indicator :description="$gettext('Vorgang wird bearbeitet...')" />
- </div>
</template>
</courseware-default-container>
</template>
@@ -105,7 +107,8 @@ export default {
...mapGetters({
blockById: 'courseware-blocks/byId',
containerById: 'courseware-containers/byId',
- viewMode: 'viewMode'
+ viewMode: 'viewMode',
+ currentElementisLink: 'currentElementisLink'
}),
blocked() {
return this.container?.relationships?.['edit-blocker']?.data !== null;
diff --git a/resources/vue/components/courseware/CoursewareRibbonToolbar.vue b/resources/vue/components/courseware/CoursewareRibbonToolbar.vue
index e1373ba012d..edf356e545f 100644
--- a/resources/vue/components/courseware/CoursewareRibbonToolbar.vue
+++ b/resources/vue/components/courseware/CoursewareRibbonToolbar.vue
@@ -100,6 +100,7 @@ export default {
userById: 'users/byId',
userId: 'userId',
selectedToolbarItem: 'selectedToolbarItem',
+ currentElementisLink: 'currentElementisLink',
}),
showEditMode() {
return this.viewMode === 'edit';
@@ -108,7 +109,7 @@ export default {
if (this.disableAdder) {
return false;
} else {
- return !this.consumeMode && this.showEditMode && this.canEdit;
+ return !this.consumeMode && this.showEditMode && this.canEdit && !this.currentElementisLink;
}
},
displaySettings() {
diff --git a/resources/vue/components/courseware/CoursewareStructuralElement.vue b/resources/vue/components/courseware/CoursewareStructuralElement.vue
index bdd01692ba7..a0053e6aa05 100644
--- a/resources/vue/components/courseware/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/CoursewareStructuralElement.vue
@@ -130,11 +130,12 @@
:structuralElement="structuralElement"
:canEdit="canEdit"
/>
- <courseware-companion-box
- v-if="editView"
- :msgCompanion="$gettextInterpolate($gettext('Dieser Inhalt ist aus den persönlichen Lernmaterialien von %{ ownerName } verlinkt und kann nur dort bearbeitet werden.'), { ownerName: ownerName })"
- mood="pointing"
- />
+ <div v-if="editView" class="cw-companion-box-wrapper">
+ <courseware-companion-box
+ :msgCompanion="$gettextInterpolate($gettext('Dieser Inhalt ist aus den persönlichen Lernmaterialien von %{ ownerName } verlinkt und kann nur dort bearbeitet werden.'), { ownerName: ownerName })"
+ mood="pointing"
+ />
+ </div>
<component
v-for="container in linkedContainers"
:key="container.id"
@@ -146,7 +147,7 @@
class="cw-container-item"
/>
</div>
- <div v-if="canVisit && canEdit && editView" class="cw-container-wrapper cw-container-wrapper-edit">
+ <div v-if="canVisit && canEdit && editView && !isLink" class="cw-container-wrapper cw-container-wrapper-edit">
<template v-if="!processing">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
@@ -827,6 +828,7 @@ export default {
blockerId: 'currentElementBlockerId',
blockedByThisUser: 'currentElementBlockedByThisUser',
blockedByAnotherUser: 'currentElementBlockedByAnotherUser',
+ isLink: 'currentElementisLink',
templates: 'courseware-templates/all',
}),
@@ -1179,14 +1181,6 @@ export default {
);
},
- isLink() {
- if (this.structuralElement) {
- return this.structuralElement.attributes['is-link'] === 1;
- }
-
- return false;
- },
-
linkedElement() {
if (this.isLink) {
return this.structuralElementById({ id: this.structuralElement.attributes['target-id']});
diff --git a/resources/vue/components/courseware/CoursewareTabsContainer.vue b/resources/vue/components/courseware/CoursewareTabsContainer.vue
index dd0d96326be..114d86cb42b 100644
--- a/resources/vue/components/courseware/CoursewareTabsContainer.vue
+++ b/resources/vue/components/courseware/CoursewareTabsContainer.vue
@@ -9,7 +9,7 @@
@closeEdit="initCurrentData"
>
<template v-slot:containerContent>
- <template v-if="showEditMode && canEdit">
+ <template v-if="showEditMode && canEdit && !currentElementisLink">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
{{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
@@ -24,7 +24,7 @@
:icon="section.icon"
:selected="sortInTab === index"
>
- <ul v-if="!showEditMode" class="cw-container-tabs-block-list">
+ <ul v-if="!showEditMode || currentElementisLink" class="cw-container-tabs-block-list">
<li v-for="block in section.blocks" :key="block.id" class="cw-block-item">
<component
:is="component(block)"
@@ -34,43 +34,45 @@
/>
</li>
</ul>
- <template v-if="showEditMode && canEdit">
- <draggable
- class="cw-container-list-block-list cw-container-list-sort-mode"
- :class="[section.blocks.length === 0 ? 'cw-container-list-sort-mode-empty' : '']"
- tag="ol"
- role="listbox"
- v-model="section.blocks"
- v-bind="dragOptions"
- handle=".cw-sortable-handle"
- group="blocks"
- @start="isDragging = true"
- @end="dropBlock"
- :containerId="container.id"
- :sectionId="index"
- >
- <li v-for="block in section.blocks" :key="block.id" class="cw-block-item cw-block-item-sortable">
- <span
- :class="{ 'cw-sortable-handle-dragging': isDragging }"
- class="cw-sortable-handle"
- tabindex="0"
- role="option"
- aria-describedby="operation"
- :ref="'sortableHandle' + block.id"
- @keydown="keyHandler($event, block.id, index)"
- ></span>
- <component
- :is="component(block)"
- :block="block"
- :canEdit="canEdit"
- :isTeacher="isTeacher"
- :class="{ 'cw-block-item-selected': keyboardSelected === block.id}"
- :blockId="block.id"
- />
- </li>
- </draggable>
- <template v-if="canAddElements">
- <courseware-block-adder-area :container="container" :section="index" @updateContainerContent="updateContent"/>
+ <template v-else>
+ <template v-if="canEdit">
+ <draggable
+ class="cw-container-list-block-list cw-container-list-sort-mode"
+ :class="[section.blocks.length === 0 ? 'cw-container-list-sort-mode-empty' : '']"
+ tag="ol"
+ role="listbox"
+ v-model="section.blocks"
+ v-bind="dragOptions"
+ handle=".cw-sortable-handle"
+ group="blocks"
+ @start="isDragging = true"
+ @end="dropBlock"
+ :containerId="container.id"
+ :sectionId="index"
+ >
+ <li v-for="block in section.blocks" :key="block.id" class="cw-block-item cw-block-item-sortable">
+ <span
+ :class="{ 'cw-sortable-handle-dragging': isDragging }"
+ class="cw-sortable-handle"
+ tabindex="0"
+ role="option"
+ aria-describedby="operation"
+ :ref="'sortableHandle' + block.id"
+ @keydown="keyHandler($event, block.id, index)"
+ ></span>
+ <component
+ :is="component(block)"
+ :block="block"
+ :canEdit="canEdit"
+ :isTeacher="isTeacher"
+ :class="{ 'cw-block-item-selected': keyboardSelected === block.id}"
+ :blockId="block.id"
+ />
+ </li>
+ </draggable>
+ <template v-if="canAddElements">
+ <courseware-block-adder-area :container="container" :section="index" @updateContainerContent="updateContent"/>
+ </template>
</template>
</template>
</courseware-tab>
@@ -164,7 +166,8 @@ export default {
computed: {
...mapGetters({
blockById: 'courseware-blocks/byId',
- viewMode: 'viewMode'
+ viewMode: 'viewMode',
+ currentElementisLink: 'currentElementisLink'
}),
showEditMode() {
return this.viewMode === 'edit';
diff --git a/resources/vue/store/courseware/courseware.module.js b/resources/vue/store/courseware/courseware.module.js
index 9aa42813ee6..996cb37c6d4 100644
--- a/resources/vue/store/courseware/courseware.module.js
+++ b/resources/vue/store/courseware/courseware.module.js
@@ -98,6 +98,9 @@ const getters = {
currentElementBlockedByAnotherUser(state, getters) {
return getters.currentElementBlocked && getters.userId !== getters.currentElementBlockerId;
},
+ currentElementisLink(state, getters, rootState, rootGetters) {
+ return getters.currentStructuralElement?.attributes?.['is-link'] === 1;
+ },
oerEnabled(state) {
return state.oerEnabled;
},
--
GitLab