fix #887

Closes #887 and #1257

Merge request studip/studip!871

lib/classes/JsonApi/Routes/Courseware/BlocksShow.php

@@ -18,7 +18,7 @@ class BlocksShow extends JsonApiController
         'container',
         'owner',
         'editor',
-        'edit_blocker',
+        'edit-blocker',
         'user-data-field',
         'user-progress',
     ];

lib/classes/JsonApi/Routes/Courseware/StructuralElementsShow.php

@@ -19,6 +19,7 @@ class StructuralElementsShow extends JsonApiController
         'ancestors',
         'children',
         'containers',
+        'containers.edit-blocker',
         'containers.blocks',
         'containers.blocks.edit-blocker',
         'containers.blocks.editor',
@@ -27,6 +28,7 @@ class StructuralElementsShow extends JsonApiController
         'containers.blocks.user-progress',
         'course',
         'editor',
+        'edit-blocker',
         'owner',
         'parent',
     ];

resources/assets/stylesheets/scss/courseware.scss

@@ -752,6 +752,14 @@ ribbon end
             font-weight: 700;
             line-height: 2em;
             font-size: 1.1em;
+
+            &.cw-default-container-blocker-warning {
+                font-weight: 400;
+            }
+        }
+
+        img {
+            vertical-align: text-bottom;
         }
 
         .cw-container-actions {
@@ -892,6 +900,15 @@ form.cw-container-dialog-edit-form {
         font-weight: 700;
         line-height: 2em;
         font-size: 1.1em;
+
+        &.cw-default-block-invisible-info,
+        &.cw-default-block-blocker-warning {
+            font-weight: 400;
+        }
+    }
+
+    img {
+        vertical-align: text-bottom;
     }
 
     .cw-block-actions {
@@ -1908,6 +1925,9 @@ v i e w  w i d g e t
     .cw-action-widget-trash{
         @include background-icon(trash, clickable);
     }
+    .cw-action-widget-remove-lock{
+        @include background-icon(lock-unlocked, clickable);
+    }
 }
 .cw-export-widget {
     .cw-export-widget-export{

resources/vue/components/courseware/CoursewareAccordionContainer.vue

@@ -4,6 +4,7 @@
         containerClass="cw-container-accordion"
         :canEdit="canEdit"
         :isTeacher="isTeacher"
+        @showEdit="setShowEdit"
         @storeContainer="storeContainer"
         @closeEdit="initCurrentData"
         @sortBlocks="enableSort"
@@ -114,6 +115,7 @@ export default {
     },
     data() {
         return {
+            showEdit: false,
             currentContainer: {},
             currentSections: [],
             unallocatedBlocks: [],
@@ -180,6 +182,9 @@ export default {
 
             this.currentSections = sections;
         },
+        setShowEdit(state) {
+            this.showEdit = state;
+        },
         addSection() {
             this.currentContainer.attributes.payload.sections.push({ name: '', icon: '', blocks: [] });
         },
@@ -243,8 +248,10 @@ export default {
     },
     watch: {
         blocks() {
+            if (!this.showEdit) {
                 this.initCurrentData();
             }
         }
+    }
 };
 </script>

resources/vue/components/courseware/CoursewareActionWidget.vue

@@ -10,12 +10,17 @@
                 <translate>Vollbild einschalten</translate>
             </button>
         </li>
-        <li v-if="canEdit" class="cw-action-widget-edit">
+        <li v-if="canEdit && !blockedByAnotherUser" class="cw-action-widget-edit">
             <button @click="editElement">
                 <translate>Seite bearbeiten</translate>
             </button>
         </li>
-        <li v-if="canEdit" class="cw-action-widget-sort">
+        <li v-if="canEdit && blockedByAnotherUser" class="cw-action-widget-remove-lock">
+            <button @click="removeElementLock">
+                <translate>Sperre aufheben</translate>
+            </button>
+        </li>
+        <li v-if="canEdit && !blockedByAnotherUser" class="cw-action-widget-sort">
             <button @click="sortContainers">
                 <translate>Abschnitte sortieren</translate>
             </button>
@@ -35,7 +40,7 @@
                 <translate>Lesezeichen setzen</translate>
             </button>
         </li>
-        <li v-if="!isRoot && canEdit" class="cw-action-widget-trash">
+        <li v-if="!isRoot && canEdit && !blockedByAnotherUser" class="cw-action-widget-trash">
             <button @click="deleteElement">
                 <translate>Seite löschen</translate>
             </button>
@@ -60,6 +65,11 @@ export default {
             userId: 'userId',
             consumeMode: 'consumeMode',
             showToolbar: 'showToolbar',
+
+            blocked: 'currentElementBlocked',
+            blockerId: 'currentElementBlockerId',
+            blockedByThisUser: 'currentElementBlockedByThisUser',
+            blockedByAnotherUser: 'currentElementBlockedByAnotherUser',
         }),
         isRoot() {
             if (!this.structuralElement) {
@@ -77,18 +87,6 @@ export default {
         currentId() {
             return this.structuralElement?.id;
         },
-        blocked() {
-            return this.structuralElement?.relationships['edit-blocker'].data !== null;
-        },
-        blockerId() {
-            return this.blocked ? this.structuralElement?.relationships['edit-blocker'].data?.id : null;
-        },
-        blockedByThisUser() {
-            return this.blocked && this.userId === this.blockerId;
-        },
-        blockedByAnotherUser() {
-            return this.blocked && this.userId !== this.blockerId;
-        },
         tocText() {
             return this.showToolbar ? this.$gettext('Inhaltsverzeichnis ausblenden') : this.$gettext('Inhaltsverzeichnis anzeigen');
         },
@@ -102,6 +100,7 @@ export default {
             showElementAddDialog: 'showElementAddDialog',
             showElementDeleteDialog: 'showElementDeleteDialog',
             showElementInfoDialog: 'showElementInfoDialog',
+            showElementRemoveLockDialog: 'showElementRemoveLockDialog',
             setStructuralElementSortMode: 'setStructuralElementSortMode',
             companionInfo: 'companionInfo',
             addBookmark: 'addBookmark',
@@ -109,9 +108,11 @@ export default {
             setConsumeMode: 'coursewareConsumeMode',
             setViewMode: 'coursewareViewMode',
             setShowToolbar: 'coursewareShowToolbar',
-            setSelectedToolbarItem: 'coursewareSelectedToolbarItem'
+            setSelectedToolbarItem: 'coursewareSelectedToolbarItem',
+            loadStructuralElement: 'loadStructuralElement',
         }),
         async editElement() {
+            await this.loadStructuralElement(this.currentId);
             if (this.blockedByAnotherUser) {
                 this.companionInfo({ info: this.$gettext('Diese Seite wird bereits bearbeitet.') });
 
@@ -130,10 +131,36 @@ export default {
             }
             this.showElementEditDialog(true);
         },
-        sortContainers() {
+        async removeElementLock() {
+            this.showElementRemoveLockDialog(true);
+        },
+        async sortContainers() {
+            await this.loadStructuralElement(this.currentId);
+            if (this.blockedByAnotherUser) {
+                this.companionInfo({ info: this.$gettext('Diese Seite wird bereits bearbeitet.') });
+
+                return false;
+            }
+            try {
+                await this.lockObject({ id: this.currentId, type: 'courseware-structural-elements' });
+            } catch (error) {
+                if (error.status === 409) {
+                    this.companionInfo({ info: this.$gettext('Diese Seite wird bereits bearbeitet.') });
+                } else {
+                    console.log(error);
+                }
+
+                return false;
+            }
             this.setStructuralElementSortMode(true);
         },
         async deleteElement() {
+            await this.loadStructuralElement(this.currentId);
+            if (this.blockedByAnotherUser) {
+                this.companionInfo({ info: this.$gettextInterpolate('Löschen nicht möglich, da %{blockingUserName} die Seite bearbeitet.', {blockingUserName: this.blockingUserName}) });
+
+                return false;
+            }
             await this.lockObject({ id: this.currentId, type: 'courseware-structural-elements' });
             this.showElementDeleteDialog(true);
         },

resources/vue/components/courseware/CoursewareAudioBlock.vue

@@ -5,6 +5,7 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="true"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -167,11 +168,12 @@
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
 import CoursewareFolderChooser from './CoursewareFolderChooser.vue';
-
+import { blockMixin } from './block-mixin.js';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'courseware-audio-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
         CoursewareFileChooser,

resources/vue/components/courseware/CoursewareBeforeAfterBlock.vue

@@ -5,11 +5,12 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="true"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
             <template #content>
-                <TwentyTwenty :before="currentBeforeUrl" :after="currentAfterUrl" />
+                <TwentyTwenty v-if="!isEmpty" :before="currentBeforeUrl" :after="currentAfterUrl" />
             </template>
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
@@ -61,12 +62,14 @@
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
+import { blockMixin } from './block-mixin.js';
 import TwentyTwenty from 'vue-twentytwenty';
 import 'vue-twentytwenty/dist/vue-twentytwenty.css';
 import { mapActions } from 'vuex';
 
 export default {
     name: 'courseware-before-after-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
         CoursewareFileChooser,
@@ -145,6 +148,7 @@ export default {
             this.currentAfterFile  = this.afterFile;
         });
 
+        this.loadImages();
         this.initCurrentData();
     },
     methods: {
@@ -153,6 +157,23 @@ export default {
             loadFileRefs: 'loadFileRefs',
             companionWarning: 'companionWarning',
         }),
+        loadImages() {
+            this.loadFileRefs(this.block.id).then((response) => {
+                for (let i = 0; i < response.length; i++) {
+                    if (response[i].id === this.beforeFileId) {
+                        this.beforeFile = response[i];
+                    }
+
+                    if (response[i].id === this.afterFileId) {
+                        this.afterFile = response[i];
+                    }
+                }
+
+                this.currentBeforeFile = this.beforeFile;
+                this.currentAfterFile  = this.afterFile;
+            });
+        },
+
         initCurrentData() {
             this.currentBeforeSource = this.beforeSource;
             this.currentBeforeFileId = this.beforeFileId;

resources/vue/components/courseware/CoursewareBlockActions.vue

@@ -6,6 +6,7 @@
             @setVisibility="setVisibility"
             @showInfo="showInfo"
             @deleteBlock="deleteBlock"
+            @removeLock="removeLock"
         />
     </div>
 </template>
@@ -27,32 +28,30 @@ export default {
         },
         block: Object,
     },
-    data() {
-        return {
-            menuItems: [],
-        };
-    },
     computed: {
         ...mapGetters({
             userId: 'userId',
+            userIsTeacher: 'userIsTeacher',
         }),
         blocked() {
-            return this.block?.relationships['edit-blocker'].data !== null;
+            return this.block?.relationships?.['edit-blocker']?.data !== null;
         },
         blockerId() {
-            return this.blocked ? this.block?.relationships['edit-blocker'].data?.id : null;
+            return this.blocked ? this.block?.relationships?.['edit-blocker']?.data?.id : null;
+        },
+        blockedByThisUser() {
+            return this.blocked && this.userId === this.blockerId;
         },
+        blockedByAnotherUser() {
+            return this.blocked && this.userId !== this.blockerId;
         },
-    mounted() {
+        menuItems() {
+            let menuItems = [];
             if (this.canEdit) {
                 if (!this.deleteOnly) {
-                this.menuItems.push({
-                    id: 1,
-                    label: this.$gettext('Block bearbeiten'),
-                    icon: 'edit',
-                    emit: 'editBlock',
-                });
-                this.menuItems.push({
+                    if (!this.blocked) {
+                        menuItems.push({ id: 1, label: this.$gettext('Block bearbeiten'), icon: 'edit', emit: 'editBlock' });
+                        menuItems.push({
                             id: 2,
                             label: this.block.attributes.visible
                                 ? this.$gettext('unsichtbar setzen')
@@ -60,24 +59,38 @@ export default {
                             icon: this.block.attributes.visible ? 'visibility-visible' : 'visibility-invisible', // do we change the icons ?
                             emit: 'setVisibility',
                         });
-                this.menuItems.push({
-                    id: 7,
-                    label: this.$gettext('Informationen zum Block'),
-                    icon: 'info',
-                    emit: 'showInfo',
+                    }
+                    if (this.blocked && this.blockedByAnotherUser && this.userIsTeacher) {
+                        menuItems.push({
+                            id: 8,
+                            label: this.$gettext('Sperre aufheben'),
+                            icon: 'lock-unlocked',
+                            emit: 'removeLock',
                         });
                     }
-            this.menuItems.push({
+                    if (!this.blocked || this.blockedByThisUser) {
+                        menuItems.push({
                             id: 9,
                             label: this.$gettext('Block löschen'), 
                             icon: 'trash',
-                emit: 'deleteBlock',
+                            emit: 'deleteBlock' 
                         });
                     }
-
-        this.menuItems.sort((a, b) => {
+                    menuItems.push({
+                        id: 7,
+                        label: this.$gettext('Informationen zum Block'),
+                        icon: 'info',
+                        emit: 'showInfo',
+                    });
+                }
+            }
+            menuItems.sort((a, b) => {
                 return a.id > b.id ? 1 : b.id > a.id ? -1 : 0;
             });
+
+            return menuItems;
+        }
+
     },
     methods: {
         ...mapActions({
@@ -116,12 +129,12 @@ export default {
 
             await this.unlockObject({ id: this.block.id, type: 'courseware-blocks' });
         },
-        copyToClipboard() {
-            // use JSONAPI to copy to clipboard
-        },
         deleteBlock() {
             this.$emit('deleteBlock');
         },
+        removeLock() {
+            this.$emit('removeLock');
+        }
     },
 };
 </script>

resources/vue/components/courseware/CoursewareCanvasBlock.vue

@@ -5,6 +5,7 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="true"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -147,11 +148,12 @@
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
 import CoursewareFolderChooser from './CoursewareFolderChooser.vue';
-
+import { blockMixin } from './block-mixin.js';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'courseware-canvas-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
         CoursewareFileChooser,
@@ -261,6 +263,7 @@ export default {
             this.initCurrentData();
             this.buildCanvas();
         });
+        this.loadImageFile();
     },
     methods: {
         ...mapActions({
@@ -286,6 +289,14 @@ export default {
                 this.Text = JSON.parse(this.canvasDraw.Text);
             }
         },
+        loadImageFile() {
+            this.loadFileRefs(this.block.id).then((response) => {
+                this.file = response[0];
+                this.currentFile = this.file;
+                this.initCurrentData();
+                this.buildCanvas();
+            });
+        },
         updateCurrentFile(file) {
             this.currentFile = file;
             this.currentFileId = file.id;

resources/vue/components/courseware/CoursewareChartBlock.vue

@@ -5,6 +5,7 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="true"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -84,12 +85,14 @@
 
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
+import { blockMixin } from './block-mixin.js';
 import Chart from 'chart.js';
 import { mapActions } from 'vuex';
 import StudipIcon from '../StudipIcon.vue';
 
 export default {
     name: 'courseware-chart-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
         StudipIcon,

resources/vue/components/courseware/CoursewareCodeBlock.vue

@@ -5,6 +5,7 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="true"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -35,12 +36,14 @@
 
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
+import { blockMixin } from './block-mixin.js';
 import hljs from 'highlight.js';
 
 import { mapActions } from 'vuex';
 
 export default {
     name: 'courseware-code-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
     },

resources/vue/components/courseware/CoursewareConfirmBlock.vue

@@ -6,6 +6,7 @@
             :isTeacher="isTeacher"
             :preview="true"
             :defaultGrade="false"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >

resources/vue/components/courseware/CoursewareContainerActions.vue

@@ -5,11 +5,13 @@
             @editContainer="editContainer"
             @deleteContainer="deleteContainer"
             @sortBlocks="sortBlocks"
+            @removeLock="removeLock"
         />
     </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
     name: 'courseware-container-actions',
     props: {
@@ -17,20 +19,47 @@ export default {
         container: Object,
     },
     computed: {
+        ...mapGetters({
+            userId: 'userId',
+            userIsTeacher: 'userIsTeacher',
+        }),
+        blocked() {
+            return this.container?.relationships?.['edit-blocker']?.data !== null;
+        },
+        blockerId() {
+            return this.blocked ? this.container?.relationships?.['edit-blocker']?.data?.id : null;
+        },
+        blockedByThisUser() {
+            return this.blocked && this.userId === this.blockerId;
+        },
+        blockedByAnotherUser() {
+            return this.blocked && this.userId !== this.blockerId;
+        },
         menuItems() {
-            if (this.container.attributes["container-type"] === 'list') {
-                return [
-                    { id: 1, label: this.$gettext('Blöcke sortieren'), icon: 'arr_1sort', emit: 'sortBlocks' },
-                    { id: 2, label: this.$gettext('Abschnitt löschen'), icon: 'trash', emit: 'deleteContainer' }
-                ];
-            } else {
-                return [
-                    { id: 1, label: this.$gettext('Abschnitt bearbeiten'), icon: 'edit', emit: 'editContainer' },
-                    { id: 2, label: this.$gettext('Blöcke sortieren'), icon: 'arr_1sort', emit: 'sortBlocks' },
-                    { id: 3, label: this.$gettext('Abschnitt löschen'), icon: 'trash', emit: 'deleteContainer' },
-                ];
+            let menuItems = [];
+            if (!this.blockedByAnotherUser) {
+                if (this.container.attributes["container-type"] !== 'list') {
+                    menuItems.push({ id: 1, label: this.$gettext('Abschnitt bearbeiten'), icon: 'edit', emit: 'editContainer' });
+                }
+                menuItems.push({ id: 2, label: this.$gettext('Blöcke sortieren'), icon: 'arr_1sort', emit: 'sortBlocks' });
+                menuItems.push({ id: 3, label: this.$gettext('Abschnitt löschen'), icon: 'trash', emit: 'deleteContainer' });
             }
+
+            if (this.blocked && this.blockedByAnotherUser && this.userIsTeacher) {
+                menuItems.push({
+                    id: 4,
+                    label: this.$gettext('Sperre aufheben'),
+                    icon: 'lock-unlocked',
+                    emit: 'removeLock',
+                });
+            }
+
+            menuItems.sort((a, b) => {
+                return a.id > b.id ? 1 : b.id > a.id ? -1 : 0;
+            });
+            return menuItems;
         },
+
     },
     methods: {
         menuAction(action) {
@@ -44,6 +73,9 @@ export default {
         },
         sortBlocks() {
             this.$emit('sortBlocks');
+        },
+        removeLock() {
+            this.$emit('removeLock');
         }
     },
 };

resources/vue/components/courseware/CoursewareDateBlock.vue

@@ -5,6 +5,7 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="true"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -84,9 +85,10 @@
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import { mapActions } from 'vuex';
-
+import { blockMixin } from './block-mixin.js';
 export default {
     name: 'courseware-date-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
     },
@@ -196,8 +198,6 @@ export default {
                     containerId: this.block.relationships.container.data.id,
                 });
             }
-
-
         },
     },
 };

resources/vue/components/courseware/CoursewareDefaultBlock.vue

@@ -3,12 +3,15 @@
         <div class="cw-content-wrapper" :class="[showEditMode ? 'cw-content-wrapper-active' : '']">
             <header v-if="showEditMode" class="cw-block-header">
                 <span class="cw-sortable-handle"></span>
-                <span v-if="!block.attributes.visible" class="cw-default-block-invisible-info">
-                    <studip-icon shape="visibility-invisible" />
-                </span>
+                <studip-icon v-if="!block.attributes.visible" shape="visibility-invisible" />
+                <studip-icon v-if="blockedByAnotherUser" shape="lock-locked" />
                 <span>{{ blockTitle }}</span>
+                <span v-if="blockedByAnotherUser" class="cw-default-block-blocker-warning">
+                    | {{ $gettextInterpolate('wird im Moment von %{ userName } bearbeitet', { userName: this.blockingUserName }) }}
+                </span>
+
                 <span v-if="!block.attributes.visible" class="cw-default-block-invisible-info">
-                    (<translate>unsichtbar für Nutzende ohne Schreibrecht</translate>)
+                    | {{ $gettext('unsichtbar für Nutzende ohne Schreibrecht') }}
                 </span>
                 <courseware-block-actions
                     :block="block"
@@ -18,6 +21,7 @@
                     @showInfo="displayFeature('Info')"
                     @showExportOptions="displayFeature('ExportOptions')"
                     @deleteBlock="displayDeleteDialog()"
+                    @removeLock="displayRemoveLockDialog()"
                 />
             </header>
             <div v-if="showContent" class="cw-block-content">
@@ -59,8 +63,18 @@
             height="180"
             width="360"
             @confirm="executeDelete"
-            @close="showDeleteDialog = false"
+            @close="closeDeleteDialog"
         ></studip-dialog>
+        <studip-dialog
+            v-if="showRemoveLockDialog"
+            :title="textRemoveLockTitle"
+            :question="textRemoveLockAlert"
+            height="200"
+            width="450"
+            @confirm="executeRemoveLock"
+            @close="showRemoveLockDialog = false"
+        ></studip-dialog>
+
     </div>
 </template>
 
@@ -118,15 +132,19 @@ export default {
             showContent: true,
             showEditModeShortcut: false,
             showDeleteDialog: false,
+            showRemoveLockDialog: false,
             currentComments: [],
             textDeleteTitle: this.$gettext('Block unwiderruflich löschen'),
             textDeleteAlert: this.$gettext('Möchten Sie diesen Block wirklich löschen?'),
+            textRemoveLockTitle: this.$gettext('Sperre aufheben'),
+            textRemoveLockAlert: this.$gettext('Möchten Sie die Sperre dieses Blocks wirklich aufheben?'),
         };
     },
     computed: {
         ...mapGetters({
             blockTypes: 'blockTypes',
             userId: 'userId',
+            userById: 'users/byId',
             viewMode: 'viewMode',
             containerById: 'courseware-containers/byId',
         }),
@@ -141,10 +159,10 @@ export default {
             return this.viewMode === 'discuss';
         },
         blocked() {
-            return this.block?.relationships['edit-blocker'].data !== null;
+            return this.block?.relationships?.['edit-blocker']?.data !== null;
         },
         blockerId() {
-            return this.blocked ? this.block?.relationships['edit-blocker'].data?.id : null;
+            return this.blocked ? this.block?.relationships?.['edit-blocker']?.data?.id : null;
         },
         blockedByThisUser() {
             return this.blocked && this.userId === this.blockerId;
@@ -152,6 +170,16 @@ export default {
         blockedByAnotherUser() {
             return this.blocked && this.userId !== this.blockerId;
         },
+        blockingUser() {
+            if (this.blockedByAnotherUser) {
+                return this.userById({id: this.blockerId});
+            }
+
+            return null;
+        },
+        blockingUserName() {
+            return this.blockingUser ? this.blockingUser.attributes['formatted-name'] : '';
+        },
         blockTitle() {
             const type = this.block.attributes['block-type'];
 
@@ -171,10 +199,12 @@ export default {
     methods: {
         ...mapActions({
             companionInfo: 'companionInfo',
+            companionWarning: 'companionWarning',
             deleteBlock: 'deleteBlockInContainer',
             lockObject: 'lockObject',
             unlockObject: 'unlockObject',
             loadContainer: 'loadContainer',
+            loadBlock: 'courseware-blocks/loadById',
             updateContainer: 'updateContainer',
         }),
         async displayFeature(element) {
@@ -188,26 +218,16 @@ export default {
             this.showContent = true;
             if (element) {
                 if (element === 'Edit') {
-                    await this.loadContainer(this.block.relationships.container.data.id);
+                    await this.loadBlock({ id: this.block.id, options: { include: 'edit-blocker' } });
                     if (!this.blocked) {
-                        try {
                         await this.lockObject({ id: this.block.id, type: 'courseware-blocks' });
-                        } catch(error) {
-                            if (error.status === 403) {
-                                this.companionInfo({ info: this.$gettext('Dieser Block wird bereits bearbeitet.') });
-                            } else {
-                                console.log(error);
-                            }
-
-                            return false;
-                        }
                         if (!this.preview) {
                             this.showContent = false;
                         }
                         this['show' + element] = true;
                         this.showFeatures = true;
                     } else {
-                        if (this.userId === this.blockerId) {
+                        if (this.blockedByThisUser) {
                             if (!this.preview) {
                                 this.showContent = false;
                             }
@@ -223,25 +243,64 @@ export default {
                 }
             }
         },
+        prepareStoreEdit() {
+            // storeEdit is only emitted when the block is not in deleting process.
+            if (!this.showDeleteDialog) {
+                this.storeBlock();
+            }
+        },
+        async storeBlock() {
+            await this.loadBlock({ id: this.block.id, options: { include: 'edit-blocker' } });
+
+            if (this.blockedByThisUser) {
+                this.$emit('storeEdit');
+            }
+
+            if (this.blockedByAnotherUser) {
+                this.companionWarning({ info: this.$gettextInterpolate('Ihre Änderungen konnten nicht gespeichert werden, da %{blockingUserName} die Bearbeitung übernommen hat.', {blockingUserName: this.blockingUserName}) });
+                this.displayFeature(false);
+                this.$emit('closeEdit');
+            }
+            if (this.blockerId === null) {
+                await this.lockObject({ id: this.block.id, type: 'courseware-blocks' });
+                this.$emit('storeEdit');
+            }
+        },
         async closeEdit() {
+            await this.loadBlock({ id: this.block.id , options: { include: 'edit-blocker' } }); // has block editor lock changed?
             this.displayFeature(false);
             this.$emit('closeEdit');
+            if (this.blockedByThisUser) {
                 await this.unlockObject({ id: this.block.id, type: 'courseware-blocks' });
-            this.loadContainer(this.block.relationships.container.data.id); // to update block editor lock
+            }
+            this.loadBlock({ id: this.block.id , options: { include: 'edit-blocker' } }); // to update block editor lock
         },
         async displayDeleteDialog() {
+            await this.loadBlock({ id: this.block.id, options: { include: 'edit-blocker' } });
             if (!this.blocked) {
                 await this.lockObject({ id: this.block.id, type: 'courseware-blocks' });
                 this.showDeleteDialog = true;
             } else {
-                if (this.userId === this.blockerId) {
+                if (this.blockedByThisUser) {
                     this.showDeleteDialog = true;
                 } else {
-                    this.companionInfo({ info: 'Dieser Block wird bereits bearbeitet.' });
+                    this.companionInfo({ info: this.$gettextInterpolate('Löschen nicht möglich, da %{blockingUserName} den Block bearbeitet.', {blockingUserName: this.blockingUserName}) });
+                }
             }
+        },
+        async closeDeleteDialog() {
+            await this.loadBlock({ id: this.block.id, options: { include: 'edit-blocker' } });
+            if (this.blockedByThisUser) {
+                await this.unlockObject({ id: this.block.id, type: 'courseware-blocks' });
             }
+            this.showDeleteDialog = false;
         },
         async executeDelete() {
+            await this.loadBlock({ id: this.block.id, options: { include: 'edit-blocker' } });
+            if (this.blockedByAnotherUser) {
+                this.companionInfo({ info: this.$gettextInterpolate('Löschen nicht möglich, da %{blockingUserName} die Bearbeitung übernommen hat.', {blockingUserName: this.blockingUserName}) });
+                return false;
+            }
             const containerId = this.block.relationships.container.data.id;
             await this.loadContainer(containerId);
             let container = this.containerById({id: containerId});
@@ -273,13 +332,20 @@ export default {
                 containerId: containerId,
             });
         },
+        displayRemoveLockDialog() {
+            this.showRemoveLockDialog = true;
+        },
+        async executeRemoveLock() {
+            await this.unlockObject({ id: this.block.id , type: 'courseware-blocks' });
+            await this.loadBlock({ id: this.block.id });
+            this.showRemoveLockDialog = false;
+        }
 
-        prepareStoreEdit() {
-            // storeEdit is only emitted when the block is not in deleting process.
-            if (!this.showDeleteDialog) {
-                this.$emit('storeEdit');
+    },
+    watch: {
+        showEdit(state) {
+            this.$emit('showEdit', state);
         }
     }
-    },
 };
 </script>

resources/vue/components/courseware/CoursewareDefaultContainer.vue

@@ -5,13 +5,18 @@
     >
         <div class="cw-container-content">
             <header v-if="showEditMode && canEdit" class="cw-container-header">
+                <studip-icon v-if="blockedByAnotherUser" shape="lock-locked" />
                 <span>{{ container.attributes.title }} ({{container.attributes.width}})</span>
+                <span v-if="blockedByAnotherUser" class="cw-default-container-blocker-warning">
+                    | {{ $gettextInterpolate('wird im Moment von %{ userName } bearbeitet', { userName: this.blockingUserName }) }}
+                </span>
                 <courseware-container-actions
                     :canEdit="canEdit"
                     :container="container"
                     @editContainer="displayEditDialog"
                     @deleteContainer="displayDeleteDialog"
                     @sortBlocks="sortBlocks"
+                    @removeLock="displayRemoveLockDialog"
                 />
             </header>
             <div class="cw-block-wrapper" :class="{ 'cw-block-wrapper-active': showEditMode }">
@@ -44,6 +49,17 @@
                 @confirm="executeDelete"
                 @close="closeDeleteDialog"
             ></studip-dialog>
+
+            <studip-dialog
+                v-if="showRemoveLockDialog"
+                :title="textRemoveLockTitle"
+                :question="textRemoveLockAlert"
+                height="200"
+                width="450"
+                @confirm="executeRemoveLock"
+                @close="showRemoveLockDialog = false"
+            ></studip-dialog>
+
         </div>
     </div>
 </template>
@@ -69,16 +85,20 @@ export default {
         return {
             showDeleteDialog: false,
             showEditDialog: false,
+            showRemoveLockDialog: false,
             textEditConfirm: this.$gettext('Speichern'),
             textEditClose: this.$gettext('Schließen'),
             textEditTitle: this.$gettext('Abschnitt bearbeiten'),
             textDeleteTitle: this.$gettext('Abschnitt unwiderruflich löschen'),
             textDeleteAlert: this.$gettext('Möchten Sie diesen Abschnitt wirklich löschen?'),
+            textRemoveLockTitle: this.$gettext('Sperre aufheben'),
+            textRemoveLockAlert: this.$gettext('Möchten Sie die Sperre dieses Abschnitts wirklich aufheben?'),
         };
     },
     computed: {
         ...mapGetters({
             userId: 'userId',
+            userById: 'users/byId',
         }),
         showEditMode() {
             return this.$store.getters.viewMode === 'edit';
@@ -87,10 +107,10 @@ export default {
             return this.container.attributes.payload.colspan ? this.container.attributes.payload.colspan : 'full';
         },
         blocked() {
-            return this.container?.relationships['edit-blocker'].data !== null;
+            return this.container?.relationships?.['edit-blocker']?.data !== null;
         },
         blockerId() {
-            return this.blocked ? this.container?.relationships['edit-blocker'].data?.id : null;
+            return this.blocked ? this.container?.relationships?.['edit-blocker']?.data?.id : null;
         },
         blockedByThisUser() {
             return this.blocked && this.userId === this.blockerId;
@@ -98,53 +118,88 @@ export default {
         blockedByAnotherUser() {
             return this.blocked && this.userId !== this.blockerId;
         },
+        blockingUser() {
+            if (this.blockedByAnotherUser) {
+                return this.userById({id: this.blockerId});
+            }
+
+            return null;
+        },
+        blockingUserName() {
+            return this.blockingUser ? this.blockingUser.attributes['formatted-name'] : '';
+        },
     },
     methods: {
         ...mapActions({
+            companionInfo: 'companionInfo',
+            companionWarning: 'companionWarning',
+            loadContainer: 'courseware-containers/loadById',
             deleteContainer: 'deleteContainer',
             lockObject: 'lockObject',
             unlockObject: 'unlockObject',
             companionInfo: 'companionInfo',
         }),
         async displayEditDialog() {
+            await this.loadContainer({ id: this.container.id, options: { include: 'edit-blocker' } });
             if (this.blockedByAnotherUser) {
                 this.companionInfo({ info: this.$gettext('Dieser Abschnitt wird bereits bearbeitet.') });
 
                 return false;
             }
-            try {
-                await this.lockObject({ id: this.container.id, type: 'courseware-containers' });
-            } catch(error) {
-                if (error.status === 409) {
-                    this.companionInfo({ info: this.$gettext('Dieser Abschnitt wird bereits bearbeitet.') });
-                } else {
-                    console.log(error);
-                }
-
-                return false;
-            }
 
+            await this.lockObject({ id: this.container.id, type: 'courseware-containers' });
             this.showEditDialog = true;
         },
         async closeEdit() {
+            await this.loadContainer({ id: this.container.id });
             this.$emit('closeEdit');
             this.showEditDialog = false;
+            if (this.blockedByThisUser) {
                 await this.unlockObject({ id: this.container.id, type: 'courseware-containers' });
+            }
+            await this.loadContainer({ id: this.container.id, options: { include: 'edit-blocker' } });
         },
         async storeContainer() {
+            await this.loadContainer({ id: this.container.id, options: { include: 'edit-blocker' } });
+            if (this.blockedByThisUser) {
+                this.$emit('storeContainer');
+            }
+            if (this.blockedByAnotherUser) {
+                this.companionWarning({ info: this.$gettextInterpolate('Ihre Änderungen konnten nicht gespeichert werden, da %{blockingUserName} die Bearbeitung übernommen hat.', {blockingUserName: this.blockingUserName}) });
+                this.$emit('closeEdit');
+            }
+            if (this.blockerId === null) {
+                await this.lockObject({ id: this.container.id, type: 'courseware-containers' });
                 this.$emit('storeContainer');
+            }
             this.showEditDialog = false;
-            // await this.unlockObject({ id: this.container.id, type: 'courseware-containers' });
         },
         async displayDeleteDialog() {
+            await this.loadContainer({ id: this.container.id, options: { include: 'edit-blocker' } });
+            if (!this.blocked) {
                 await this.lockObject({ id: this.container.id, type: 'courseware-containers' });
                 this.showDeleteDialog = true;
+            } else {
+                if (this.blockedByThisUser) {
+                    this.showDeleteDialog = true;
+                } else {
+                    this.companionInfo({ info: this.$gettextInterpolate('Löschen nicht möglich, da %{blockingUserName} den Abschnitt bearbeitet.', {blockingUserName: this.blockingUserName}) });
+                }
+            }
         },
         async closeDeleteDialog() {
+            await this.loadContainer({ id: this.container.id, options: { include: 'edit-blocker' } });
+            if (this.blockedByThisUser) {
                 await this.unlockObject({ id: this.container.id, type: 'courseware-containers' });
+            }
             this.showDeleteDialog = false;
         },
         async executeDelete() {
+            await this.loadContainer({ id: this.container.id, options: { include: 'edit-blocker' } });
+            if (this.blockedByAnotherUser) {
+                this.companionInfo({ info: this.$gettextInterpolate('Löschen nicht möglich, da %{blockingUserName} die Bearbeitung übernommen hat.', {blockingUserName: this.blockingUserName}) });
+                return false;
+            }
             await this.deleteContainer({
                 containerId: this.container.id,
                 structuralElementId: this.container.relationships['structural-element'].data.id,
@@ -155,24 +210,31 @@ export default {
             this.showDeleteDialog = false;
         },
         async sortBlocks() {
+            await this.loadContainer({ id: this.container.id, options: { include: 'edit-blocker' } });
             if (this.blockedByAnotherUser) {
                 this.companionInfo({ info: this.$gettext('Dieser Abschnitt wird bereits bearbeitet.') });
 
                 return false;
             }
-            try {
             await this.lockObject({ id: this.container.id, type: 'courseware-containers' });
-            } catch(error) {
-                if (error.status === 409) {
-                    this.companionInfo({ info: this.$gettext('Dieser Abschnitt wird bereits bearbeitet.') });
-                } else {
-                    console.log(error);
-                }
+            this.$emit('sortBlocks');
+        },
+        displayRemoveLockDialog() {
+            this.showRemoveLockDialog = true;
+        },
+        async executeRemoveLock() {
+            await this.unlockObject({ id: this.container.id , type: 'courseware-containers' });
+            await this.loadContainer({ id: this.container.id });
+            this.showRemoveLockDialog = false;
+        },
 
-                return false;
+    },
+
+    watch: {
+        showEditDialog(state) {
+            this.$emit('showEdit', state);
         }
-            this.$emit('sortBlocks');
     }
-    },
+
 };
 </script>

resources/vue/components/courseware/CoursewareDialogCardsBlock.vue

@@ -5,6 +5,7 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="true"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -117,12 +118,13 @@ import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
 import CoursewareTabs from './CoursewareTabs.vue';
 import CoursewareTab from './CoursewareTab.vue';
-
+import { blockMixin } from './block-mixin.js';
 import { mapActions } from 'vuex';
 import StudipIcon from '../StudipIcon.vue';
 
 export default {
     name: 'courseware-dialog-cards-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
         CoursewareFileChooser,

resources/vue/components/courseware/CoursewareDocumentBlock.vue

@@ -5,6 +5,7 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="false"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -69,6 +70,7 @@
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
+import { blockMixin } from './block-mixin.js';
 import * as pdfjsLib from 'pdfjs-dist';
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
 
@@ -76,6 +78,7 @@ import { mapActions } from 'vuex';
 
 export default {
     name: 'courseware-document-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
         CoursewareFileChooser,
@@ -256,7 +259,6 @@ export default {
                     containerId: this.block.relationships.container.data.id,
                 });
             }
-
         },
     },
 };

resources/vue/components/courseware/CoursewareDownloadBlock.vue

@@ -6,6 +6,7 @@
             :isTeacher="isTeacher"
             :preview="true"
             :defaultGrade="false"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -77,11 +78,12 @@
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
-
+import { blockMixin } from './block-mixin.js';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'courseware-download-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
         CoursewareFileChooser,

resources/vue/components/courseware/CoursewareEmbedBlock.vue

@@ -5,6 +5,7 @@
             :canEdit="canEdit"
             :isTeacher="isTeacher"
             :preview="false"
+            @showEdit="initCurrentData"
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
@@ -87,11 +88,12 @@
 
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
-
+import { blockMixin } from './block-mixin.js';
 import { mapActions } from 'vuex';
 
 export default {
     name: 'courseware-embed-block',
+    mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
     },
@@ -245,5 +247,6 @@ export default {
             });
         },
     },
+
 };
 </script>