Some thoughts on a Kanban view for issues.

We need to specify:

  items to display
  columns for the board
  card format/fields
  swimlane (optional)

One mapping from an index display is:

  items to display - search results
  columns for the board - @sort field
  card format/fields - @columns display
  swimlane (optional) - @group

An example kanban board for @sort=status, @columns=id,title,assignedto,
@group=sprint (assuming the issues have a sprint property) like:

   Status   Backlog       Ready         Open       Testing      Closed
Sprint    +----------+ +----------+ +----------+ +----------+ +----------+
          | -------- | |          | |          | | -------- | |          |
24-10-02  | 1060     | |          | |          | | 1319     | |          |
          | new item | |          | |          | | title 4  | |          |
          | Fred     | |          | |          | | Renee    | |          |
          | ======== | |          | |          | | -------- | |          |
          | 2210     | |          | |          | |          | |          |
          | need fre | |          | |          | |          | |          |
          | Steve    | |          | |          | |          | |          |
          | -------- | |          | |          | |          | |          |
          |          | |          | |          | |          | |          |
          |          | |          | |          | |          | |          |
          +----------+ +----------+ +----------+ +----------+ +----------+
          +----------+ +----------+ +----------+ +----------+ +----------+
          | -------- | |          | |          | |          | |          |
24-10-16  | 1310     | |          | |          | |          | |          |
          | title 4  | |          | |          | |          | |          |
          | Renee    | |          | |          | |          | |          |
          | -------- | |          | |          | |          | |          |
          |          | |          | |          | |          | |          |
          |          | |          | |          | |          | |          |
          +----------+ +----------+ +----------+ +----------+ +----------+

Each card can be dragged to a new column and on drop, the back end is updated via
REST request to set the issue to its new status.

Consider a drag/drop javascript library:

  * https://github.com/SortableJS/Sortable
  * https://github.com/atlassian/pragmatic-drag-and-drop
  * https://github.com/ThibaultJanBeyer/DragSelect

Maybe use grid for layout of the columns/swimlanes.

Open issues:

  How to display on mobile or when width is too narrow.
  How to configure card layout. Consider a sub-template for each card style.
    That way an admin only needs to design the card level template similar
    to any other template.

Other references:

 Swimlanes: https://teamhood.com/kanban-resources/kanban-swimlanes/

 js kanban library: https://github.com/riktar/jkanban

My team uses Roundup to track the qualified presales 
leads we are working with. If you (or someone else) 
ever pursue this, we would definitely use it.

If you believe our input could be of any help, I'll 
happily chip in with our two cents on this.

Hi William:

Thanks for your interest.

Do you use Kanban outside of Roundup for your presales leads?

What form do your kanban chart takes, or what form would you like them to take:

  * how are columns labeled: e.g. by the stage in the sales funnel?
  * what is displayed on the Kanban cards: e.g. sales rep, dollar amount,
    client name, client contact?
  * are swimlanes used: e.g. per sales rep?
  * are work in progress limits per column useful?

I can't promise anybody will work on it, but gathering requirements is useful.

Also if you are willing, I would like to contact you off ticket to get some more
info about your roundup setup and use case.

-- rouilj

Hi John,

> Do you use Kanban outside of Roundup for your presales leads?

We currently solely rely on good ol' list views for this (based on those
in the classic template).

> What form do your kanban chart takes, or what form would you like them to 
take:
>
>   * how are columns labeled: e.g. by the stage in the sales funnel?

Yep. We'd probably have the following three labels given how we work
right now:

- Qualified
- Technical evaluation
- Price quote sent

>   * what is displayed on the Kanban cards: e.g. sales rep, dollar amount,
>     client name, client contact?

Having the customer (i.e. a custom node reference), assignee, and dollar
amount (fetched from the customer node reference) would likely be how
we'd set it up.

>   * are swimlanes used: e.g. per sales rep?

As our presales team is only 3 people today, so swimlanes would be a bit
overkill for us (at least right now).

>   * are work in progress limits per column useful?

Surely useful for some, but as I mentioned, we are a relatively small
team. Hence, we'd probably not use it now.

For us, the key aspect for this feature as a whole is customizability
(which Roundup in general does exceptionally well).

> I can't promise anybody will work on it, but gathering requirements is 
useful.

Naturally! I just wanted to offer my 2 cents if anyone found this ticket
to be an entertaining evening pass-time. If there is anything more we
can bring to the table, I'll happily chip in.

> Also if you are willing, I would like to contact you off ticket to get 
some more
> info about your roundup setup and use case.

Absolutely! Both @matre and I would happily join in for a chat. Feel
free to shoot me an email off-thread.

Here is a basic Kanban board. I built it for a tracker using template
attribute language 
(TAL) used by the classic template.

William is your tracker a jina based tracker (using jinja2 template)?

If your tracker is TAL based, deploy by:

  install issue.kanban.html in your tracker's html directory

  install etag.py in your tracker's extensions directory

restart your tracker.

I attached an example of what it looks like and how to operate it.

As you drag a card, it inserts a placeholder so you can visualize where
the card is dropped.

There is no high level method for creating kanban views/url's.

If this is somewhat successful, I'll see what I can do to make building
them easier.

Any issue index view url can be turned into a kanban view.

   @columns in the url set by clicking display in the search builder
determines the data on the cards

   @group determined by selecting the group property determines the
columns and column names

   @sort determined by the sort property determines the order in each
column.
     You can drag//drop to rearrange cards in a column, but the order is
not preserved on reload.

   @template added to the URL (after an &) selects the kanban template.

You will have to manually edit the url to get a view you like and then
bookmark it in your browser.

As an example, the URL:

http://localhost:8917/demo/issue?
@sort=activity&@group=status&@filter=status&@columns=title,activity,creator,assignedto&@search_text=&status=-1,2,3,4,5,6,7&@dispname=Show%20All&@pagesize=50&@startwith=0&@template=kanban

will create a kanban board with each card showing (in order) title, last
activity date, creator and who it's assigned to.
 (@columns=title,activity,creator,assignedto)

The cards will be assigned to columns labeled with their status.
(@group=status)

They will be sorted in ascending activity order (oldest cards at the
top)

It will filter for cards with status -1, 2,3,4,5,6. (@filter=status and
status=....)

It will show 50 cards only (@pagesize=50)

It will be a kanban view (@template=kanban) of the issues.

The user's guide include info on manually manipulating index views:

  https://www.roundup-tracker.org/docs/user_guide.html#under-the-covers

Hopefully this gives you something to play with.

-- rouilj

William, if you add:

   <a tal:attributes="href python:request.indexargs_url('issue',
            {'@template':'kanban'})" i18n:translate="">Kanban display</
a>

on your issue.index.html page (near download as csv) you can convert an
index to kanban display easily.

This is properly brilliant!

> William is your tracker a jina based tracker (using 
jinja2 template)?

We actually transitioned to Jinja just a handful of 
weeks back
(primarily out of developer comfort). Though, from a 
quick glace, this
looks like a dead simple TAL to Jinja/Bootstrap 
migration, so we'll
happily try it out in our instance regardless.

We are currently in the midst of wrapping some 
unrelated projects up,
but when that's done, we're definitely going to give 
this a proper test run.

I'm happy to contribute any work we put into this, 
for example, the
Jinja/Bootstrap port.

Willam said:

> This is properly brilliant!

Thanks. It was about 2 days of work (20 hours). Mostly javascript stuff
that I cribbed from the Mozilla developer site demo. I have a few updates for
styling etc. and am tracking it via a fossil website. I'll send the link
to the site via separate email.

> > William is your tracker a jina based tracker (using jinja2 template)?
> We actually transitioned to Jinja just a handful of weeks back
> (primarily out of developer comfort). Though, from a 
> quick glace, this looks like a dead simple TAL to Jinja/Bootstrap
> migration, so we'll happily try it out in our instance regardless.

It should be relatively straight forward. Maybe a good jobs for an LLM to take
a first crack at if you use them. Using the Roundup DeepWiki
(https://deepwiki.com/roundup-tracker/roundup) might also be helpful.

I noticed w/ deepwiki it sometimes dropped attributes. So make sure to keep all
the attributes in your jinja translation. The javascript and ability to
color the columns or collapsed columns by property and property value need
the attributes.

> I'm happy to contribute any work we put into this, 
> for example, the Jinja/Bootstrap port.

That would be great. My personal rule is not to add anything to the distributed
templates unless I can maintain parity between TAL and jinja2 implementations. If
your jinja2 reworking has the same functionality as the TAL, maybe I can add it
to the distribution.

Also a few things to note:

  * the user has to have rest enabled and you have to run 2.0 or newer of Roundup
    (2.5 or greater is preferred (2.6 is current)). 

  * the current implementation does not work on tablets/touch devices.
    You can see the kanban layout but not manipulate it.

    The https://github.com/drag-drop-touch-js/dragdroptouch polyfill
    might be a solution.

  * the HTML script and style tags don't include the CSP nonce. If you aren't
    using content security policies you don't need to worry about it.
    Adding: tal:attributes="nonce request/client/client_nonce" (or jinja
    equivalent) to the script and style tags will fix it.

  * depending on how fast the backend runs, you can drop a card and have a small
    delay while the backend is updated or returns an error.

    If an error is returned, the error is displayed using alert() and the card doesn't
    replace the placeholder.

    If the update succeeds, a second request is done to get an updated parameter (etag)
    that is needed if the card is dragged again. Then the card is replaces the placeholder.
    So this adds to the delay.

    I have a patch to the roundup core code so the tag is returned with the response
    that changes the backend data. This will reduce but not eliminate the delay.
    For a first pass, I think this is acceptable.

Have a great day and thanks for being willing to try this out.

Hi William:

A few more updates hit the repo since I sent you the URL offline.

You should download the files using the Files/Download link or install
the fossil binary and clone the repo.

Short changelog/experiments:

1) I ran an earlier version of issue.kanban.html through
   https://deepwiki.com/roundup-tracker/roundup to get aa jinja2 template.
   It did a pretty good job with one major fail. It forgot to call 'batch()'
   and used 'batch' instead.

2) the etag.py file changed name to kanban.py and has a few more templating utils.

3) The current page supports items (e.g. issues) that have an unset value for the
   kanban group/column. Before this fix, unset cards would not appear. The "unset" 
   column is is not available if the column property is required by the item or has
   a default value as it should never be unset in these cases.

4) The label for the column now comes from the labelprop for the class fixing a couple
   of display issues.

5) Added support for an @closed=column_name[,another_name] parameter in the URL. Any columns
   named will be closed when the page is loaded.

6) To reduce memory use and improve performance, drag handlers are attached to the kanban canvas
   and event delegation is used to handle dragstart/dragend events.

7) The current implementation is not efficient. I lay out each column then loop over every
   item to see if it should be displayed in that column. This produces balanced HTML where
   every pass though the loop is valid HTML. This means looping over all items for every column.

   A jinja2 implementation should be able to be more efficient and create the HTML
   in a single pass over the item list. By using .propchanged() and not .first to emit
   a close tag for the prior column and a new open tag for the column. The deepwiki
   conversion will just do the brute force method I have to use for TAL.

8) Card counts have been added to the column headers.

9) some css changes: shadows under the cards, rounded corners, outdented property names, change
   how space between cards in details-content is done, ...

10) REST calls are aborted if it takes more than 5 seconds.

Also I think I mentioned that drag and drop to a closed column doesn't work.
I was wrong. You can drop on a closed column. Not sure if that's a feature
or a bug.

Here is a jinja2 kanban template matching the functionality of a current TAL one.

Did the conversion with deepwiki and then fixed a few issues.

  batch() needed to be called
  change ".is_open()" top ".is_open() is not none" as returned value of "" is false but should be true
  add <span>...</span> around each card label/value
  replace getprop() with i[column_prop] as getprop not defined.

One odd thing is that the lengths of the collapsed columns changes randomly
in Firefox. I assume it's some interaction between the bootstrap CSS and my css.

But I am not able to figure out what's going on.

The kanban.py needed for the jinja template. Put in extension directory and restart
roundup server.