Treasury: fixed proposal list and submit proposal

Author: vikiival

dashboard/src/components/shared/PasswordInput.vue

@@ -0,0 +1,38 @@
+<template>
+  <b-field v-if="!accountLocked" label="password 🤫 magic spell" class="password-wrapper">
+      <b-input :value="value" @input="handlePassword" type="password" password-reveal> </b-input>
+    </b-field>
+</template>
+
+<script lang="ts" >
+import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
+import keyring from '@polkadot/ui-keyring';
+
+@Component
+export default class PasswordInput extends Vue {
+  private accountLocked: boolean = false;
+
+  @Prop() public value!: string;
+  @Prop({ default: '' }) public account!: string;
+
+  public mounted() {
+    if (this.account) {
+      try {
+        // TODO: missing isLocked from vue-keyring
+        const acc = keyring.getAccount(this.account)
+      } catch(err) {
+        console.warn('[Password] unable to get account', err)
+      }
+      
+      
+    }
+  }
+
+
+  @Emit('input')
+  private handlePassword(password: string) {
+    return password;
+  }
+
+}
+</script>

dashboard/src/components/shared/modals/Proposal.vue

@@ -1,13 +1,10 @@
 <template>
 	<ModalWrapper label="Add Proposal" icon="plus">
 		<div>
-		<Dropdown mode="accounts" @selected="handleAccountSelection" />
-    <Dropdown mode="accounts" @selected="handleBeneficiary" />
-    <BalanceInput v-model="value" />
-		<b-field label="password 🤫 magic spell" class="password-wrapper">
-      <b-input v-model="password" type="password" password-reveal> </b-input>
-    </b-field>
-    
+		<AccountSelect label="submit with account" v-model="accountId" />
+    <AccountSelect label="beneficiary" v-model="beneficiaryId" />
+    <BalanceInput v-model="amount" />
+		<PasswordInput v-model="password" />    
       <b-button
         type="is-primary"
         icon-left="paper-plane"
@@ -30,53 +27,47 @@ import { KeyringPair } from '@polkadot/keyring/types';
 import { notificationTypes,  showNotification } from '@/utils/notification';
 import exec from '@/utils/transactionExecutor';
 import { urlBuilderTransaction } from '@/utils/explorerGuide';
-import C from '@vue-polkadot/vue-api'
-import BalanceInput from '@/components/shared/BalanceInput.vue'
+import Connector from '@vue-polkadot/vue-api';
+import BalanceInput from '@/components/shared/BalanceInput.vue';
+import AccountSelect from '@/components/shared/AccountSelect.vue'
+import PasswordInput from '@/components/shared/PasswordInput.vue';
 
 @Component({
 	components: {
 		ModalWrapper,
-    Dropdown,
+    AccountSelect,
     BalanceInput,
+    PasswordInput
 	},
 })
 export default class ProposalModal extends Vue {
-	private account: any = {};
+  private accountId: string = '';
+  private beneficiaryId: string = '';
 	private password: string = '';
   private beneficiary: any = {};
-  private value: number = 0;
+  private amount: number = 0;
 	
-
-
-  public handleAccountSelection(account: KeyringPair) {
-		this.account = account;
-  }
-  
-  public handleBeneficiary(account: KeyringPair) {
-    console.log(account.address)
-    this.beneficiary = account;
-  }
-
   public async shipIt() {
-    const { api } = C.getInstance()
+    const { api } = Connector.getInstance();
 
     if (!api) {
       return;
     }
     
     try {
-      const { value, beneficiary } = this;
-      showNotification('Dispatched');
-      const tx = await exec(this.account, this.password, api.tx.treasury.proposeSpend, [value, beneficiary.address]);
-      // showNotification(`Second ${referendumId.toString()}`, { ...notificationTypes.success, onAction: this.onAction() });
+      const { amount, beneficiaryId, accountId, password } = this;
+      showNotification('Dispatched new proposal');
+      console.log({ amount, beneficiaryId, accountId, password })
+      const tx = await exec(accountId, password, api.tx.treasury.proposeSpend, [amount, beneficiaryId]);
+      showNotification('Success', notificationTypes.success );
     } catch (e) {
       showNotification(e, notificationTypes.danger);
     }
 
   }
   
   get disabled() {
-    return !this.account || !this.password || !this.beneficiary || !this.value
+    return !this.accountId || !this.beneficiary || !this.amount
   }
   
 }

dashboard/src/components/treasury/Proposal.vue

@@ -1,24 +1,24 @@
 <template>
   <ItemCard>
-    <div class="column is-0 proposal-index__main">
+    <div class="column is-1 proposal-index__main">
       {{ proposal.id | toNumber }}
     </div>
-    <div class="column is-4 proposal-adress__overflow">
+    <div class="column is-3 proposal-adress__overflow">
       <WithLabel label="Proposer"><div>{{ proposal.proposal.proposer | toString }}</div></WithLabel>
 
     </div>
-    <div class="column is-4 proposal-adress__overflow">
+    <div class="column is-3 proposal-adress__overflow">
       <WithLabel label="Beneficiary"><div>{{ proposal.proposal.beneficiary | toString }}</div></WithLabel>
 
     </div>
-    <div class="column is-1">
-      <WithLabel label="Payment"><Money :value="2000000000000000" /></WithLabel>
+    <div class="column is-2">
+      <WithLabel label="Payment"><Money :value="proposal.proposal.value" /></WithLabel>
     </div>
     <div class="column is-1">
-      <WithLabel label="Bond"><Money :value="100000000000000" /></WithLabel>
+      <WithLabel label="Bond"><Money :value="proposal.proposal.bond" /></WithLabel>
     </div>
     <div class="column is-2 ">
-      <b-button class="proposal-button__action" is-primary disabled
+      <b-button class="proposal-button__action" is-primary disabled icon-left="step-forward"
         >To Council</b-button
       >
     </div>
@@ -60,8 +60,6 @@ export default class Proposal extends Vue {
 } */
 
 .proposal-adress__overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-word;
 }
 </style>

dashboard/src/icons.ts

@@ -12,7 +12,7 @@ import {
   faArrowUp, faTools, faCheck, faSeedling, faDatabase, faGem, 
   faInfoCircle, faExchangeAlt, faBug, faStop, faEllipsisV, faPercent,
   faUsersCog, faCoins, faAngleLeft, faAngleRight,
-  faCreditCard
+  faCreditCard, faStepForward
 } from '@fortawesome/free-solid-svg-icons';
 
 import { faTwitter } from '@fortawesome/free-brands-svg-icons';
@@ -30,7 +30,7 @@ library.add(faTrash, faKey, faSync, faRedo,
   faTwitter, faArrowUp, faTools, faCheck, faSeedling, 
   faDatabase, faGem,  faInfoCircle, faExchangeAlt,
   faBug, faStop, faEllipsisV, faPercent, faUsersCog, faCoins,
-  faAngleLeft, faAngleRight, faCreditCard
+  faAngleLeft, faAngleRight, faCreditCard, faStepForward
   );
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';