FS#2118 - Show overview of existing tags for users

At several places it could be useful to let the user view available tags:

When editing a task a toggle popup could show a list of selectable and existing tags.

I found several nice vanilla-js-multiselect-with-autocompletion scripts, but none yet that still works at a basic level when javascript is turned off.

My plan is now:

Keep the current basic input text field for input tags and show current assigned tags like exampletag1;exampletag2;exampletag3 separated by ‘;’ that is sent to the server when saving the task and server handles evaluation of that string (validation, duplicates, removed, added, creating new tags if allowed for current user)

A CSS only toggle that shows available tags that can be assigned (works even with js turned off), similiar to other places within Flyspray like advanced search toggle.

If js turned off, the user must type the tag - not as fancy, but at least works. (I thought also about using a html select with multiple=”multiple” attribute, but was not convinced due styling not possible in modern browsers without js)

If js is enabled, more fancier stuff is possible:

The input text field is hidden by display:none and instead the styled tags are shown.

The current added tags also get a little x to remove a tag by clicking it. The content of the hidden input text field is updated to reflect the current editing status. (click eventlistener)

A generated text input field for typing with autocompletion list shown of matching availbale tags. An unknown tag is added to the list if user is allowed to create tags. Clicking a item in the autocompletion list adds the tag and resets the autocompletion input text field for the next autocompletion action.

The tags within the toggle list with all available tags get also a click event listener, so clicking it adds them to the hidden text input.

Not sure yet if an added tag should be removed from the all available tags list or just make an CSS indication that a tag is still added, currently I tend to keep the list untouched, just highlight used tags of the task.