create account

Utopian contribution: "Article module: add tags" by adrielgs

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @adrielgs ·
$55.11
Utopian contribution: "Article module: add tags"
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](https://busy.org/@adrielgs/first-contribution-to-utopian-profile-module-skills). 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](https://ipfs.busy.org/ipfs/QmZVYavcHjwNiuXwEpjVnaZSkTiN96DzJSqSXahxCkwr6Z)

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](https://github.com/utopian-io/v2.utopian.io/pull/225) 

The [Autocomplete Component](https://quasar-framework.org/components/autocomplete.html) 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](https://ipfs.busy.org/ipfs/Qmbnoiv1Y39ahv6KRheqGXQdUg226rJFtxgifodXcGVgTA)


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](https://github.com/utopian-io/v2.utopian.io/pull/224/files#diff-ecfbb9d81548f0beae3ef1500c7a9233R19) validation was also done.

![Utopian.io - addind not supported chars.gif](https://ipfs.busy.org/ipfs/QmaoLqgaUTUq3Rs38u3jj7EkCHGxLkNwNMac3rCkvxYZYG)

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](https://github.com/utopian-io/v2.utopian.io/pull/224/files#diff-255dc3107e95d0e48e4d8f9cc9fd785d)
* 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](https://github.com/utopian-io/v2.utopian.io/pull/224/files#diff-255dc3107e95d0e48e4d8f9cc9fd785dR269) checks if `['post-update']` is returned as a autocomplete option when a user has [already typed](https://github.com/utopian-io/v2.utopian.io/pull/224/files#diff-255dc3107e95d0e48e4d8f9cc9fd785dR73) `'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!
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 65 others
properties (23)
authoradrielgs
permlinkutopian-contribution-article-module-add-tags
categoryutopian-io
json_metadata{"community":"busy","app":"busy/2.5.6","format":"markdown","tags":["utopian-io","development"],"users":["gregory.latinier","adrielgs","duplicate","input","search","utopian-io"],"links":["https://busy.org/@gregory.latinier/utopian-v2-task-article-module-add-a-tag","https://github.com/utopian-io/v2.utopian.io/pull/224","https://busy.org/@adrielgs/first-contribution-to-utopian-profile-module-skills","https://github.com/utopian-io/v2.utopian.io/pull/225","https://quasar-framework.org/components/autocomplete.html","https://github.com/utopian-io/v2.utopian.io/pull/224/files#diff-ecfbb9d81548f0beae3ef1500c7a9233R19","https://github.com/utopian-io/v2.utopian.io/pull/224/files#diff-255dc3107e95d0e48e4d8f9cc9fd785d","https://github.com/utopian-io/v2.utopian.io/pull/224/files#diff-255dc3107e95d0e48e4d8f9cc9fd785dR269","https://github.com/utopian-io/v2.utopian.io/pull/224/files#diff-255dc3107e95d0e48e4d8f9cc9fd785dR73","/@utopian-io"],"image":["https://ipfs.busy.org/ipfs/QmZVYavcHjwNiuXwEpjVnaZSkTiN96DzJSqSXahxCkwr6Z","https://ipfs.busy.org/ipfs/Qmbnoiv1Y39ahv6KRheqGXQdUg226rJFtxgifodXcGVgTA","https://ipfs.busy.org/ipfs/QmaoLqgaUTUq3Rs38u3jj7EkCHGxLkNwNMac3rCkvxYZYG"]}
created2018-12-21 20:14:21
last_update2018-12-21 20:14:21
depth0
children10
last_payout2018-12-28 20:14:21
cashout_time1969-12-31 23:59:59
total_payout_value41.623 HBD
curator_payout_value13.486 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,755
author_reputation2,556,630,111,204
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,189,946
net_rshares99,517,181,239,327
author_curate_reward""
vote details (129)
@gregory.latinier ·
$7.73
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](https://join.utopian.io/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](https://review.utopian.io/result/3/1-2-2-1-2-1-1-).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorgregory.latinier
permlinkre-adrielgs-utopian-contribution-article-module-add-tags-20181221t214417621z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/3/1-2-2-1-2-1-1-","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-12-21 21:44:18
last_update2018-12-21 21:44:18
depth1
children1
last_payout2018-12-28 21:44:18
cashout_time1969-12-31 23:59:59
total_payout_value5.850 HBD
curator_payout_value1.879 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length638
author_reputation34,278,323,818,021
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,193,000
net_rshares13,968,169,250,665
author_curate_reward""
vote details (34)
@utopian-io · 
Thank you for your review, @gregory.latinier! Keep up the good work!
properties (22)
authorutopian-io
permlinkre-re-adrielgs-utopian-contribution-article-module-add-tags-20181221t214417621z-20181224t065734z
categoryutopian-io
json_metadata"{"app": "beem/0.20.9"}"
created2018-12-24 06:57:36
last_update2018-12-24 06:57:36
depth2
children0
last_payout2018-12-31 06:57:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length68
author_reputation152,955,367,999,756
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,304,559
net_rshares0
@icaro · 
Nice work, my friend!
properties (22)
authoricaro
permlinkre-adrielgs-utopian-contribution-article-module-add-tags-20181221t202209304z
categoryutopian-io
json_metadata{"community":"busy","app":"busy/2.5.6","format":"markdown","tags":["utopian-io"],"users":[],"links":[],"image":[]}
created2018-12-21 20:22:09
last_update2018-12-21 20:22:09
depth1
children0
last_payout2018-12-28 20:22:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length21
author_reputation4,395,967,672,831
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,190,153
net_rshares0
@nothingismagick · 
I totally agree with @gregory.latinier - Nice job.
properties (22)
authornothingismagick
permlinkre-adrielgs-utopian-contribution-article-module-add-tags-20181223t094719672z
categoryutopian-io
json_metadata{"community":"busy","app":"busy/2.5.6","format":"markdown","tags":["utopian-io"],"users":["gregory.latinier"],"links":["/@gregory.latinier"],"image":[]}
created2018-12-23 09:47:24
last_update2018-12-23 09:47:24
depth1
children0
last_payout2018-12-30 09:47:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length51
author_reputation4,247,535,102,225
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,263,007
net_rshares0
@partiko · 
[![](https://d1vof77qrk4l5q.cloudfront.net/statics/upsell-delegate-15-steem-power-2.png)](https://partiko-io.app.link/A27hLeUkgT)
properties (22)
authorpartiko
permlinkpartiko-re-adrielgs-utopian-contribution-article-module-add-tags-20190118t033345187z
categoryutopian-io
json_metadata{"app":"partiko"}
created2019-01-18 03:33:45
last_update2019-01-18 03:33:45
depth1
children0
last_payout2019-01-25 03:33:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length129
author_reputation39,207,160,334,751
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id78,529,510
net_rshares0
@steem-ua · 
#### 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](https://discord.gg/KpBNYGz)**
properties (22)
authorsteem-ua
permlinkre-utopian-contribution-article-module-add-tags-20181222t021025z
categoryutopian-io
json_metadata"{"app": "beem/0.20.14"}"
created2018-12-22 02:10:27
last_update2018-12-22 02:10:27
depth1
children0
last_payout2018-12-29 02:10:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length287
author_reputation23,214,230,978,060
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,201,144
net_rshares0
@steemitboard · 
Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@adrielgs/voted.png?201812212032</td><td>You received more than 100 upvotes. Your next target is to reach 250 upvotes.</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@adrielgs)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-adrielgs-20181221t205759000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-21 20:58:00
last_update2018-12-21 20:58:00
depth1
children0
last_payout2018-12-28 20:58:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length758
author_reputation38,975,615,169,260
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,191,304
net_rshares0
@steemitboard · 
Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@adrielgs/payout.png?201812290121</td><td>You received more than 100 as payout for your posts. Your next target is to reach a total payout of 250</td></tr>
</table>

<sub>_[Click here to view your Board](https://steemitboard.com/@adrielgs)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends-the-party-continues"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png"></a></td><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends-the-party-continues">Christmas Challenge - The party continues</a></td></tr><tr><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png"></a></td><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends">Christmas Challenge - Send a gift to to your friends</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-adrielgs-20181229t014026000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-29 01:40:24
last_update2018-12-29 01:40:24
depth1
children0
last_payout2019-01-05 01:40:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,624
author_reputation38,975,615,169,260
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,521,087
net_rshares0
@steemitboard · 
Congratulations @adrielgs! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@adrielgs/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@adrielgs) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=adrielgs)_</sub>


**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemfest/@steemitboard/the-new-steemfest-badge-is-ready"><img src="https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmRUkELn2Fd13pWFkmWU2wBMMx39EBX5V3cHBEZ2d7f3Ve/image.png"></a></td><td><a href="https://steemit.com/steemfest/@steemitboard/the-new-steemfest-badge-is-ready">The new SteemFest⁴  badge is ready</a></td></tr></table>

###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-adrielgs-20191009t184356000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2019-10-09 18:43:57
last_update2019-10-09 18:43:57
depth1
children0
last_payout2019-10-16 18:43:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,062
author_reputation38,975,615,169,260
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id91,390,680
net_rshares0
@utopian-io · 
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](https://chrome.google.com/webstore/detail/steemplus/mjbkjgcplmaneajhcbegoffkedeankaj?hl=en) or [Steeditor](https://steeditor.app)).

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
authorutopian-io
permlinkre-utopian-contribution-article-module-add-tags-20181222t070820z
categoryutopian-io
json_metadata"{"app": "beem/0.20.9"}"
created2018-12-22 07:08:21
last_update2018-12-22 07:08:21
depth1
children0
last_payout2018-12-29 07:08:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length786
author_reputation152,955,367,999,756
root_title"Utopian contribution: "Article module: add tags""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,209,854
net_rshares0
Help/Feedback