ESF on igx-grid does not reflect current filters in esf dialog

[ddincheva]

Closes #14188

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them

[deyvidnenchev]

b3.mp4

[deyvidnenchev]

According to this comment we must show the number of column filtered not the number of filtering operands (in advanced filtering we can apply multiple operands to one column)

In this screenshot since we have two operands on column ID the number on the Advanced filtering button should be 1

[AnjiManova]

Figma Design File and references related to the issue

We suggest removing the custom button border style after adding a span with a number of the filtered columns. There is no need to add additional visual indications or customize the buttons this way.

Please apply and point 1 from the last screenshot -> when filters are applied. The Text filter list item should be in an Active state, the same as the List component.

[AnjiManova]

Create a new issue from this comment because it is not related to this PR

I noticed something else, and we talked with Desi: This is an additional issue that should be logged, but we can create such from this comment here.

When I select one list item, the Text filter is changed to Text filter (1), and "Equal" is selected from the filters.
When I select two list items, the Text filter is changed to Text filter (2), and the "Custom filter" is selected from the filters. However, when I select three items, the Text filter is changed to Text filter (1), and there is no selection in the Text filters. Shouldn't it be showing the "Custom filter" again? This is replicated from the Master, and it is an issue there as well.

Screen.Recording.2024-06-28.at.11.12.37.mov

I believe the logic should be: when two or more items are selected to apply the Custom filter, the filters should be indicated with (n) next to the Text filter.

Something interesting here is that everything looks fine if I select two items and then add more from the Custom filter. After manually adding an additional filter, there is no indication of which items/filters are selected.

Screen.Recording.2024-06-28.at.11.12.58.mov

[hanastasov]

Please add one more test, similar to Should show the previously entered filter value when reopen esf dialog, but one that actually selects a different condition from the dropdown, thus should reopen the dialog with empty conditions. This is one of my the main scenarios that we determined as being buggy from very beginning, so it should have a test

[hanastasov]

Create a new issue from this comment because it is not related to this PR

I noticed something else, and we talked with Desi: This is an additional issue that should be logged, but we can create such from this comment here.

When I select one list item, the Text filter is changed to Text filter (1), and "Equal" is selected from the filters. When I select two list items, the Text filter is changed to Text filter (2), and the "Custom filter" is selected from the filters. However, when I select three items, the Text filter is changed to Text filter (1), and there is no selection in the Text filters. Shouldn't it be showing the "Custom filter" again? This is replicated from the Master, and it is an issue there as well.

Screen.Recording.2024-06-28.at.11.12.37.mov
I believe the logic should be: when two or more items are selected to apply the Custom filter, the filters should be indicated with (n) next to the Text filter.

Something interesting here is that everything looks fine if I select two items and then add more from the Custom filter. After manually adding an additional filter, there is no indication of which items/filters are selected.

Screen.Recording.2024-06-28.at.11.12.58.mov

Nice catch, @AnjiManova !

This is due to the fact how ESF (Excel Style Filtering) works:

• For relatively small number of items selected through the checkboxes - an "equals" filtering condition is created for each item. So, for 2 items selected - two filtering conditions are created, therefor you see Text filter (2) displayed.
• When the number of items pass a certain threshold - like when you selected the third item, a single condition of different type is created (IIRC the condition is called "in" - like the filtered records should be "in" the collection of selected items, smth like that) - therefore now you see Text filter (1)

I feel this is kind of an edge case and not even sure if a bug, so yes - please log it as a separate issue, tagged with question label

[hanastasov]

Since the comment about extracting the code to initialize expression in a new method was resolved without the comment being addressed, I am giving an example what I imagined for a method without this repetitive code.:

    private createInitialExpressionUIElement() {
        const firstExprUI =  this.initializeExpressionUI();
        const secondExprUI = this.initializeExpressionUI();
 
        if (this.expressionsList.length === 1 && this.expressionsList[0]?.expression?.condition?.name === this.selectedOperator) {
            ...
        } else {
            ...
        }

        firstExprUI.afterOperator = FilteringLogic.And;
        secondExprUI.beforeOperator = FilteringLogic.And;
        this.expressionsList = [firstExprUI ,secondExprUI];
    }

The other changes in the method are a custom preference of course, but it makes it look more readable.