improve loading strategy

This commit is contained in:
liangping 2022-04-21 11:01:19 +08:00
parent 332c0416a9
commit 6b31a47969
2 changed files with 67 additions and 34 deletions

View File

@ -252,23 +252,33 @@ export default class ChainFetch {
return this.get(`/cosmos/gov/v1beta1/proposals/${pid}/votes?pagination.key=${encodeURIComponent(next)}&pagination.limit=${limit}`)
}
async getGovernanceList() {
const url = this.config.chain_name === 'certik' ? '/shentu/gov/v1alpha1/proposals?pagination.limit=500' : '/cosmos/gov/v1beta1/proposals?pagination.limit=500'
return Promise.all([this.get(url), this.get('/staking/pool')]).then(data => {
const pool = new StakingPool().init(commonProcess(data[1]))
let proposals = commonProcess(data[0])
async getGovernanceListByStatus(status) {
const url = this.config.chain_name === 'certik' ? `/shentu/gov/v1alpha1/proposals?pagination.limit=100&proposal_status=${status}` : `/cosmos/gov/v1beta1/proposals?pagination.limit=100&proposal_status=${status}`
return this.get(url)
}
async getGovernanceList(next = '') {
const url = this.config.chain_name === 'certik'
? `/shentu/gov/v1alpha1/proposals?pagination.limit=50&pagination.reverse=true&pagination.key=${next}`
: `/cosmos/gov/v1beta1/proposals?pagination.limit=50&pagination.reverse=true&pagination.key=${next}`
return this.get(url).then(data => {
// const pool = new StakingPool().init(commonProcess(data[1]))
let proposals = commonProcess(data)
if (Array.isArray(proposals.proposals)) {
proposals = proposals.proposals
}
const ret = []
if (proposals) {
proposals.forEach(e => {
const g = new Proposal().init(e, pool.bondedToken)
const g = new Proposal().init(e, 0)
g.versionFixed(this.config.sdk_version)
ret.push(g)
})
}
return ret
return {
proposals: ret,
pagination: data.pagination,
}
})
}

View File

@ -51,6 +51,14 @@
</router-link></b-card-title>
<b-card-body md="12">
<div class="gov-wrapper d-flex flex-wrap">
<div class="gov">
<p class="card-text mb-25">
Type
</p>
<h6 class="mb-0">
{{ formatType(p.contents['@type']) }}
</h6>
</div>
<div class="gov">
<p class="card-text mb-25">
Start Date
@ -75,14 +83,6 @@
{{ formatToken(p.total_deposit) || '-' }}
</h6>
</div>
<div class="gov">
<p class="card-text mb-25">
Turnout
</p>
<h6 class="mb-0">
{{ percent(p.tally.turnout) }}%
</h6>
</div>
</div>
</b-card-body>
@ -177,6 +177,18 @@
</b-card>
</b-col>
</b-row>
<b-row v-if="next">
<b-col>
<b-button
block
variant="outline-primary"
:disabled="loading"
@click="getList()"
>
Load More
</b-button>
</b-col>
</b-row>
<operation-modal
:type="operationModalType"
:proposal-id="selectedProposalId"
@ -190,7 +202,6 @@ import {
BCard, BCardTitle, BCardBody, BCardFooter, BButton, BProgressBar, BProgress, BBadge, BTooltip, BRow, BCol, VBModal,
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import { Proposal } from '@/libs/data'
import { percent, tokenFormatter } from '@/libs/utils'
import dayjs from 'dayjs'
import OperationModal from '@/views/components/OperationModal/index.vue'
@ -218,15 +229,21 @@ export default {
return {
selectedProposalId: 0,
selectedTitle: '',
proposals: [new Proposal()],
proposals: [],
max: 1,
operationModalType: '',
next: null,
}
},
mounted() {
this.getList()
},
methods: {
formatType(v) {
const txt = String(v).replace('Proposal', '')
const index = txt.lastIndexOf('.')
return index > 0 ? txt.substring(index + 1) : txt
},
percent: v => percent(v),
formatDate: v => dayjs(v).format('YYYY-MM-DD'),
formatToken: v => tokenFormatter(v, {}),
@ -236,25 +253,31 @@ export default {
this.selectedTitle = title
},
getList() {
this.$http.getGovernanceList().then(res => {
const voting = res.filter(i => i.status === 2)
if (voting.length > 0) {
let i = 0
Promise.all(voting.reverse().map(p => this.$http.getGovernanceTally(p.id, p.tally.total))).then(update => {
this.proposals.map(x => {
if (x.status === 2) {
const xh = x
xh.tally = update[i]
i += 1
return xh
}
return x
})
})
}
this.proposals = res.reverse()
this.loading = true
this.$http.getGovernanceList(this.next).then(res => {
this.proposals = this.proposals.concat(res.proposals)
this.updateTally(this.proposals)
this.next = res.pagination.next_key
this.loading = false
})
},
updateTally(res) {
const voting = res.filter(i => i.status === 2)
if (voting.length > 0) {
let i = 0
Promise.all(voting.reverse().map(p => this.$http.getGovernanceTally(p.id, 0))).then(update => {
this.proposals.map(x => {
if (x.status === 2) {
const xh = x
xh.tally = update[i]
i += 1
return xh
}
return x
})
})
}
},
},
}
</script>