improve active proposal

src/views/Dashboard.vue

@@ -93,33 +93,128 @@
         <b-card-title>Active Proposals</b-card-title>
       </b-card-header>
       <b-card-body>
-        <b-media
+        <b-row
           v-for="prop in proprosals2"
           :key="prop.id"
-          no-body
-          class="mb-1"
         >
-          <b-media-aside
+          <b-col
-            v-b-modal.operation-modal
+            md="6"
-            @click="selectProposal('Vote',prop.id, prop.title)"
+            sm="12"
           >
-            <b-avatar
+            <b-media
-              rounded
+              no-body
-              size="42"
+              class="mb-1"
-              :variant="myVotes[prop.id] ? 'light-primary': 'primary'"
             >
-              {{ myVotes[prop.id] || 'Vote' }}
+              <b-media-aside
-            </b-avatar>
+                @click="showDetail(prop.id)"
-          </b-media-aside>
+              >
-          <b-link :to="`./${chain}/gov/${prop.id}`">
+                <b-avatar
-            <b-media-body class="d-flex flex-column justify-content-center">
+                  rounded
-              <h6 class="transaction-title">
+                  size="42"
-                {{ prop.id }}. {{ prop.title }}
+                  variant="light-primary"
-              </h6>
+                >
-              <small>{{ formatType(prop.contents['@type']) }}  {{ formatEnding(prop.voting_end_time) }}</small>
+                  {{ prop.id }}
-            </b-media-body>
+                </b-avatar>
-          </b-link>
+              </b-media-aside>
-        </b-media>
+              <b-link :to="`./${chain}/gov/${prop.id}`">
+                <b-media-body class="d-flex flex-column justify-content-center">
+                  <h6 class="transaction-title">
+                    {{ prop.title }}
+                  </h6>
+                  <small>{{ formatType(prop.contents['@type']) }}  {{ formatEnding(prop.voting_end_time) }}</small>
+                </b-media-body>
+              </b-link>
+            </b-media>
+          </b-col>
+          <b-col
+            md="6"
+            sm="12"
+          >
+            <b-row>
+              <b-col cols="8">
+                <b-progress
+                  :max="100"
+                  height="2rem"
+                  show-progress
+                >
+                  <b-progress-bar
+                    :id="'vote-yes'+prop.id"
+                    variant="success"
+                    :value="percent(prop.tally.yes)"
+                    show-progress
+                    :label="`${percent(prop.tally.yes).toFixed()}%`"
+                  />
+                  <b-progress-bar
+                    :id="'vote-no'+prop.id"
+                    variant="warning"
+                    :value="percent(prop.tally.no)"
+                    :label="`${percent(prop.tally.no).toFixed()}%`"
+                    show-progress
+                  />
+                  <b-progress-bar
+                    :id="'vote-veto'+prop.id"
+                    variant="danger"
+                    :value="percent(prop.tally.veto)"
+                    :label="`${percent(prop.tally.veto).toFixed()}%`"
+                    show-progress
+                  />
+                  <b-progress-bar
+                    :id="'vote-abstain'+prop.id"
+                    variant="secondary"
+                    :value="percent(prop.tally.abstain)"
+                    :label="`${percent(prop.tally.abstain).toFixed()}%`"
+                    show-progress
+                  />
+                </b-progress>
+                <b-tooltip
+                  :target="'vote-yes'+prop.id"
+                >
+                  {{ percent(prop.tally.yes) }}% voted Yes
+                </b-tooltip>
+                <b-tooltip
+                  :target="'vote-no'+prop.id"
+                >
+                  {{ percent(prop.tally.no) }}% voted No
+                </b-tooltip>
+                <b-tooltip
+                  :target="'vote-veto'+prop.id"
+                >
+                  {{ percent(prop.tally.veto) }}% voted No With Veto
+                </b-tooltip>
+                <b-tooltip
+                  :target="'vote-abstain'+prop.id"
+                >
+                  {{ percent(prop.tally.abstain) }}% voted Abstain
+                </b-tooltip>
+              </b-col>
+              <b-col cols="4">
+                <b-button
+                  v-b-modal.operation-modal
+                  variant="primary"
+                  size="sm"
+                  @click="selectProposal('Vote',prop.id, prop.title)"
+                >
+                  {{ myVotes[prop.id] ? `${myVotes[prop.id]}`: 'Vote' }}
+                </b-button>
+              </b-col>
+            </b-row>
+          </b-col>
+          <b-col
+            cols="12"
+            :class="detailId === prop.id? 'd-block': 'd-none'"
+          >
+            <b-card
+              border-variant="primary"
+              bg-variant="transparent"
+              class="shadow-none"
+              style="max-height:350px;overflow: auto;"
+            >
+              <VueMarkdown>
+                {{ addNewLine(prop.description) }}
+              </VueMarkdown>
+            </b-card>
+          </b-col>
+        </b-row>
         <div v-if="proprosals2.length === 0">
           No active proposal!
           <b-link :to="`./${chain}/gov`">
@@ -343,7 +438,7 @@
 <script>
 import {
   BRow, BCol, BAlert, BCard, BTable, BFormCheckbox, BCardHeader, BCardTitle, BMedia, BMediaAside, BMediaBody, BAvatar,
-  BCardBody, BLink, BButtonGroup, BButton, BTooltip, VBModal, VBTooltip, BCardFooter,
+  BCardBody, BLink, BButtonGroup, BButton, BTooltip, VBModal, VBTooltip, BCardFooter, BProgress, BProgressBar,
 } from 'bootstrap-vue'
 import {
   formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter, getLocalAccounts,
@@ -352,6 +447,7 @@ import {
 import OperationModal from '@/views/components/OperationModal/index.vue'
 import Ripple from 'vue-ripple-directive'
 import dayjs from 'dayjs'
+import VueMarkdown from 'vue-markdown'
 import ParametersModuleComponent from './components/parameters/ParametersModuleComponent.vue'
 import DashboardCardHorizontal from './components/dashboard/DashboardCardHorizontal.vue'
 import DashboardCardVertical from './components/dashboard/DashboardCardVertical.vue'
@@ -378,6 +474,9 @@ export default {
     BCardBody,
     BLink,
     BCardFooter,
+    BProgress,
+    BProgressBar,
+    VueMarkdown,
 
     OperationModal,
     ParametersModuleComponent,
@@ -393,6 +492,7 @@ export default {
   },
   data() {
     return {
+      detailId: 0,
       fields: ['validator', 'delegation', 'rewards', 'action'],
       delegations: [],
       rewards: [],
@@ -461,9 +561,26 @@ export default {
     },
   },
   created() {
-    this.$http.getGovernanceListByStatus(2).then(res => {
+    this.$http.getStakingParameters().then(res => {
-      this.proposals = res.proposals
+      Promise.all([this.$http.getStakingPool(), this.$http.getBankTotal(res.bond_denom)])
+        .then(pool => {
+          this.supply = `${formatNumber(formatTokenAmount(pool[1].amount, 2, res.bond_denom, false), true, 2)}`
+          this.bonded = `${formatNumber(formatTokenAmount(pool[0].bondedToken, 2, res.bond_denom, false), true, 2)}`
+          this.ratio = `${percent(pool[0].bondedToken / pool[1].amount)}%`
+
+          this.$http.getGovernanceListByStatus(2).then(gov => {
+            gov.proposals.forEach(p => {
+              this.$http.getGovernanceTally(p.id, pool[0].bondedToken).then(update => {
+                const p2 = p
+                p2.tally = update
+                this.proposals.push(p2)
+                this.proposals.sort((a, b) => a.id - b.id)
+              })
+            })
+          })
+        })
     })
+
     this.$http.getLatestBlock().then(res => {
       this.height = res.block.header.height
       if (timeIn(res.block.header.time, 3, 'm')) {
@@ -475,15 +592,6 @@ export default {
       this.validators = res.block.last_commit.signatures.length
     })
 
-    this.$http.getStakingParameters().then(res => {
-      Promise.all([this.$http.getStakingPool(), this.$http.getBankTotal(res.bond_denom)])
-        .then(pool => {
-          this.supply = `${formatNumber(formatTokenAmount(pool[1].amount, 2, res.bond_denom, false), true, 2)}`
-          this.bonded = `${formatNumber(formatTokenAmount(pool[0].bondedToken, 2, res.bond_denom, false), true, 2)}`
-          this.ratio = `${percent(pool[0].bondedToken / pool[1].amount)}%`
-        })
-    })
-
     this.$http.getCommunityPool().then(res => {
       this.communityPool = this.formatToken(res.pool)
     })
@@ -609,6 +717,10 @@ export default {
         return { title: this.convert(data[k]), subtitle: k }
       })
     },
+    addNewLine(value) {
+      return value ? value.replace(/(?:\\[rn])+/g, '\n') : '-'
+    },
+    percent: v => percent(v),
     formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm:ss'),
     convert(v) {
       if (typeof v === 'object') {
@@ -633,6 +745,13 @@ export default {
       }
       return v
     },
+    showDetail(id) {
+      if (this.detailId !== id) {
+        this.detailId = id
+      } else {
+        this.detailId = 0
+      }
+    },
   },
 }
 </script>