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!