From df798648478ff0684710f2edb6e2fb37a89aa86d Mon Sep 17 00:00:00 2001
From: Francesco Siddi <francesco.siddi@gmail.com>
Date: Tue, 5 Jul 2022 18:21:31 +0200
Subject: [PATCH] JobDetail: Emit reshuffled event on tab clicks

This way the tasks table properly resizes, accommodating for the
content changes of the tab group above it.
---
 web/app/src/components/TabsWrapper.vue     | 9 ++++++++-
 web/app/src/components/jobs/JobDetails.vue | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/app/src/components/TabsWrapper.vue b/web/app/src/components/TabsWrapper.vue
index 94d60255..862a5e5c 100644
--- a/web/app/src/components/TabsWrapper.vue
+++ b/web/app/src/components/TabsWrapper.vue
@@ -1,10 +1,17 @@
 <script setup>
 import { useSlots, ref, provide } from "vue";
+const emit = defineEmits(['clickedJobDetailsTab',])
 const slots = useSlots();
 
 const tabTitles = ref(slots.default().map((tab) => tab.props.title));
 const selectedTitle = ref(tabTitles.value[0]);
 provide("selectedTitle", selectedTitle);
+
+function updateTabTitle(title) {
+  this.selectedTitle = title;
+  emit('clickedJobDetailsTab');
+}
+
 </script>
 
 <template>
@@ -15,7 +22,7 @@ provide("selectedTitle", selectedTitle);
         :key="title"
         class="tab-item"
         :class="{ active: selectedTitle === title }"
-        @click="selectedTitle = title"
+        @click="updateTabTitle(title)"
       >
         {{ title }}
       </li>
diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 66db9767..528772ac 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-if="hasJobData">
     <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-tiny" />
-    <TabsWrapper>
+    <TabsWrapper @clicked-job-details-tab="$emit('reshuffled')">
       <TabItem title="Job Settings">
         <dl v-if="hasSettings">
           <template v-for="value, key in settingsToDisplay">