Use Select input for tags

SimonLab commented 1 year ago

Now that the select input example is ready: https://github.com/dwyl/learn-alpine.js/pull/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 commented 1 year ago

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:

[x] Add new tag button

nelsonic commented 1 year ago

These two screenshots are a reminder that our MVP needs some major UI TLC. 💭 https://github.com/dwyl/mvp/issues/202

SimonLab commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

Created the issue https://github.com/dwyl/app/issues/299

nelsonic commented 1 year ago

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

nelsonic commented 1 year ago

@SimonLab please share your thought on the tags UI/UX outlined above. ⬆️ https://github.com/dwyl/mvp/issues/201#issuecomment-1404389473

SimonLab commented 1 year ago

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

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 commented 1 year ago

@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. 👌

dwyl / mvp

Use Select input for tags #201