Removing tags in a KanBanBoard using modified list-tagged-draggable Macro

#1

Hi,
I am building a Kanban board visible here: Kanban — Experience
(It already llooks quite nice…)

I use a modified version of the
list-tagged-draggable Macro
To make an item move from ToDo to Done not only Done has to be added but ToDo has to be removed. Therefore, I made a mod which uses additional actions to remove the unwanted tags which can be represented with this filter:

[list[$:/config/kanban]get[alias]!title<tag>]

The changed actions are thus:

\define kanbanList-actions(tag)
<!-- Save the current ordering of the tiddlers with this tag -->
<$set name="order" filter="[<__tag__>tagging[]]">
<!-- Remove any list-after or list-before fields from the tiddlers with this tag -->
<$list filter="[<__tag__>tagging[]]">
<$action-deletefield $field="list-before"/>
<$action-deletefield $field="list-after"/>
</$list>
<!-- Save the new order to the Tag Tiddler -->
<$action-listops $tiddler=<<__tag__>> $field="list" $filter="+[enlist<order>] +[insertbefore<actionTiddler>,<currentTiddler>]"/>
<!-- Make sure the newly added item has the right tag -->
<!-- Removing this line makes dragging tags within the dropdown work as intended -->
<!--<$action-listops $tiddler=<<actionTiddler>> $tags=<<__tag__>>/>-->
<!-- Using the following 5 lines as replacement makes dragging titles from outside into the dropdown apply the tag -->
<$list filter="[<actionTiddler>!contains:tags<__tag__>]">
<$fieldmangler tiddler=<<actionTiddler>>>
<$action-sendmessage $message="tm-add-tag" $param=<<__tag__>>/>
<!--HERE THE MODIFICATION STARTS----------------------------------------------------------------!!!!!!-->
<$list filter="[list[$:/config/kanban]get[alias]!title<__tag__>]">
<$action-sendmessage $message="tm-remove-tag" $param={{!!title}}/>
</$list>
</$fieldmangler>
</$list>
</$set>
\end

The result is somewhat aleatoric. Sometimes the unwanted Tags get gemoved often the new Tag is just added .
Where’s my bug?

#2

@JanJo I am finding it difficult to the bigger picture here.

So just a quick tip:
Consider using the toggle operator in a button containing the following action widget;

<$action-listops $tiddler="target" $field="my-field" $subfilter="+[toggle[todo],[done]]" />
  • You may just leave the $tiddler parameter out to use the current tiddler.

see https://tiddlywiki.com/#toggle%20Operator and the last example.

#3

Hi @TW_Tones, toggle is great… but here you risc to add the tiddler to four more panels.
but I switched to action-listops. It is a little better… but still astonishingly aleatoric: which means performing the same actions seems to have different results.
<$action-listops $tiddler=<<actionTiddler>> $field="tags" $subfilter="-[list[$:/config/kanban]get[alias]!title<__tag__>]"/>

You may look in the changed example above.

#4

I also tried the draggable widget to have the startactions described there …alas without success.
But this brings me to the question: does the linkwidget as well have the startactions feature?

\define DragTags()
<$action-listops $tiddler=<<actionTiddler>> $tags="-[list[$:/config/kanban]get[alias]]"/>
<$action-sendmessage $message="tm-notify" $param=<<actionTiddler>>/>
\end
\define kanbanItem(content)
<$draggable class="kb_item" startactions="DragTags">
<$link><div class="kb_itemTitle"><<Alias>>
<$button class="tc-btn-invisible" style="float: right; width:30px; height:120%;margin:-4px; text-align:right">
<$action-listops $tiddler="$:/config/kanban/open" $subfilter="+[toggle{!!title}]" />
&#8597;</$button></div></$link>
<$list filter="[list[$:/config/kanban/open]is[current]]" >
<div>$content$</div>
</$list>
</$draggable>
\end
#5

@JanJo my bad but I do find it hard to follow and you are trying to build in some useful functionality. If I were building this solution (I I even could) I would perhaps first try and tackle the tagging without the ordering component and integrate them later.

If I understand correctly it is about using tags to move tiddlers through the different columns. My feeling would be that toggle is insufficient and I would confirst consider

  • a button with externalised actions that can be displayed on every tiddler in every column.
  • Externalise the actions from the button in a custom actions macro while building this button - so later you can use other triggers such as drop
  • Instead of the toggle operator use the cycle operator where the <titles> are derived from the available columns.

Then you could click on this button in any tiddler and it would migrate across the columns a click at a time.

  • Once working then introduce the actions relating to this function into your above code

Another advance coming in the pre-release 5.2.3 which may help here is the updated checkbox widget that permits operation on list fields, you could use the tag field as the list, in some ways this contains the listops and cycle tags facilities built in an allows you to have a check appear on tiddlers in each column than moved it to the next column. As long as you are happy with the checkbox as the interface this may prove programmatically the simplest implementation.

  • I will try and see if I can make a generic solution using this method (cant promise when though)
#6

This is all incorporated in the list-tagged-draggable Macro which was my starting point here.

A generic button to advance an item is a good idea eg. for smartphone-scenarios where dragging is a drag…So I would like to have it but on desktops the dragging-thing should be possible.

#7

I agree,

I just think once you design the actions for what I suggest you can add them into your list-tagged-draggable method, with the destination column setting which tag in the cycle to use.

#8

Thank you for reminding me of this https://tiddlywiki.com/#cycle%20Operator%20(Examples) this is already three quarters of the buttons… but that does not cure the drag-problem.

#9

Hi @JanJo, I haven’t had a chance to study your code but I have a suspicion. Could you try to add more items to the kanban so that each column has two items at least. Then drag and drop between them so no column is ever empty, that is you are never dragging to an empty column.

Does that resolve the inconsistent behaviour that you are seeing?

#10

You are right: in what I called aleatory behavior adding the first tag never results removing the tag from the other panels, whereas it sometimes works with populated columns. But sometimes things are screwed up and I can drag it to populated columns without removing.
The only cure is to drag it to a column where the tiddler is allready contained. Then all the other instances are removed.
It is weird.

#11

@saqimtiaz Further testing: You are entirely right!

What am I going to do about that if I do not want to add a system-relevant ghost task to make it work?

#12

Actually, I wonder if that is a red herring or at most a secondary issue.

Change kanbanList to the following and see if that helps:


\define kanbanList(tag,subFilter,emptyMessage,itemTemplate,elementTag:"div",storyview:"")
\whitespace trim
<span class="tc-tagged-draggable-list">
<$set name="tag" value=<<__tag__>>>
<$list filter="[<__tag__>tagging[]$subFilter$]" emptyMessage=<<__emptyMessage__>> storyview=<<__storyview__>>>
<$elementTag$ class="tc-menu-list-item">
<$droppable actions="""<$macrocall $name="kanbanList-actions" tag=<<__tag__>>/>""" enable=<<tv-enable-drag-and-drop>>>
<$elementTag$ class="tc-droppable-placeholder"/>
<$elementTag$>
<$transclude tiddler="""$itemTemplate$""">
<$link to={{!!title}}>
<$view field="title"/>
</$link>
</$transclude>
</$elementTag$>
</$droppable>
</$elementTag$>
</$list>
<$tiddler tiddler="">
<$droppable actions="""<$macrocall $name="kanbanList-actions" tag=<<__tag__>>/>""" enable=<<tv-enable-drag-and-drop>>>
<$elementTag$ class="tc-droppable-placeholder"/>
<$elementTag$ style="height:0.5em;">
</$elementTag$>
</$droppable>
</$tiddler>
</$set>
</span>
\end

You were previously still calling the list-tagged-* actions for the second droppable.

2 Likes
#13

Also, in kanbanList-actions you should be able to simplify the adding/removing of tags part of the actions to the following:

<$action-listops $tiddler=<<actionTiddler>> $field="tags" $subfilter="[<__tag__>] -[list[$:/config/kanban]get[alias]!title<__tag__>]"/>

1 Like
#14

A few notes on how I debugged this in the hopes that it may help you in the future:

At the beginning of kanbanList-actions I added the following:
<$action-log tag=<<__tag__>> list={{{ [list[$:/config/kanban]get[alias]!title<__tag__>join[ ]] }}} />

Then with the browser developer console open, I dragged and dropped and noted that nothing got logged when the erratic behaviour happened, which means these actions were not invoked on those occasions. However, the new tag was added, suggesting there was a second set of actions that were being invoked.

2 Likes
#15

Great! You saved my day!
I was on the brink of despair ;-).

I will exercise your debugging-trick ASAP.

1 Like
#16

Hi all, thanks to @saqimtiaz ’ help you can now see what I am working on
It is a Kanban with adaptable templates per status.

The link now shows a working proof of concept:

It is far from perfect and will take time to mature but it is a good basis to tinker a Kanban because it is using TW’s new Layout Feature.

Don’t be intimidated by the German terms: As said all Templates can easily be modified.

1 Like
#17

The link you quoted no longer works.

But, I found that without Test.html at the end, it works:

https://www.szen.io/Curriculum/neu/

#18

Hi @DesertDwarf
Thanks I repaired the link.
Kanban — Experience

To explain:

Test.html is a kind of a stable version…The index.html you get by default is my development version which might be crushed at some point.

I moved the file test.html into a directory called test and named it index…
because I do not want to accidentally oversave my development version. Of course then I have to take away the .html

At the moment the plugin should not be installed, it is working in the wiki… but if you activate it, it causes a css mess because I obviously have not bundled all the classes I defined for other plugins. Hard to find whats missing.

It will take me a while to produce an autonomous version.

1 Like