Bryntum Support Forums

alex.l wrote: ↑Mon Jan 16, 2023 7:01 am

Does your eventStores have different dataset for these 2 schedulers, or you load same data for both but apply filter afterwards?

Hi Alex. Happy Monday. At the moment, each scheduler has a CrudManager that performs the exact same call to the backend. I then filter the top scheduler to resourceId=0 and the bottom scheduler to resourceId != 0. So I fetch the exact same data twice.

BUT.. This is only because I cannot run a single CrudManager to the schedulers so your highly reasonable question has two answers:

1. At the moment with two crudmanagers, I am loading the same data twice.
2. Once two crudmanagers are not need, I will only load the data once and filter in each scheduler to a disjoint set.

Thank you so much.

Maybe in this case there is no need in add/remove records, but only assign to resource and refresh?

I can start tweaking the logic, sure, and build an extensive handler for dropping but if you will support a single crudmanger for two partnered schedulers soon, I would prefer to spend my dev time for something else?

Don't we have another thread regarding to this problem? As I remember there were 2 blockers: chained eventStore problem and chained resourceStore problem which are fixed now.

You are right, Alex, but becuase of the issue described in this thread I am blocked from upgrading beyond 5.2.1

Please see this, which I corresponded with Mats on over the weekend.

jk@datapult.dk wrote: ↑Sat Jan 14, 2023 9:59 pm

Hi Mats,

Spent two weeks being able to create a reproducible example. This works in 5.2.1 but in 5.2.6 this breaks.

You can copy the code below into https://bryntum.com/products/scheduler/examples/crudmanager/

When you do that you will get this error (trace as plaintext in my first post on this thread): https://www.dropbox.com/s/r5qp38u2cgiwfpv/Screen%20Recording%202023-01-14%20at%2020.58.30.mov?dl=0

import { Scheduler, Splitter } from '../../build/scheduler.module.js?464842';
import shared from '../_shared/shared.module.js?464842';

const cookie = 'PHPSESSID=scheduler-crudmanager';
if (!(document.cookie.includes(cookie))) {
    document.cookie = `${cookie}-${Math.random().toString(16).substring(2)}`;
}

const data = {
    resourcesData: [
        {
            "id": 16582,
            "name": "User 16743",
            "list_order": 4,
            "initials": "16743",
            "email": "user16743@email.com",
            "private_phone": "",
            "public_phone": "",
            "is_on_shift": true,
            "contract_id": 288,
            "color": null,
            "created_at": "2022-06-17T07:11:30.000000Z",
            "updated_at": "2022-12-08T10:34:03.000000Z",
            "deleted_at": null,
            "created_by": 9213,
            "updated_by": 9213,
            "pivot": {
                "team_id": 5311,
                "user_id": 16743,
                "start": null,
                "end": null
            }
        },
    ],
    eventsData: [
        {
            "start": "2023-01-14T23:00:00Z",
            "end": "2023-01-15T22:59:00Z",
            "userId": 16582,
            "name": "Afspadsering",
            "style": null,
            "frontendId": "WISHID10377",
            "backendId": 10377,
            "wishTypeId": 359,
            "roomId": null,
            "note": "Hej ",
            "eventType": "wish",
            "historic": false,
            "cls": "",
            "eventStyle": "dashed"
        }
    ],
}

const crudManager = {
    resourceStore: {
        fields: ['id', 'name', 'list_order', 'color']
    },
    eventStore: {
        fields: [
            { name: "name", type: "string" },
            { name: "id", dataSource: "frontendId", },
            { name: "backendId", type: "integer" },
            { name: "wishTypeId", type: "integer" },
            { name: "roomId", type: "integer" },
            { name: "resourceId", dataSource: "userId", },
            { name: "note", type: "string" },
            { name: "eventType", type: "string", defaultValue: "shift" },
            { name: "startDate", dataSource: "start", },
            { name: "endDate", dataSource: "end", },
            { name: "historic", type: "boolean", defaultValue: true },
            { name: "durationUnit", defaultValue: "day" },
        ]
    },
    validateResponse: true,
    transport: {
        load: {
            url: 'php/read.php',
            paramName: 'data'
        },
        sync: {
            url: 'php/sync.php'
        }
    },
    autoLoad: false,
    autoSync: false,
}

const config = {
    appendTo: 'container',
    columns: [{ text: "name", field: "name" }],
    flex: '1 1 50%',
    features: { eventDrag: { constrainDragToTimeline: false, } },
    startDate: new Date(2023, 0, 13, 6),
    endDate: new Date(2023, 0, 15, 18),
    viewPreset: 'dayAndWeek',
    rowHeight: 50,
    barMargin: 5,
    eventColor: 'orange',
    eventStyle: 'colored',
    syncMask: null,
    loadMask: null,
    crudManager,
}

const scheduler1 = new Scheduler(config);

new Splitter({ appendTo: 'container' });

const scheduler2 = new Scheduler(config);

scheduler1.crudManager.inlineData = data
scheduler2.crudManager.inlineData = data

Here is an infinite loop
But this problem appears exactly because you copy-paste event with same id, because you have to use 2 crudManagers and have same dataset loaded in both schedulers, so when you drop, second scheduler already have exactly same event. So the problem in the solution.
The fix here should be to change approach and don't add/remove records, but only update assignment, so it will be filtered out in top scheduler and showed in bottom one. Or update the code and use one crudManager with chained stores, but you still will be need to change the approach and do re-assignment on drag/drop.

Oh my.. Yes, an infinite loop. Let me investigate and revert Thank you both!

Hi again,

Here is a test with two resources that has one event each. I filter each scheduler to their own resource, so:

1. I expect the bottom scheduler to only contain resource User 16743
2. But what I actually get is the same resource on top as on the bottom.

See screenshot and here is the code that can replicate it.

import { Scheduler, Splitter, CrudManager } from '../../build/scheduler.module.js?464842';
import shared from '../_shared/shared.module.js?464842';

const cookie = 'PHPSESSID=scheduler-crudmanager';
if (!(document.cookie.includes(cookie))) {
    document.cookie = `${cookie}-${Math.random().toString(16).substring(2)}`;
}

const data = {
    resourcesData: [
        {
            "id": 0,
            "name": "Unassigned",
            "list_order": 4,
            "initials": "16743",
            "email": "user16743@email.com",
            "private_phone": "",
            "public_phone": "",
            "is_on_shift": true,
            "contract_id": 288,
            "color": null,
            "created_at": "2022-06-17T07:11:30.000000Z",
            "updated_at": "2022-12-08T10:34:03.000000Z",
            "deleted_at": null,
            "created_by": 9213,
            "updated_by": 9213,
            "pivot": {
                "team_id": 5311,
                "user_id": 16743,
                "start": null,
                "end": null
            }
        }, {
            "id": 16582,
            "name": "User 16743",
            "list_order": 4,
            "initials": "16743",
            "email": "user16743@email.com",
            "private_phone": "",
            "public_phone": "",
            "is_on_shift": true,
            "contract_id": 288,
            "color": null,
            "created_at": "2022-06-17T07:11:30.000000Z",
            "updated_at": "2022-12-08T10:34:03.000000Z",
            "deleted_at": null,
            "created_by": 9213,
            "updated_by": 9213,
            "pivot": {
                "team_id": 5311,
                "user_id": 16743,
                "start": null,
                "end": null
            }
        },
    ],
    eventsData: [
        {
            "start": "2023-01-14T23:00:00Z",
            "end": "2023-01-15T22:59:00Z",
            "userId": 16582,
            "name": "Shift 1",
            "style": null,
            "frontendId": "WISHID10377",
            "backendId": 10377,
            "wishTypeId": 359,
            "roomId": null,
            "note": "Hej ",
            "eventType": "wish",
            "historic": false,
            "cls": "",
            "eventStyle": "dashed"
        },
        {
            "start": "2023-01-14T23:00:00Z",
            "end": "2023-01-15T22:59:00Z",
            "userId": 0,
            "name": "Shift 1",
            "style": null,
            "frontendId": "Shift 2",
            "backendId": 10377,
            "wishTypeId": 359,
            "roomId": null,
            "note": "Hej ",
            "eventType": "wish",
            "historic": false,
            "cls": "",
            "eventStyle": "dashed"
        }
    ],
}

const crudManager = new CrudManager({
    resourceStore: {
        fields: ['id', 'name', 'list_order', 'color']
    },
    eventStore: {
        fields: [
            { name: "name", type: "string" },
            { name: "id", dataSource: "frontendId", },
            { name: "backendId", type: "integer" },
            { name: "wishTypeId", type: "integer" },
            { name: "roomId", type: "integer" },
            { name: "resourceId", dataSource: "userId", },
            { name: "note", type: "string" },
            { name: "eventType", type: "string", defaultValue: "shift" },
            { name: "startDate", dataSource: "start", },
            { name: "endDate", dataSource: "end", },
            { name: "historic", type: "boolean", defaultValue: true },
            { name: "durationUnit", defaultValue: "day" },
        ]
    },
    validateResponse: true,
    transport: {
        load: {
            url: 'php/read.php',
            paramName: 'data'
        },
        sync: {
            url: 'php/sync.php'
        }
    },
    autoLoad: false,
    autoSync: false,
})

const config = {
    appendTo: 'container',
    columns: [{ text: "name", field: "name" }],
    flex: '1 1 50%',
    features: { eventDrag: { constrainDragToTimeline: false, } },
    startDate: new Date(2023, 0, 13, 6),
    endDate: new Date(2023, 0, 15, 18),
    viewPreset: 'dayAndWeek',
    rowHeight: 50,
    barMargin: 5,
    eventColor: 'orange',
    eventStyle: 'colored',
    syncMask: null,
    loadMask: null,
}

const scheduler1 = new Scheduler({
    ...config,
    resourceStore: crudManager.resourceStore.chain(r => r.id === 0),
    eventStore: crudManager.eventStore
});

new Splitter({ appendTo: 'container' });

const scheduler2 = new Scheduler({
    ...config, 
    resourceStore: crudManager.resourceStore.chain(r => r.id > 0),
    eventStore: crudManager.eventStore
});

crudManager.inlineData = data

Thank you for the test case. I reproduced the problem, looks like it still doesn't work as expected. I've opened a ticket for that https://github.com/bryntum/support/issues/5977
We will try our best to find a solution for you as soon as it possible.

Hi,

This is internally caused by the stores belonging to a project, when assigning an event store already part of a project to a Scheduler, that project is also assigned to the Scheduler - which in turn makes it use the resource store of the project. The tricky part in fixing is it that the event store can only be part of a single project. But we will figure something, your use case should be possible.

Meanwhile, I recommend also chaining the eventStore into the second scheduler. That way it should not pull the project over:

const scheduler2 = new Scheduler({
    ...config, 
    resourceStore: crudManager.resourceStore.chain(r => r.id > 0),
    eventStore: crudManager.eventStore.chain() // <---- Changed
});