The new "Groups" app is for defining groups and their members, for multiple future uses, such as forming the team that owns an Adventure, a team application to a block, or a group of people who host a Convo series, etc.
In the app right now, to create a group and add members to it, I need to enter each member's memberId, comma-separated; which means I need to go to the Explorer, find the member, copy their memberId, and paste it into the Groups form.
Instead, as a user on the Groups create/edit form, I would like to be able to:
Start typing in a user (human)'s name, and have the input filter the matching humans and show me the options.
When I select a human (by pressing enter or clicking), display their name in a tag below the input.
I can select more humans and all their tags will be added.
Each tag with a member's name should have an X that I can click to remove them.
When I save the form, the group is saved with the members as listed.
On the Edit form, the tags showing existing members should already be present.
PS. Order of members doesn't matter.
There are tag input libraries that do this, but we'd like to avoid using one if possible, because they can be hard to customize; and I think it's feasible in our system to roll our own.
We're using headlessUI (already installed), so try to make use of the autocomplete component. headlessUI components are unstyled by default, so a typical workflow is to copy or look at their sample code snippet, which IS styled, but change the styling to make sense for us.
To get profiles data such as people's names, you will need to use the queryService (see Explorer for example), as that is the only way to read the data of profiles other than the current user's.
Bonus points if you make the entire tag-input component a common component that takes a list of any items and fulfills #1-4 above.
The new "Groups" app is for defining groups and their members, for multiple future uses, such as forming the team that owns an Adventure, a team application to a block, or a group of people who host a Convo series, etc.
In the app right now, to create a group and add members to it, I need to enter each member's
memberId, comma-separated; which means I need to go to the Explorer, find the member, copy theirmemberId, and paste it into the Groups form.Instead, as a user on the Groups create/edit form, I would like to be able to:
Xthat I can click to remove them.There are tag input libraries that do this, but we'd like to avoid using one if possible, because they can be hard to customize; and I think it's feasible in our system to roll our own.
We're using headlessUI (already installed), so try to make use of the autocomplete component. headlessUI components are unstyled by default, so a typical workflow is to copy or look at their sample code snippet, which IS styled, but change the styling to make sense for us.
To get profiles data such as people's names, you will need to use the
queryService(see Explorer for example), as that is the only way to read the data of profiles other than the current user's.Bonus points if you make the entire tag-input component a
commoncomponent that takes a list of any items and fulfills #1-4 above.