Bryntum Support Forums

Hi Guys,

I have somewhat specific behaviour that is visible only when moving events on Scheduler.

Events are loaded asyncronously with Observables.

<bry-scheduler 
                [events]="schedulerEvents$ | async" 
                [resources]="resources$ | async" 

When updated, event state is set in NGXS Store.

Hi sanid,

Looks weird. How can we reproduce this?

Setting https://bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#config-enableEventAnimations
to false did the trick.
It was also a problem in another opened topic.

Repro Steps:
Just load events and resources with async pipe directly from Observable selector that takes state from NGXS store.
With drag and drop
Thanks

Glad to see you found that config Can you please share the code you use to load new data into the event store, so we can investigate this?

I will use the order in which it is used any over simplify code in this example to explain flow of data and changes in the state.

1 Brnthum Scheduler component uses two observables for loading events and resources:

            <bry-scheduler #bycalendarschedule
                [events]="schedulerEvents$ | async" 
                [resources]="resources$ | async" 

2 Main Component uses selectors (just a static method in State service class) to get resources$ and schedulerEvents$ from the store:

@Select(SchedulerResourcesState.getResources) resources$: Observable<TechnicianViewModel[]>;
@Select(SchedulerState.getScheduler) schedulerEvents$: Observable<Array<SchedulerEventViewModel>>;

Drop event in main component makes rest call and after getting response from backend updates the store with new data.

    scheduler.listeners = {
      eventDrop: ({ source, eventRecords, isCopy, context }) => {
     // do the rest call and update the event in the db, and than update the store 
      this.store.dispatch(new PatchSchedulerTaskAction(task));

}
}

1. SchedulerState

    @Selector()
    static getScheduler(state: Array<SchedulerEventViewModel>) {
        return [...state];
    }

    @Action(PatchSchedulerTaskAction)
    updateSchedulerEvent(context: StateContext<Array<SchedulerEventViewModel>>, action: PatchSchedulerTaskAction) {
        const schedulerTasks = [...context.getState()];

    const index = schedulerTasks.findIndex( t => t.taskId === action.payload.taskId);
    if( index > -1) {
        const event = schedulerTasks[index];
        ...
        schedulerTasks.splice(index, 1, event);
    }
    context.setState(schedulerTasks);
}

My guess is that setting new state in the store is replacing complete array with new reference. Patching arrays ( partialy updating only one piece of it) is currently not supported.

Thanks guys

Unfortunately we do not have any demo that would use NGXS Store to which we could apply you code directly. Is there any chance to provide us with a complete runnable showcase that we can npm i && npm start, investigate and debug?