Our flexible Kanban board for managing tasks with drag drop


Post by licjapodaca »

Wrong location/position of the textbox of SimpleTaskEdit feature when I press [Enter] for multiple tasks, here it's the test case:

  • I have installed the new version of the TaskBoard component that is "4.2.1".

  • I have configured the "SimpleTaskEdit" feature with the property "addNewAtEnd" in "true" and other behavior 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();
    		}
    	}
    },
    ...
    
  • I have the following code when I click on the "addTask" button in "columnToolbars":

    me.getView()._taskboard.project.autoSync = false;
    me.getView()._taskboard.addTask(columnRecord);
    
  • I defined the backend URL of the project SYNC action of the TaskBoard.

  • So, when I clicked on the "addTask" button appears me the first card with the textbox in the name of the task with the following configuration:

    headerItems: {
    	...
    	text: {
    		field: 'name',
    		editor: {
    			type: 'text',
    			cls: 'task-card-textbox',
    			required: true,
    			placeholder: 'Escribe el nombre de la tarea',
    			maxLength: 100,
    			minLength: 1,
    			height: 32
    		},
    		order: 2
    	},
    	...
    }
    
    screenshoot 4.jpg
    screenshoot 4.jpg (359.46 KiB) Viewed 969 times
  • I will explain the steps of the following image:

    screenshoot 5.jpg
    screenshoot 5.jpg (451.87 KiB) Viewed 969 times
    • In step 1. I type the task name and press the [Enter] key, when I do that comes the step 2.
    • In step 2. The sync triggers and do the backend request returning the task data that I have added with the ID generated at the database side, when the response arrives, all extra data fills the "bodyItems" that I have defined in the card but when this happens comes the step 3.
    • In step 3. The next card added shows the textbox in an incorrect location/position in the card as you can see in the previous image of step 3.
  • Staying in the textbox if I press [Escape] the "onCancel" event of the "Editor" triggers and I execute the "_taskboard.project.taskStore.revertChanges();" method of the taskStore but doesn't remove the card like so:

    screenshoot 6.jpg
    screenshoot 6.jpg (393.24 KiB) Viewed 969 times

    I have to do a "_taskboard.project.load();" to load the data again from the backend, only this remove this wrong card.

So, my questions here are:

  • How to position correctly the textbox of the "SimpleTaskEdit" feature?

  • How to remove only the card that I have cancelled by pressing the [Escape] key without having to load all the Taskboard?

Regards


Post by licjapodaca »

Maybe the problem is when I press the [Enter] key to accept the change in the textbox, it runs two steps at the same time, it triggers the sync request and adds the new task card in the TaskBoard, so the new task card appears with the textbox ready to type the name of the new task and then the sync request arrives and fills the "bodyItems" fields of the previous task card increasing the height size of the card,so this action pushes the new task card but the textbox stay in the same position ... maybe this behavior it's happening ...

How can I specify to the "addNewAtEnd" feature to wait until the SYNC request arrives and render the new data on the card, and only at that time run the NewCardAtEnd action. Could I do that?

Regards


Post by licjapodaca »

I found a workaround, I made the following steps:

  • I set the "addNewAtEnd" property of the "SimpleTaskEdit" feature to false.

  • Then I control the add new task with a button defined in "columnToolbars" feature, and when I trigger that button I run the following code:

    Ext.defer(function() {
    	me.getView()._taskboard.project.autoSync = false;
    	me.getView()._taskboard.addTask(columnRecord);
    }, 500);
    

As you can see, first I execute a Delay of 500 milliseconds to let the SYNC operation and renderization to have finished in the previous task card to let first expand the card with the new size and then execute the method "addTask" and start to type the new task card name like in the following GIF animation image:

behavior.gif
behavior.gif (582.11 KiB) Viewed 961 times

The action that let me add a new task card, pressing the [Enter] key is because when I clicked the first time over the "addTask" button in the column toolbar the button stay focused and when I finish to type the name of the card and press the [Enter] button, runs two steps, one is the accepting the changes and the other step execute or triggers the clicking event of the focused button that is so great, because it let me run the delay first and then the "addTask" method.

Regards


Post by alex.l »

Hi licjapodaca,

Glad to hear you've fixed the problem. The root cause is definitely in race condition and "double" request. Btw it may be helpful to know that we have async methods to wait for to know the exact moment when data is ready to work.
As example:
https://bryntum.com/docs/taskboard/#TaskBoard/model/ProjectModel#function-commitAsync

await taskBoard.project.commitAsync();

All the best,
Alex


Post Reply