From e3a07bc70bdf3c1c551436963389a2c431689559 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 3 Mar 2021 10:01:59 -0300
Subject: [PATCH] Adds loading state to number block and countup component to
 animate numbers. #483

---
 package-lock.json                             | 10 +++++++
 package.json                                  |  2 ++
 src/views/reports/components/number-block.vue | 28 ++++++++++++++-----
 src/views/reports/pages/reports-list.vue      | 19 ++++++++-----
 src/views/reports/reports.vue                 |  1 +
 5 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6efb55564..ce25176e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3005,6 +3005,11 @@
         }
       }
     },
+    "countup.js": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.0.7.tgz",
+      "integrity": "sha512-FO0nQdvG1iQwHp28wdvkErxnNUSbdkzztqZ6YNHKLHydngD2tdiKEW8dFrqpahF3tj+Ma70h0vyYrCBzxlVWdg=="
+    },
     "create-ecdh": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@@ -10791,6 +10796,11 @@
       "resolved": "https://registry.npmjs.org/vue-blurhash/-/vue-blurhash-0.1.4.tgz",
       "integrity": "sha512-B76GgfHXHkdmYgAfI2rZl3BgCMD9OxAgn4Jw2Ro0a8ZoAKa6gqTWUrTo5EGXOftm/EKuMYi1Cc+UcAvV0jnoRw=="
     },
+    "vue-countup-v2": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vue-countup-v2/-/vue-countup-v2-4.0.0.tgz",
+      "integrity": "sha512-XjKeHo1ndRlJtXvHd6B1eWOpbrJDdNU3rdYZwVPv2YlUXbvthsBT4kms5Fc/mn9RdXPrMX2H/ktAAQtKjWFisw=="
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
diff --git a/package.json b/package.json
index c77aa34c9..c80a72740 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "blurhash": "^1.1.3",
     "buefy": "^0.9.4",
     "bulma": "^0.9.1",
+    "countup.js": "^2.0.7",
     "css-vars-ponyfill": "^2.3.1",
     "mdi": "^2.2.43",
     "moment": "^2.25.3",
@@ -27,6 +28,7 @@
     "vue-apexcharts": "^1.6.0",
     "vue-awesome-swiper": "^4.1.1",
     "vue-blurhash": "^0.1.4",
+    "vue-countup-v2": "^4.0.0",
     "vue-masonry-css": "^1.0.3",
     "vue-router": "^3.1.6",
     "vue-the-mask": "^0.11.1",
diff --git a/src/views/reports/components/number-block.vue b/src/views/reports/components/number-block.vue
index 3f347a7b0..2ff9d63fb 100644
--- a/src/views/reports/components/number-block.vue
+++ b/src/views/reports/components/number-block.vue
@@ -1,6 +1,10 @@
 <template>
     <div>
-        <p class="title is-2">{{ total }}</p>
+        <p class="title is-2">
+            <i-count-up
+                    :delay="750"
+                    :end-val="total" />
+        </p>
         <p class="subtitle is-3">
             <span class="icon has-text-gray">
                 <i 
@@ -14,7 +18,12 @@
                     v-for="(statusOption, index) of $statusHelper.getStatuses()"
                     :key="index"
                     v-if="(statusOption.slug != 'private' || (statusOption.slug == 'private' && $userCaps.hasCapability('tnc_rep_read_private_collections')) && totalByStatus[statusOption.slug])">
-                <span class="value">{{ totalByStatus[statusOption.slug] }}&nbsp;</span>
+                <span class="value">
+                    <i-count-up
+                            :delay="750"
+                            :end-val="totalByStatus[statusOption.slug]" />
+                    &nbsp;
+                </span>
                 <span 
                         v-if="$statusHelper.hasIcon(statusOption.slug)"
                         class="icon has-text-gray">
@@ -30,7 +39,12 @@
 </template>
 
 <script>
+import ICountUp from 'vue-countup-v2';
+
 export default {
+    components: {
+        ICountUp
+    },
     props: {
         sourceCollection: String,
         entityType: String,
@@ -38,14 +52,14 @@ export default {
     },
     computed: {
         total() {
-            return this.summary.totals[this.entityType].total;
+            return this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].total : 0;
         },
         totalByStatus() {
             return {
-                'publish': this.summary.totals[this.entityType].publish,
-                'private': this.summary.totals[this.entityType].private,
-                'draft': this.summary.totals[this.entityType].draft,
-                'trash': this.summary.totals[this.entityType].trash
+                'publish': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].publish : 0,
+                'private': this.summary && this.summary.totals && this.summary.totals[this.entityType] ?  this.summary.totals[this.entityType].private : 0,
+                'draft': this.summary && this.summary.totals && this.summary.totals[this.entityType] ?  this.summary.totals[this.entityType].draft : 0,
+                'trash': this.summary && this.summary.totals && this.summary.totals[this.entityType] ?  this.summary.totals[this.entityType].trash : 0
             }
         }
     }
diff --git a/src/views/reports/pages/reports-list.vue b/src/views/reports/pages/reports-list.vue
index 5c81793fb..432be72f3 100644
--- a/src/views/reports/pages/reports-list.vue
+++ b/src/views/reports/pages/reports-list.vue
@@ -21,15 +21,17 @@
                     v-if="!selectedCollection || selectedCollection == 'default'"
                     class="column is-full is-one-third-tablet has-text-centered">
                 <number-block
-                        v-if="!isFetchingSummary && summary && summary.totals"
+                        :class="{ 'skeleton': isFetchingSummary }"
                         class="postbox"
                         :source-collection="selectedCollection"
                         :summary="summary"
                         entity-type="collections"/>
             </div>
-            <div class="column is-full is-one-third-tablet has-text-centered">
+            <div
+                    :class="{ 'is-one-third-tablet': !selectedCollection || selectedCollection == 'default' }"
+                    class="column is-full has-text-centered">
                 <number-block 
-                        v-if="!isFetchingSummary && summary && summary.totals"
+                        :class="{ 'skeleton': isFetchingSummary }"
                         class="postbox"
                         :source-collection="selectedCollection"
                         :summary="summary"
@@ -39,7 +41,7 @@
                     v-if="!selectedCollection || selectedCollection == 'default'"
                     class="column is-full is-one-third-tablet has-text-centered">
                <number-block
-                        v-if="!isFetchingSummary && summary && summary.totals"
+                        :class="{ 'skeleton': isFetchingSummary }"
                         class="postbox"
                         :source-collection="selectedCollection"
                         :summary="summary"
@@ -107,9 +109,12 @@ export default {
         })
     },
     watch: {
-        '$route.query' (to) {
-            this.selectedCollection = to['collection'] ? to['collection'] : 'default';
-            this.loadSummary();
+        '$route.query': {
+            handler(to) {
+                this.selectedCollection = to['collection'] ? to['collection'] : 'default';
+                this.loadSummary();
+            },
+            immediate: true
         }
     },
     created() {
diff --git a/src/views/reports/reports.vue b/src/views/reports/reports.vue
index acd284cd6..95afecb27 100644
--- a/src/views/reports/reports.vue
+++ b/src/views/reports/reports.vue
@@ -15,6 +15,7 @@ export default {
 <style lang="scss">
 
     // TAINACAN Variables
+    @import "../admin/scss/_animations.scss";
     @import "../admin/scss/_variables.scss";
 
     // Bulma imports