Biest#292

resources/vue/components/courseware/CoursewareAccordionContainer.vue

@@ -121,8 +121,7 @@ export default {
             unlockObject: 'unlockObject',
         }),
         initCurrentData() {
-            // clone container to make edit reversible
-            this.currentContainer = JSON.parse(JSON.stringify(this.container));
+            this.currentContainer = _.cloneDeep(this.container);
 
             let view = this;
             let sections = this.currentContainer.attributes.payload.sections;
@@ -157,6 +156,9 @@ export default {
             this.currentContainer.attributes.payload.sections.splice(index, 1);
         },
         async storeContainer() {
+            this.currentContainer.attributes.payload.sections.forEach(section => {
+                section.blocks = section.blocks.map((block) => {return block.id;});
+            });
             await this.updateContainer({
                 container: this.currentContainer,
                 structuralElementId: this.currentContainer.relationships['structural-element'].data.id,
@@ -165,7 +167,10 @@ export default {
             this.initCurrentData();
         },
         component(block) {
-            return 'courseware-' + block.attributes["block-type"] + '-block';
+            if (block.attributes) {
+                return 'courseware-' + block.attributes["block-type"] + '-block';
+            }
+            return null;
         },
         updateContent(blockAdder) {
             if(blockAdder.container.id === this.container.id) {
@@ -173,5 +178,10 @@ export default {
             }
         }
     },
+    watch: {
+        blocks() {
+            this.initCurrentData();
+        }
+    }
 };
 </script>

resources/vue/components/courseware/CoursewareCollapsibleBox.vue

 <template>
     <div class="cw-collapsible" :class="{ 'cw-collapsible-open': isOpen }">
         <header :class="{ 'cw-collapsible-open': isOpen }" class="cw-collapsible-title" @click="isOpen = !isOpen">
-            <studip-icon v-if="icon !== ''" :shape="icon" /> {{ title }}
+            <studip-icon v-if="icon" :shape="icon" /> {{ title }}
         </header>
         <div class="cw-collapsible-content" :class="{ 'cw-collapsible-content-open': isOpen }">
             <slot></slot>

resources/vue/components/courseware/CoursewareListContainer.vue

@@ -56,6 +56,7 @@ export default {
             if (block.attributes["block-type"] !== undefined) {
                 return 'courseware-' + block.attributes["block-type"] + '-block';
             }
+            return null;
         },
     },
     mounted() {},

resources/vue/components/courseware/CoursewareTabsContainer.vue

@@ -128,8 +128,7 @@ export default {
             unlockObject: 'unlockObject',
         }),
         initCurrentData() {
-            // clone container to make edit reversible
-            this.currentContainer = JSON.parse(JSON.stringify(this.container));
+            this.currentContainer = _.cloneDeep(this.container);
 
             let view = this;
             let sections = this.currentContainer.attributes.payload.sections;
@@ -164,6 +163,10 @@ export default {
             this.currentContainer.attributes.payload.sections.splice(index, 1);
         },
         async storeContainer() {
+            this.currentContainer.attributes.payload.sections.forEach(section => {
+                section.blocks = section.blocks.map((block) => {return block.id;});
+            });
+
             await this.updateContainer({
                 container: this.currentContainer,
                 structuralElementId: this.currentContainer.relationships['structural-element'].data.id,
@@ -174,9 +177,8 @@ export default {
         component(block) {
             if (block.attributes) {
                 return 'courseware-' + block.attributes["block-type"] + '-block';
-            } else {
-                console.debug(block);
             }
+            return null;
         },
         updateContent(blockAdder) {
             if(blockAdder.container.id === this.container.id) {