Group and User Pickers

With the user management and group management microservices, users and their groups can be easily queried through HTTP requests. However, the GUI that the user interacts with must also be properly designed so as to provide an optimal UX. To facilitate the query of users via the GUI, I designed a group and user picker component for Vue.js that can be easily installed using NPM.

Group picker

With the group management microservice, users are divided into groups. So, I first designed a group picker that allows to query the node corresponding to a specific group in the database. This picker takes advantage of the tree structure of groups to show those in orderly fashion. The component has been made so as to emit the group properties when a selection is made.

If the group picker has access to the authentication API, it can automatically expand the groups that the current user is part of.

The group picker ca be installed using NPM. Its source code is available on GitHub.

User Picker

To enable the selection of a specific user of a group, I designed a user picker. This picker displays users of a selected group in a list, with an additional search feature for convenience.

The group picker ca be installed using NPM. Its source code is available on GitHub.