Our powerful JS Calendar component


Post by Animal »

Scroll up from there and look at the sync request structure.


Post by kevinschweikert »

Hey Animal,

i've taken a few days to extensively look at the sync request and response structure. As far as my understanding goes, we implemented everything according to your specifications:

  • new added events send a phantom identifier plus all data in the sync request and we send it back
  • updated events only send the db identifier and the changed data and we would only have to send back the db identifier

If this is correct, then you can see, we do exactly that in my examples. If not, can you please pinpoint me to the error?

There is still our problem, that we get the phantom identifier back when we call eventRecord.getData("id") from beforeDragMoveEnd instead of the db identifier

Cheers
Kevin


Post by alex.l »

HI Kevin,

We don't see what's the problem using code snippets provided. We need a full runnable test case for debugging. Please zip and attach full app here, with instructions how to build and run the app, and steps to reproduce the issue. Together with full JSON's fo load and sync responses/requests.

And one question. Why do you use eventRecord.getData('id') and eventRecord.getData('playout_tags') if it works like eventRecord. playout_tags and eventRecord.id ? Try to update your code with this aproach as very first step.

All the best,
Alex


Post by kevinschweikert »

Hi,

the getData function usage is just a leftover from our extensive trial and error. We were unsure in how to access the fields and suspected this was the error.

But you can easily see this for yourself. Just add this to https://bryntum.com/products/calendar/examples/basic/

listeners: {
            beforeDragMoveEnd: async ({ eventRecord, validation }) => {
                console.log(eventRecord.id);
                return false;
            },
            beforeDragResizeEnd: async ({ eventRecord, validation }) => {
                console.log(eventRecord.id);
                return false;
            }
        },

The eventRecord.id is a PhantomId while moving and a dragId while resizing. How can i get the ID from the database/data.json?

We had a similar issue with the recurrenceRule: viewtopic.php?t=25389

Hope that helps and if you need further information i am happy to provide it!

Cheers
Kevin


Post by alex.l »

Hi Kevin,

How can i get the ID from the database/data.json?

I don't follow. eventRecord.id is always there if you returned it from the server side. Server side in the only who can set id. $PhantomId is used for newly created events and used before it saved on server side and real id has been set. It used in sync request to identify record when you add new event, and needs to be sent back after save together with real id that server set to identify which record just got an id. For all further updates operation it's not required to pass/set PhantomId.

I still can't reproduce the behaviour you mentioned. I can't understand how id can disappear while drag operation and I always have it on eventRecord.id for all persisted records.

It will really help us if we take all together.
Please post full test case we can use to reproduce this behaviour.
Please describe steps to reproduce the issue, actual result and expected result.
Try to reproduce this using our demo. Apply changes if required and attach here.

All the best,
Alex


Post by kevinschweikert »

Hi alex,

Use the basic example demo https://bryntum.com/products/calendar/examples/basic/ with this code:

import { Calendar } from '../../build/calendar.module.js?468679';
import shared from '../_shared/shared.module.js?468679';

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
    autoLoad  : true,
    transport : {
        load : {
            url : 'data/data.json'
        }
    }
},

appendTo : 'container',

// Features named by the properties are included.
// An object is used to configure the feature.
features : {
    eventTooltip : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
},
listeners: {
            beforeDragMoveEnd: async ({ eventRecord, validation }) => {
                console.log(eventRecord.id);
                return false;
            },
            beforeDragResizeEnd: async ({ eventRecord, validation }) => {
                console.log(eventRecord.id);
                return false;
            }
        },

});

Move any event and resize it. Look at browser console output.

Expected: eventRecord.id is the ID from the datasource like "1" or "23"
Actual: PhantomId or DragId like "_generatedf_eb7dd8bf-4d46-4361-a5a3-67f6a85d7920" or "dragResize-event-20"

Hope that makes it clear

Cheers
Kevin


Post by alex.l »

Hi Kevin,

Thank you for your patience, now it's clear. I reproduced this and opened a ticket to check it deeply https://github.com/bryntum/support/issues/7059
You can subscribe on ticket updates to be notified when it's done.

All the best,
Alex


Post Reply