Cancel Drop after async function

[jandresampaio]

Hi,

In our business, our items inside a board have different dragTo boards. In this case, what's the approach to use ? We've used the dropEl event to validate if user can drop using an async function but in this case, the kanban.drake.cancel(true) will not work in the callback.

Our code:

 const mergedConfig = {
            ...new KanbanConfiguration(),
            ...this.configuration,
            dropEl: (el, target, source, sibling) => {
                const currentStatusId = el.getAttribute("data-boardid");
                const targetStatusId = target.parentElement.getAttribute("data-id");
               this.workflowService.getWorkflowStateTransition(currentStatusId,targetStatusId).subscribe(
                    transition => {
                         /// post to server ...............
                    },
                    error => {
                         // tried this to undo   
                        const copy = el.cloneNode(true);
                        this.kanban.addElement(currentStatusId, copy);
                        this.kanban.removeElement(el);
                    }
                );
            }
        };
        this.kanban = new jKanban(mergedConfig);

We tried to undo the drag and drop by removing and adding element to previous board but it does not work.

Thank you.

[marcosrocha85]

Hello @jandresampaio, thank you for using jKanban.

I had something similar in the past and I solved by just getting the old element and adding it again to the board. You have to keep in mind that removing and adding it again will take item to the end of the board.

var oldElement = kanban.findElement(currentStatusId);
kanban.removeElement(currentStatusId);
kanban.addElement(boardId, {
    'id': currentStatusId,
    'title': oldElement.innerHTML
});

[riktar]

Hi, @jandresampaio Now if the dropEl callback returns false the drag will be canceled. here: https://github.com/riktar/jkanban/commit/d7ef0efec048595cd0dba34744028b19e55af19c

[jandresampaio]

Hi @marcosrocha85 , @riktar ,

Thanks for the help. Nice work

[jandresampaio]

Hi @riktar ,

The additional code you've provided won't await for an async call...Is there any example you can provide to show in what conditions will that work ? In my case only when setting a breaking and waiting for the call to finish...

[marcosrocha85]

That won't work because of reactive context. See, jKanban is a Javascript library. When you drop an item, dropEl is triggered and so your server validation request. The problem is that while your code is looking for a server response, the rest of the code continues executing. I see you can do two paths: 1st. Cancel drop even if server will return true and on your "transition" event move the item manually; or 2nd. Don't cancel drop, but if server returns error, you have to move the item back to it's original board.

[jandresampaio]

@marcosrocha85 , yes dropEl won't wait for anything, thanks for the clarification. We're taking the 2nd option, reverting to original position.