Kanban Board Theme Component

This theme component allows you to display and organise topics using a kanban board interface.

:link: Repository Link

:link: Preview on Theme Creator

So far, there are three modes. Categories, tags, and assignment. You can drag topics between lists to change the corresponding attributes:

Lists are ‘lazy-loaded’, so performance is reasonable, even for very large numbers of categories. You can enter fullscreen mode for even more space to organise your projects:

The default board mode will be automatically determined using these criteria:

  • If this is the top level, use categories mode
  • If this is a category, and there are sub-categories, use categories mode
  • Otherwise, use tags mode. (Lists built from ‘top tags’ list)

You can change the board mode using the filter button on the left, and configuration changes will be reflected in the URL. Users can bookmark their favorite configuration in their browser. Administrators can customize the defaults per-category in the theme settings.

The most intuitive setup is “tags”, where the tags displayed are in a tag group with “only one tag from this group” enabled.

In future, I would love to

  • make the lists more configurable. e.g. allow administrators to define a combination of assignment, tags, and categories in one display

  • Add support for dragging cards on mobile devices. Unfortunately they don’t support html drag and drop

81 Likes

Wow this is amazing, @david. I considered building something like this about a year ago but didn’t have the time to do it.

goes and explores the possibility of spinning up a personal Discourse for a todo list…

12 Likes

Oh, the video! Drag and drop! Superb. @angus

7 Likes

I’m not sure if this is a component bug or something with Discourse. I have three tags I’m trying to add: completed, in-progress, and inactive. I can search for one and add it, but when trying to search for another, it shows “no matches found”.

3 Likes

One small glitch I’ve noticed is that even with allow uncategorized topics unchecked and no topics within uncategorized I see a column for it in the category view

2 Likes

Wow. This is awesome. Great job @david! Somehow it reminds me of GitKraken Glo. :man_shrugging: But good job with this component!

1 Like

Thanks @justindirose and @Stephen, I’ll take a look at those issues.

Yes, GitKraken Glo and Trello are popular examples of “Kanban board” interfaces. They didn’t invent the idea though :wink:

9 Likes

Oh boy. Awesome! :star_struck:

We’re going to use this to help manage work on open source plugins. Already set up here:

44%20PM

A couple of initial questions / requests:

  1. Could we have a setting to turn the ‘Untagged’ column off?

  2. Could we include the topic-title plugin outlet in the topic template being used here? (I’ll see if I can make a PR next week). I’d like to include event details in that topic template.

19 Likes

Wow - this looks amazing, thank you @david!

3 Likes

@david, this is excellent and looks like a great fit for a use case I have.

A couple of things… (you knew that was coming, right?).

I moved an untagged item to a tagged column and the confirmatory modal seems to contain some placeholder or string interpolation text.

Secondly, I’d love to see the ability to restrict the cards that are displayed across the columns to only open topics (i.e. not closed or archived). Right now, it appears that all topics in the column that match the category or tag are displayed.

Perhaps a theme setting that asks “Only open topics?”

Great work!

5 Likes

Thanks for the bugs/suggestions everyone - I’ll try and find time to implement them soon.

You can kinda do this already, by manually adding &status=open to the URL. The lists will reflect all the normal discourse filters in the URL. But yes, I would like to add this as a theme setting and a UI option :+1:

11 Likes

Amazing. Really looking forward to exploring this theme component. I’d love to see it in action on the newly improved assigned activity list, and also on assigned messages! I think this might move us forward quite a bit with the Tickets Plugin 🎟, @angus.

4 Likes

Are you able to set it up to display subcategories from the top level? Can only figure out how to make it default to certain categories.

1 Like

Nice work! I have been working on something similar to support the needs of our community. I didn’t create a theme component but instead created an external service using Express/React, connecting with Discourse through the api.

Manage categories Trello style - a kanban service for Discourse

6 Likes

Thanks for sharing this, awesome!

It should be possible to hide topics from list. For exampe the category description topics will never moved.

Do you have those three tags set to allow only one from that group? If you have one tag added, it won’t let you add another from the same group until you delete the one you have in there.

1 Like

I had the same issue, but it wouldn’t let me add a second tag to the kanban view at all, regardless of what individual topics were tagged as.

Strangely, it works if I disable the “Limit one tag per topic from this group” setting, which I assume is not the correct solution given the instructions here.

2 Likes

Yes, at the moment the tag selection component is behaving like it does in a topic (i.e. preventing multiple tags from ‘limit one tag’ tag groups). I will get it fixed. In the meantime you can always add the tags manually to the URL.

4 Likes

Very good theme im waiting :slight_smile:

I worked around this using the setting to set the default view for categories. Works just fine that way!

4 Likes