Items: Show non-semantic tags, relatesTo part of semantics & Use accordion tag input & Fix virtual box height

[Davek145]

Closes #2086

• Adds Non-semantic tags to Items list (e.g. /settings/items/) consistently with similar list of Rules / Scripts / Pages.
• Extends getItemTypeAndMetaLabel with relatesTo part of Semantic classification.
• Fixes incorrect calculation of vue virtual box height on Items list.
• Replaces custom tag input with accordion tag input (inspired by Page edit: Add editing of tags #2078) and show number of tags (inspired by Rule/script/scene edit: Update tag input & Refactoring #2083).
• Moves the custom tag input to item-form.vue, so it is available also in Model view, when creating Item from Thing etc.

At minimum for the calculation of vue virtual box height it would be great to fully test this PR for variety of browsers. Currently I do not have complete BrowserStack access avaible, but anyway I have tried to test and adjust height calculation for following browsers using trial and my own devices (This PR is tested with BrowserStack):
Windows – Chrome, Edge, Firefox
MacOS – Chrome
Linux – Chrome, Firefox
iOS – Safari, Chrome
Android - Chrome
I kindly ask maintainers to test this PR using BrowserStack for other browsers. If I get full access from BrowserStack in the meantime, I will complete the testing with other browsers as well.

[Davek145]

I now have full access to BrowserStack, so I have retested this PR once more for all combinations of most common browsers and devices.
Windows - Chrome, Edge, Firefox
Mac - Safari, Chrome, Firefox
Linux - Chrome, Firefox
Android - Chrome (phone/tablet)
iOS - Safari, Chrome (iPhone/iPad)
For all these browsers and devices functionality of PR and calculation of virtual box height is working correctly.

[florian-h05]

Overall LGTM, thanks!

I have changed a few things, notably:

• Rename the tag input in item-form.vue to Non-Semantic Tags to make clear that those are non-semantic. In this case IMO this is better, because Items support (in contrast to rules etc.) semantic tags.
• Move the getItemTypeAndMetaLabel method to a mixin and therefore de-duplicate code. It is actually used at three places, you only updated two because you did not notice the third.
• Use the isSemanticTag logic as used by tag-input.vue (move this to a mixin).
• Move the getNonSemanticTags logic to a mixin, because it is used at several places in your PR.
• Display tags in the item.vue component, so e.g. the list of group members looks the same as the Items list.

[florian-h05]

Thanks for fixing the vList height on so many platforms & browsers, my changes should not change anything in this behaviour, therefore I only tested this by switching between the different themes.

[Davek145]

Thanks a lot for cleansing the code. Using the mixin.js is good idea and removes the code duplication. Will take it as lesson learned for my next PR's.
Actually, I had similar idea and even tried to do it as well. Including using the existing isSemantic method. For some reason, it had huge performance hit on my large OH instance. That is why I have not used the call for semantic tags and instead used solely item metadata. Load time was multiple times faster.
However, when I try now your code, it works fast as well. There had to be something I have mised that did make that performance issue.