Utopian contribution: "Article module: add tags"

in #utopian-io6 years ago

Task: https://busy.org/@gregory.latinier/utopian-v2-task-article-module-add-a-tag
PR: https://github.com/utopian-io/v2.utopian.io/pull/224

This is my second Utopian contribution, and, as you can see in the task description, it is very similar to the first one. The main difference is that a regex had to be checked because the user can only add lowercase alphanumeric characters, '-', '+', '.', and '#' for the article's tags.
Utopian.io - adding tags special chars.gif

While doing this task I realized that there were some improvements that could have been made, and so I added to this task, and also to the first task on a different PR

The Autocomplete Component works the same way as before:

q-field(orientation="vertical", :label="$t('articles.createEdit.tags.label')", :count="5")
  q-chips-input(
    v-model="article.tags"
    @duplicate="duplicatedTags"
    @input="chipsInputChange"
    :placeholder="article.tags.length === 0 ? $t('articles.createEdit.tags.placeholder') : ''"
    :error="$v.article.tags.$error"
  )
    q-autocomplete(@search="tagsAutocomplete", :min-characters="2", :max-results="10")

Utopian.io - adding tags.gif

The frontend validation is checked inside an if statement every time a new value is added to the field and it's automatically deleted if an error is found. Also, a message is displayed to the user.

chipsInputChange (newTags) {
  const regex = /^[a-z0-9-+.#]*$/
  const newTag = newTags[newTags.length - 1] 
  if (!newTag.match(regex)) {
    this.article.tags.pop()
    this.setAppError('articles.createEdit.tags.errors.invalidCharacters')
  }
  if (newTags.length > 5) {
    this.article.tags.pop()
    this.setAppError('articles.createEdit.tags.errors.maxItems')
  }
}

Of course, a backend validation was also done.

Utopian.io - addind not supported chars.gif

The UML for this task is articles.tags[], so the Mongo query works the same way as the first task.

const tags = await Article.aggregate([
  { '$unwind': '$tags' },
  { '$match': { tags: { '$regex': `^${req.payload.partial}`, '$options': 'i', '$nin': req.payload.tags } } },
  { '$group': { _id: '$tags', occurrences: { '$sum': 1 } } },
  { '$limit': 10 },
  { '$addFields': { name: '$_id' } },
  { '$sort': { 'occurrences': -1, 'name': 1 } }
])

API TESTS

  • Article creation: the tag object was added to all existent tests.
  • Search tag endpoint: After ['post-test', 'post-update', 'c++', 'c#', '.net'] was added as tags to an article, this test checks if ['post-update'] is returned as a autocomplete option when a user has already typed 'post-test' as an article tag.

This was also a great task for me because I realized a few things that I could have done better in the first one. When you develop a similar task, naturally, you have a more severe criticism of your own work and, consequently, you find ways to improve it.

Thanks again for @utopian-io!

Sort:  

Again a great job.
Controlling and improving the work you already did is even better.
I'm glad to have you on board.

Keep up the good work!

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, my friend!

Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 100 upvotes. Your next target is to reach 250 upvotes.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Support SteemitBoard's project! Vote for its witness and get one more award!

Hi @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.
Congratulations! Your contribution was Staff Picked to receive a maximum vote for the development category on Utopian for being of significant value to the project and the open source community.

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!

I totally agree with @gregory.latinier - Nice job.

Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 100 as payout for your posts. Your next target is to reach a total payout of 250

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Christmas Challenge - The party continues
Christmas Challenge - Send a gift to to your friends

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @adrielgs! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

The new SteemFest⁴ badge is ready
Vote for @Steemitboard as a witness to get one more award and increased upvotes!