tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds loading state to number block and countup component to animate numbers. #483

This commit is contained in:
mateuswetah 2021-03-03 10:01:59 -03:00
parent 0a52fd416e
commit e3a07bc70b
5 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

28
src/views/reports/components/number-block.vue
View File

@ -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
}
}
}

19
src/views/reports/pages/reports-list.vue
View File

@ -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() {

1
src/views/reports/reports.vue
View File

@ -15,6 +15,7 @@ export default {
<style lang="scss">
// TAINACAN Variables
@import "../admin/scss/_animations.scss";
@import "../admin/scss/_variables.scss";
// Bulma imports