Our pure JavaScript Scheduler component


Post by jk@datapult.dk »

Given this issue https://github.com/bryntum/support/issues/3995 I have been recommended in a previous thread to use separate stores between partnered schedulers.

This has an unintended consequence shown in the console of this video https://www.dropbox.com/s/llbif27iuz0saez/Screen%20Recording%202022-11-25%20at%2013.24.03.mov?dl=0

  1. When dragging from one scheduler to another
  2. One scheduler instructs event id 8 to be deleted
  3. The other scheduler instructs the (now deleted) event to be re-assigned.

Below is the full code to be tested on https://bryntum.com/products/scheduler/examples/crudmanager/

Please recommend how CrudManagers can currently be used with partnered schedulers.

import { Scheduler, WidgetHelper, Toast, Splitter, CrudManager, EventStore, ResourceStore } 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 crudManager = {
    resourceStore : {
        // Add some custom fields
        fields : ['car', 'dt']
    },

    eventStore : {
        // Add a custom field and redefine durationUnit to default to hours
        fields : ['dt', { name : 'durationUnit', defaultValue : 'hour' }]
    },

    // This config enables response validation and dumping of found errors to the browser console.
    // It's meant to be used as a development stage helper only so please set it to false for production systems.
    validateResponse : true,

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

    autoLoad      : true,
    autoSync      : true,
}

const config = {
    appendTo   : 'container',
    flex: '1 1 50%',
    startDate  : new Date(2018, 4, 21, 6),
    endDate    : new Date(2018, 4, 21, 18),
    viewPreset : 'hourAndDay',
    rowHeight  : 50,
    barMargin  : 5,
    eventColor : 'orange',
    eventStyle : 'colored',
    syncMask : null,
    loadMask : null,
    features : {
        eventDrag: {
            constrainDragToTimeline: false // Allow drag outside of this Scheduler
        },
        eventDragCreate: false,
        eventDragSelect: true,
    },

    columns : [
        { text : 'Car', field : 'car', width : 100, editor : false, hidden : false },
    ],
}

const scheduler1 = new Scheduler({...config, crudManager});
new Splitter({appendTo: 'container'});
const scheduler2 = new Scheduler({...config, ...{partner: scheduler1, hideHeaders: true, crudManager}});

const changesString = (pack) => {
    return pack.map(pack => { return { events: pack.events, assignments: pack.assignments, }})
}

scheduler1.crudManager.on({
    load() {
        scheduler1.resourceStore.filter(r => r.car.startsWith("Volvo"))
        scheduler1.assignmentStore.filter(a => scheduler1.resourceStore.records.map(r => r.id).includes(a.resourceId))
    },
    beforeSync({pack}) {
        console.log("schedule1", JSON.stringify(pack))
    }
})

scheduler2.crudManager.on({
    load() {
        scheduler2.resourceStore.filter(r => !r.car.startsWith("Volvo"))
        scheduler2.assignmentStore.filter(a => scheduler2.resourceStore.records.map(r => r.id).includes(a.resourceId))
    },
    beforeSync({pack}) {
        console.log("schedule2", JSON.stringify(pack))
    }
})

Post by Animal »

I think they should use the same CrudManager.

Screenshot 2022-11-25 at 13.46.29.png
Screenshot 2022-11-25 at 13.46.29.png (424.64 KiB) Viewed 566 times

Post by jk@datapult.dk »

Animal wrote: Fri Nov 25, 2022 2:46 pm

I think they should use the same CrudManager.

Thanks for the quick answer. This was recommend against in this thread: viewtopic.php?t=23042


Post by Animal »

If the second Scheduler has chained stores, then it should not use a CrudManager. A chained store's content is completely dependent upon its master store.

But in that situation the concept of moving records from one store to the other is invalid. The chained store has a subclass of the master store's records as dictated by a filter function.


Post by jk@datapult.dk »

Animal wrote: Fri Nov 25, 2022 2:52 pm

If the second Scheduler has chained stores, then it should not use a CrudManager. A chained store's content is completely dependent upon its master store.

But in that situation the concept of moving records from one store to the other is invalid. The chained store has a subclass of the master store's records as dictated by a filter function.

Thanks again! Much appreciated. Due to the abovementioned bug, I assume that chained stores is not an option?

This begs the question: How to combine one CrudManager and two partnered schedulers? The two partnered schedulers is (just like the example above) simply filtered two to differents sets of resources.


Post by Animal »

Two completely disparate sets of resources?

Or could you share a CrudManager and a resource set, but just put a different filter on the resourceStore of each scheduler so that they only display what you want them to display?


Post by jk@datapult.dk »

You rock! Yes, disparate sets. Below is a sample response.

The filtering is easy:

resources id=0 and events with resourceId=0 goes into the top scheduler.

Everything else goes into the bottom scheduler.

https://www.dropbox.com/s/iz06s1shx21hpwm/mockResponse.json?dl=0


Post by jk@datapult.dk »

Animal wrote: Fri Nov 25, 2022 3:01 pm

Two completely disparate sets of resources?

Or could you share a CrudManager and a resource set, but just put a different filter on the resourceStore of each scheduler so that they only display what you want them to display?

So given my description above, I think the answer is yes :-) I wonder a bit about the implementation details. Could you perhaps share some non-function pseudo-code that I can continue with myself? It does not have to be much but just something I can have at over weekend.


Post by marcio »

Hey, you can check this documentation regarding store filtering (it has some examples there as well) https://bryntum.com/products/scheduler/docs/api/Core/data/mixin/StoreFilter#function-filter

Best regards,
Márcio


Post by jk@datapult.dk »

Thanks, Marco. These do not describe how to tap into a store (from the Crudmanager) and filter it in two ways, one for each of two partnered schedulers. Indeed I believe that I am bumping my ahead again the bug mentioned earlier because filtering as pr the documentation simply shows no events in both schedulers. Any small POC would be helpful.


Post Reply