Merge pull request #179 from pqv199x/add-transaction-table-voter

add-transaction-table-voter

app/components/voters/View.vue

@@ -160,6 +160,79 @@
                 align="center"
                 class="tomo-pagination" />
         </div>
+
+        <div class="container section section--txs">
+            <div class="row">
+                <div class="col-12">
+                    <h3 class="section-title">
+                        <i class="tm-time color-purple" />
+                        <span>Transactions</span>
+                        <span class="text-truncate section-title__description">
+                            All transactions of this voter</span>
+                    </h3>
+                </div>
+            </div>
+            <b-table
+                :items="sortedTransactions"
+                :fields="txFields"
+                :current-page="txCurrentPage"
+                :per-page="txPerPage"
+                :sort-by.sync="txSortBy"
+                :sort-desc.sync="txSortDesc"
+                :show-empty="true"
+                :class="`tomo-table tomo-table--transactions${loading ? ' loading' : ''}`"
+                empty-text="There are no transactions to show"
+                stacked="md" >
+
+                <template
+                    slot="id"
+                    slot-scope="data">{{ data.item.id }}
+                </template>
+
+                <template
+                    slot="candidate"
+                    slot-scope="data">
+                    <router-link
+                        :to="'/v/' + data.item.candidate"
+                        class="text-truncate">
+                        {{ data.item.candidate }}
+                    </router-link>
+                </template>
+
+                <template
+                    slot="event"
+                    slot-scope="data">
+                    <span :class="'fw-600 ' + getEventClass(data.item.event)">{{ data.item.event }}</span>
+                </template>
+
+                <template
+                    slot="cap"
+                    slot-scope="data">
+                    {{ isNaN(data.item.cap) ? '---' : formatCurrencySymbol(data.item.cap) }}
+                </template>
+
+                <template
+                    slot="tx"
+                    slot-scope="data">
+                    <a
+                        v-b-tooltip.hover.right
+                        :href="`${config.explorerUrl}/txs/${data.item.tx}`"
+                        title="View on TomoScan"
+                        target="_blank">
+                        <i class="tm-eye" />
+                        <span>View on TomoScan</span>
+                    </a>
+                </template>
+            </b-table>
+
+            <b-pagination
+                v-if="txTotalRows > 0 && txTotalRows > txPerPage"
+                :total-rows="txTotalRows"
+                :per-page="txPerPage"
+                v-model="txCurrentPage"
+                align="center"
+                class="tomo-pagination" />
+        </div>
     </div>
 </template>
 <script>
@@ -236,20 +309,64 @@ export default {
             voterRewardsPerPage: 10,
             voterRewardsSortDesc: true,
             voterRewardsTotalRows: 0,
-            loading: false
+            loading: false,
+            txFields: [
+                {
+                    key: 'id',
+                    label: 'ID',
+                    sortable: false
+                },
+                {
+                    key: 'candidate',
+                    label: 'Candidate',
+                    sortable: true
+                },
+                {
+                    key: 'event',
+                    label: 'Event',
+                    sortable: true
+                },
+                {
+                    key: 'cap',
+                    label: 'Capacity',
+                    sortable: true
+                },
+                {
+                    key: 'tx',
+                    label: '',
+                    sortable: false
+                },
+                {
+                    key: 'createdAt',
+                    label: 'Age',
+                    sortable: false
+                }
+            ],
+            transactions: [],
+            txSortBy: 'cap',
+            txSortDesc: true,
+            txCurrentPage: 1,
+            txPerPage: 10,
+            txTotalRows: 0
         }
     },
     computed: {
         sortedCandidates: function () {
             return this.candidates.slice().sort(function (a, b) {
                 return b.cap - a.cap
             })
+        },
+        sortedTransactions: function () {
+            return this.transactions.slice().sort(function (a, b) {
+                return b.cap - a.cap
+            })
         }
     },
     watch: {},
     update () {},
     created: async function () {
         let self = this
+        self.config = await self.appConfig()
         try {
             let voter = self.$route.params.address
 
@@ -290,11 +407,37 @@ export default {
 
             self.voterRewardsTotalRows = self.voterRewards.length
 
+            let txs = await axios.get(`/api/transactions/voter/${voter}`)
+            console.log(JSON.stringify(txs.data))
+            txs.data.map((tx, idx) => {
+                self.transactions.push({
+                    id: idx + 1,
+                    tx: tx.tx,
+                    voter: tx.voter,
+                    candidate: tx.candidate,
+                    event: tx.event,
+                    cap: new BigNumber(tx.capacity).div(10 ** 18).toNumber(),
+                    createdAt: moment(tx.createdAt).fromNow()
+                })
+            })
+
+            self.txTotalRows = self.transactions.length
+
             self.loading = false
         } catch (e) {
             self.loading = false
             console.log(e)
         }
+    },
+    methods: {
+        getEventClass (event) {
+            let clazz = ''
+            if (event === 'Unvote' || event === 'Resign') {
+                clazz = 'color-pink'
+            }
+
+            return clazz
+        }
     }
 }
 </script>