Conformance: backend update Conformance issue API, Conformance report API, fix more model trace table.

src/components/Discover/Conformance/ConformanceResults.vue

@@ -237,7 +237,7 @@ export default {
       // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
       this.issusNo = no;
       await this.conformanceStore.getLogConformanceIssue(no);
-      await this.conformanceStore.getLogConformanceTraceDetail(no, this.issueTraces[0]);
+      await this.conformanceStore.getLogConformanceTraceDetail(no, this.issueTraces[0].id, 0, 20);
       this.issusModal = await true;
       await this.$refs.moreModal.createCy()
     },

src/components/Discover/Conformance/MoreModal.vue

@@ -23,13 +23,13 @@
             <tbody>
               <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
                 <td class="p-2">#{{ trace.id }}</td>
-                <!-- <td class="p-2 w-24">
+                <td class="p-2 w-24">
                   <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
                     <div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
                   </div>
                 </td>
                 <td class="py-2 text-right">{{ trace.count }}</td>
-                <td class="p-2">{{ trace.ratio }}%</td> -->
+                <td class="p-2">{{ trace.ratio }}%</td>
               </tr>
             </tbody>
           </table>
@@ -40,15 +40,18 @@
         <p class="h2 mb-2 px-4">Trace #{{ showTraceId }}</p>
         <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
           <div class="h-full w-full">
-            <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
+            <!-- <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div> -->
           </div>
         </div>
         <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
-          <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" sortable></Column>
-            </div>
-          </DataTable>
+            <!-- <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" sortable></Column>
+              </div>
+            </DataTable> -->
+            <!-- <infinite-loading @infinite="infiniteHandler"></infinite-loading> -->
+          <!-- <div v-if="!maxItems">Loading more...</div>
+          <div v-else>No more data available.</div> -->
         </div>
       </section>
     </div>
@@ -71,23 +74,33 @@ export default {
     return {
       contentClass: '!bg-neutral-100 border-t border-neutral-300 h-full',
       showTraceId: 1,
+      infiniteData: [],
+      busy: false,
+      maxItems: false,
+      start: 0,
+      pageSize: 20,
       processMap:{
         nodes:[],
         edges:[],
       },
     }
   },
+  // directives: {
+  //   infiniteScroll, // 注册 vue-infinite-scroll 指令
+  // },
   computed: {
     traceTotal: function() {
       return this.traceList.length;
     },
     traceList: function() {
+      let sum = this.issueTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+
       return this.issueTraces.map(trace => {
         return {
-          id: trace,
-          // value: Number((trace.ratio * 100).toFixed(1)),
-          // count: trace.count,
-          // ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
+          id: trace.id,
+          value: Number((this.getPercentLabel(trace.count / sum))),
+          count: trace.count,
+          ratio: this.getPercentLabel(trace.count / sum),
         };
       }).sort((x, y) => x.id - y.id);
     },
@@ -113,6 +126,14 @@ export default {
     },
   },
   methods: {
+    /**
+     * Number to percentage
+     * @param   {number} val
+     * @returns {string}     轉換完成的百分比字串
+     */
+     getPercentLabel(val){
+      return (val * 100 === 100) ? val * 100 : (val * 100).toFixed(1);
+    },
     /**
      * set progress bar width
      * @param   {number} value
@@ -127,7 +148,7 @@ export default {
      */
     switchCaseData(id) {
       this.showTraceId = id;
-      this.conformanceStore.getLogConformanceTraceDetail(this.issusNo, id)
+      this.conformanceStore.getLogConformanceTraceDetail(this.issusNo, id, 0, 20)
     },
     /**
      * 將 trace element nodes 資料彙整
@@ -180,11 +201,32 @@ export default {
         cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
       });
     },
+    async infiniteHandler() {
+      console.log('TT');
+
+      try {
+        await this.conformanceStore.getLogConformanceTraceDetail(this.issusNo, this.issueTraces[0], this.start, this.pageSize)
+        this.cases = [...this.infiniteData, ...this.cases];
+        console.log(this.cases);
+        (this.cases.length < this.pageSize) ? this.maxItems = true : this.pageSize += 20;
+        $state.loaded();
+      } catch(error) {
+        if (error.response && error.response.status === 404) {
+          $state.complete();
+        } else {
+          console.error('Failed to load data:', error);
+        }
+      } finally {
+        this.busy = false;
+      }
+    },
   },
   watch: {
     taskSeq: function(newValue){
       if(newValue !== null) this.createCy();
     }
   },
+  mounted(){
+  },
 }
 </script>

src/stores/conformance.js

@@ -110,7 +110,7 @@ export default defineStore('conformanceStore', {
      */
     async getLogConformanceTempReport() {
       let checkerId = this.conformanceTempCheckerId;
-      const api = `/api/temp-log-checkers/${checkerId}/report`;
+      const api = `/api/temp-log-checkers/${checkerId}`;
 
       try {
         const response = await this.$axios.get(api);
@@ -148,9 +148,9 @@ export default defineStore('conformanceStore', {
     /**
      * Get the Trace Details of a Temporary Log Conformance lssue.
      */
-    async getLogConformanceTraceDetail(issueNo, traceId) {
+    async getLogConformanceTraceDetail(issueNo, traceId, start, pageSize) {
       let checkerId = this.conformanceTempCheckerId;
-      const api = `/api/temp-log-checkers/${checkerId}/issues/${issueNo}/traces/${traceId}`;
+      const api = `/api/temp-log-checkers/${checkerId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=${pageSize}`;
 
       try {
         const response = await this.$axios.get(api);