379 lines
9.6 KiB
Vue
379 lines
9.6 KiB
Vue
<template>
|
|
<section>
|
|
<b-card
|
|
no-body
|
|
>
|
|
<b-card-header>
|
|
<b-card-title>
|
|
#{{ proposal.id }}
|
|
<b-badge
|
|
v-if="proposal.status == 1"
|
|
pill
|
|
variant="light-info"
|
|
class="text-right"
|
|
>
|
|
Deposit
|
|
</b-badge>
|
|
<b-badge
|
|
v-if="proposal.status == 2"
|
|
pill
|
|
variant="light-primary"
|
|
class="text-right"
|
|
>
|
|
Voting
|
|
</b-badge>
|
|
<b-badge
|
|
v-if="proposal.status == 3"
|
|
pill
|
|
variant="light-success"
|
|
class="text-right"
|
|
>
|
|
Passed
|
|
</b-badge>
|
|
<b-badge
|
|
v-if="proposal.status == 4"
|
|
pill
|
|
variant="light-danger"
|
|
class="text-right"
|
|
>
|
|
Rejected
|
|
</b-badge>
|
|
{{ proposal.title }}
|
|
</b-card-title>
|
|
</b-card-header>
|
|
<b-card-body>
|
|
<b-table-simple
|
|
stacked="sm"
|
|
hover
|
|
striped
|
|
>
|
|
<tbody>
|
|
<b-tr>
|
|
<b-td
|
|
style="text-transform: capitalize; vertical-align: top; width:200px"
|
|
>
|
|
{{ $t('proposal_id') }}
|
|
</b-td><b-td>{{ proposal.id }}</b-td>
|
|
</b-tr>
|
|
<b-tr>
|
|
<b-td>
|
|
{{ $t('proposal_proposer') }}
|
|
</b-td><b-td><router-link :to="`../account/${proposer.proposer}`">
|
|
{{ formatAddress(proposer.proposer) }}
|
|
</router-link> </b-td>
|
|
</b-tr>
|
|
<b-tr>
|
|
<b-td>
|
|
{{ $t('proposal_total_deposit') }}
|
|
</b-td><b-td>{{ proposal.total_deposit }} </b-td>
|
|
</b-tr>
|
|
<b-tr>
|
|
<b-td>
|
|
{{ $t('proposal_submit_time') }}
|
|
</b-td><b-td>{{ proposal.submit_time }}</b-td>
|
|
</b-tr>
|
|
<b-tr>
|
|
<b-td>
|
|
{{ $t('voting_time') }}
|
|
</b-td><b-td>{{ proposal.voting_start_time }} - {{ proposal.voting_end_time }}</b-td>
|
|
</b-tr>
|
|
<b-tr>
|
|
<b-td>
|
|
{{ $t('proposal_type') }}
|
|
</b-td><b-td>
|
|
{{ proposal.type }}
|
|
</b-td>
|
|
</b-tr>
|
|
</tbody>
|
|
</b-table-simple>
|
|
<div style="white-space: pre-line">
|
|
<object-field-component
|
|
:tablefield="proposal.contents"
|
|
:small="false"
|
|
/></div>
|
|
</b-card-body>
|
|
<b-card-footer>
|
|
<router-link :to="`../gov`">
|
|
<b-button
|
|
variant="outline-primary"
|
|
>
|
|
{{ $t('btn_back_list') }}
|
|
</b-button>
|
|
</router-link>
|
|
<b-button
|
|
v-b-modal.vote-window
|
|
:disabled="proposal.status!=2"
|
|
variant="primary"
|
|
class="btn float-right mg-2"
|
|
>
|
|
{{ $t('btn_vote') }}
|
|
</b-button>
|
|
</b-card-footer>
|
|
</b-card>
|
|
<operation-vote-component
|
|
:proposal-id="Number(proposal.id)"
|
|
:title="proposal.title"
|
|
/>
|
|
<b-card no-body>
|
|
<b-card-header>
|
|
<b-card-title>
|
|
Votes
|
|
</b-card-title>
|
|
</b-card-header>
|
|
<b-card-body>
|
|
<b-progress
|
|
:max="100"
|
|
height="2rem"
|
|
class="mb-2"
|
|
show-progress
|
|
>
|
|
<b-progress-bar
|
|
:id="'vote-yes'+proposal.id"
|
|
variant="success"
|
|
:value="proposal.tally.yes"
|
|
show-progress
|
|
/>
|
|
<b-progress-bar
|
|
:id="'vote-no'+proposal.id"
|
|
variant="warning"
|
|
:value="proposal.tally.no"
|
|
show-progress
|
|
/>
|
|
<b-progress-bar
|
|
:id="'vote-veto'+proposal.id"
|
|
variant="danger"
|
|
:value="proposal.tally.veto"
|
|
show-progress
|
|
/>
|
|
<b-progress-bar
|
|
:id="'vote-abstain'+proposal.id"
|
|
variant="info"
|
|
:value="proposal.tally.abstain"
|
|
show-progress
|
|
/>
|
|
</b-progress>
|
|
<b-tooltip
|
|
:target="'vote-yes'+proposal.id"
|
|
>
|
|
{{ proposal.tally.yes }}% voted Yes
|
|
</b-tooltip>
|
|
<b-tooltip
|
|
:target="'vote-no'+proposal.id"
|
|
>
|
|
{{ proposal.tally.no }}% voted No
|
|
</b-tooltip>
|
|
<b-tooltip
|
|
:target="'vote-veto'+proposal.id"
|
|
>
|
|
{{ proposal.tally.veto }}% voted No With Veta
|
|
</b-tooltip>
|
|
<b-tooltip
|
|
:target="'vote-abstain'+proposal.id"
|
|
>
|
|
{{ proposal.tally.abstain }}% voted Abstain
|
|
</b-tooltip>
|
|
<b-table
|
|
v-if="votes.votes && votes.votes.length > 0"
|
|
stacked="sm"
|
|
:fields="votes_fields"
|
|
:items="votes.votes"
|
|
striped
|
|
>
|
|
<template #cell(voter)="data">
|
|
<router-link :to="`../account/${data.item.voter}`">
|
|
{{ formatAddress(data.item.voter) }}
|
|
</router-link>
|
|
</template>
|
|
</b-table>
|
|
<b-card
|
|
v-if="next"
|
|
class="addzone text-center"
|
|
@click="loadVotes()"
|
|
>
|
|
<feather-icon icon="PlusIcon" />
|
|
Load More Votes
|
|
</b-card>
|
|
</b-card-body>
|
|
</b-card>
|
|
<b-card no-body>
|
|
<b-card-header>
|
|
<b-card-title>
|
|
Deposits ({{ proposal.total_deposit }})
|
|
</b-card-title>
|
|
</b-card-header>
|
|
<b-card-body>
|
|
<b-table
|
|
stacked="sm"
|
|
:items="deposits"
|
|
:fields="deposit_fields"
|
|
striped
|
|
>
|
|
<template #cell(depositor)="data">
|
|
<router-link :to="`../account/${data.item.depositor}`">
|
|
{{ formatAddress(data.item.depositor) }}
|
|
</router-link>
|
|
</template>
|
|
</b-table>
|
|
</b-card-body>
|
|
<b-card-footer>
|
|
<router-link :to="`../gov`">
|
|
<b-button
|
|
variant="outline-primary"
|
|
>
|
|
{{ $t('btn_back_list') }}
|
|
</b-button>
|
|
</router-link>
|
|
<b-button
|
|
:disabled="proposal.status!=2"
|
|
variant="primary"
|
|
class="btn float-right mg-2"
|
|
>
|
|
{{ $t('btn_vote') }}
|
|
</b-button>
|
|
</b-card-footer>
|
|
</b-card>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
BCard, BCardBody, BCardFooter, BButton, BTable, BTableSimple, BTr, BTd, BCardTitle, BCardHeader,
|
|
BProgressBar, BProgress, BTooltip, BBadge,
|
|
} from 'bootstrap-vue'
|
|
// import fetch from 'node-fetch'
|
|
|
|
import { getCachedValidators, getStakingValidatorByAccount, tokenFormatter } from '@/libs/data/data'
|
|
import { Proposal, Proposer } from '@/libs/data'
|
|
import ObjectFieldComponent from './ObjectFieldComponent.vue'
|
|
import OperationVoteComponent from './OperationVoteComponent.vue'
|
|
// import { formatToken } from '@/libs/data/data'
|
|
|
|
export default {
|
|
components: {
|
|
BCard,
|
|
BCardTitle,
|
|
BCardBody,
|
|
BCardFooter,
|
|
BButton,
|
|
BTable,
|
|
BTableSimple,
|
|
BCardHeader,
|
|
BTr,
|
|
BTd,
|
|
BProgressBar,
|
|
BProgress,
|
|
BTooltip,
|
|
BBadge,
|
|
ObjectFieldComponent,
|
|
OperationVoteComponent,
|
|
},
|
|
data() {
|
|
return {
|
|
next: null,
|
|
proposal: new Proposal(),
|
|
proposer: new Proposer(),
|
|
deposits: [],
|
|
votes: [],
|
|
votes_fields: [
|
|
{
|
|
key: 'voter',
|
|
sortable: true,
|
|
formatter: v => this.formatAddress(v),
|
|
},
|
|
{
|
|
key: 'option',
|
|
sortable: true,
|
|
formatter: value => {
|
|
switch (value) {
|
|
case 1:
|
|
case 'VOTE_OPTION_YES':
|
|
return 'Yes'
|
|
case 2:
|
|
case 'VOTE_OPTION_ABSTAIN':
|
|
return 'Abstain'
|
|
case 3:
|
|
case 'VOTE_OPTION_NO':
|
|
return 'No'
|
|
case 4:
|
|
case 'VOTE_OPTION_NO_WITH_VETO':
|
|
return 'No With Veto'
|
|
default:
|
|
return value
|
|
}
|
|
},
|
|
},
|
|
],
|
|
deposit_fields: [
|
|
{
|
|
key: 'depositor',
|
|
formatter: v => this.formatAddress(v),
|
|
},
|
|
{
|
|
key: 'amount',
|
|
sortable: true,
|
|
formatter: tokenFormatter,
|
|
},
|
|
],
|
|
}
|
|
},
|
|
|
|
created() {
|
|
const pid = this.$route.params.proposalid
|
|
|
|
this.$http.getGovernance(pid).then(p => {
|
|
if (p.status === 2) {
|
|
this.$http.getGovernanceTally(pid, 0).then(t => p.updateTally(t))
|
|
}
|
|
this.proposal = p
|
|
})
|
|
|
|
if (!getCachedValidators()) {
|
|
this.$http.getValidatorList()
|
|
}
|
|
|
|
this.$http.getGovernanceProposer(pid).then(res => {
|
|
this.proposer = res
|
|
})
|
|
this.$http.getGovernanceDeposits(pid).then(res => {
|
|
this.deposits = res
|
|
})
|
|
this.$http.getGovernanceVotes(pid).then(res => {
|
|
this.votes = res
|
|
this.next = res.pagination ? res.pagination.next_key : null
|
|
})
|
|
},
|
|
methods: {
|
|
loadVotes() {
|
|
if (this.next) {
|
|
const pid = this.$route.params.proposalid
|
|
const { next } = this
|
|
this.next = null
|
|
this.$http.getGovernanceVotes(pid, next).then(res => {
|
|
this.$set(this.votes, 'votes', this.votes.votes.concat(res.votes))
|
|
this.next = res.pagination ? res.pagination.next_key : null
|
|
})
|
|
}
|
|
},
|
|
formatAddress(v) {
|
|
return getStakingValidatorByAccount(this.$http.config.chain_name, v)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="css">
|
|
.addzone {
|
|
border: 2px dashed #ced4da;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
box-shadow: none;
|
|
}
|
|
.addzone :hover {
|
|
border: 2px dashed #7367F0;
|
|
}
|
|
@media (min-width: 768px) {
|
|
td:first-child { width: 20% ;}
|
|
}
|
|
</style>
|