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();
     },
   },
 }

src/components/Discover/Map/Filter/Trace.vue

@@ -92,6 +92,7 @@ export default {
       showTraceId: null,
       infinitMaxItems: false,
       infiniteData: [],
+      infiniteFinish: true, // 無限滾動是否載入完成
       chartOptions: null,
       selectArea: [0, 1]
     }
@@ -251,13 +252,16 @@ export default {
      * @param {number} id
      */
      async switchCaseData(id, count) {
-      if(count >= 1000) this.isLoading = true;
+      // 點同一筆 id 不要有動作
+      if(id == this.showTraceId) return;
+      // if(count >= 1000) this.isLoading = true; // 超過 1000 筆要 loading 畫面
+      this.isLoading = true; // 都要 loading 畫面
       this.infinit404 = null;
       this.infinitMaxItems = false;
-      this.showTraceId = id;
       this.baseInfiniteStart = 0;
       this.allMapDataStore.baseTraceId = id;
       this.infiniteData = await this.allMapDataStore.getBaseTraceDetail();
+      this.showTraceId = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
       this.createCy();
       this.isLoading = false;
     },
@@ -315,7 +319,7 @@ export default {
      * @param {element} event
      */
      handleScroll(event) {
-      if(this.infinitMaxItems || this.baseCases.length < 20) return;
+      if(this.infinitMaxItems || this.baseCases.length < 20 || this.infiniteFinish === false) return;
 
       const container = event.target;
       const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
@@ -327,9 +331,13 @@ export default {
      */
     async fetchData() {
       try {
+        this.isLoading = true;
+        this.infiniteFinish = false;
         this.baseInfiniteStart += 20;
         await this.allMapDataStore.getBaseTraceDetail();
-        this.infiniteData = [...this.infiniteData, ...this.baseCases];
+        this.infiniteData = await [...this.infiniteData, ...this.baseCases];
+        this.infiniteFinish = await true;
+        this.isLoading = await false;
       } catch(error) {
         console.error('Failed to load data:', error);
       }

src/components/Discover/Map/SidebarTraces.vue

@@ -83,6 +83,7 @@ export default {
       showTraceId: null,
       infinitMaxItems: false,
       infiniteData: [],
+      infiniteFinish: true, // 無限滾動是否載入完成
     }
   },
   computed: {
@@ -171,12 +172,15 @@ export default {
      * @param {number} id
      */
     async switchCaseData(id, count) {
-      if(count >= 1000) this.isLoading = true;
+      // 點同一筆 id 不要有動作
+      if(id == this.showTraceId) return;
+      // if(count >= 1000) this.isLoading = true; // 超過 1000 筆要 loading 畫面
+      this.isLoading = true; // 都要 loading 畫面
       this.infinit404 = null;
       this.infinitMaxItems = false;
       this.showTraceId = id;
       this.infiniteStart = 0;
-      this.$emit('switch-Trace-Id', {id: this.showTraceId, count: count});
+      this.$emit('switch-Trace-Id', {id: this.showTraceId, count: count}); // 傳遞到 Map index 再關掉 loading
     },
     /**
      * 將 trace element nodes 資料彙整
@@ -245,7 +249,7 @@ export default {
      * @param {element} event
      */
     handleScroll(event) {
-      if(this.infinitMaxItems || this.cases.length < 20) return;
+      if(this.infinitMaxItems || this.cases.length < 20 || this.infiniteFinish === false) return;
 
       const container = event.target;
       const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
@@ -257,9 +261,13 @@ export default {
      */
     async fetchData() {
       try {
+        this.isLoading = true;
+        this.infiniteFinish = false;
         this.infiniteStart += 20;
         await this.allMapDataStore.getTraceDetail();
-        this.infiniteData = [...this.infiniteData, ...this.cases];
+        this.infiniteData = await [...this.infiniteData, ...this.cases];
+        this.infiniteFinish = await true;
+        this.isLoading = await false;
       } catch(error) {
         console.error('Failed to load data:', error);
       }

src/views/Discover/Map/index.vue

@@ -180,7 +180,9 @@ export default {
      * @param {string} id
      */
     async switchTraceId(e) {
-      if(e.count >= 1000) this.isLoading = true;
+      if(e.id == this.traceId) return;
+      // if(e.count >= 1000) this.isLoading = true; // 超過 1000 筆要 loading 畫面
+      this.isLoading = true; // 都要 loading 畫面
       this.traceId = e.id;
       await this.allMapDataStore.getTraceDetail();
       this.$refs.tracesView.createCy();