From db83d5f82a20923ccfddd5e7fdd8afaad4fb8474 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 28 Jan 2021 16:17:03 +0200
Subject: [PATCH] Fix: Tabs and tab headers no longer lose sync when changing
 characters

---
 app/imports/ui/creature/character/CharacterSheet.vue   |  2 +-
 .../ui/creature/character/CharacterSheetToolbar.vue    |  2 +-
 app/imports/ui/vuexStore.js                            | 10 ++++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/imports/ui/creature/character/CharacterSheet.vue b/app/imports/ui/creature/character/CharacterSheet.vue
index a4d3ccae..911908d4 100644
--- a/app/imports/ui/creature/character/CharacterSheet.vue
+++ b/app/imports/ui/creature/character/CharacterSheet.vue
@@ -35,7 +35,7 @@
         class="fill-height"
       >
         <v-tabs-items
-          :value="$store.state.characterSheetTabs[$route.params.id]"
+          :value="$store.getters.tabById($route.params.id)"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
             {id: $route.params.id, tab: e}
diff --git a/app/imports/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
index b6930548..7e08886c 100644
--- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue
+++ b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
@@ -81,7 +81,7 @@
           centered
           grow
           max="100px"
-          :value="$store.state.characterSheetTabs[$route.params.id]"
+          :value="$store.getters.tabById($route.params.id)"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
             {id: $route.params.id, tab: e}
diff --git a/app/imports/ui/vuexStore.js b/app/imports/ui/vuexStore.js
index 92f4a915..497235a4 100644
--- a/app/imports/ui/vuexStore.js
+++ b/app/imports/ui/vuexStore.js
@@ -17,6 +17,16 @@ const store = new Vuex.Store({
     characterSheetTabs: {},
     showBuildDialog: false,
   },
+  getters: {
+    // ...
+    tabById: (state) => (id) => {
+      if (id in state.characterSheetTabs){
+        return state.characterSheetTabs[id];
+      } else {
+        return 0;
+      }
+    }
+  },
   mutations: {
     toggleDrawer (state) {
       state.drawer = !state.drawer;