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