Issues #179: done.

src/components/Discover/Map/SidebarTraces.vue

@@ -42,10 +42,10 @@
           </div>
         </div>
         <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
-          <DataTable :value="infiniteData" showGridlines tableClass="text-sm" breakpoint="0">
-            <Column field="id" header="Case ID" ></Column>
-            <Column field="started_at" header="Start time" ></Column>
-            <Column field="completed_at" header="End time" ></Column>
+          <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
+            <div v-for="(col, index) in columnData" :key="index">
+              <Column :field="col.field" :header="col.header"></Column>
+            </div>
           </DataTable>
         </div>
       </section>
@@ -54,15 +54,19 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
 export default {
-  props: ['sidebarTraces'],
+  props: ['sidebarTraces', 'cases'],
   setup() {
+    const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
-    const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, cases, infiniteFirstCases } = storeToRefs(allMapDataStore);
-    return {allMapDataStore, infinit404, infiniteStart, traceId, traces, traceTaskSeq, cases, infiniteFirstCases}
+    const { isLoading } = storeToRefs(loadingStore);
+    const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases } = storeToRefs(allMapDataStore);
+
+    return {allMapDataStore, infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases, isLoading }
   },
   data() {
     return {
@@ -81,8 +85,7 @@ export default {
     },
     traceList: function() {
       let sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
-
-      return this.traces.map(trace => {
+      let result = this.traces.map(trace => {
         return {
           id: trace.id,
           value: this.progressWidth(Number(((trace.count / sum) * 100).toFixed(1))),
@@ -90,8 +93,37 @@ export default {
           base_count: trace.count,
           ratio: this.getPercentLabel(trace.count / sum),
         };
-      }).sort((x, y) => x.id - y.id);
-    }
+      })
+
+      return result;
+    },
+    caseData: function() {
+      const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
+      data.forEach(item => {
+        item.attributes.forEach((attribute, index) => {
+          item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+        });
+        delete item.attributes; // 刪除原本的 attributes 屬性
+      })
+      return data;
+    },
+    columnData: function() {
+      const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
+      let result = [
+          { field: 'id', header: 'Case Id' },
+          { field: 'started_at', header: 'Start time' },
+          { field: 'completed_at', header: 'End time' },
+        ];
+      if(data.length !== 0){
+        result = [
+          { field: 'id', header: 'Case Id' },
+          { field: 'started_at', header: 'Start time' },
+          { field: 'completed_at', header: 'End time' },
+          ...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
+        ];
+      }
+      return result
+    },
   },
   watch: {
     infinite404: function(newValue) {
@@ -194,6 +226,7 @@ export default {
      * create map
      */
      async show() {
+      this.isLoading = await true; // createCy 執行完關閉
       // 因 trace api 連動，所以關閉側邊欄時讓數值歸 traces 第一筆 id
       this.showTraceId = await this.traces[0]?.id;
       this.infiniteStart = await 0;
@@ -201,6 +234,7 @@ export default {
       this.setNodesData();
       this.setEdgesData();
       this.createCy();
+      this.isLoading = false;
     },
     /**
      * 無限滾動: 監聽 scroll 有沒有滾到底部