diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index 451861b39d96f089654ff31b4af6b44a1901838c..8e5e50ede8e0258afdfeb9516024e1b4df5c275a 100755 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -1348,11 +1348,11 @@ $icons: ( .cw-tabs { .cw-tab { - visibility: hidden; + display: none; height: 0; &.cw-tab-active { - visibility: visible; + display: block; height: unset; } } diff --git a/resources/vue/components/courseware/CoursewareTabsContainer.vue b/resources/vue/components/courseware/CoursewareTabsContainer.vue index 950cabb98a4136f21d4ec0c16a731992a9d87f79..397c7e0cd2803c7e6dd4e9b3b3c6538fdb92b592 100755 --- a/resources/vue/components/courseware/CoursewareTabsContainer.vue +++ b/resources/vue/components/courseware/CoursewareTabsContainer.vue @@ -10,7 +10,7 @@ <template v-slot:containerContent> <courseware-tabs> <courseware-tab - v-for="(section, index) in container.attributes.payload.sections" + v-for="(section, index) in currentSections" :key="index" :index="index" :name="section.name" @@ -18,7 +18,7 @@ :selected="index === 0" > <ul class="cw-container-tabs-block-list"> - <li v-for="block in blocks" :key="block.id" class="cw-block-item"> + <li v-for="block in section.blocks" :key="block.id" class="cw-block-item"> <component v-if="section.blocks.includes(block.id)" :is="component(block)" @@ -96,7 +96,8 @@ export default { }, data() { return { - currentContainer: {}, + currentContainer: null, + currentSections: [], textDeleteSection: this.$gettext('Sektion entfernen'), selectAttributes: {'ref': 'openIndicator', 'role': 'presentation', 'class': 'vs__open-indicator'} }; @@ -130,6 +131,14 @@ export default { initCurrentData() { // clone container to make edit reversible this.currentContainer = JSON.parse(JSON.stringify(this.container)); + + let view = this; + let sections = this.currentContainer.attributes.payload.sections; + sections.forEach(section => { + section.blocks = section.blocks.map((id) => view.blockById({id})); + }); + + this.currentSections = sections; }, addSection() { this.currentContainer.attributes.payload.sections.push({ name: '', icon: '', blocks: [] }); @@ -164,7 +173,11 @@ export default { this.initCurrentData(); }, component(block) { - return 'courseware-' + block.attributes["block-type"] + '-block'; + if (block.attributes) { + return 'courseware-' + block.attributes["block-type"] + '-block'; + } else { + console.debug(block); + } }, updateContent(blockAdder) { if(blockAdder.container.id === this.container.id) { @@ -172,5 +185,10 @@ export default { } } }, + watch: { + blocks() { + this.initCurrentData(); + } + } }; </script>