primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.59k stars 1.23k forks source link

DataTable filter should allow constraints to be undefined #1669

Open mrichar1 opened 3 years ago

mrichar1 commented 3 years ago

https://codesandbox.io/s/vue-3-datatable-constraints-hp1w5?file=/src/components/HelloWorld.vue

I'm submitting a ... (could count as either?)

[ x ] bug report
[ x ] feature request

CodeSandbox Case (Bug Reports)

https://codesandbox.io/s/winter-microservice-vkwn0?file=/src/App.vue

Current behavior

When using Filter menu mode, if the filtersobject doesn't contain an appropriate constraints property, then when the match mode is selected from the UI the app crashes - e.g. _filters[this.field].constraints is undefined.And if operator is unset, the UI doesn't display the ability to add rules, even if showFilterOperator is true.

Expected behavior

There should be defaults for these in order that not setting them is not an error (e.g. in Filter row mode there are no errors if an empty object is passed (i.e matchMode can be undefined)).

operator could be set to a default value ('and' ?) if showFilterOperator=true", and constraints could default to e.g. [{ matchMode: 'contains' }]

mrichar1 commented 3 years ago

Hi - sorry I should have given clearer instructions to reproduce.

I have forked the sandbox with the bug: https://codesandbox.io/s/crazy-http-l6xug -the name column has the constraints bug, the country column the match/operator bug..

For the constraints bug, we remove constraints - e.g.:

"name": {
    operator: FilterOperator.AND,
},

Then do the following:

  1. Click on the filter icon for that column.
  2. Select a 'Match Mode' - e.g startsWith.

The console will now show the error _filters[this.field].constraints is undefined

For the operator bug, we set showFilterOperator: true (the default), then remove operator - e.g.:

"country.name": {
  constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
},

Now the UI doesn't show the 'Match any/all' dropdown.

tugcekucukoglu commented 3 years ago

In case of using multiple constraints, 'operator' adds more constraint to filter and new 'constraints' must be an array. So usage of 'operator' without 'constraints' is not valid.

And also when you did not add 'operator', it doesn't add another constraint to filter and then even if 'showFilterOperator' is true, it does not render it to the UI.

mrichar1 commented 3 years ago

Yes - I appreciate that each one by itself doesn't make sense - what I'm asking for is for PrimeVue to assume sensible defaults if some of the properties are missing.

This is how 'single' filters already work - for example, if you specify:

filters: {
  name: {}
}

The code will assume defaults equivalent to:

filters: {
  name: { value: null, matchMode: FilterMatchMode.STARTS_WITH }
}

It would be good if equivalent defaults could be picked for multiple constraints.

If you specify operator it should assume that you want at least one constraint, with the defaults equivalent to the above (i.e empty value. startsWith match mode). For example:

filters: {
  name: { operator: "and" }
}

would be equivalent to:

filters: {
  name: {
    operator: "and",
    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
 }
}

Equally, if you specify constraints, and showFilterOperator is true, then it should assume that operator was set, defaulting to AND. For example:

filters: {`
  name: {
    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
  }
}

would be equivalent to:

filters: {`
  name: {
    operator: "and",
    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
  }
}

I hope this makes sense - please let me know if this still isn't clear!

cagataycivici commented 2 years ago

When implementing this, we initially wanted to give sensible defaults but I remember it complicated the code. I think the feature is mature now and we can work on enhancements to give defaults to make the usage easier for sure. @mertsincan will work on it.

mrichar1 commented 1 year ago

Just rediscovered this issue while hitting this bug again in a new project - has there been any progress on this?

LeandroMarcondes commented 1 year ago

no progress for now, the default filters still required to be set by the user. when it is not set, the filter function works, but the error 'defaultConstraint is undefined' appears when user try to clean the filter. Tested on PrimeReact 8.6.1

LeandroMarcondes commented 1 year ago

A workaround is set the 'filters' on the event 'onFilter' like that:

On render <DataTable onFilter={onFilter} filterDisplay="menu" filters={filtersOnTable} >

on React const onFilter = (event) => { setFiltersOnTable(event.filters); }

The error still happens if user try to clear filters without type any filter, but after type a filter the clear button starts to work.

Maybe it can be implement as default.