Our pure JavaScript Scheduler component


Post by Animal »

Filtering is as simple as this:

filter.gif
filter.gif (355.81 KiB) Viewed 202 times

In case you can't read that size of image, the incantation used there was

scheduler.resourceStore.filter(r => r.name.startsWith('D'))

Using a custom filter on the resourceStore of each Scheduler, you should be able to share a CrudManager.

Each Scheduler would have a completely different visible set of resources. Dragging an event from one Scheduler to the other would have to be handled specially. The "drop" gesture would not be a remove and add. It would be an assignment to a new resource (possibly a new time)


Post by jk@datapult.dk »

Thanks, Animal. You are so kind to write on Friday evening.

This does not work with a partnered setup like this example: https://bryntum.com/products/scheduler/examples/partners/

Paste this one into that example and notice that both schedulers gets filtered.

scheduler2.resourceStore.filter(r => r.name.startsWith("Linda"))

Post by Animal »

If you read the code in that example, they both use the exact same stores:

Screenshot 2022-11-25 at 21.30.46.png
Screenshot 2022-11-25 at 21.30.46.png (139.95 KiB) Viewed 194 times

I suggest that your second Scheduler have a resourceStore chained off the first one, so the ode would be

    resourceStore : scheduler1.resourceStore.chain(myFilterFn),
    eventStore    : scheduler1.eventStore

https://www.bryntum.com/products/scheduler/docs/api/Core/data/Store#function-chain


Post by jk@datapult.dk »

Thanks but my question throughout this thread is how to accomplish exactly that when using a Crudmanger.?


Post by jk@datapult.dk »

Animal wrote: Fri Nov 25, 2022 10:36 pm

If you read the code in that example, they both use the exact same stores:

Screenshot 2022-11-25 at 21.30.46.png

I suggest that your second Scheduler have a resourceStore chained off the first one, so the ode would be

    resourceStore : scheduler1.resourceStore.chain(myFilterFn),
    eventStore    : scheduler1.eventStore

https://www.bryntum.com/products/scheduler/docs/api/Core/data/Store#function-chain

In this case I obviously also don't share the CrudManager.


Post by Animal »

There will be only one CrudManager. The second Scheduler wouldn't need one. All the data resides in the first scheduler.

The event store is shared, so that's fine.

The second Scheduler's resource store loads itself from the first Scheduler's resource store, and will refresh itself whenever that master store changes. That is the contract of a chained store.


Post by jk@datapult.dk »

Thank you for the answer! It is really appreciated.

Could you kindly confirm that chaining is not working as you suggest, by copy/pasting this into your CrudManager example at https://bryntum.com/products/scheduler/examples/crudmanager/?

Can we agree that both schedulers filter to id < 3 even thought I explicitly instruct scheduler2 to filter/chain to the invert set?

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

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

const scheduler = new Scheduler({
    appendTo   : 'container',
    startDate  : new Date(2018, 4, 21, 6),
    endDate    : new Date(2018, 4, 21, 18),
    viewPreset : 'hourAndDay',
    eventColor : 'orange',
    eventStyle : 'colored',
    syncMask : null,
    loadMask : null,
    columns : [{ text : 'Car', field : 'car', width : 150 },],
    crudManager : {
        resourceStore : {
            fields : ['car', 'dt'],
            filters: [{property: 'id', value: 3, operator: '<'}]
        },

        eventStore : {
            fields : ['dt', { name : 'durationUnit', defaultValue : 'hour' }]
        },

        validateResponse : true,

        transport : {
            load : {
                url       : 'php/read.php',
                paramName : 'data'
            },
            sync : {
                url : 'php/sync.php'
            }
        },

        autoLoad      : true,
        autoSync      : true,
    }
});

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

const scheduler2 = new Scheduler({
    ref               : 'bottom-scheduler',
    cls               : 'bottom-scheduler',
    appendTo          : 'container',
    flex              : '1 1 50%',
    partner           : scheduler,
    hideHeaders       : true,
    resourceImagePath : '../_shared/images/users/',
    columns : [{ text : 'Car', field : 'car', width : 150 },],
    resourceStore : scheduler.resourceStore.chain(r => r.id >= 3),
    eventStore    : scheduler.eventStore
});

Post by Animal »

I cannot run that. I have no PHP on my MacOS system. Apple see fit to destroy people's installation during what they fondly regard as "upgrades".

I can suggest that you set a breakpoint in the second Scheduler's resource store's fillFromMaster method.

If it works as it should it should use allRecords from its master store, which means the full dataset, ignoring the master store's filtering, and apply its own chainedFilterFn to ingest only the ones you want.


Post by jk@datapult.dk »

Animal wrote: Sat Nov 26, 2022 5:52 pm

I cannot run that. I have no PHP on my MacOS system. Apple see fit to destroy people's installation during what they fondly regard as "upgrades".

I can suggest that you set a breakpoint in the second Scheduler's resource store's fillFromMaster method.

If it works as it should it should use allRecords from its master store, which means the full dataset, ignoring the master store's filtering, and apply its own chainedFilterFn to ingest only the ones you want.

Thanks again, Animal! Yeah, MacOS... I'm so happy we Dockerized our setup (initially) for production but helps for MacOS too.

Please see this video. You guys at Bryntum running a PHP server for the CrudManager example so I dump my code right in there ;-)

https://www.dropbox.com/s/ripssyfg6r4htvl/Screen%20Recording%202022-11-26%20at%2017.36.41.mov?dl=0

When you do that: Can we agree that both schedulers filter to id < 3 even thought I explicitly instruct scheduler2 to filter/chain to the invert set?


Post by alex.l »

Thanks a lot for patience and complete test case. I applied some changes and tested it online (complete code posted in the ticket), but it doesn't works as expected. Seems like you cannot now share one crudManager instance via 2 schedulers.
I've opened another ticket to fix this problem https://github.com/bryntum/support/issues/5668

All the best,
Alex


Post Reply