From e250339820346c4d7610bf48d13c9e357031f443 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Fri, 15 Sep 2023 11:19:27 +0200
Subject: [PATCH] debugging the task details (#1453)

---
 .../components/UI/task-manager/SubTasks.vue   | 33 ++++++++++---------
 .../UI/task-manager/TaskManager.vue           |  7 ++--
 launcher/src/store/taskManager.js             |  1 +
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/launcher/src/components/UI/task-manager/SubTasks.vue b/launcher/src/components/UI/task-manager/SubTasks.vue
index a6505fcc5..5a8458311 100644
--- a/launcher/src/components/UI/task-manager/SubTasks.vue
+++ b/launcher/src/components/UI/task-manager/SubTasks.vue
@@ -3,7 +3,7 @@
     <div class="subTask-table">
       <div class="subTask-content">
         <div
-          v-for="(item, index) in modifiedSubTasks"
+          v-for="(item, index) in taskShow"
           :key="index"
           class="subTask-row"
           :class="{
@@ -22,7 +22,7 @@
             <span v-if="displayTaskResult" class="itemAction">{{ item.action }}</span>
             <span v-else class="itemName">{{ item.name }}</span>
             <div class="loading-box">
-              <img src="../../../../public/img/icon/task-manager-icons/check5.png" alt="" />
+              <img src="/img/icon/task-manager-icons/check5.png" alt="" />
             </div>
             <div v-if="item.showTooltip" class="success-tooltip">
               <span>{{ item.action }}</span>
@@ -32,7 +32,7 @@
             <span v-if="displayTaskResult" class="error">{{ item.action }}</span>
             <span v-else class="noError">{{ item.name }}</span>
             <div class="error-icon">
-              <img src="../../../../public/img/icon/task-manager-icons/cancel.png" alt="" />
+              <img src="/img/icon/task-manager-icons/cancel.png" alt="" />
               <div v-if="item.showTooltip" class="failed-tooltip">
                 <span>{{ item.name }}</span>
               </div>
@@ -42,7 +42,7 @@
             <span v-if="displayTaskResult" class="error">{{ item.action }}</span>
             <span v-else class="noError">{{ item.name }}</span>
             <div class="loading-box">
-              <img src="../../../../public/img/icon/task-manager-icons/check5.png" alt="" />
+              <img src="/img/icon/task-manager-icons/check5.png" alt="" />
             </div>
             <div v-if="item.showTooltip" class="skipped-tooltip">
               <span>{{ item.name }}</span>
@@ -55,24 +55,25 @@
   </div>
 </template>
 <script>
+import { mapState } from "pinia";
+import { useTaskManager } from "@/store/taskManager";
 import ErrorTerminal from "./ErrorTerminal.vue";
 export default {
   components: { ErrorTerminal },
-  props: {
-    subTasks: {
-      type: Array,
-      required: true,
-    },
-  },
+
   data() {
     return {
       displayTaskResult: false,
-      modifiedSubTasks: this.subTasks,
       terminalModal: false,
     };
   },
+  computed: {
+    ...mapState(useTaskManager, {
+      taskShow: "taskShow",
+    }),
+  },
   created() {
-    this.modifiedSubTasks = this.modifiedSubTasks.map((item) => {
+    this.taskShow = this.taskShow.map((item) => {
       return {
         showErrorterminal: false,
         ...item,
@@ -99,19 +100,19 @@ export default {
         });
     },
     tooltipShowHandler(el) {
-      this.modifiedSubTasks.filter((item) => {
+      this.taskShow.filter((item) => {
         item.name.toLowerCase() === el.name.toLowerCase();
         el.showTooltip = true;
       });
     },
     tooltipHideHandler(el) {
-      this.modifiedSubTasks.filter((item) => {
+      this.taskShow.filter((item) => {
         item.name.toLowerCase() === el.name.toLowerCase();
         el.showTooltip = false;
       });
     },
     openTerminalHandler(el) {
-      this.modifiedSubTasks.forEach(() => {
+      this.taskShow.forEach(() => {
         if (el.showTooltip) {
           el.showTooltip = false;
         }
@@ -119,7 +120,7 @@ export default {
           el.showErrorterminal = false;
         }
       });
-      this.modifiedSubTasks.filter((item) => {
+      this.taskShow.filter((item) => {
         item.name.toLowerCase() === el.name.toLowerCase();
         el.showErrorterminal = true;
       });
diff --git a/launcher/src/components/UI/task-manager/TaskManager.vue b/launcher/src/components/UI/task-manager/TaskManager.vue
index 029078ee5..27079834a 100644
--- a/launcher/src/components/UI/task-manager/TaskManager.vue
+++ b/launcher/src/components/UI/task-manager/TaskManager.vue
@@ -35,13 +35,13 @@
               <span>{{ item.name }}</span>
               <drop-tasks :item="item" @droptaskActive="openDropDown"></drop-tasks>
             </div>
-            <sub-tasks v-if="item.showDropDown" :sub-tasks="item.subTasks"></sub-tasks>
+            <SubTasks v-if="item.showDropDown" />
           </div>
         </div>
       </div>
       <div class="list-cleaner">
         <span class="footer-text">{{ $t("taskManager.clickDisplay") }}</span>
-        <img src="../../../../public/img/icon/task-manager-icons/remove-tasks.png" alt="" @click="listCleanerHandler" />
+        <img src="/img/icon/task-manager-icons/remove-tasks.png" alt="" @click="listCleanerHandler" />
       </div>
     </div>
   </div>
@@ -74,6 +74,7 @@ export default {
       playbookTasks: "playbookTasks",
       taskManagerIcons: "taskManagerIcons",
       installIconSrc: "installIconSrc",
+      taskShow: "taskShow",
     }),
     ...mapWritableState(useFooter, {
       cursorLocation: "cursorLocation",
@@ -91,6 +92,7 @@ export default {
       return this.taskManagerIcons.progressIcon;
     },
   },
+
   created() {
     this.checkNewTasks = this.displayingTasks;
   },
@@ -113,6 +115,7 @@ export default {
         //if DropDown is open only update what the user sees so the menue doesn't close
         this.displayingTasks[0].subTasks = this.Tasks.find((t) => t.id === this.displayingTasks[0].id).subTasks;
         this.displayingTasks[0].status = this.Tasks.find((t) => t.id === this.displayingTasks[0].id).status;
+        this.taskShow = this.displayingTasks[0].subTasks;
       }
     },
     taskModalHandler() {
diff --git a/launcher/src/store/taskManager.js b/launcher/src/store/taskManager.js
index 90c87a87d..5307e2489 100644
--- a/launcher/src/store/taskManager.js
+++ b/launcher/src/store/taskManager.js
@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 export const useTaskManager = defineStore("taskManager", {
   state: () => {
     return {
+      taskShow: [],
       playbookTasks: [],
       taskManagerIcons: {
         progressIcon: require("../../public/img/icon/task-manager-icons/task-manager-icon.png"),