Modify UI allowing user to add lesson tags

[jrobind]

Links to #62

As part of the lesson tag filter feature, a user should be able to add tags to a lesson. The markup for this will need to be added to the create/new lesson form.

Some thoughts:

• This could be achieved by adding a drop-down list with a predefined list of options
• Should the user be able to define their own custom lesson tags?

As always this is open for discussion 😄

[ehowden]

@iyerm2000 and I are interested in working on this issue as well. Right now I see the colors as tags, but do you have a predefined list you would like to see instead? To answer your thoughts above, I think it would be worthwhile to allow the user to define their own custom tags.

[jrobind]

I think we can definitely improve the UI for the tags. Ultimately, I'm thinking that the user will be able to add multiple tags from a predefined list as well as create their own – something like this https://jeesite.gitee.io/front/jquery-select2/4.0/index.htm#multiple

If that feels a little complex, this ticket could just handle adding the correct tags to the lesson cards. Currently, if you select a tag & submit a lesson the tag is added to user data in local storage but we're not doing anything with that data. It would be nice to display the selected tag(s) within lesson cards.

Let me know what you think!

[iyerm2000]

Hi! I was wondering whether it would be possible to get a little more insight on how to save the lesson tags. Currently I don't see a defined backend in the codebase. Any advice would be great!

[jrobind]

Hi! I was wondering whether it would be possible to get a little more insight on how to save the lesson tags. Currently I don't see a defined backend in the codebase. Any advice would be great!

There is no backend atm. All lesson data is persisted in browser storage. The idea going forward is that we'll allow the user to download their lesson data in (.md or .txt) if they wish to save/persist elsewhere.

The lesson tags are already being saved. If you open up the developer tools and add a lesson, if you run localStorage.getItem('user') you'll see lesson data & associated tag data – like this:

If you've never worked with the Storage API before I'd recommend giving this a read.

This file contains the localStorage logic for setting and getting user data (including tags).

Hope that helps 😄
Let me know if you need some further explanation.