bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
54 stars 6 forks source link

`resourceStore.clearFilters()` doesn't clear the value from filterbar #8421

Open taauntik opened 9 months ago

taauntik commented 9 months ago

Forum post

Reproducible here https://bryntum.com/products/scheduler/examples/tree/ With this code

import { StringHelper, ResourceModel, Scheduler } from '../../build/scheduler.module.js?474079';
import shared from '../_shared/shared.module.js?474079';

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

const
    // Group by capacity, in steps of 50
    sizeGrouper = ({ capacity }) => `Capacity ${Math.floor(capacity / 50) * 50} - ${(Math.floor(capacity / 50) + 1) * 50 - 1}`,
    // Group by waiting time, None, Less than an hour or More than an hour
    waitingTimeGrouper = ({ waiting }) => waiting === 0 ? 'None' : waiting < 60 ? 'Less than an hour' : 'More than an hour',
    // Group by domestic or international
    domesticGrouper = ({ domestic }) => domestic ? 'Domestic' : 'International';

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

features : {
    tree      : true,
    // Enable the TreeGroup feature, which can transform the tree's structure
    treeGroup : {
        // Initially transformed with a single parent level based on capacity
        levels : [sizeGrouper]
    },
filterBar:true
    },

rowHeight : 45,
barMargin : 5,

columns : [
    {
        type  : 'tree',
        text  : 'Name',
        width : 220,
        field : 'name'
    },
    {
        type  : 'number',
        text  : 'Capacity',
        width : 90,
        field : 'capacity',
        align : 'right'
    },
    {
        type  : 'number',
        text  : 'Waiting time',
        width : 90,
        field : 'waiting',
        align : 'right'
    },
    {
        text   : 'Domestic',
        width  : 90,
        field  : 'domestic',
        align  : 'center',
        editor : null,
        renderer({ value }) {
            if (value) {
                return {
                    tag       : 'i',
                    className : 'b-fa b-fa-times'
                };
            }

            return '';
        }
    }
],

startDate  : new Date(2022, 8, 12, 8),
viewPreset : 'hourAndDay',

crudManager : {
    autoLoad      : true,
    resourceStore : {
        modelClass : Gate
    },
    loadUrl : 'data/data.json'
},

// Custom eventRenderer, used to colorize the flights depending on the waiting time at the gate
eventRenderer({ eventRecord, resourceRecord, renderData }) {
    renderData.cls.add(
        resourceRecord.waiting > 60 ? 'purple'
            : resourceRecord.waiting > 30 ? 'apricot'
                : resourceRecord.waiting > 5 ? 'cyan'
                    : 'green'
    );

    return StringHelper.encodeHtml(eventRecord.name);
},

tbar : [
    {
        type        : 'buttongroup',
        ref         : 'buttons',
        toggleGroup : true,
        items       : [
            {
                text    : 'Capacity',
                pressed : true,
                async onToggle({ pressed }) {
                    if (pressed) {
await scheduler.resourceStore.clearFilters();
                            // The buttons are disabled during grouping, since it is an async operation
                            buttons.disable();
                            await scheduler.group([sizeGrouper]);
                            buttons.enable();
                        }
                    }
                },
                {
                    text : 'Waiting time',
                    async onToggle({ pressed }) {
                        if (pressed) {
await scheduler.resourceStore.clearFilters();
                            buttons.disable();
                            await scheduler.group([waitingTimeGrouper]);
                            buttons.enable();
                        }

                }
            },
            {
                text : 'Domestic + capacity',
                async onToggle({ pressed }) {
                    if (pressed) {
await scheduler.resourceStore.clearFilters();
                            buttons.disable();
                            await scheduler.group([domesticGrouper, sizeGrouper]);
                            buttons.enable();
                        }

                }
            },

        ]
    }
]
});

const { buttons } = scheduler.widgetMap;

Here is a video on how to reproduce it

https://github.com/bryntum/support/assets/75997756/2452f202-b8c8-4429-9508-073c11876994

matsbryntse commented 9 months ago

Should document that while Scheduler is treegrouped, the store on the scheduler is the one to use for clearing filters