From 00d36e4913ed4ae90f49a50ddce77271992069d7 Mon Sep 17 00:00:00 2001
From: Siratee K <sirateek@gmail.com>
Date: Sat, 3 Feb 2024 22:06:35 +0700
Subject: [PATCH] fix: Update Task Detail

---
 src/views/job/TaskDetail.vue                 | 14 +++++++-------
 src/views/job/composable/useGetTaskDetail.ts |  3 +++
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/views/job/TaskDetail.vue b/src/views/job/TaskDetail.vue
index 84b99a2..733777e 100644
--- a/src/views/job/TaskDetail.vue
+++ b/src/views/job/TaskDetail.vue
@@ -17,18 +17,18 @@
             Image URL:
             {{ attribute.data.imageURL }}
           </h2>
-          <h2>
-            Task Attributes:
-            {{
-              attribute.data.taskAttributes ??
-              "Task Attributes not support for displaying in frontend"
-            }}
-          </h2>
           Status:
           <StatusChip
             :status="attribute.data.status"
             :decorator-composable="useTaskStatusDecorator"
           ></StatusChip>
+
+          <v-textarea
+            label="Task Attributes"
+            v-model:model-value="attribute.taskAttribute"
+            disabled
+          >
+          </v-textarea>
         </v-card-subtitle>
       </v-card-item>
     </v-card>
diff --git a/src/views/job/composable/useGetTaskDetail.ts b/src/views/job/composable/useGetTaskDetail.ts
index c9708d7..93a5388 100644
--- a/src/views/job/composable/useGetTaskDetail.ts
+++ b/src/views/job/composable/useGetTaskDetail.ts
@@ -5,12 +5,15 @@ import { reactive } from "vue";
 export function useGetTaskDetail(taskID: string) {
   const attribute = reactive({
     data: {} as TaskDetailResponse,
+    taskAttribute: "" as string,
   });
 
   async function getTaskDetail() {
     const response =
       await RepositoryFactory.instance.taskRepository.getTaskDetail(taskID);
 
+    attribute.taskAttribute = JSON.stringify(response.taskAttributes);
+
     attribute.data = response;
   }