Assign contacts at the NEB level

[jordanperr]

Need to be able to assign contacts at the NEB level.

[jperrsau-at-nrel]

Reviewing NEB Tool v0.0.1-alpha-f851d6b on Safari on Mac. I see a "Team Members" button has been added to each NEB on the NEB's page of an assessment. Clicking on this button opens a modal, which allows you to select contacts (which have been pre-defined in the Team Details page of the pre-visit wizard). Clicking on a team member adds them to the NEB, and this is shown via a check mark to the left of their name. Clicking on "View" button brings you to a details page for the contact. After selecting team members, you can click "Set contacts" to close the modal. Team members are now visible as blue rectangles to the left of the "Team Members" button.

Overall, the spirit of this ticket has been completed. However, the UI is cumbersome and not very intuitive. At a high level, I might recommend implementing a more standard modal with a scrollable table element inside, and the ability to search and sort the table. I would also consider adding more standard looking tags to the neb (the blue rectangles), with the little "X" next to the names in order to remove them.

The minor issues found with the UI are enumerated below. Please fix these as part of this PR, or open a new issue for the issue and tag the new issue here.

1. The modal is confusing when no contacts exist in database. In particular the "Set Contacts" button just closes the modal, but a user may wonder how to add a new team member to the NEB. (See image 1)
2. If the modal is populated: It is not immediately clear that clicking on the name of a contact will select them. I was able to figure this out through trial and error, but it may not be intuitive for a user. (See image 2)
3. Clicking "View" to view the details, and then having to click back to "All contacts" is a bit awkward. I suggest just displaying all the information on the first page, as a grid.
4. No easy way to remove a team member from the NEB. I suggest having a little "X" button on the team member tag, which the user could click to remove it.
5. The modal does not scroll if there are a lot of team members. The team members off the bottom of the modal are inaccessible. (See image 3)
6. Clicking the "X" button on the modal may destroy changes made by the user, but there is no warning about this. I would simply map the "X" to the same action as the "Set contacts" button - or provide a warning before the destructive action.

Image 1:

Image 2:

Image 3:

Image 3: