De-duplicate HTML for tab content, add way for tab to request scroll to top

webapp/src/components/appContent.vue

@@ -56,29 +56,20 @@
     </div>
 
     <!-- Corresponding vertical tab content -->
-    <div id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
-      <!-- For each top tab -->
+    <div
+      id="container-left"
+      ref="containerLeft"
+      class="uk-padding-remove uk-height-1-1 uk-width-expand"
+    >
       <tabContent
-        v-for="item in topTabs"
+        v-for="item in allTabs"
         :id="item.id + '-tab-content'"
         :key="item.id + '-tab-content'"
         :tab-i-d="item.id"
         :require-connection="true"
         :current-tab="currentTab"
       >
-        <component :is="item.component"></component>
-      </tabContent>
-
-      <!-- For each bottom tab -->
-      <tabContent
-        v-for="item in bottomTabs"
-        :id="item.id + '-tab-content'"
-        :key="item.id + '-tab-content'"
-        :tab-i-d="item.id"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <component :is="item.component"></component>
+        <component :is="item.component" @scrollTop="scrollToTop"></component>
       </tabContent>
     </div>
   </div>
@@ -195,7 +186,9 @@ export default {
       }
       return tabs;
     },
-
+    allTabs() {
+      return [...this.topTabs, ...this.bottomTabs];
+    },
     currentTabIndex: function() {
       return this.tabOrder.indexOf(this.currentTab);
     },
@@ -238,6 +231,9 @@ export default {
     enterApp: function() {
       // Stuff to do once connected and all init modals are finished
     },
+    scrollToTop() {
+      this.$refs.containerLeft.scrollTo({ top: 0 });
+    },
   },
 };
 </script>