Our blazing fast Grid component built with pure JavaScript


Post by sanid »

Hi Guys,

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

Task move flicker.gif
Task move flicker.gif (482.52 KiB) Viewed 1198 times

Events are loaded asyncronously with Observables.

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

When updated, event state is set in NGXS Store.


Post by alex.l »

Hi sanid,

Looks weird. How can we reproduce this?

All the best,
Alex


Post by sanid »

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 :)


Post by mats »

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?


Post by sanid »

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 :)


Post by saki »

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?


Post Reply