Show all delegates; show if a delegate is resigned; delegate list is …

…searchable
Internet-of-People · Sep 25, 2020 · 00fead5 · 00fead5
1 parent 72d8907
commit 00fead5
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 16 deletions.
diff --git a/src/views/ViewAddress.scss → ...mponents/DelegatesList/DelegatesList.scss b/src/views/ViewAddress.scss → ...mponents/DelegatesList/DelegatesList.scss
@@ -6,7 +6,12 @@
   width: 30%;
 }
 
+.delegatesVotesCol {
+  width: 40%;
+  text-align: right;
+}
+
 .delegatesActionsCol {
-  width: 60%;
+  width: 20%;
   text-align: right;
 }
diff --git a/src/components/DelegatesList/DelegatesList.vue b/src/components/DelegatesList/DelegatesList.vue
@@ -17,12 +17,16 @@
     <b-alert show variant="warning" class="mt-3 mx-3" v-else>
       You're currently not voting.
     </b-alert>
+    <div class="mx-3 mt-5">
+      <b-form-input v-model="delegateFilter" placeholder="Search delegate"></b-form-input>
+    </div>
     <b-table
       sticky-header="400px"
       fixed
       :items="delegates"
       :fields="delegatesTableFields"
       :busy="loading"
+      :filter="delegateFilter"
       class="mt-3"
     >
       <template v-slot:table-busy>
@@ -56,6 +60,8 @@ interface Delegate {
   username: string;
   publicKey: string;
   rank: number;
+  votes: string;
+  _rowVariant: string | null;
 }
 
 @Component({
@@ -78,13 +84,17 @@ export default class DelegatesList extends Vue {
   private confirmTxParams: IConfirmTxModalParams | null = null;
   private selectedIndex: number | null = null;
   private availableAmount: string | null = null;
+  private delegateFilter: string | null = null;
 
   get delegatesTableFields(): Array<any> {
     const fields = [
       {
         key: 'rank', label: '#', thClass: 'delegatesRankCol text-center', tdClass: 'text-center',
       },
       { key: 'username', label: 'Username', thClass: 'delegatesUsernameCol' },
+      {
+        key: 'votes', label: 'Votes', thClass: 'text-right', tdClass: 'delegatesVotesCol',
+      },
     ];
 
     if (!this.votingOnPubKey) {
@@ -108,18 +118,19 @@ export default class DelegatesList extends Vue {
   private async beforeMount(): Promise<void> {
     const api = getApi(this.selectedNetwork.kind);
 
-    const resp = await api.get('/api/delegates?page=1&limit=53&orderBy=rank%3Aasc', { validateStatus: () => true });
-    if (resp.status === 200) {
-      this.delegates = resp.data.data.map((d: any): Delegate => ({
-        rank: d.rank,
-        username: d.username,
-        publicKey: d.publicKey,
-      }));
-    }
+    const delegates = await this.loadDelegates();
+
+    this.delegates = delegates.map((d: any): Delegate => ({
+      rank: d.rank,
+      username: d.isResigned ? `${d.username} (resigned)` : d.username,
+      publicKey: d.publicKey,
+      votes: `${flakesToHuman(d.votes)} ${this.selectedNetwork.ticker}`,
+      _rowVariant: d.isResigned ? 'warning' : null,
+    }));
 
     if (this.votingOnPubKey) {
       const delegateResp = await api.get(`/api/wallets/${this.votingOnPubKey}`, { validateStatus: () => true });
-      if (resp.status === 200) {
+      if (delegateResp.status === 200) {
         this.votingOnName = delegateResp.data.data.username;
       }
     }
@@ -132,6 +143,23 @@ export default class DelegatesList extends Vue {
     this.loading = false;
   }
 
+  private async loadDelegates(page = 1): Promise<Array<any>> {
+    let delegates: Array<any> = [];
+    const api = getApi(this.selectedNetwork.kind);
+    const resp = await api.get(`/api/delegates?page=${page}&limit=100&orderBy=rank%3Aasc`, { validateStatus: () => true });
+
+    if (resp.status === 200) {
+      if (resp.data.data.length === 0) {
+        return delegates;
+      }
+
+      delegates = delegates.concat(resp.data.data);
+      delegates = delegates.concat(await this.loadDelegates(page + 1));
+    }
+
+    return delegates;
+  }
+
   private async onVoteClick(index: number): Promise<void> {
     this.selectedIndex = index;
     this.confirmTxParams = {
@@ -176,3 +204,6 @@ export default class DelegatesList extends Vue {
   }
 }
 </script>
+<style lang="scss">
+@import './DelegatesList.scss';
+</style>
diff --git a/src/views/ViewAddress.vue b/src/views/ViewAddress.vue
@@ -82,7 +82,6 @@ export default class ViewAddress extends Vue {
   @Getter('selectedWalletHash', { namespace: persisted }) selectedWalletHash!: string;
   @Getter('selectedAccountIndex', { namespace: persisted }) selectedAccountIndex!: number;
   @Getter('unlockPassword', { namespace: inMemory }) unlockPassword!: string;
-  private loading = true;
   private address = '';
   private balance = '';
   private votingOnPubKey = '';
@@ -120,15 +119,10 @@ export default class ViewAddress extends Vue {
       this.balance = flakesToHuman(BigInt(resp.data.data.balance));
       this.votingOnPubKey = resp.data.data.vote ? resp.data.data.vote : '';
     }
-
-    this.loading = false;
   }
 
   private onAddressDeleted(): void {
     this.$router.push({ name: 'Dashboard' });
   }
 }
 </script>
-<style lang="scss">
-@import './ViewAddress.scss';
-</style>