fix: add loading display on my test (#490)

* fix: add loading display on my test * fix: add try catch on fetchin data
debionetwork · Jun 20, 2022 · d84af1e · d84af1e
1 parent e691d17
commit d84af1e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
       })
     },