Issues #191: done.

src/components/Discover/Conformance/MoreModal.vue

@@ -79,6 +79,7 @@ export default {
       showTraceId: null,
       infiniteData: null,
       maxItems: false,
+      infiniteFinish: true, // 無限滾動是否載入完成
       startNum: 0,
       processMap:{
         nodes:[],
@@ -153,10 +154,7 @@ export default {
       this.infiniteData = newValue;
     },
     infinite404: function(newValue, oldValue){
-      if (newValue === 404) {
-        this.maxItems = true;
-        this.loading = false;
-      }
+      if (newValue === 404) this.maxItems = true;
     },
   },
   methods: {
@@ -182,15 +180,16 @@ export default {
      * @param {number} id
      */
     async switchCaseData(id) {
+      if(id == this.showTraceId) return;
       this.infinite404 = null;
       this.maxItems = false;
-      this.showTraceId = id;
       this.startNum = 0;
 
       let result;
       if(this.category === 'issue') result = await this.conformanceStore.getConformanceTraceDetail(this.listNo, id, 0);
       else if(this.category === 'loop') result = await this.conformanceStore.getConformanceLoopsTraceDetail(this.listNo, id, 0);
       this.infiniteData = await result;
+      this.showTraceId = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
     },
     /**
      * 將 trace element nodes 資料彙整
@@ -252,14 +251,13 @@ export default {
      */
     async fetchData() {
       try {
-        this.loading = true;
+        this.infiniteFinish = false;
         this.startNum += 20
         const result = await this.conformanceStore.getConformanceTraceDetail(this.listNo, this.showTraceId, this.startNum);
-        this.infiniteData = [...this.infiniteData, ...result];
+        this.infiniteData = await [...this.infiniteData, ...result];
+        this.infiniteFinish = await true;
       } catch(error) {
-        // console.error('Failed to load data:', error);
-      } finally {
-        this.loading = false;
+        console.error('Failed to load data:', error);
       }
     },
     /**
@@ -267,15 +265,12 @@ export default {
      * @param {element} event
      */
     handleScroll(event) {
-      if(this.loading || this.maxItems || this.infiniteData.length < 20) return;
+      if(this.maxItems || this.infiniteData.length < 20 || this.infiniteFinish === false) return;
 
       const container = event.target;
       const overScrollHeight = container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;
 
-      if (overScrollHeight) {
-        this.fetchData();
-        this.loading = true;
-      }
+      if (overScrollHeight) this.fetchData();
     },
   },
 }