Our flexible Kanban board for managing tasks with drag drop


Post by licjapodaca »

The Taskboard trigger sync at the moment I clicked the button addTask with the "SimpleTaskEdit" feature activated like so:

Screen Shot 2021-07-07 at 9.28.41 a.m..png
Screen Shot 2021-07-07 at 9.28.41 a.m..png (156.89 KiB) Viewed 1622 times

How can I suspend this behavior? I want to trigger the sync request but until the user accept the change in the inline text editing by pressing the [Enter] key ...

Regards


Post by Maxim Gorkovsky »

Hello.
Simplest solution I can think of is to disable autoSync for this period of time. I don't see any suitable events, so you will have to extend some classes. Smth like:

class MyTaskBoard extends TaskBoard {
  async addTask() {
    const me = this;
    this.project.autoSync = false;
    this.project.taskStore.on({
      update() { // this event will fire when you change name in simple editor
        me.project.autoSync = true;
        me.project.sync();
      }
      once : true // this will unbind listener after first call
    });
    return super.addTask(...arguments);
  }
}

Post by licjapodaca »

Excellent, it works like so:

screenshoot 1.png
screenshoot 1.png (236.23 KiB) Viewed 1619 times

Regards


Post by licjapodaca »

Hi @Maxim, I found an issue with this change, if I dont made any change in the textbox of the card and lose the focus of the textbox in the card, the sync operation never trigger the request of the new card like so:

screenshoot.jpg
screenshoot.jpg (233.12 KiB) Viewed 1617 times

Regards


Post by Maxim Gorkovsky »

This is expected for the case when you do not modify original value. Unfortunately, taskboard doesn't expose editor or any events for this case. So there's no public way to monitor finish editing. I opened a feature request: https://github.com/bryntum/support/issues/3156

In the meantime you can get editor handle and listen to finishEdit event on it:

class MyTaskBoard extends TaskBoard {
  async addTask() {
    const me = this;
    this.project.autoSync = false;
    await super.addTask(...arguments);
    if (me.editor) {
      const restore = () => {
        this.project.autoSync = true;
        this.project.sync();
      }
      me.editor.on({
        complete : restore,
        cancel : restore,
        once : true
      });
  }
}

Post by licjapodaca »

Hi @Maxim, the code that you specify in the previous post doesn't work for me but I found a workaround that is the following:

  • I configured the "SimpleTaskEdit" feature like so:

    ...
    simpleTaskEdit: {
    	disabled: false,
    	addNewAtEnd: true,
    	editorConfig: {
    		invalidAction: 'block',
    		onCancel: function () {
    			me.getView()._taskboard.project.taskStore.revertChanges();
    		},
    		onComplete: function () {
    			me.getView()._taskboard.project.autoSync = true;
    			me.getView()._taskboard.project.sync();
    		}
    	}
    },
    ...
    
  • Then I defined in the "columnToolbars" in "bottomItems" the "addTask" with the following code in "onClick" like so:

    me.getView()._taskboard.project.autoSync = false;
    me.getView()._taskboard.addTask(columnRecord);
    

After that changes the sync method triggers correctly when I change the content in the textbox of the inline "name" task 👍🏻.

Regards


Post by alex.l »

Hi licjapodaca,

Glad to hear you've found a workaround! Please let us know if you'll need help.

All the best,
Alex

All the best,
Alex


Post Reply