From d84af1e9bcb0b2588684270946b35586c99be406 Mon Sep 17 00:00:00 2001 From: ciniiia Date: Mon, 20 Jun 2022 14:57:35 +0700 Subject: [PATCH] fix: add loading display on my test (#490) * fix: add loading display on my test * fix: add try catch on fetchin data --- .../Home/MyTest/OrderHistoryDetail.vue | 38 +++++++++++---- .../Home/MyTest/StakingServiceTab.vue | 46 +++++++++++-------- .../Dashboard/Customer/Home/MyTest/index.vue | 4 ++ 3 files changed, 62 insertions(+), 26 deletions(-) diff --git a/src/views/Dashboard/Customer/Home/MyTest/OrderHistoryDetail.vue b/src/views/Dashboard/Customer/Home/MyTest/OrderHistoryDetail.vue index 0433ed606..d453889ef 100644 --- a/src/views/Dashboard/Customer/Home/MyTest/OrderHistoryDetail.vue +++ b/src/views/Dashboard/Customer/Home/MyTest/OrderHistoryDetail.vue @@ -10,7 +10,14 @@ div.bodyContent v-row v-col - div.leftSection.box.fillColor + div.leftSection.box.fillColor(v-if="isLoading") + div.topRow + div.topHead + v-skeleton-loader( + v-bind="attrs" + type="card-heading, list-item-avatar, divider, card-heading, list-item-avatar, devider, list-item" + ) + div.leftSection.box.fillColor(v-if="!isLoading") div.topRow div.topHead span Lab Details @@ -60,7 +67,14 @@ span Specimen Number span {{ myTest.dna_sample_tracking_id }} v-col - div.rightSection.box + div.rightSection.box(v-if="isLoading") + div + v-skeleton-loader( + v-bind="attrs" + type="image, list-item-two-line" + ) + + div.rightSection.box(v-if="!isLoading") div div.imageBanner.box ui-debio-icon( @@ -186,7 +200,8 @@ export default { servicePrice: 0, qcPrice: 0, currency: "" - } + }, + isLoading: false }), async mounted() { @@ -210,11 +225,18 @@ export default { methods: { async getOrderDetail() { - this.myTest = await getOrderDetail(this.$route.params.id) - this.dnaSample = await queryDnaSamples(this.api, this.myTest.dna_sample_tracking_id) - this.prices.servicePrice = formatPrice(this.myTest.service_info.prices_by_currency[0].total_price) - this.prices.qcPrice = formatPrice(this.myTest.service_info.prices_by_currency[0].additional_prices[0].value) - this.prices.currency = this.myTest.service_info.prices_by_currency[0].currency.toUpperCase() + this.isLoading = true + try { + this.myTest = await getOrderDetail(this.$route.params.id) + this.dnaSample = await queryDnaSamples(this.api, this.myTest.dna_sample_tracking_id) + this.prices.servicePrice = this.formatPrice(this.myTest.service_info.prices_by_currency[0].total_price) + this.prices.qcPrice = this.formatPrice(this.myTest.service_info.prices_by_currency[0].additional_prices[0].value) + this.prices.currency = this.myTest.service_info.prices_by_currency[0].currency.toUpperCase() + this.isLoading = false + } catch (error) { + console.error(error) + this.isLoading = false + } }, toViewResult() { diff --git a/src/views/Dashboard/Customer/Home/MyTest/StakingServiceTab.vue b/src/views/Dashboard/Customer/Home/MyTest/StakingServiceTab.vue index 993fe03e0..44c735c4f 100644 --- a/src/views/Dashboard/Customer/Home/MyTest/StakingServiceTab.vue +++ b/src/views/Dashboard/Customer/Home/MyTest/StakingServiceTab.vue @@ -3,6 +3,7 @@ ui-debio-data-table( :headers="headers" :items="items" + :loading="isLoadingData" ) template(v-slot:[`item.id`]="{ item }") .customer-staking-tab__id @@ -130,7 +131,9 @@ export default { tabs: null, showDialog: false, requestId: "", - countries: [] + countries: [], + isLoadingData: false + }), computed: { @@ -155,23 +158,30 @@ export default { }), async fetchData () { - const { data } = await getServiceRequestByCustomer(this.pair.address) - this.items = data - this.items.sort((a, b) => { - const dateA = (a.request.created_at).replace(/,/g, "") - const dateB = (b.request.created_at).replace(/,/g, "") - - if(new Date(parseInt(dateA)) < new Date(parseInt(dateB))) { - return 1 - } - - if (new Date(parseInt(dateA)) > new Date(parseInt(dateB))) { - return -1 - } - - return 0 - - }) + try { + const { data } = await getServiceRequestByCustomer(this.pair.address) + this.items = data + this.items.sort((a, b) => { + const dateA = (a.request.created_at).replace(/,/g, "") + const dateB = (b.request.created_at).replace(/,/g, "") + + if(new Date(parseInt(dateA)) < new Date(parseInt(dateB))) { + return 1 + } + + if (new Date(parseInt(dateA)) > new Date(parseInt(dateB))) { + return -1 + } + + return 0 + + }) + this.isLoadingData = false + } catch (error) { + console.log(error) + this.isLoadingData = false + } + }, setAmount(amount) { diff --git a/src/views/Dashboard/Customer/Home/MyTest/index.vue b/src/views/Dashboard/Customer/Home/MyTest/index.vue index 9801c51e9..ae435c93f 100644 --- a/src/views/Dashboard/Customer/Home/MyTest/index.vue +++ b/src/views/Dashboard/Customer/Home/MyTest/index.vue @@ -56,6 +56,7 @@ ui-debio-data-table( :headers="headers" :items="testList" + :loading="isLoadingData" ) template(class="titleSection" v-slot:[`item.serviceName`]="{item}") div(class="detailLab d-flex align-center") @@ -179,6 +180,7 @@ export default { showDialog: false, medicalResearchIllustration, isLoding: false, + isLoadingData: false, txWeight: 0, testList: [], headers: [ @@ -274,6 +276,7 @@ export default { }, async fetchOrderList() { + this.isLoadingData = true const result = await getOrderList() const orderList = result.orders.data const newList = orderList.filter(order => order._source.status !== "Unpaid" && order._source.status !== "Cancelled") @@ -319,6 +322,7 @@ export default { this.testList.sort( (a, b) => parseInt(b.timestamp) - parseInt(a.timestamp) ) + this.isLoadingData = false }) },