diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue index fde8cb2..b6c623e 100644 --- a/src/components/Discover/Conformance/MoreModal.vue +++ b/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(); }, }, } diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue index bcb5ba2..16a97a8 100644 --- a/src/components/Discover/Map/Filter/Trace.vue +++ b/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); } diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue index c00df9f..8ec1360 100644 --- a/src/components/Discover/Map/SidebarTraces.vue +++ b/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); } diff --git a/src/views/Discover/Map/index.vue b/src/views/Discover/Map/index.vue index a7e7357..d35d6c6 100644 --- a/src/views/Discover/Map/index.vue +++ b/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();