New added event stay in changes when call `applyChangeset` for `resourceStore`

[chuckn0rris]

Easy scenario:

• we added an event, returned response with real id set for event. (mock response). crudManager.changes are empty.
• after that we do applyChangeset with resources changes, no events.
• actually we have an error that events config not provided in response. debugging showed up that crudManager marked added before event as not commited again.

To reproduce, use the code below. dblClick on the timeline to trigger custom code. Forum post

import '../_shared/shared.js'; // not required, our example styling etc.
import Scheduler from '../../lib/Scheduler/view/Scheduler.js';
import AjaxHelper from '../../lib/Core/helper/AjaxHelper.js';
import '../../lib/Scheduler/feature/NonWorkingTime.js';
import '../../lib/Core/widget/TextAreaField.js';
import '../../lib/Scheduler/feature/LockRows.js';

const j = await fetch('data/data.json')
const resp = await j.json()

const resourceChangeSet = { updated : [{ ...resp.resources.rows[1], name : 'New name' }] }
const eventChangeSet = { updated : [{ ...resp.events.rows[0], name : 'New name' }] }

AjaxHelper.mockUrl('sync-mock-url', (url, urlParams, { queryParams }) => {
    const payload = {
        //requestId: (new Date()).getTime(),
        success: true,
        type: 'sync'
    }

    if (generatedId !== null) {
        payload['events'] = {
            rows: [
                {
                    id: 1,
                    '$PhantomId' : generatedId,
                    startDate: "2023-02-03",
                    duration: 5,
                    name: "New event",
                    description: "New event",
                    percentDone: 10,
                    eventColor: "indigo",
                    resourceId: "r1",
                }
            ]
        }
        generatedId = null;
    }
    else {
        payload['resources'] = { rows: resourceChangeSet.updated }
        // payload['events'] = {
        //     rows: [{
        //         id: 'u1',
        //         startDate: "2023-02-03",
        //         duration: 5,
        //         name: "New event",
        //         description: "New event",
        //         percentDone: 10,
        //         eventColor: "indigo",
        //         resourceId: "r1",
        //     }]
        // }

    }
    return {
        delay: 100,
        responseText: JSON.stringify(payload)
    }
});

let generatedId = null;

const pollForMoreDetails = (source) => {
    console.log(generatedId)
    console.log('pollForMoreDetails')
    setTimeout(() => {
        //source.suspendAutoSync()
        //source.suspendChangeTracking()
        scheduler.crudManager.applyChangeset({ resources : resourceChangeSet })
        //source.acceptChanges();
        //source.resumeAutoSync(false)
        //source.resumeChangeTracking(true)
    }, 1750)

    setTimeout(() => {
        // source.suspendAutoSync()
        // source.suspendChangeTracking()
        // source.applyChangeset({events: eventChangeSet})
        // source.resumeAutoSync(false)
        // source.resumeChangeTracking(true)
    }, 1_250)
}
new Scheduler({
    appendTo: 'container',
    startDate: new Date(2023, 0, 29),
    endDate: new Date(2023, 1, 12),
    viewPreset: 'weekAndDayLetter',
    crudManager: {
        // forceSync: true,
        autoSync: true,
        autoLoad: true,
        supportShortSyncResponse: true,
        eventStore: {
            fields: [
                'description',
                { name: 'percentDone', type: 'number', defaultValue: 0 }
            ]
        },
        resourceStore: {
            fields: [
                'city'
            ]
        },
        transport: {
            load: {
                url: 'data/data.json',
                method: 'GET',
            },
            sync: {
                url: 'sync-mock-url',
                method: 'GET',
            },
        },
        listeners: {
            sync: ({ source }) => {
                // console.log('synced!')
                // console.log(source.changes);
                // console.log(source.hasChanges());
                pollForMoreDetails(source);
            },
            beforeSyncApply({ response }) {
                console.error('beforeSyncApply', response);
            }
        }
    },

    columns: [
        { field: 'name', text: 'Name', width: 150 },
        { field: 'city', text: 'City', width: 150 }
    ],

    listeners: {
        beforeEventEdit({ eventRecord }) {
            if (eventRecord.hasGeneratedId) {
                generatedId = eventRecord.id
                eventRecord.set({
                    "startDate": "2023-02-03",
                    "duration": 5,
                    "name": "New event",
                    "description": "New event",
                    "percentDone": 10,
                    "eventColor": "indigo",
                    "resourceId": "r1",
                    isCreating: false
                });
            }
            return false;
        }
    }
});

window.addEvent = () => {

    const rec = scheduler.eventStore.add({
        "startDate": "2023-02-03",
        "duration": 5,
        "name": "New event",
        "description": "New event",
        "percentDone": 10,
        "eventColor": "indigo",
        "resourceId": "r1"
    })[0];

    generatedId = rec.id;
}