Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Delegate Index View #143

Merged
merged 16 commits into from
Dec 1, 2017
98 changes: 44 additions & 54 deletions app/src/renderer/components/staking/CardCandidate.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -99,6 +91,9 @@ export default {

.card-candidate-container
position relative
&:hover
menu
display block

.values
display flex
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
41 changes: 17 additions & 24 deletions app/src/renderer/components/staking/PageCandidates.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down Expand Up @@ -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]) }
Expand Down
5 changes: 3 additions & 2 deletions app/src/renderer/components/staking/PanelSort.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down Expand Up @@ -65,6 +63,7 @@ export default {
.label
font-size sm
color dim
text-transform uppercase
padding-right 0.5rem

white-space nowrap
Expand All @@ -75,8 +74,10 @@ export default {
display block
font-family FontAwesome
color dim

&.asc:after
content '\f0d8'

&.desc:after
content '\f0d7'

Expand Down
10 changes: 1 addition & 9 deletions app/src/renderer/vuex/modules/shoppingCart.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { findIndex } from 'lodash'
export default ({ commit, basecoin }) => {
let state = { candidates: [] }

Expand All @@ -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)
}
}

Expand Down
Loading