Our pure JavaScript Scheduler component


Post by hlabatf@colas.com »

Hello,

I'm wondering if it is possible to save the tree state easily under a json format?

There is an event, which could be triggered each times we add , remove, update and move a child or a parent?

Indeed, we need to save the tree by user.

Thanks


Post by marcio »

Hey hlabatf,

You can get the json easily with

scheduler.project.resourceStore.json

https://bryntum.com/products/scheduler/docs/api/Scheduler/data/ResourceStore#property-json

Regarding the event, seems exactly like this one https://bryntum.com/products/scheduler/docs/api/Scheduler/data/ResourceStore#event-change

Best regards,
Márcio


Post by hlabatf@colas.com »

Thanks, it's working.

But when i've got autoSync set to true and i want to listen only events change not resource.

 const crudManager = new CrudManager({
            autoLoad: true,
            eventStore: {
                modelClass: TaskWorkEvent
            },
            resourceStore: {
                modelClass: TaskWork,
                onChange: (event: object) => {

                console.info("Tree change");
                console.info(event);

            }
        },
        autoSync: true,
        loadUrl: 'templates/data.json',
        syncUrl: 'template/save',

Post by marcio »

So you can move the change listener to the eventStore, as we also have that change event available https://bryntum.com/products/scheduler/docs/api/Scheduler/data/EventStore#event-change

Best regards,
Márcio


Post by hlabatf@colas.com »

Yes thanks Marcio. But as you can see, i'm using autoSync and the syncUrl. How i can do to use sync Url for events only and listening for change on resource and save it manually?


Post by marcio »

Oh, now I get what you mean. Sorry for the misunderstanding. You can cancel/remove the sync for resources using the following event https://bryntum.com/products/scheduler/docs/api/Scheduler/crud/AbstractCrudManagerMixin#event-beforeSync

There is a snippet in the documentation that you could base yourself on to cancel/remove the resources data for the API call. And with that, you can keep the changes listener inside the resourceStore to save it manually.

Best regards,
Márcio


Post by hlabatf@colas.com »

Thanks Marcio,

it's working with the code below. But when, on requestFailed, i'm using

source.revertChanges();

, it's applied on both store.

i'm wondering, if it's possible to store only eventStore actions in the undo/redo?

Or maintain two undo/redo, one for eventStore and the other for resourceStore?

     const crudManager = new CrudManager({
            autoLoad: true,
            eventStore: {
                modelClass: TaskWorkEvent
            },
            resourceStore: {
                modelClass: TaskWork,
                onBeforeCommit: ({ source, changes }: any) => {
                    console.log(source);
                    console.log(changes);
                    return false;
                },
                onChange: (event: object) => {

                console.info("Tree change");
                console.info(event);

                return false;

            },
            onBeforeRequest: ({ source, changes }: any) => {
                console.log(source);
                console.log(changes);
                return false;
            }
        },
        autoSync: true,
        loadUrl: 'templates/data.json',
        syncUrl: 'template/save',
        validateResponse: true,
        onBeforeSync: ({ source, pack }: any) => {
            console.log(source);
            console.log(pack);
            console.log(source.id);
        },
        onRequestFail: ({ source, requestType, response }: any) => {

            source.revertChanges();
            if (this.scheduler) {
             //   this.scheduler.eventStore.revertChanges()
             //   this.scheduler.eventStore.project.stm.resetQueue();
              //  console.log(this.scheduler.project.stm.position);
            }

            let serverMessage = response && response.message;
            let exceptionText = `Action "${requestType}" failed. ${serverMessage ? ` Server response: ${serverMessage}` : ''}`;

            BootstrapDangerToast.show(exceptionText);

            console.error(exceptionText);
        }
    });
    

Post by marcio »

Best regards,
Márcio


Post Reply