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.54 KiB) Viewed 202 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?

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


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