Use bootstrap tags control with controlled vocabularies for the exhibit tags

[cbeer]

@ggeisler also indicated some preference, maybe, for something like: https://github.com/davidstutz/bootstrap-multiselect

If we update to the latest bootstrap-tagsinput, we should be able to use <select multiple> markup, and maybe use them interchangeably?

[ggeisler]

That looks promising. I'll try to come up with a design proposal soon.

[ggeisler]

Below are mockups for creating and assigning exhibit tags using a controlled vocabulary approach. This approach is more involved but would be preferable to #1413.

Idea is to create a "Tag exhibits" page, and on that page use a tabbed UI to separate managing tags and assigning tags.

New menu item to link to new "Tag exhibits" page

Add "Tag exhibits" link to exhibits sidebar (if role is super-admin)

Manage tags

On the new page, we have two tabbed content areas. For Manage tags, we show existing tags in a table and enable adding, deleting, and renaming tags. If feasible, we could also add a checkbox ("Also allow free text tagging") that would control whether we show the "Tags" input (that currently allows tags separated by a comma) on the new exhibit and exhibit Config > General > Basic settings forms. The default for the checkbox would be off (because the preferable use case is for exhibit tags to be assigned using a controlled vocabulary).

Mockup doesn't show it correctly, but sort tags alphabetically in the table.

When the user selects the Add new tag button, we'd show an input for the tag in a new row at the top or bottom of the table (mockup shows bottom, but I now think top might be better to keep the new element close to the action that triggered its appearance).

To enable renaming, we could make the tag label edit-in-place, similar to how we do it elsewhere in Spotlight.

Deleting would show a confirmation dialog: "Are you sure you want to delete this tag? If deleted, the tag will be removed from all exhibits to which it has been assigned."

If no tags exist, instead of the table showing existing tags, show an info alert box with the text "No exhibit tags exist. Use the Add new tag button to create a tag."

Assign tags

In the Assign tags content area we also show a table. This one lists all exhibit titles (I think we want to include unpublished, so that when an exhibit admin clicks "Publish" an exhibit could already have the desired tag assignments working), alphabetically, along with a select that enables choosing tags to assign. This approach assumes using https://github.com/davidstutz/bootstrap-multiselect is feasible.

The idea with the "Also allow exhibit administrators to tag their exhibits" checkbox is that if checked, we'd show the multiselect for the Tags field on both the new exhibit and Config > General > Basic settings forms for the exhibit admin role. But the default should be unchecked (so the super-admin has to make a conscious decision to allow exhibit admins to do their own tagging).

If this tab is displayed when no exhibit tags exist, in place of the table we could show an info alert with the text "No exhibit tags exist. To assign tags to exhibits, first create tags using the Manage tags tab."