Feat: tags page with tons more detail

[nelsonic]

As noted by @panoramix360 in #140 (comment) 💬
At present the /tags page is quite basic: https://mvp.fly.dev/tags this is my tags page:

I have 118 tags at the time of writing:

Some of these are duplicates and there are a few typos. 🤦‍♂️
So in an ideal world, we'd also have a way of "merging" tags. 💭
But I suspect I'm the only person with this "problem" right now. 🙃
So let's just focus on adding useful details to this page before doing anything "fancy" ... 👍

Todo

• Re-work/enhance the /tags page to include a lot more info in a sortable table.

Columns:

• tag.text - the "pill" of the tag with the tag.color applied (the current appearance, see above)
• tag.color - the hex code for the tag.color - ideally clicking/tapping on this will open the color picker.
• created_at - when the tag was created
• latest - the last time an item was tagged with this tag.
• items count - the of the number of items with this tag - clicking/tapping on the count will take you back to the items view with with the filter=tag_name so that you are seeing the items with that tag applied.
• time - the total time that has been logged on items with this tag
• edit - the edit button for editing
• delete - delete the tag (though I'm not a fan of this permanent destruction ...)

This is a perfect opportunity to make this a look good by using Tailwind UI -> With sortable headings:
https://tailwindui.com/components/application-ui/lists/tables#component-7b5a46e74e475708d966ca31716f1771

[panoramix360]

hey everyone!

Do you think this is ready to be developed?

I can take it :D

[nelsonic]

@panoramix360 go for it. 🙏

[panoramix360]

hey! I began the task :D

I was looking through the tags structure, and it seems it's not a LiveComponent, do you think we will need to transform it to a LiveComponent so we can make the sorting work?

I think we need to hehe, let me know what you guys think!

[nelsonic]

Please go ahead. Thanks. 🙏

[panoramix360]

hey! 'll give you guys an update.

I'm close to finishing this feature!

It's just missing:

• clicking/tapping on the count will take you back to the items view with the filter=tag_name so that you see the items with that tag applied.
• the total time that has been logged on items with this tag

:D

[LuchoTurtle]

@panoramix360 looks amazing 😍 Thank you so much for your contributions, they're very much super appreciated!
Whenever you feel comfortable, you can open a PR so we can also help you out, if case need be :)

[panoramix360]

Draft PR created so you guys can begin the review 🕺

I have to add the tests for the new screen 😅

I have one problem that I want to ask for your help with so we can see how we can solve it.

I was able to build the sorting mechanism in the query, but it's not working with the virtual/calculated fields, I tried some stuff but only could make it work if I wrote hardcoded, but it does not work dynamically.

Do you have any idea what we could do? I'm thinking that maybe we will need to rewrite the query using Ecto Macros for it to work.

[nelsonic]

Hard-coded is already a good start.
I'd much rather use a client-side package to sort data and just leave the Ecto query as simple as possible.
e.g: sortable

Note: there are many libraries we can use ... we want something lightweight.
Feel free to research and suggest one that has filtering
so people who have many tags can type a few characters and see the matching tags.
e.g: https://www.bu.edu/tech/services/cccs/websites/www/wordpress/how-to/sortable-searchable-tables/

[panoramix360]

understood, but I think this probably should be an issue by itself, no?

Maybe just for now, I could sort using Elixir in the context of the LiveView (not using Ecto), what do you think?

I think that sorting by some library could be changed on a different PR.

[nelsonic]

Yeah, we can have a separate issue on sortable tables using a JS library. 👌
The progress you’ve already made on the /tags page is excellent. 🤩

[nelsonic]

Dedicated (separate) issue for the sorting/filtering: #436

[panoramix360]

Probably this Issue could be solved after the PR merged :D

[LuchoTurtle]

Closing this off since #435 was merged :)