Our pure JavaScript Scheduler component


Post by til.schniese »

Hi there,

I found an issue in SchedulerPro with dependencies that are not re-drawn when filtering rows in tree view.
I created a reproduction in the following online example:

https://bryntum.com/products/schedulerpro/examples-scheduler/tree/

Just paste the following code in there (see reproduction below):

import { Scheduler, SchedulerResourceModel, StringHelper } from '../../build/schedulerpro.module.js';
import shared from '../_shared/shared.module.js';

class Gate extends SchedulerResourceModel {
    static get fields() {
        return [{
            name : 'capacity',
            type : 'number'
        }];
    }
}

const resources = [
  {
    id: 0,
    name: '0',
    expanded: true,
    children: [
    {
    id: 3,
    name: 'My Resource',
  },
  {
    id: 4,
    name: 'My Resource',
  },
  {
    id: 5,
    name: 'My Resource',
  },
    ]
  },
  {
    id: 1,
    name: '1',
    expanded: true,
    children: [
    {
    id: 6,
    name: 'My Resource',
  },
  {
    id: 7,
    name: 'My Resource',
  },
  {
    id: 8,
    name: 'My Resource',
  },
    ]
  },
  {
    id: 2,
    name: '2',
    expanded: true,
    children: [
    {
    id: 9,
    name: 'My Resource',
  },
  {
    id: 10,
    name: 'My Resource',
  },
  {
    id: 11,
    name: 'My Resource',
  },
    ]
  },
];
const events = [
  {
    id: '1',
    name: 'My Event',
    resourceId: 3,
    startDate: new Date(2022, 1, 3),
    endDate: new Date(2022, 1, 4),
  },
  {
    id: '2',
    name: 'My Event 2',
    resourceId: 3,
    startDate: new Date(2022, 1, 5),
    endDate: new Date(2022, 1, 6),
  },
  {
    id: '3',
    name: 'My Event',
    resourceId: 6,
    startDate: new Date(2022, 1, 3),
    endDate: new Date(2022, 1, 4),
  },
  {
    id: '4',
    name: 'My Event 2',
    resourceId: 6,
    startDate: new Date(2022, 1, 5),
    endDate: new Date(2022, 1, 6),
  },
  {
    id: '5',
    name: 'My Event',
    resourceId: 9,
    startDate: new Date(2022, 1, 3),
    endDate: new Date(2022, 1, 4),
  },
  {
    id: '6',
    name: 'My Event 2',
    resourceId: 9,
    startDate: new Date(2022, 1, 5),
    endDate: new Date(2022, 1, 6),
  },
]


const dependencies = [
  {
    id: 0,
    from: '1',
    to: '2',
    lag: 1,
    lagUnit: 'd'
  },
  {
    id: 1,
    from: '3',
    to: '4',
    lag: 1,
    lagUnit: 'd'
  },
  {
    id: 2,
    from: '5',
    to: '6',
    lag: 1,
    lagUnit: 'd'
  }
]

const filterRows = (reset = false)=> {

console.log(reset);

  if(reset){
    scheduler.resourceStore.filter({
     filters: [
      {filterBy: ()=> true}
     ],
    replace: true
  })
  } else {
    scheduler.resourceStore.filter(
      {
     filters: [
      {filterBy: (resource) => {
      console.log(resource)
      return [0,3,4,5].includes(resource.id);
    },}
     ],
    replace: true
  }
      )
  }
}



const scheduler = new Scheduler({
    appendTo   : 'container',
    eventColor : null,
    eventStyle : null,

events,
resources,
dependencies,

features : {

    timeRanges : {
        showHeaderElements : false
    },
    tree         : true,
    regionResize : true,
dependencies: true,
    },

rowHeight : 45,
barMargin : 5,

columns : [
    {
        type  : 'tree',
        text  : 'Name',
        width : 220,
        field : 'name'
    }, {
        type  : 'aggregate',
        text  : 'Capacity',
        width : 90,
        field : 'capacity'
    }
],

  startDate: new Date(2022, 1, 1),
  endDate: new Date(2022, 2, 1),

viewPreset : 'dayAndWeek',
        tbar : [
            {
                text    : 'Filter',
                icon    : 'b-fa b-fa-plus',
                color   : 'b-green b-raised',
                onClick : ()=> filterRows(false)
            },
            {
                text    : 'Reset Filter',
                icon    : 'b-fa b-fa-plus',
                color   : 'b-green b-raised',
                onClick : ()=> filterRows(true)
            },
        ],
eventRenderer({ eventRecord, resourceRecord, renderData }) {
    const { isLeaf } = resourceRecord;

    // Custom icon
    renderData.iconCls = 'b-fa b-fa-plane';

    // Add custom CSS classes to the template element data by setting property names
    renderData.cls.leaf = isLeaf;
    renderData.cls.group = !isLeaf;

    return isLeaf ? StringHelper.encodeHtml(eventRecord.name) : '\xa0';
}
});

Reproduction:

  1. Click Filter button
  2. Collapse row 0
  3. Click Reset Filter button
  4. See that dependencies are gone (they only come up after uncollapsing row 0 again)
correct
correct
Screenshot 2023-03-20 at 16.57.40.png (54.28 KiB) Viewed 107 times
wrong
wrong
Screenshot 2023-03-20 at 16.57.27.png (43.94 KiB) Viewed 107 times

Thanks for looking into this.


Post by tasnim »

Hi,

Thanks for your detailed report. Reproduced! We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/6411

Good luck :),
Tasnim


Post Reply