[ANGULAR] Calendar Prevent Save + CrudManager

[codevlabs]

Dear Support,

Using angular, we have the following setup.

<bryntum-calendar style="width:100%"
	...
	(onBeforeEventSave)="beforeEventSave($event)">
</bryntum-calendar>

public async beforeEventSave(eventRecord){	
		const result = await MessageDialog.confirm({
				title   : 'Please confirm (beforeEventSave)',
				message : `Start time: ${DateHelper.format(eventRecord.eventRecord.data.startDate, 'ddd LST')}<br>End time: ${DateHelper.format(eventRecord.eventRecord.data.endDate, 'ddd LST')}`
			});
	
		// Return true to accept the drop or false to reject it
		return result === MessageDialog.okButton;
}

Using the above, I expect that the event save is cancelled. We are also using the crudmanager which is still fired when the user presses CANCEL. We looked at CrudManager events like before sync but not sure whats the best practice in this case.

We want the user to confirm the edit/save of the event. If the user chooses CANCEL, the event is not saved and also the crudmanger is not synced.

Thanks.

[Animal]

That will stop the EventEdit from saving. The EventEdit Popup will stay visible, and not save the changes if onBeforeEventSave returns false.

[codevlabs]

This is the issue. CRUD Manager is still saving/syncing even when onBeforeEventSave returns false.

[ghulam.ghous]

Can we get a small runnable test case (application where we can reproduce this code - it should be minimum code required for the issue) so we can see what is the problem there? Because in ideal case scenario this shouldn't be happening.

[Animal]

Is that handler running? You are seeing the confirm dialog?

Because returning false from onBeforeEventSave does stop the event editor from saving the changes to the record as you can see when I inject an implementation into the Calendar:

onBeforeeventSave.gif (728.74 KiB) Viewed 957 times

[codevlabs]

Dear Support, I am now revisiting this issue.

@animal, yes the confirmation dialogue is visible and onBeforeEventSave returns false. The CRUD manager is still posting the updated record.

async onBeforeEventSave(eventRecord){
		console.log('onBeforeEventSave', eventRecord);

	return false;
}

<bryntum-calendar style="width:100%"
			[date] = "calendarConfig.date"
			[dateFormat]= "calendarConfig.dateFormat"
			[defaultCalendar] = "calendarConfig.defaultCalendar"
			[crudManager] = "calendarConfig.crudManager"	
			[modes] = "calendarConfig.modes"	
			[modeDefaults] = "calendarConfig.modeDefaults"	
			[mode] = "calendarConfig.mode"	
			[eventEditFeature] = "calendarConfig.features.eventEdit"
			[features] = "calendarConfig.features"	
			[sidebar] = "calendarConfig.sidebar!"	
			[tbar] = "calendarConfig.tbar"	
			(onDateChange)="onDateChange($event)"
			(dateRangeChange)="onDateRangeChange($event)"
			(onBeforeEventSave)="onBeforeEventSave($event)"
		>

Any support on this would be appreciated thanks.

[tasnim]

Hi,

For Angular wrappers there is a different approach of preventing events instead returning false
Docs https://bryntum.com/products/calendar/docs/guide/Calendar/integration/angular/events#preventable-events

async onBeforeEventSave(event){
	event.returnValue = false;
}

Please let us know if that helps.

[codevlabs]

yes this is working when used on its own but still not working when using in a MessageDialog. Please advise

Working

async onBeforeEventDelete(eventRecord){				
		return eventRecord.returnValue = false;		
}

Not working

async onBeforeEventDelete(eventRecord){		
		const result = await MessageDialog.confirm({
			title   : 'Please confirm',
			message : `<b>Are you sure you want to delete this event?</b>`
		});
		
	if (result === MessageDialog.okButton){			
		return eventRecord.returnValue = true;
	}			
	else
	{			
		return eventRecord.returnValue = false;
	}				
}

[tasnim]

Hi,

Please try this instead

    onBeforeEventDelete(props : any) {
        const { context } = props;
        MessageDialog.confirm({
            title   : 'Please confirm',
            message : `<b>Are you sure you want to delete this event?</b>`
        }).then((result) => {
            if (result === MessageDialog.okButton) {
                context.finalize(true);
            }
            else {
                context.finalize(false);
            }
        });
        props.returnValue = false;
    }

[codevlabs]

Hi Tasmin, firstly thank you for you quick support.

We are almost there but Delete and Edit are not behaving the same. In the case of SAVE, the event window is not being closed. Maybe we can close it programatically?

Delete is working fine, when the user presses OK, CRUD posts to db and Event Edit window is closed.

	
async onBeforeEventDelete(eventRecord){		
		console.log('*** onBeforeEventDelete', eventRecord);	
				
	const { context } = eventRecord;
    MessageDialog.confirm({
        title   : 'Please confirm',
        message : `<b>Are you sure you want to delete this event?</b>`
    }).then((result) => {
        if (result === MessageDialog.okButton) {
            context.finalize(true);
        }
        else {
            context.finalize(false);
        }
    });
    eventRecord.returnValue = false;
}

EDIT is also working fine. CRUD is positing the server on OK only but the event Editor window is not closing.

	async onBeforeEventSave(eventRecord){		
		console.log('*** onBeforeEventDelete', eventRecord);	
				
	const { context } = eventRecord;
    MessageDialog.confirm({
        title   : 'Please confirm',
        message : `<b>Are you sure you want to edit this event?</b>`
    }).then((result) => {
        if (result === MessageDialog.okButton) {
            context.finalize(true);
        }
        else {
            context.finalize(false);
        }
    });
    eventRecord.returnValue = false;
}

screen recording attached. thanks.