Kanban Board Theme Component

Mine is actually callled “projects,” so it’s not something special about the name"kanban". The first URL opens up the composer with the title, text, tag, and category selected. The second URL doesn’t open up the composer. A work-around is to have a URL that requires only changing the category rather than setting it.

Another issue that I have is that I created a theme component that does this:

.discourse-kanban-container .discourse-kanban-list {
    width: calc((1110px - (4*4px))/5)
}

It would seem like being able to set the desired number of columns in a theme component would be useful for more than just me. I put on my list to submit a PR, but you might be able to do it nearly as fast as you’d accept a PR. :wink:

This is a fresh site.

I added an “issues” category. I set it up in “tags” mode:

And it’s doing this:

Do you have a javascript error in the console? (I suspect the answer is yes)

Doh! Yes. Sorry about that.

Uncaught TypeError: Cannot read property 'slugFor' of undefined

I’m still looking and will try to update this post with more info shortly.

IDEA: I bet that the tags are undefined. But then I went and created a tag group with all of them and I’m still getting the same error.

2 Likes

And then I thought it might work in category mode, but I’m still getting

Uncaught TypeError: Cannot read property 'slugFor' of undefined

mostly anything I do.

Any luck figuring this out @pfaffman? I’m getting the same issue since upgrading to 2.5.0.beta4

Not yet. I thought that it worked on some other mode for a bit, but I’ve still not got it working on that new site. I’m now worried any upgrading the other…

But it would seem that enough people are using this that more others would report problems by now…

Thanks Jay!

I did a bit more digging. The issue is this line:

For some reason, in some circumstances, slugFor is returning nothing. There was a change to the slugFor method released with 2.5.0.beta4, which might be related:

I can’t say much more than that unfortunately, since my understanding of the architecture is very poor. I suspect this is related to the problem, though, because when I bypass the slugFor method the kanban board works fine again.

1 Like

Great work! I left a comment in a github issue.

I think that there is a “depth =” before the 2. If you look at the second change you’ll see a “depth = 3”.

If you don’t have a development environment set up, What you can do, I think, is edit that file locally inside the container, and then do an

 sv restart unicorn

(I sometimes forget the order of restart and unicorn).

That should fix it for you. My guess is that someone will see my github comment tomorrow and this will be fixed shortly.

If I get to my desk today I’ll try to check myself and maybe submit a PR.

EDIT: Well, it looks like it’s not quite as simple as I thought. Or, at least, my trying to hot-fix it isn’t working.

EDIT2: Yeah, I think that my change is wrong, but I can’t see how it is that slugFor would be failing.

EDIT 3: Well, what I did is changed the line that you marked to:

        const slug = category.slug;

It seems to work, at least for default_modes set to todo:tags:today,todo,waiting,idea,done.

3 Likes

I just got this problem too today after upgrading to latest version of Discourse (2.5.0.beta4) from 2.5.0beta3.

In error logs - TypeError: Cannot read property ‘slugFor’ of undefined

Am about to try @pfaffman 's fix (EDIT: which worked!)

2 Likes

I am getting another error lately, where the subcategory I had enabled for Kanban boards now doesn’t render the category listing beyond rendering the row where the category and sub-category dropdowns are, as shown in the image in the post above. The following error is generated:

Message (2 copies reported)

TypeError: Discourse.Category is undefined
Url: https://discourse.example.org/theme-javascripts/f32bb95e4546f7b589d94cac68824c840c3744fd.js?__ws=discourse.example.org
Line: 469
Column: 20
Window Location: https://discourse.example.org/c/categoryname/subcategoryname/44/l/latest?board=default

Backtrace

hrefForCategory@https://discourse.example.org/theme-javascripts/f32bb95e4546f7b589d94cac68824c840c3744fd.js?__ws=discourse.example.org:469:20
href@https://discourse.example.org/theme-javascripts/f32bb95e4546f7b589d94cac68824c840c3744fd.js?__ws=discourse.example.org:385:32
d/<@https://discourse.example.org/assets/application-d69ccaa9a8d21fd7f40b18692a4d5240d02c1a5a4bbf6f25b44bafdf1dbd8e2f.js:1:38925
nt</t.get@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:202038
Ke@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:199024
Z</t.compute@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:114737
$</e.prototype.value@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:113727
U</t.flush@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:430769
@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:424675
o</t.evaluate@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:415589
Fe</t.evaluateSyscall@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:449837
Fe</t.evaluateInner@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:449423
Fe</t.evaluateOuter@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:449332
pt</e.next@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:475087
dt</e.prototype.next@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:476136
e/this.render@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:143407
H@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:188637
Jt</t._renderRoots@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:146752
Jt</t._renderRootsTransaction@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:147058
Jt</t._renderRoot@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:146446
Jt</t._appendDefinition@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:145571
Jt</t.appendOutletView@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:145292
f</t.invoke@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:490268
f</t.flush@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:489266
p</t.flush@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:491273
t</t._end@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:496669
t</t.end@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:493225
t</t._run@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:497197
t</t._join@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:496982
t</t.join@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:493933
f@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:360451
e.bind/<@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:360675
e@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:30015
l/</t<@https://discourse.example.org/assets/ember_jquery-3a388c5a0562670ed1eea762f12e041d92b4a418316d3f9f83e793d3ba6be5d7.js:1:30339
2 Likes

I just upgraded my support site and it broke this too, so it’s not a configuration issue.

I’ve created a fork here: GitHub - literatecomputing/discourse-kanban-theme: A Discourse theme component providing basic kanban-board functionality.

I it has my (perhaps naive) fix here:

And also adds a “num columns” theme setting to adjust the width of the kanban columns for the number set there. If I were clever, I’d split the default modes setting and get it from there, but I suppose there could be a reason that you want those to be different.

@david, should I submit a PR? Is there a better solution than my naive fix?

3 Likes

I can report having same issue across a few small Discourse instances that use Kanban.
Uncaught TypeError: Cannot read property 'slugFor' of undefined
Would be nice if we can get this fixed via @pfaffman’s PR @david

1 Like

Sorry for the delay in investigating this!

The fix is good, but I think it will only work for top-level categories, not subcategories. This should do it:

I like it, merged here:

I think a global setting for this is fine - needing to set it per-category seems unlikely.

3 Likes

I thought I must have missed something. Thanks!

The other thing that I think I want, and I usually hate stuff like this, is to have another set of tags that can be used to set the color. I have today in a column but want to have colors for different types of jobs. How hard is it to add a div for tags?

Sorry, I don’t quite understand? You want to display tags on the cards? I think that’s already possible?

Or do you want to add a class based on the tag?

Hmm. So maybe I can make the columns be categories and then use tags too. I think that would solve my problem.

Right. What I think I want is to be able to have different cards in a column have different colors indicating . . . something.