Our pure JavaScript Scheduler component


Post by richard ponusz »

Hello! I came across a small issue while I tried to change our resource column structure from flat data to tree data. It should look like as in the tree demo: https://bryntum.com/examples/examples-scheduler/tree. It should have 3 levels as a tree (publisher -> team -> id). I manually added parentId-s where its needed so that the transformFlatData should work as in the examples

When I try to run the code, I got the following error:

Id collision on DC,JUSTICE_LEAGUE,DC,MARVEL,AVENGERS,MARVEL

Used Bryntum Scheduler Pro version: 5.0.4

The flat data coming from backend:

const rotations = [
  { id: 'DC JUSTICE_LEAGUE BATMAN', publisher: 'DC', team: 'JUSTICE_LEAGUE'},
  { id: 'DC JUSTICE_LEAGUE SUPERMAN', publisher: 'DC', team: 'JUSTICE_LEAGUE'},
  { id: 'DC JUSTICE_SOCIETY DRFATE', publisher: 'DC', team: 'JUSTICE_SOCIETY'},
  { id: 'MARVEL AVENGERS IRONMANN', publisher: 'MARVEL', team: 'AVENGERS'},
  { id: 'MARVEL AVENGERS THOR', publisher: 'MARVEL', team: 'AVENGERS' },
  { id: 'MARVEL THUNDERBOLTS USAGENT', publisher: 'MARVEL', team: 'THUNDERBOLTS'  },
];

column.js

const columns = [
  {
    type: 'tree',
    tree: true,
    text: 'L{Column.rotation}',
    field: 'publisher',
];

export default columns;

ResourceStore.js

import { ResourceStore as SchedulerResourceStore } from '@bryntum/schedulerpro';

class ResourceStore extends SchedulerResourceStore {
  transformFlatData = true;
  tree = true;
  fields = ['publisher', 'team', 'id'];

  /**
   * @public
   */
  loadData(rawData) {
    super.loadDataAsync(rawData);
  }
}

export default ResourceStore;

resourceData.js

const newRotations = [];
for (const rotation of rotations) {
  newRotations.push(
    { id: rotation.publisher, name: rotation.publisher, field: 'publisher', parentId: null },
    { id: rotation.team, name: rotation.team, field: 'team', parentId: rotation.publisher },
    {
      id: rotation.id,
      name: rotation.id,
      field: 'id',
      parentId: rotation.team,
    },
  );
}

resourceStore.loadData(newRotations);

Scheduler.js

<BryntumSchedulerPro
     ...
     columns={columns}
     treeFeature={true}
     treeGroupFeature={{
        levels: ['publisher', 'team', 'id'],
      }}
 

Could you please help me with what is wrong exactly and how to fix it?


Post by marcio »

Hello richard ponusz,

In resourceData.js, you set up the id with

id: rotation.publisher

and

id: rotation.team

that's what is causing that error, because Id should be unique, and we will have different registers with the same Id (all of DC,JUSTICE_LEAGUE,DC,MARVEL,AVENGERS,MARVEL)

Best regards,
Márcio


Post by richard ponusz »

Thank you for the advice! I fixed it by checking if a publisher or a teams already exists so no more Id collision or any error thrown but it is still not converted to tree data. There has been no code changes other than the following

resourceData.js

        
const uniquePublisher: string[] = []; const uniqueTeams: string[] = []; const treeRotations = []; for (const rotation of flatRotationsData) { const isPublisherAlreadyExists = uniquePublisher.some((currPublisher) => rotation.publisher === currPublisher); const isTeameAlreadyExists = uniqueTeams.some( (currTeam) => `${rotation.publisher} ${rotation.team}` === currTeam, ); if (isPublisherAlreadyExists === false) { uniquePublisher.push(rotation.publisher); treeRotations.push({ id: rotation.publisher, name: rotation.publisher, expanded: true }); } if (isTeameAlreadyExists === false) { uniqueTeams.push(`${rotation.publisher} ${rotation.team}`); treeRotations.push({ id: `${rotation.publisher} ${rotation.team}`, name: rotation.team, parentId: rotation.publisher, expanded: true, }); } treeRotations.push({ id: rotation.id, name: rotation.id, parentId: `${rotation.publisher} ${rotation.team}`, }); } resourceStore.loadData(treeRotations);

End result after logging out the treeRotations:

 
{id: 'DC', name: 'DC', expanded: true}
{id: 'DC JUSTICE_LEAGUE', name: 'JUSTICE_LEAGUE', parentId: 'DC', expanded: true}
{id: 'DC JUSTICE_LEAGUE BATMAN', name: 'DC JUSTICE_LEAGUE BATMAN', parentId: 'DC JUSTICE_LEAGUE'}
{id: 'DC JUSTICE_LEAGUE SUPERMAN', name: 'DC JUSTICE_LEAGUE SUPERMAN', parentId: 'DC JUSTICE_LEAGUE'}
{id: 'DC JUSTICE_SOCIETY', name: 'JUSTICE_SOCIETY', parentId: 'DC', expanded: true}
{id: 'DC JUSTICE_SOCIETY DRFATE', name: 'DC JUSTICE_SOCIETY DRFATE', parentId: 'DC JUSTICE_SOCIETY'}
{id: 'MARVEL', name: 'MARVEL', expanded: true}
{id: 'MARVEL AVENGERS', name: 'AVENGERS', parentId: 'MARVEL', expanded: true}
{id: 'MARVEL AVENGERS IRONMANN', name: 'MARVEL AVENGERS IRONMANN', parentId: 'MARVEL AVENGERS'}
{id: 'MARVEL AVENGERS THOR', name: 'MARVEL AVENGERS THOR', parentId: 'MARVEL AVENGERS'}
{id: 'MARVEL THUNDERBOLTS', name: 'THUNDERBOLTS', parentId: 'MARVEL', expanded: true}
{id: 'MARVEL THUNDERBOLTS USAGENT', name: 'MARVEL THUNDERBOLTS USAGENT', parentId: 'MARVEL THUNDERBOLTS'}

How it looks:

Attachments
not_tree_rotations.PNG
not_tree_rotations.PNG (24.29 KiB) Viewed 286 times

Post by marcio »

Hello richard,

Sorry for the late reply, I reproduced the behavior you described in a sample as well, and create a ticket for investigation/fix it, you can watch the issue here https://github.com/bryntum/support/issues/5291

Best regards,
Márcio


Post Reply