Our flexible Kanban board for managing tasks with drag drop


Post by lanpeng »

Hi,

I tried to use a custom dialog component when dragging cards. However, I find that the beforeTaskDrop method will be called repeatedly.

Detailed steps are given below:
1.drag a card and show the custom dialog
2.do something else, e.g. change the current tab of the browser, or open another windows in the computer.
3.return to the task board tab.

Will find that the method gets called repeatedly and the custom component will be rendered again. That means, now I get two dialogs...

In this case, I would like to check with you if there is any way to avoid the above situation.

Another question:
I tried to use a custom flag to avoid the above situation, but an error will occur in the console. Can you please give me some help about the error?

taskboard.module.js:62316  Uncaught (in promise) TypeError: drag.finalize is not a function
    at TaskZone.finalizeDrag (taskboard.module.js:62316:1)
    at TaskZone.endDrag (taskboard.module.js:62312:1)

Key codes are given below:

  isReviewerDialog: boolean = false;
  async beforeTaskDrop({ taskRecords, targetColumn, targetSwimlane }) {
    console.log('----enter in beforeTaskDrop---')
    ......
    // Try to use isReviewerDialog to avoid the repeat dialog
    if (!this.isReviewerDialog) {
      // chooseReviewerDialog --> open confirm dialog
      let result = await this.chooseReviewerDialog()
      if (result) {
        ......
        let res: any = await this.validateUpdateTaskStatus(taskRecords[0].id, targetColumn.originalData.id);
          if (res?.data) {
            ......
            this.canDrag = true;
          } else {
            ......
            this.canDrag = false;
          }
      } else {
        this.canDrag = false;
      }
    } 
    if (this.isReviewerDialog) {
      this.dialogEditor.closeAll();
      this.isReviewerDialog = false;
      this.canDrag = false;
    }

  return this.canDrag;
  }
chooseReviewerDialog() {
    return new Promise((resolve, reject) => {
      this.isReviewerDialog = true;
      const editorConfig = new MatDialogConfig();
        ......
        const dialog = this.dialogEditor.open(ChooseReviewerDialogComponent, editorConfig);
        dialog.afterClosed().subscribe((res) => {
          if (res) {
            resolve(true);
            this.isReviewerDialog = false;
          } else {
            resolve(false);
            this.isReviewerDialog = false;
          }
        });
    });
  }

Post by marcio »

Hey,

Thanks for reaching out.

I created a demo using a custom dialog here https://codepen.io/marciogurka/pen/abrdvZW but didn't get the behavior that you mentioned (as you can see in the attached recording), could you please try to reproduce that on the demo that I shared (or adapt to reproduce that behavior)?

Regarding the second question, we'll also need a runnable test case, by only looking to the snippet, it doesn't look like something is wrong to have that error.

Attachments
Screen Recording 2024-05-17 at 16.05.47.mov
(6.55 MiB) Downloaded 49 times

Best regards,
Márcio


Post by lanpeng »

Hi,

Thanks for your reply.

I created a demo to briefly reproduce the above issues.
Please refer to the attachments for the screen recording and demo code.

Looking forward to your reply.

PS:
Angular: v11
bryntum/taskboard: v5.2.4,

Attachments
demo.zip
(533.61 KiB) Downloaded 46 times
screen_recording.zip
(8.66 MiB) Downloaded 46 times

Post by Animal »

To confirm a drag operation it should be as simple as this. No third party libraries needed:

    listeners : {
        // Async event listeners allowing you to veto drag operations
        beforeTaskDrop : async({ eventRecord }) => {
            const result = await MessageDialog.confirm({
                title   : 'Please confirm',
                message : `Your info here`  // <-- you put your message into the dialog here using the data passed to the handler
            });

            // Return true to accept the drop or false to reject it
            return result === MessageDialog.yesButton;
        }
    }

Post by lanpeng »

Hey,

In fact, in our production projects, I think using custom components is a better option. This is because there are some custom elements and special styling requirements that need to be present in the confirmation popup.

Therefore, what I would like to ask is what is causing the repeated calls to the beforeTaskDrop method, which results in the repeated popup component? [Please refer to the attached demo]
Also, I am very curious about the reason for the console error report. Is there something wrong with my code? Or is there some other problem?

Can you please give me some help if possible?
Thanks in advance.


Post by Animal »

The npm i incantation failed on your app:

Screenshot 2024-05-24 at 07.18.37.png
Screenshot 2024-05-24 at 07.18.37.png (47.73 KiB) Viewed 457 times

Any idea what to do?


Post by Animal »

I deleted package-lock.json and did the npm i magic again. It went through but with some weird warnings.

Then I did npm run start

But:

Screenshot 2024-05-24 at 07.25.43.png
Screenshot 2024-05-24 at 07.25.43.png (182.99 KiB) Viewed 457 times

The huge complexity of this framework! A taskboard would be less than 100 lines of Javascript without it.


Post Reply