Our pure JavaScript Scheduler component


Post by striker »

Hello.
I need to achieve following case:

1) I am doing drag & drop and using beforeEventDropFinalize event.
2) I have async logic to check I can do it or no.
3) After checking I am receiving new Gantt data from API and I need to replace resource data.

I need to replace:

  • dependencies
  • events
  • assignments
  • resource info

ResourceId is not changing, but all other fields can be changed.
Resource from ResourcesStore cannot be removed, because I need to left him in same place, same zoom, same scroll etc - it need to be 'silent', but with tasks refresh on UI.

I implemented my custom data changer, where I am comparing resources/tasks/dependencies and removing all which are associated with resource.

Like this:

  private refreshDependencies(refreshedDependencies: any[], refreshedTasks: any[]): void {
    const dependenciesToRemove: any[] = [];
    
this.schedulerInstance.dependencyStore.forEach( (x: any) => { const taskFrom = refreshedTasks.find(y => y.id === x.from); const taskTo = refreshedTasks.find(y => y.id === x.to); if (taskFrom != null || taskTo != null) { dependenciesToRemove.push(x); } }); dependenciesToRemove.forEach((x: any) => this.schedulerInstance.dependencyStore.remove(x)); this.schedulerInstance.dependencyStore.commit(); this.schedulerInstance.dependencyStore.add(refreshedDependencies); }

I replaced my models with 'any'.

My solution looks to work, but not fully after upgrade SchedulerPro to 4.1.3

After first drag & drop is ok, but after click of any event from this resource, I can see error in console:

error-handler.service.ts:104 TypeError: Cannot read property 'event' of undefined
    at gantt.module.js:141246
    at Array.map (<anonymous>)
    at EventDrag.getMinimalDragData (gantt.module.js:141246)
    at EventDrag.onBeforeDragStart (gantt.module.js:134135)
    at DragHelper.trigger (gantt.module.js:5805)
    at DragHelper.callPreventable (gantt.module.js:5648)
    at DragHelper.internalMove (gantt.module.js:37167)
    at DragHelper.onMouseMove (gantt.module.js:37234)
    at HTMLDocument.handler (gantt.module.js:36314)
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    

And this is fragment form gantt.module.js:

  const eventRecords = [...new Set(assignmentRecords.map(assignment => assignment.event))];  <--- line error
    return {
      eventRecord,
      resourceRecord,
      assignmentRecord,
      eventRecords,
      assignmentRecords
    };
  }
  

I am sure that you predicted this behavior and there is simple way exist to achievie this refreshing.

Greetings & waiting for help:)


Post by alex.l »

Hi striker,

Could you please share an example that we could run and debug?
For now I can suggest you to make sure your data has been committed and recalculated before you make your drag-n-drop operation. https://bryntum.com/docs/scheduler-pro/#Core/data/AjaxStore#function-commit is async, also you didn't commit your changes after your add operation.
I would suggest you to use await scheduler.project.commitAsync() instead to make sure all data has been recalculated.
Please check https://bryntum.com/docs/scheduler-pro/#Scheduler/model/mixin/ProjectModelMixin#function-commitAsync

All the best,
Alex

All the best,
Alex


Post by striker »

Hi.

await scheduler.project.commitAsync()

is doing good job.
I had to implement custom updater for my project, which firstly is removing all dependencies, assignments and then is changing properties like startDate, endDate, readOnly etc for valid instances or removing items which should not exist.

It was second attempt. My first attempt was removing all dependencies/tasks/assignemtns - but there was no smooth animation, just like inserting new tasks.

Important thing is to edit tasks aftrer finalizing drag & drop, just like that:

    event.context.finalize(canDrop);

if (canDrop) {
  await this.refreshResourcesAsync(response.parentIdsToRefresh);
}

But I found some strange error while removing/adding assignments in runtime programatically, but I need to check my code, maybe I am doing something wrong. I will update this later.

For now - thanks!


Post by striker »

Hello!
I want to refresh this topic.
Drag & drop is working, but I have problem with silently refreshing UI.

1) On begining I have resource called "Resource 1" with 3 tasks.
2) I am doing drag & drop from another resource called "Resource 2" to Resource 1.
3) My drag&drop function is async - I am checking that task can be placed in specific place. If yes - I am finalizing this.
-- to this point everything is working !
4) After finalizing I need to refresh changed resources - Resource 1 and Resource 2.
I am getting from API refreshed resources with all required info (assignments, new dependencies for tasks, task).

And the problem is how to propertly refresh specific resources in project model with animations?
How to propertly remove task from resource with removing all related relations to this task, like assignments/dependencies?


Post by Maxim Gorkovsky »

And the problem is how to propertly refresh specific resources in project model with animations?

You can try this API: https://bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#function-repaintEventsForResource

How to propertly remove task from resource with removing all related relations to this task, like assignments/dependencies?

Please refer to this doc article: https://bryntum.com/docs/scheduler/#Scheduler/model/EventModel#function-unassign

Dependencies are not involved to resource assignment and are not touched when you unassign a resource from an event.


Post Reply