Merge pull request #143 from cosmos/peng/132-improve-validators-index

Improve Delegate Index View

app/src/renderer/components/staking/CardCandidate.vue

@@ -1,25 +1,25 @@
 <template lang='pug'>
-transition(name='ts-card-candidate'): div(:class='cssClass')
+transition(name='ts-card-candidate'): div(:class='styles')
   .card-candidate-container
     .values
-      .value.keybaseID
-        span {{ candidate.keybaseID }}
       .value.id
         span
-          template(v-if='signedIn')
+          template
             i.fa.fa-check-square-o(v-if='inCart' @click='rm(candidate)')
             i.fa.fa-square-o(v-else @click='add(candidate)')
           router-link(:to="{ name: 'candidate', params: { candidate: candidate.id }}")
-            | {{ candidate.pubkey.data }}
+            | {{ candidate.keybaseID}}
+      .value {{ candidate.country }}
       .value.voting_power.num.bar
         span {{ num.prettyInt(candidate.voting_power) }}
-        .bar(:style='atomsCss')
-      .value.delegated.num.bar.delegated(v-if='signedIn')
-        span {{ num.prettyInt(candidate.delegatedCoins) }}
-        .bar(:style='delegatedAtomsCss')
-    menu(v-if='signedIn')
+        .bar(:style='vpStyles')
+      .value.delegated.num.bar.delegated
+        span {{ num.prettyInt(candidate.shares) }}
+        .bar(:style='sharesStyles')
+      .value {{ (candidate.commission * 100).toFixed(2) }}%
+    menu
       btn(theme='cosmos' v-if='inCart'
-        icon='times' value='Remove' size='sm' @click.native='rm(candidate)')
+        icon='delete' value='Remove' size='sm' @click.native='rm(candidate)')
       btn(v-else='' theme='cosmos'
         icon='check' value='Add' size='sm' @click.native='add(candidate)')
 </template>
@@ -28,60 +28,52 @@ transition(name='ts-card-candidate'): div(:class='cssClass')
 import { mapGetters } from 'vuex'
 import num from 'scripts/num'
 import Btn from '@nylira/vue-button'
-// import { maxBy } from 'lodash'
+import { maxBy } from 'lodash'
 export default {
   name: 'card-candidate',
   props: ['candidate'],
   components: {
     Btn
   },
   computed: {
-    ...mapGetters(['shoppingCart', 'candidates', 'user']),
-    cssClass () {
+    ...mapGetters(['shoppingCart', 'candidates']),
+    styles () {
       let value = 'card-candidate'
       if (this.inCart) value += ' card-candidate-active '
       return value
     },
-    signedIn () {
-      return this.user.signedIn
+    vpMax () {
+      if (this.candidates.length > 0) {
+        let richestCandidate = maxBy(this.candidates, 'voting_power')
+        return richestCandidate.voting_power
+      } else { return 0 }
     },
-    maxAtoms () {
-      // if (this.candidates.length > 0) {
-      //   let richestCandidate = maxBy(this.candidates, 'atoms')
-      //   return richestCandidate.atoms
-      // } else { return 0 }
-      return 0
-    },
-    atomsCss () {
-      let percentage = Math.round((this.candidate.atoms / this.maxAtoms) * 100)
+    vpStyles () {
+      let percentage =
+        Math.round((this.candidate.voting_power / this.vpMax) * 100)
       return { width: percentage + '%' }
     },
-    maxDelegatedAtoms () {
-      // if (this.candidates) {
-      //   let richestCandidate = maxBy(this.candidates, 'computed.delegatedAtoms')
-      //   return richestCandidate.computed.delegatedAtoms
-      // } else { return 0 }
-      return 0
+    sharesMax () {
+      if (this.candidates) {
+        let richestCandidate = maxBy(this.candidates, 'shares')
+        return richestCandidate.shares
+      } else { return 0 }
     },
-    delegatedAtomsCss () {
-      let percentage = Math.round((this.candidate.delegatedAtoms /
-        this.maxDelegatedAtoms) * 100)
+    sharesStyles () {
+      let percentage =
+        Math.round((this.candidate.shares / this.sharesMax) * 100)
       return { width: percentage + '%' }
     },
     inCart () {
-      return this.shoppingCart.find(c => c.id === this.candidate.id)
+      return this.shoppingCart.candidates.find(c => c.id === this.candidate.id)
     }
   },
   data: () => ({
     num: num
   }),
   methods: {
-    add (candidate) {
-      this.$store.commit('addToCart', candidate)
-    },
-    rm (candidate) {
-      this.$store.commit('removeFromCart', candidate.id)
-    }
+    add (candidate) { this.$store.commit('addToCart', candidate) },
+    rm (candidate) { this.$store.commit('removeFromCart', candidate.id) }
   }
 }
 </script>
@@ -99,6 +91,9 @@ export default {
 
 .card-candidate-container
   position relative
+  &:hover
+    menu
+      display block
 
   .values
     display flex
@@ -111,21 +106,17 @@ export default {
     align-items center
     justify-content space-between
 
-    color dim
     padding 0 0.25rem
-    font-size sm
 
     min-width 0
 
     &.id
       i.fa
         margin-right 0.5rem
       a
-        color txt
+        color link
         &:hover
-          color bright
-    &.num
-      mono()
+          color hover
 
     &.bar
       position relative
@@ -138,16 +129,14 @@ export default {
 
         line-height 2rem
         padding 0 0.375rem
+        color txt
 
       .bar
         height 1.5rem
-        background darken(app-bg, 20%)
-        margin-right 1rem
-      &.delegated
-        span
-          color dim
-        .bar
-          background accent
+        background alpha(link, 33.3%)
+
+      &.delegated .bar
+        background alpha(accent, 33.3%)
 
     span
       display block
@@ -166,6 +155,7 @@ export default {
     display flex
     align-items center
     justify-content center
+    display none
 
 @media screen and (max-width: 414px)
   .card-candidate-container menu .ni-btn .ni-btn-value

app/src/renderer/components/staking/PageCandidates.vue

@@ -4,7 +4,7 @@ page(:title='pageTitle')
     a(@click='setSearch(true)')
       i.material-icons search
       .label Search
-    router-link(v-if="" to='/staking/delegate')
+    router-link(to='/staking/delegate')
       i.material-icons check_circle
       .label Delegate
   modal-search(v-if="filters.candidates.search.visible" type="candidates")
@@ -42,41 +42,34 @@ export default {
     ToolBar
   },
   computed: {
-    ...mapGetters(['candidates', 'filters', 'shoppingCart', 'user']),
+    ...mapGetters(['candidates', 'filters', 'shoppingCart']),
     pageTitle () {
-      if (this.user.signedIn) return `Candidates (${this.candidatesNum} Selected)`
-      else return 'Candidates'
+      return `Delegate (${this.candidatesNum} Candidates Selected)`
     },
     filteredCandidates () {
       let query = this.filters.candidates.search.query
       let list = orderBy(this.candidates, [this.sort.property], [this.sort.order])
       if (this.filters.candidates.search.visible) {
-        return list.filter(i => includes(i.keybaseID.toLowerCase(), query))
+        return list.filter(i => includes(i.keybaseID.toLowerCase(), query.toLowerCase()))
       } else {
         return list
       }
     },
-    candidatesNum () {
-      return this.shoppingCart.length
-    },
-    sort () {
-      let props = [
-        { id: 1, title: 'Keybase ID', value: 'keybaseID' },
-        { id: 2, title: 'Public Key', value: 'id' },
-        { id: 3, title: 'Delegated', value: 'voting_power', initial: true }
-      ]
-      if (this.user.signedIn) {
-        props.push({ id: 4, title: 'Delegated (Yours)', value: 'delegated' })
-      }
-      return {
-        property: 'voting_power',
-        order: 'desc',
-        properties: props
-      }
-    }
+    candidatesNum () { return this.shoppingCart.candidates.length }
   },
   data: () => ({
-    query: ''
+    query: '',
+    sort: {
+      property: 'keybaseID',
+      order: 'asc',
+      properties: [
+        { id: 1, title: 'Keybase ID', value: 'keybaseID', initial: true },
+        { id: 2, title: 'Country', value: 'country' },
+        { id: 3, title: 'Voting Power', value: 'voting_power' },
+        { id: 4, title: 'Delegated Power', value: 'shares' },
+        { id: 5, title: 'Commission', value: 'commission' }
+      ]
+    }
   }),
   methods: {
     setSearch (bool) { this.$store.commit('setSearchVisible', ['candidates', bool]) }

app/src/renderer/components/staking/PanelSort.vue

@@ -14,10 +14,8 @@ export default {
   methods: {
     orderBy (property, event) {
       let sortBys = $(this.$el).find('.sort-by')
-      console.log(sortBys)
       $(sortBys).removeClass('active desc asc')
       let el = $(event.target).parent()
-      console.log('el', el)
 
       if (this.sort.property === property) {
         if (this.sort.order === 'asc') {
@@ -65,6 +63,7 @@ export default {
   .label
     font-size sm
     color dim
+    text-transform uppercase
     padding-right 0.5rem
 
     white-space nowrap
@@ -75,8 +74,10 @@ export default {
     display block
     font-family FontAwesome
     color dim
+
   &.asc:after
     content '\f0d8'
+
   &.desc:after
     content '\f0d7'
 

app/src/renderer/vuex/modules/shoppingCart.js

@@ -1,4 +1,3 @@
-import { findIndex } from 'lodash'
 export default ({ commit, basecoin }) => {
   let state = { candidates: [] }
 
@@ -9,16 +8,9 @@ export default ({ commit, basecoin }) => {
         candidate: Object.assign({}, candidate),
         atoms: 0
       })
-      console.log(`+ ADD ${candidate.keybaseID} to cart`)
     },
     removeFromCart (state, candidate) {
-      let index = findIndex(state.candidates, c => {
-        return c.candidate.id === candidate
-      })
-      // console.log(`- RM ${JSON.stringify(state.candidates[index])} from cart[${index}]`)
-      let candidates = state.candidates.slice()
-      candidates.splice(index, 1)
-      state.candidates = candidates
+      state.candidates = state.candidates.filter(c => c.id !== candidate)
     }
   }