Repository
https://github.com/irelandscape/quearn
Pull Request: https://github.com/irelandscape/quearn/pull/22
New Features
Added support for adding beneficiaries to StemQ questions and answers.
Beneficiaries is a Steem feature whereby the author of a post can decide to share some of his/her post rewards with other Steem accounts.
Each beneficiary must be identified by a Steem username and a particular weight (percentage of post rewards).
What the feature does
I decided to follow the same type of design for managing beneficiaries found on other Steem apps like Steemstem.
The user would be presented with a button to add or remove beneficiaries before submitting the post. When clicked, the button would open a dialog offering the user to enter the details of a first beneficiary.
As the user starts typing in the username of the beneficiary, the code queries the Steem node in the background to indicate if the account is valid (green tick) or unknown (red cross).
I decided to use the QKnob widget from the Quasar framework to allow the user to select the share value between 0 and 100%, in steps of 5%.
When a beneficiary is properly configured, a '+' button becomes enabled allowing the user to add another beneficiary.
Some sanity check is added to ensure that no more than 8 beneficiaries are specified and that the total amount of share doesn't exceed 100%.
The beneficiaries Vue component
I started implementing a new beneficiaries Vue.js component which consists of a button and a dialog.
When the button is clicked, the dialog pops up on the screen:
The dialog itself consists in a series of rows. Each row is used to configure a beneficiary and consists of:
- an icon to indicate if the beneficiary username is known or not.
- a text input field to enter the beneficiary username
- A QKnob widget to allow configuration of the share (0 to 100%)
- A "delete" icon which is shown when the beneficiary has been inserted
- A "+" button which is enabled when the beneficiary is the last one in the list and is valid.
In the script section of the component, a beneficiaries array data is initialized with a single entry with all values set to 0 / false.
A valid property is added to each beneficiaries to facilitate the activation / enabling of other elements when the beneficiary details are correct.
The button described above must show the number of valid beneficiaries currently configured.
To this end a computed function is added which returns that value and is bound to the text label of the button:
Various methods are added to insert and remove beneficiaries from the array.
The weight itself is stored in the beneficiary entry with the units expected by Steem, that is the percentage multiplied by 100 (e.g. 10% has weight value 1000).
In order to display a value in percents to the user a simple method is added to make the conversion between weight and share percentage.
The user of this component must be able to retrieve all of the beneficiaries once the user validates the list by clicking the "Save" button in the dialog.
To this end a getBeneficiaries method is provided.
Note that the list of beneficiaries is returned in a format that is compliant with the Steem broadcast API so that no conversion is required in the calling code:
A method is bound to the username text input field to automatically check if the entered username is valid.
This check only happens when the username entered is four character long or more.
The debounce method is also used to make sure to limit the number of API requests to one every 300ms:
Finally a method ensures that the total amount of share across all beneficiaries does not exceed 100%.
This method is used to place a hard limit on the QKnob widget in real time:
Updating the editblog.vue component
The editblog component is the one that allows the user to create and submit a new question / answer post.
The new beneficiaries component is thus added at the bottom of the form:
The script code had to be updated because the previously used comment method provided by the Steemconnect SDK does not support specifying beneficiaries.
Instead, an operation broadcast API must be invoked with a reasonably complicated (and somewhat obscure) format of extended options carrying the beneficiaries: