Our pure JavaScript Scheduler component


Post by andrew.perera »

Hi Team,
We have upgraded Bryntum from 4.0.8 to 5.0.1 and ever since 'beforeeventdropfinalize' returns wrong data. I have raised another similar concern
viewtopic.php?p=113853#p113853.
Thanks for the prompt response.
These functionalities worked well and I came across now the context of the beforeeventdropfinalize does not update as it used to.

As you might already be aware we use the two scheduler view and React as the front-end development library. Please find the steps below.

  1. In this example we have a nested event and we have split functionality
    Nested event.png
    Nested event.png (24.91 KiB) Viewed 562 times
  2. And then when you click we have an action that will create an event with a new event-id - '534535503rb21-21'. Deletes the one with the old ID - '534535503rb21'
    case SPLIT_EVENT:
          const splitPayload = action.paramConfig;
          let eventId;
          return produce(state, (draft) => {
            // handle team view
            if (splitPayload.id.search(RESOURCE_TEAM_PATTERN) === -1) {
              eventId = splitPayload.id;
            } else {
              // e.g. 1756rb13:&&:TEAMCHS_01 ---> 1756rb13
              eventId = splitPayload.id.split(`${RESOURCE_TEAM_CONCAT}`)[0];
            }
            const schedulerEvent = getschedulerEventsFromEventId(
              state.schedulerEvents,
              eventId
            );
            const splitedSchedulerEvents = [];
    
    if (schedulerEvent.nestedBookingEvents.length > 1) {
      // Making the scheduler event object for number of[nestedBookingEvents.length] with different eventIds
      schedulerEvent.nestedBookingEvents.forEach((nestedBookingEvent) => {
        const newSchedulerEvent = Object.assign({}, schedulerEvent);
        newSchedulerEvent['splittedEvent'] = true;
        newSchedulerEvent['originalId'] = schedulerEvent.id;
        // change the event id
        newSchedulerEvent[
          'id'
        ] = `${schedulerEvent.id}-${nestedBookingEvent.bookingID}`;
        newSchedulerEvent['startDate'] = nestedBookingEvent.start;
        newSchedulerEvent['endDate'] = nestedBookingEvent.end;
        newSchedulerEvent['bookingID'] = nestedBookingEvent.bookingID;
    
        newSchedulerEvent['bookings'] = [];
        newSchedulerEvent['bookings'].push(nestedBookingEvent);
    
        newSchedulerEvent['nestedBookingEvents'] = mapNestedBookingEvents(
          newSchedulerEvent
        );
    
        // deleting bookings from newSchedulerEvent
        delete newSchedulerEvent.bookings;
    
        splitedSchedulerEvents.push(newSchedulerEvent);
      });
    } else {
      splitedSchedulerEvents.push(schedulerEvent);
    }
    // Save splitted event in redux store
    draft.splittedEvent = schedulerEvent;
    
    // contcat newly created splitted into schedulerEvents
    draft.schedulerEvents = draft.schedulerEvents.concat(
      splitedSchedulerEvents
    );
    
    // Delete splitted event from the schedulerEvents
    draft.schedulerEvents = draft.schedulerEvents.filter(
      (schedulerEvent) => {
        return schedulerEvent.id !== draft.splittedEvent.id;
      }
    );
          });
    1. At this point we have two separate events in the scheduler now. This change of event object is detected in a useEffect and pushed through loadDataAsync.
      useEffect.png
      useEffect.png (15.42 KiB) Viewed 562 times
      Please find one of the event objects we pass to loadDataAsync.
    {
        "description": "Cognos July Project Work - Cognos 2.0 Task 2 - Nett change",
        "start": "Date(2022-10-24) 13:00",
        "id": "534535503rb21-21",
        "resourceId": "res:534535503",
        "type": 11,
        "key1": "COGNOS_2",
        "key2": "200",
        "eventType": "Software Development",
        "eventTypeCode": "SD",
        "owner": "Melbourne Branch",
        "ownerCode": "MEL",
        "priority": "High Priority",
        "priorityCode": "0",
        "description1": "Cognos July Project Work",
        "description2": "Cognos 2.0 Task 2 - Nett change",
        "customerCode": "000000123",
        "customerName": "Gary Test Account 30",
        "customerDrillDown": "deb/m10mast -e 000000123",
        "customerRef": "",
        "addressName": "Shane Meredith",
        "address": "C/- Pronto Software 189 Coronation Drive Milton QLD 4064",
        "postcode": "4064",
        "latitude": -27.470518,
        "longitude": 153.008002,
        "locationStatus": "Valid",
        "phone": "",
        "email": "",
        "contactName": "",
        "parentKey1": "",
        "parentKeyDesc1": "",
        "startDate": "2022-10-24T02:00:00.000Z",
        "startTime": "13:00",
        "endDate": "2022-10-24T05:30:00.000Z",
        "endTime": "10:30",
        "bookingProjectLinkDate": "Date(2022-10-24)",
        "bookingProjectLinkTime": "13:00",
        "durationScale": "Hours",
        "durationText": "6 Hours",
        "durationTextHHMM": "6 Hours",
        "genericResource": "BM1",
        "attributes": [
            {
                "group": "AIRCOND",
                "condition": "Equal To",
                "codes": [
                    {
                        "code": "HVAC",
                        "startDateFrom": "Date()",
                        "startDateTo": "Date(2079-06-06)",
                        "endDateFrom": "Date()",
                        "endDateTo": "Date(2079-06-06)",
                        "startNum1": 0,
                        "endNum1": 99999999999999,
                        "startNum2": 0,
                        "endNum2": 99999999999999,
                        "startText1": "",
                        "endText1": "ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ",
                        "startText2": "",
                        "endText2": "ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ"
                    }
                ]
            }
        ],
        "suggestedResources": [
            {
                "resourceNo": 111,
                "description": "Erica Low is a Electrician",
                "masterCode": "ERICA LOW"
            },
            {
                "resourceNo": 469,
                "description": "numb nut",
                "masterCode": "DUMKOPF"
            },
            {
                "resourceNo": 6667,
                "description": "Chef - and manager",
                "masterCode": "FLORA"
            }
        ],
        "generic1": "N",
        "genericDesc1": "Normal",
        "generic2": "",
        "genericDesc2": "none",
        "generic3": "",
        "genericDesc3": "Market Type not defined",
        "generic4": "Date(2022-07-20)",
        "genericDesc4": "",
        "generic5": "Date()",
        "genericDesc5": "",
        "notes": "",
        "holdReason": "",
        "holdReasonCode": "",
        "zoneCode": "",
        "zone": "",
        "eventRepCode": "DEB",
        "eventRep": "Debbie Green",
        "eventManagerCode": "andrewp",
        "eventManager": "Andrew Perera",
        "startDateType": "ASAP",
        "endDateType": "ASAP",
        "status": "Entered",
        "earliestStartDateTime": "Date(2022-07-20) 08:00",
        "earliestEndDateTime": "Date(2022-07-20) 13:00",
        "latestStartDateTime": "Date(2022-07-20) 08:00",
        "latestEndDateTime": "Date(2022-07-20) 13:00",
        "calcStartDateTime": "Date()",
        "calcEndDateTime": "Date()",
        "customAlpha1": "",
        "customAlpha2": "",
        "customAlpha3": "",
        "customAlpha4": "",
        "customAlpha5": "",
        "drillDown": "job/jimaint -maint COGNOS_2",
        "resizable": true,
        "draggable": true,
        "maskedEvent": 0,
        "eventColor": "#7457e4",
        "eventStyle": "border: 3px solid #ef0909; z-index: 40;",
        "icon": "",
        "overdueFlag": "0",
        "declineFlag": "0",
        "onHoldFlag": "0",
        "notifiedFlag": "0",
        "linkedGenericDate": "Date(2022-10-23)",
        "linkedGenericTime": "16:30",
        "end": "Date(2022-10-25) 10:30",
        "resourceNo": 534535503,
        "name": "Cognos July Project Work - Cognos 2.0 Task 2 - Nett change",
        "nestedBookingEvents": [
            {
                "bookingID": 21,
                "bookingId": "rn534535503rb21",
                "start": "2022-10-24T02:00:00.000Z",
                "end": "2022-10-24T05:30:00.000Z",
                "startOffset": 0,
                "endOffset": 12600000,
                "description": "",
                "bookingProjectStart": "2022-10-24T02:00:00.000Z"
            }
        ],
        "Duration": 6,
        "splittedEvent": true,
        "originalId": "534535503rb21",
        "bookingID": 21
    }
    1. Now if we try to move the event and try to capture the context through beforeeventdropfinalize
      beforeeventdropfinalize.png
      beforeeventdropfinalize.png (40.14 KiB) Viewed 562 times
      Please see the return value of contex.context.EventRecords[0]. data
      Looks like the event has the old event-id
      {
          "description": "Cognos July Project Work - Cognos 2.0 Task 2 - Nett change",
          "start": "Date(2022-10-24) 13:00",
          "id": "534535503rb21",
          "resourceId": "res:534535503",
          "type": 11,
          "key1": "COGNOS_2",
          "key2": "200",
          "eventType": "Software Development",
          "eventTypeCode": "SD",
          "owner": "Melbourne Branch",
          "ownerCode": "MEL",
          "priority": "High Priority",
          "priorityCode": "0",
          "description1": "Cognos July Project Work",
          "description2": "Cognos 2.0 Task 2 - Nett change",
          "customerCode": "000000123",
          "customerName": "Gary Test Account 30",
          "customerDrillDown": "deb/m10mast -e 000000123",
          "customerRef": "",
          "addressName": "Shane Meredith",
          "address": "C/- Pronto Software 189 Coronation Drive Milton QLD 4064",
          "postcode": "4064",
          "latitude": -27.470518,
          "longitude": 153.008002,
          "locationStatus": "Valid",
          "phone": "",
          "email": "",
          "contactName": "",
          "parentKey1": "",
          "parentKeyDesc1": "",
          "startDate": "2022-10-24T02:00:00.000Z",
          "startTime": "13:00",
          "endDate": "2022-10-24T05:30:00.000Z",
          "endTime": "10:30",
          "bookingProjectLinkDate": "Date(2022-10-24)",
          "bookingProjectLinkTime": "13:00",
          "durationScale": "Hours",
          "durationText": "6 Hours",
          "durationTextHHMM": "6 Hours",
          "genericResource": "BM1",
          "attributes": [
              {
                  "group": "AIRCOND",
                  "condition": "Equal To",
                  "codes": [
                      {
                          "code": "HVAC",
                          "startDateFrom": "Date()",
                          "startDateTo": "Date(2079-06-06)",
                          "endDateFrom": "Date()",
                          "endDateTo": "Date(2079-06-06)",
                          "startNum1": 0,
                          "endNum1": 99999999999999,
                          "startNum2": 0,
                          "endNum2": 99999999999999,
                          "startText1": "",
                          "endText1": "ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ",
                          "startText2": "",
                          "endText2": "ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ"
                      }
                  ]
              }
          ],
          "suggestedResources": [
              {
                  "resourceNo": 111,
                  "description": "Erica Low is a Electrician",
                  "masterCode": "ERICA LOW"
              },
              {
                  "resourceNo": 469,
                  "description": "numb nut",
                  "masterCode": "DUMKOPF"
              },
              {
                  "resourceNo": 6667,
                  "description": "Chef - and manager",
                  "masterCode": "FLORA"
              }
          ],
          "generic1": "N",
          "genericDesc1": "Normal",
          "generic2": "",
          "genericDesc2": "none",
          "generic3": "",
          "genericDesc3": "Market Type not defined",
          "generic4": "Date(2022-07-20)",
          "genericDesc4": "",
          "generic5": "Date()",
          "genericDesc5": "",
          "notes": "",
          "holdReason": "",
          "holdReasonCode": "",
          "zoneCode": "",
          "zone": "",
          "eventRepCode": "DEB",
          "eventRep": "Debbie Green",
          "eventManagerCode": "andrewp",
          "eventManager": "Andrew Perera",
          "startDateType": "ASAP",
          "endDateType": "ASAP",
          "status": "Entered",
          "earliestStartDateTime": "Date(2022-07-20) 08:00",
          "earliestEndDateTime": "Date(2022-07-20) 13:00",
          "latestStartDateTime": "Date(2022-07-20) 08:00",
          "latestEndDateTime": "Date(2022-07-20) 13:00",
          "calcStartDateTime": "Date()",
          "calcEndDateTime": "Date()",
          "customAlpha1": "",
          "customAlpha2": "",
          "customAlpha3": "",
          "customAlpha4": "",
          "customAlpha5": "",
          "drillDown": "job/jimaint -maint COGNOS_2",
          "resizable": true,
          "draggable": true,
          "maskedEvent": 0,
          "eventColor": "#7457e4",
          "eventStyle": "border: 3px solid #ef0909; z-index: 40;",
          "icon": "",
          "overdueFlag": "0",
          "declineFlag": "0",
          "onHoldFlag": "0",
          "notifiedFlag": "0",
          "linkedGenericDate": "Date(2022-10-23)",
          "linkedGenericTime": "16:30",
          "end": "Date(2022-10-25) 10:30",
          "resourceNo": 534535503,
          "name": "Cognos July Project Work - Cognos 2.0 Task 2 - Nett change",
          "nestedBookingEvents": [
              {
                  "bookingID": 21,
                  "bookingId": "rn534535503rb21",
                  "start": "2022-10-24T02:00:00.000Z",
                  "end": "2022-10-24T05:30:00.000Z",
                  "startOffset": 0,
                  "endOffset": 12600000,
                  "description": "",
                  "bookingProjectStart": "2022-10-24T02:00:00.000Z"
              }
          ],
          "Duration": 6,
          "splittedEvent": true,
          "originalId": "534535503rb21",
          "bookingID": 21,
          "durationUnit": "day",
          "cls": "",
          "allDay": false,
          "exceptionDates": {},
          "duration": 0.14583333333333334,
          "parentIndex": 37
      }
    Please give us your assistance as it breaks one of the most important use cases of our scheduler.

    Thanks in advance.

Post by andrew.perera »

And it results in a floating ghost event on the scheduler that won't go off until a full browser refresh.

ghostevent.png
ghostevent.png (40.36 KiB) Viewed 555 times
ghosteventelement.png
ghosteventelement.png (69.31 KiB) Viewed 555 times

Post by alex.l »

Hi andrew.perera,

I checked your code snippets and screenshots. It's hard to say what's wrong here by the info provided, we need to debug the app and see what exactly is going on. I am not sure about your split event code, I don't understand what data you manipulate in there. Is it record instance from a store? Or some object that you clone and applied changes.
I am not sure the problem in that code at all. So I need to reproduce the issue and debug it.
Any chance to get a runnable test case?

All the best,
Alex


Post by andrew.perera »

Hi Alex, Thanks for getting back.

What we actually achieved from that piece of code splitting is

  1. User is able to split a nested event and move events individually
  2. Reason we had this as we have a business case where events can be moved around even if they are nested.
  3. So what happens is we basically change the event to an event with a new id. As an example '534535503rb21-21 is the new id and we get rid of the 534535503rb21 event and pass it again to loadDataAsync.
  4. By the time we use 'beforeeventdropfinalize' we get the old event in the context
  5. It used to work fine and now we ended up having a ghost event with the new event id floating

Do you reckon this was clear enough?

Thanks.


Post by alex.l »

I understand that you wrote, but I cannot give you an answer what's wrong with it. I need to reproduce it myself to make sure:

  • we cannot help with it by editing your code;
  • it's a bug in our code;
  • make clear steps to reproduce with a test case for development team.

So, I need a runnable test case and steps to reproduce the problem.

All the best,
Alex


Post by andrew.perera »

Hi Alex, I understand mate. is there a possibility that we can share info through a Zoom call? Happy to spend time and screen share for debugging session from our end.
Thanks


Post by alex.l »

Sorry, but calls are not possible in bounds of forum support. Only as Professional Services https://www.bryntum.com/services
If you cannot share it here or create a small test case for us, you can send it via email to support at bryntum.com

All the best,
Alex


Post by andrew.perera »

Hi Alex, this issue has been a nightmare. Just wondering if there are any changes coming up related to 'beforeeventdropfinalize' in 5.2.10?
Otherwise, we need to look into your professional services.
In that case, can you advise me on the process around reaching out to your professional services department and what the costs are etc.


Post by alex.l »

Hi andrew.perera,

I am afraid I can't promise it will be fixed in next version, because we didn't reproduce the entire problem. But you could check it, try to download nightly build in CustomerZone and test it.

Regarding to Professional Services, please contact sales at bryntum.com for details.

All the best,
Alex


Post Reply