[Sourcing] [P1] filter on value help dialog component

[sahanaN123]

Is this a bug, enhancement, or feature request?

BUG

Describe your proposal.

In value-help-dialog component, filter search is a free text search. For eg: filter dropdown values are invited, not invited and if we try to search entries with invited value, then even not invited entries get filtered.

Can you handle that on the application side

NO

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

angular- 15.2 NGX - 0.43.24

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Step to reproduce search issue here click here

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

[droshev]

@sahanaN123 You can configure the filters to be combobox instead of input field as in our example

[sahanaN123]

@droshev : We are using combo box itself and not input field. So, when we select an option from dropdown like "invited", it is listing the items in the table which has value "not invited" as the word "invited" is subset of "not invited". Finally, the fix we are expecting is to list the items which has the value "invited" only and not anything else. I hope i am clear this time??

[mikerodonnell89]

@droshev : We are using combo box itself and not input field. So, when we select an option from dropdown like "invited", it is listing the items in the table which has value "not invited" as the word "invited" is subset of "not invited". Finally, the fix we are expecting is to list the items which has the value "invited" only and not anything else. I hope i am clear this time??

I see, one thing you could do in this case would be to utilize a boolean with a select like the "Product Verified" filter in this example: https://ng-15-downport--fundamental-ngx.netlify.app/#/platform/value-help-dialog#custom-column

If there are options beyond "Invited" and "Not Invited", I believe you should be able to have a select component that has several options and the corresponding model can be an array of strings or something like that

[mikerodonnell89]

Here is a stackblitz where I'm adding a custom column via *fdpValueHelpColumnDef which has three options, 'Invited', 'Not Invited', and 'Some other value'. Note the modified search function that is looking for an exact match, rather than .includes(), when the value is in InvitationStatuses

https://stackblitz.com/edit/bk68g8?file=src%2Fapp%2Fcolumn-template%2Fplatform-vhd-column-template-example.component.ts

[sahanaN123]

Here is a stackblitz where I'm adding a custom column via *fdpValueHelpColumnDef which has three options, 'Invited', 'Not Invited', and 'Some other value'. Note the modified search function that is looking for an exact match, rather than .includes(), when the value is in InvitationStatuses

https://stackblitz.com/edit/bk68g8?file=src%2Fapp%2Fcolumn-template%2Fplatform-vhd-column-template-example.component.ts

@mikerodonnell89 : We went through the above example and its working fine. So in which version of the library we can expect the same fix at our end??

[mikerodonnell89]

@mikerodonnell89 : We went through the above example and its working fine. So in which version of the library we can expect the same fix at our end??

There is no fix required from fundamental-ngx. The working stackblitz example i linked above is for ng17 but the same principles work for fundamental-ngx 0.43.* and ng15. Also, your linked stackblitz doesn't have a VHD in it so I think it's the wrong link, but I understand the problem you describe.

Please take a look at https://ng-15-downport--fundamental-ngx.netlify.app/#/platform/value-help-dialog#custom-column

In this example there is a custom column created using *fdpValueHelpColumnDef and an <fd-select> is placed inside of a <fdp-value-help-dialog-filter> to filter on this custom column. While this custom column and select is just referring to a boolean, it can really be anything. See my stackblitz example and do a search through the two files (ts/html) for the string "invitationStatus" and you'll get a better idea of how that works and the modifications that need to be made to the example on the documentation website

[sahanaN123]

@mikerodonnell89 : I checked the stackblitz shared and the difference i see is you were making use of fdp-select for dropdown values in the filter. But we are making use of combobox for filters having multiple values as even suggested by @droshev . I was able to replicate the issue here value-help-dialog issue

Uploading Screen Recording 2024-05-09 at 9.07.28 AM.mov…

[mikerodonnell89]

Here is your example working https://stackblitz.com/edit/bk68g8-fgmup9?file=src%2Fapp%2Fcolumn-template%2Fplatform-vhd-column-template-example.component.ts

As most of the filtering logic comes from the application side (like many things in the library), the examples from our documentation or from github are only meant to serve as a demonstration and should be reworked to fit your specific needs