Use Select input for tags

[SimonLab]

Now that the select input example is ready: dwyl/learn-alpine.js#18

I'm trying to add it for adding tags:

I think I need to review the existing classes on the other element of the page to make sure we have the correct structure to add the select input without too many issues.

[SimonLab]

At the moment tags are created directly with the input text. However adding the new select/dropdown doesnt' allow you to create on the fly new tags.

So we need to add a "new" button on the /tags endpoint to create new ones:

• Add new tag button

[nelsonic]

These two screenshots are a reminder that our MVP needs some major UI TLC. 💭 #202

[SimonLab]

Display list of tags:

Display selected tags:

Add "edit tags" link at the bottom of the list tags, useful when there aren't any tags:

The select input tags is working for the new item.
I want to see if I can change the code to a phoenix component that I can then reuse when editing the existing tasks

[nelsonic]

@SimonLab, @iteles, @LuchoTurtle, @Stephanymtr & @seaneady 👋
Please let me know your thoughts on the following Tags Progressive UI/UX:

Direct link to Figma page: https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app?node-id=246%3A2

[LuchoTurtle]

Having read through Level 1 and Level 2, I found it quite enlightening and found no issue with the logic behind each decision, given it's meant to onboard the user into the app in their first "trial".

My only question is on Level 2. When the person starts typing an issue, the rest of the page is hidden, focusing solely on the save button and textfield. However, what happens if the person decides he wants to cancel the action and go back? Is he meant to delete all of the text to "go back" and see the navigation buttons? Does he click away from the keyboard?

I find that either option has its pros and cons. The first can be time-consuming but it has a "clear path". However, in the latter scenario, the user might click away by mistake and lose all the progress writing the item.

[nelsonic]

@LuchoTurtle excellent question! 🎉 ❤️
This deserves it's own issue and a section in Figma for clarity. 👌
Please open the issue here on MVP or on App and I will try my best to address it this morning. 🙏

[LuchoTurtle]

Created the issue dwyl/app#299

[nelsonic]

@LuchoTurtle responded on the issue: dwyl/app#299 (comment) ✅
and in FIgma: https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app?node-id=1512%3A4730

[nelsonic]

@SimonLab please share your thought on the tags UI/UX outlined above. ⬆️ #201 (comment)

[SimonLab]

My current thought on progressive UI/UX for the app:

• Feat: Basic App Navigation app#305 (comment)
• Feat: Basic App Navigation app#305 (comment)

Otherewise a couple of question we need to test with the UI implementation in Flutter:

• Can we add the tag text field and the save button next to each other without making these two widgets too small or squished? I think I tried previously on the mobile view of the mvp and it was getting difficult to read the labels name especially if they are long. It might be fine with the right font size and widget widths with Flutter
  

• Having the selected tags above the input (text field widget) solve the issue of not seeing the tags you have selected when they are behind the dropdown. However I'm wondering if having the text field pushed down each time a new line of tags is added will be annoying for the person selected the tags. It might not, to be tested.
  

[nelsonic]

@SimonLab thanks for your feedback.
Yes, it might be "tight" to have the save button and tags.
Fairly certain we will be getting rid of the "Save" button soon though.
So let's just focus on tags in Flutter. 👌