I got assigned this task as my first task for Utopian. It was a fairly simple contribution, but because it was my first time looking and coding into the project, it took a little while for me to get used to it and finally finishing it.
Task: https://busy.org/@gregory.latinier/utopian-v2-task-profile-module-skills
PR: https://github.com/utopian-io/v2.utopian.io/pull/213
The main component from Quasar Framework that is needed for this task is the Autocomplete Component. It works together with the Chips Input Component which was necessary in order to add multiple values (as an array) to the field. With this setup, the user can choose an existing skill or add a new one. The Quasar framework has very important properties such as :min-characters (How many minimum characters can trigger component to suggest something?) and :max-results (How many results can be displayed at a time?), which was very helpful and easy to implement
q-field(:count="30")
q-chips-input(
v-model="skills"
@duplicate="duplicatedSkills"
@input="chipsInputChange"
:placeholder="skills.length === 0 ? $t('users.profile.skills.placeholder') : ''"
)
q-autocomplete(@search="skillsAutocomplete", :min-characters="2", :max-results="10")
The @search event calls a desired function when, in this case, 2 characters are typed in. This function must return the values for the autocomplete field. The endpoint created returns all the suggested skills from all of the others Utopian users and how many users has added the skill into their profiles.
A custom validation was done in the frontend. If the user adds a one character skill, it is removed and a message is displayed.
I also used the @duplicate function to warn the user that adding the same skill twice is not permitted.
Two endpoints were created. One for updating the skills, and the other one to get the suggestions for the autocomplete. The one for updating the skills used an existing function to update the profile. But a new function was necessary for the autocomplete suggestion. It’s passed via a POST request the string to be searched and the already typed skills from the frontend (so the query won’t return an already typed skill as a suggestion). The UML for the task is user.skills[], so as you can check below I used the $unwind pipeline in order to get all of the skills of all users as a singular document.
const skills = await User.aggregate([
{ '$unwind': '$skills' },
{ '$match': { skills: { '$regex': req.payload.partial, '$options': 'i', '$nin': req.payload.skills } } },
{ '$group': { _id: '$skills', occurrences: { '$sum': 1 } } },
{ '$limit': 10 },
{ '$addFields': { name: '$_id' } },
{ '$sort': { 'occurrences': -1, 'skill': 1 } }
])
- Profile update endpoint: It’s checked after a profile was updated if the server returned a 200 as a status code.
- Search skill endpoint: Before calling the endpoint, 2 skills starting with
‘cod’were added to another user. (The payload is{ partial: ‘cod’, skills: ['Coding', 'Painting]}). So this test checks if just the other 2 skills added to the other user was properly returned.
Having this task as my first contribution to Utopian was really great to understand the Utopian project and all the code behind it. I got to know the Quasar Framework that I didn't know before and implemented the task's features easily with it. I would recommend it to everyone. It was a pleasure working it the Utopian dev team as well, I'll be glad to develop more features to the project. I'm sure that Utopian v2 will be a huge success!
Thanks to @icaro for introducing me to Utopian!
My GitHub account: https://github.com/adrielgs
This was a great contribution.
The code was clean right from the start.
Good job on the mongodb query it required some knowledge on the subject.
Your next task is ready :D
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @gregory.latinier! Keep up the good work!
Nice work!
Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word
STOPHi @adrielgs!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Hey, @adrielgs!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word
STOPCongratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word
STOP