[ANGULAR] CrudManager sync on changed recurring event repeatedly inserts

[lx0]

Hello,

I am struggling with the implementation of the CrudManager with sync of changes to recurring events.
I am using the Angular basic example as a basis: https://bryntum.com/products/calendar/examples/frameworks/angular/basic/dist/basic

I changed the CrudManager configuration to include a sync url and enabled autoSync. Nothing else has been changed from the example:

    crudManager : {
        transport : {
            load : {
                url : 'http://localhost:3000/api/calendar/load',
                method: 'POST',
                credentials: 'omit',
            },
            sync : {
                url : 'http://localhost:3000/api/calendar/sync',
                method: 'POST',
                credentials: 'omit',
            }
        },
        autoLoad : true,
        autoSync : true
    },

When creating a recurring event, the sync performs well and adds the recurring event to the UI.
Sync Request:

{
  "type": "sync",
  "requestId": 17115702491131,
  "events": {
    "added": [
      {
        "startDate": "2024-04-29T04:00:00+02:00",
        "endDate": "2024-04-29T05:00:00+02:00",
        "duration": 1,
        "durationUnit": "hour",
        "cls": "",
        "name": "Recurring",
        "recurrenceRule": "FREQ=DAILY",
        "exceptionDates": [],
        "allDay": false,
        "$PhantomId": "_generatedf_b48a9a1c-cc5e-481b-acc1-edbc46c3ac84"
      }
    ]
  }
}

Sync Response:

{
    "type": "sync",
    "success": true,
    "events": {
        "rows": [
            {
                "id": "66047d49b36fdbc2515332da",
                "$PhantomId": "_generatedf_b48a9a1c-cc5e-481b-acc1-edbc46c3ac84"
            }
        ],
        "removed": []
    }
}

Screenshot 2024-03-27 at 21.11.23.png (41.26 KiB) Viewed 439 times

When changing the second occurrence of the series by shifting it by one hour and selection option "all future events", the sync request is also executed according to the documentation.
Sync Request:

{
  "type": "sync",
  "requestId": 17115702997732,
  "events": {
    "added": [
      {
        "startDate": "2024-04-30T05:00:00+02:00",
        "endDate": "2024-04-30T06:00:00+02:00",
        "duration": 1,
        "durationUnit": "hour",
        "cls": "",
        "name": "Recurring",
        "recurrenceRule": "FREQ=DAILY",
        "exceptionDates": [],
        "allDay": false,
        "$PhantomId": "_generated:66047d49b36fdbc2515332da:2024-04-30"
      }
    ],
    "updated": [
      {
        "recurrenceRule": "FREQ=DAILY;UNTIL=20240430T035900",
        "exceptionDates": ["2024-04-30T00:00:00+02:00"],
        "id": "66047d49b36fdbc2515332da"
      }
    ]
  }
}

Sync Response:

{
    "type": "sync",
    "success": true,
    "events": {
        "rows": [
            {
                "id": "66047d7bb36fdbc2515332eb",
                "$PhantomId": "_generated:66047d49b36fdbc2515332da:2024-04-30"
            },
            {
                "id": "66047d49b36fdbc2515332da",
                "name": "Recurring",
                "startDate": "2024-04-29T02:00:00.000Z",
                "endDate": "2024-04-29T03:00:00.000Z",
                "recurrenceRule": "FREQ=DAILY;UNTIL=20240430T015900Z",
                "exceptionDates": [
                    "2024-04-29T22:00:00.000Z"
                ]
            }
        ],
        "removed": []
    }
}

Screenshot 2024-03-27 at 21.11.34.png (109.7 KiB) Viewed 439 times

Screenshot 2024-03-27 at 21.11.46.png (50.54 KiB) Viewed 439 times

However, it seems that the application cannot correctly identify the response of the newly added series, as the change is kept in the changes queue of the store.
Whenever another UI operation is performed - like adding another unrelated one-time event - the added event of the previous series split operation is sent as added again and again (with the id of the split series as $PhantomId). Resulting in a lot of new series, as the backend interprets this as a newly added event.

Additional (unexpected) Sync Request:
The $PhantomId is the real id of the previously created event of the split series.

{
  "type": "sync",
  "requestId": 17115703960873,
  "events": {
    "added": [
      {
        "startDate": "2024-04-30T05:00:00+02:00",
        "endDate": "2024-04-30T06:00:00+02:00",
        "duration": 1,
        "durationUnit": "hour",
        "cls": "",
        "name": "Recurring",
        "recurrenceRule": "FREQ=DAILY",
        "exceptionDates": [],
        "resourceId": null,
        "allDay": false,
        "$PhantomId": "66047d7bb36fdbc2515332eb"
      }
    ]
  }
}

Sync Response:
Again, a new recurring event has been created in the backend.

{
    "type": "sync",
    "success": true,
    "events": {
        "rows": [
            {
                "id": "66047ddcb36fdbc251533312",
                "$PhantomId": "66047d7bb36fdbc2515332eb"
            }
        ],
        "removed": []
    }
}

As mentioned, this additional added sync request is repeatedly sent to the backend whenever another action is performed in the calendar UI. It seems that the added change is never completed and removed from the changes queue in the CrudManager or Store.

What am I doing wrong?

Best regards,
Alex

[ghulam.ghous]

Hi Alex,

Can you please share a test case where can we reproduce this behaviour? Because by looking at the description you provided, it looks like a ugly bug. You can attach the project as a zip file here or upload to google drive and share a accessible link to it.

Regards,
Ghous

[lx0]

Hi Ghous,

I cannot provide the backend src as it is part of a huge project, but I uploaded the changed example.

basic.zip

(258.89 KiB) Downloaded 20 times

BR,
Alex

[ghulam.ghous]

Hi Alex,

Apologies for the late response. I can understand that it is a part of huge project and you can not send it to us. I have constructed a backend example, can you please try to extract the minimum code from your backend routes (sync route) and add it in the example that should help us to reproduce this issue. You can send it to our email support@bryntum.com and let us know here when you send it so we can debug it and see what is wrong and if there's a potential problem we will open a ticket and fix it.

Instructions to run backend:

1. cd backend
2. npm install
3. npm run dev

Here's the project:

test.zip

(259.29 KiB) Downloaded 19 times

Regards,
Ghous

[lx0]

Hi Ghous,
Thank you for the backend example. The bug can be reproduced with your provided example as I initially described. No changes necessary.
Steps to reproduce:

• • Create a daily recurring event on Monday
  • Shift the second occurrence (Tuesday) by one hour
  • Observe the network traffic
  • Click somewhere else to trigger another action, like double clicking on the canvas to create a new event
  • Another sync request is triggered from step (2)

BR,
Alex

[ghulam.ghous]

Hi Alex,

Thanks for the steps and writing back to us. Created a ticket here https://github.com/bryntum/support/issues/8927 to investigate this issue and fix it. You can subscribe to it to keep track of updates.

Regards,
Ghous