[ANGULAR] Prevent Editor Modal from Closing on API Failure in Bryntum TaskBoard

[stewart_wo]

We are using the Bryntum TaskBoard editor modal to allow users to edit tasks. When the user clicks the "Save" button:

1. We intercept the save action using the beforeSave event to make an API call and validate the changes.

2. If the API call fails (e.g., due to a server error or invalid data), we want to:

   • Keep the editor modal open.
     Prevent the changes from being saved.
     Display an error message to the user.

How can we prevent the editor modal from closing when the API call during the beforeSave event fails? Currently, even if the API returns an error, the modal closes, and the changes are saved locally. We need a way to ensure that the modal stays open, and the user can retry saving after fixing the issue.

ngAfterViewInit(): void {
   this.taskboard.on('beforeSave', ({ source, editor, record, values }) => {
       this.updateTaskRecordService(values);
   }
}

private updateTaskRecordService(taskData: any){
        this.tasksService.updateTask(taskData).subscribe({
        next: (response: any) => {
            // modal hide
            this.toastService.success(response.message); 
        },
        error: (error: any) => { 
           // error
           // modal not hide
         },
      });
 }

[Animal]

See https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/TaskEditor#event-beforeSave

Screenshot 2024-11-28 at 10.37.59.png (151.81 KiB) Viewed 206 times

[stewart_wo]

There is a problem with the beforeSave event; it does not wait for our API response. We have tried many methods to handle this, but none seem to work.

please provide working code with this dummy API

taskboard.on('beforeSave', ({ source, editor, record, values }) => { 
this.sendPostRequest();
});
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';
  

  

sendPostRequest(): void {
this.apiService.postData().subscribe(
  (response) => {
    console.log('Response:', response);
    // modal hide
  },
  (error) => {
    console.error('Error:', error);
    // modal not hide
  }
);
  }

dummy code for post request

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

[tasnim]

I've opened a feature request ticket for you here https://github.com/bryntum/support/issues/10412 to make it async.

Please subscribe to the ticket, so if there is any update you'll get notified.

[Animal]

Right. It's not set up to handle an async handler. We should fix that.

A workaround would be:

    features : {
        taskEdit : {
            editorConfig : { 
                autoUpdateRecord : false
            }
        }
    },

    listeners : {
        beforeSave() {
            this.performAsyncSave(...arguments);

            // Don't let editor do its saving
            return false;
        }
    },

    async performAsyncSave({ record, values, editor }) {
        // Your async saving code here
        await new Promise(resolve => setTimeout(resolve, 1000));

        // Close the editor when you're finished
        editor.close();
    },