fix #904

Closes #904

resources/vue/components/courseware/CoursewareDialogCardsBlock.vue

@@ -58,6 +58,7 @@
                 <button class="button add" @click="addCard"><translate>Karte hinzufügen</translate></button>
                 <courseware-tabs
                     v-if="currentCards.length > 0"
+                    :setSelected="setCardTab"
                     @selectTab="activateCard(parseInt($event.name.replace($gettext('Karte') +  ' ', '')) - 1)"
                 >
                     <courseware-tab
@@ -135,6 +136,7 @@ export default {
     data() {
         return {
             currentCards: [],
+            setCardTab: 0
         };
     },
     computed: {
@@ -170,7 +172,7 @@ export default {
             if (this.cards !== '') {
                 this.currentCards = JSON.parse(JSON.stringify(this.cards));
             }
-            this.activateCard(0);
+            this.setCardTab = 0;
         },
         storeBlock() {
             let cards = JSON.parse(JSON.stringify(this.currentCards));
@@ -214,7 +216,7 @@ export default {
             this.currentCards = this.currentCards.filter((val, index) => {
                 return !(index === cardIndex);
             });
-            this.activateCard(0);
+            this.$nextTick(() => { this.setCardTab = 0; });
         },
         flipCard(event) {
             event.currentTarget.classList.toggle('is-flipped');
@@ -226,6 +228,7 @@ export default {
                     if (view.currentCards.length > index + 1) {
                         card.active = false;
                         view.currentCards[index + 1].active = true;
+                        view.setCardTab = index + 1;
                     }
                     return false; // end every
                 } else {
@@ -240,6 +243,7 @@ export default {
                     if (index > 0) {
                         card.active = false;
                         view.currentCards[index - 1].active = true;
+                        view.setCardTab = index - 1;
                     }
                     return false; // end every
                 } else {

resources/vue/components/courseware/CoursewareTabs.vue

@@ -29,6 +29,9 @@
 <script>
 export default {
     name: 'courseware-tabs',
+    props: {
+        setSelected: { type: Number, required: false, default: 0 }
+    },
     data() {
         return {
             tabs: [],
@@ -56,6 +59,17 @@ export default {
                 }
             });
         },
+        selectTabByIndex(selectedIndex) {
+            let view = this;
+            this.tabs.forEach((tab) => {
+                tab.isActive = false;
+                if (tab.index === selectedIndex) {
+                    tab.isActive = true;
+                    view.$refs[tab.selectorId][0].focus();
+                    view.$emit('selectTab', tab);
+                }
+            });
+        },
         handleKeyEvent(e) {
             let tablist = e.target.parentElement;
             switch (e.keyCode) {
@@ -114,6 +128,11 @@ export default {
             }
             return null;
         }
+    },
+    watch: {
+        setSelected(tab) {
+            this.selectTabByIndex(tab);
+        }
     }
 };
 </script>