Our pure JavaScript Scheduler component


Post by leonjo »

Hello

I want to filter Resource on Schedule(TabPanel) when checked value of CheckBox on Panel

My code is below.
Please advice me.

import {
    SchedulerPro,
    StringHelper,
    TabPanel,
    Checkbox,
    Store,
    Panel
} from './node_modules/@bryntum/schedulerpro/schedulerpro.module.js';

const panel = new Panel({
    title: 'DP-Variation',
    appendTo: 'nav',
    items: {
        dp3check: {
            type: 'checkBox',
            text: 'DP-3',
            onClick: (value) => {
                //alert(value.source.initialConfig.text);
                value = value.source.initialConfig.text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                SchedulerProDPVariation.projectStores.eventStore.filter({
                    filters: event => new RegExp(value, 'i').test(event.name),
                    replace: true
                });
            },
            autoUpdateRecord: true
        },
        dp3Xcheck: {
            type: 'checkBox',
            text: 'A'
        },
        dp4check: {
            type: 'checkBox',
            text: 'B'
        }
    },

onFilterChange({
                   value
               }) {
    value = this.text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    // value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

    // Replace all previous filters and set a new filter
    SchedulerProDPVariation.eventStore.filter({
        filters: event => new RegExp(value, 'i').test(event.name),
        replace: true
    });
}
});


class SchedulerProDPVariation extends SchedulerPro {

construct() {
    super.construct(...arguments);
}

    static get $name() {
    return 'SchedulerProDPVariation'
}
static get type() {
    return 'schedulerprodpVariation'
}

// static resourceData(value) {
//     this.configurable.project.resourcesData = value;
//     this.onEquipmentStoreLoad();
// }


static get configurable() {
    return {
        startDate: new Date(2022, 0, 1),
        endDate: new Date(2028, 0, 12),
        features: {
            // Enable the feature
            filter: true
        },
        presets: [
            {
                base: 'hourAndDay',
                id: 'MyHourAndDay',
                // other preset configs....
            },
            {
                base: 'weekAndMonth',
                id: 'MyWeekAndMonth',
                // other preset configs....
            },
            {
                base: 'year',
                id: 'MyYear',
            },
            {
                base: 'manyYears',
                id: 'MyManyYears',
            }
        ],
        viewPreset: 'MyManyYears',
        // other scheduler configs....
        resourceStore : {
            fields : ['name', 'siteDL', 'siteA', 'siteB', 'siteC', 'region'],
            data   : [
                {
                    id: 1,
                    region: 'JP',
                    name: 'A',
                    siteDL: 'aaa',
                    siteA: 'bbb',
                    siteB: 'abc',
                    siteC: 'def'
                },
                {
                    id: 2,
                    region: 'US',
                    name: 'B',
                    siteDL: 'dddd',
                    siteA: 'ccc',
                    siteB: 'adss',
                    siteC: 'asds'
                }
            ]
        },
        project: {
            eventsData: [
                {id: 1, startDate: '2022-01-01', duration: 3, durationUnit: 'y', name: 'Event 1'},
                {id: 2, startDate: '2024-01-01', duration: 5, durationUnit: 'y', name: 'Event 2'}
            ],

            assignmentsData: [
                {event: 1, resource: 1},
                {event: 2, resource: 2}
            ],

            dependenciesData: [
                {fromEvent: 1, toEvent: 2}
            ]
        },

        columns: [
            {text: 'DP Validation', field: 'name', width: 100},
            {
                text: 'Site', align: 'center', autoWidth: true, children: [
                    {
                        field: 'siteDL',
                        text: 'DL',
                        autoWidth: true
                    },
                    {
                        field: 'siteA',
                        text: 'SA',
                        autoWidth: true
                    },
                    {
                        field: 'siteB',
                        text: 'SB',
                        autoWidth: true
                    },
                    {
                        field: 'siteC',
                        text: 'SC',
                        autoWidth: true
                    }
                ]
            },
            {text: 'Region', field: 'region', autoWidth: true}
        ],

    }
}

}

SchedulerProDPVariation.initClass();


Attachments
image001.png
image001.png (68.16 KiB) Viewed 105 times

Post by marcio »

Hey leonjo,

You're using an inexistent projectStores property inside the onClick handler. Replacing for the right property worked correctly

onClick : (value) => {
                //alert(value.source.initialConfig.text);
                value = value.source.initialConfig.text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                scheduler.project.eventStore.filter({
                    filters : event => new RegExp(value, 'i').test(event.name),
                    replace : true
                });
            },

Also, pay attention to the use case where the user unchecks an option.

Best regards,
Márcio


Post by leonjo »

Hello Marcio

Thanks your reply.
I confirmed below error when I use 'project' property.
Need I create function filter?

Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
            onClick: (value) => {
                //alert(value.source.initialConfig.text);
                value = value.source.initialConfig.text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                const projectValue = SchedulerProDPVariation.configurable.project
                projectValue.eventStore.filter({
                    filters: event => new RegExp(value, 'i').test(event.name),
                    replace: true
                });
            },
Attachments
screenshot-2023-06-07 124842.png
screenshot-2023-06-07 124842.png (18.8 KiB) Viewed 78 times

Post by marcio »

Hey leonjo,

No, you don't need to create the filter function. Why are you using a configurable property? You should get the Scheduler reference/instance, and from there you'll have a project property with the eventStore inside, and from there you'll be able to use the filter function without errors.

Best regards,
Márcio


Post Reply