react-admin: custom user filters at list component - admin-on-rest

Question

My backend work with filters is like this (for example) :
filters = {
"groupOp": "AND",
"rules": [
{
"field": "id",
"op": "equal",
"data": 6
},
{
"field": "partnerId",
"op": "equal",
"data": 446
}
],
"groups": [
{
"groupOp": "AND",
"rules": [
{
"field": "username",
"op": "startswith",
"data": "Alex"
}
],
"groups": []
}
]
}
It's working fine with persistence filters, but it's not working with user filters that are passed to the list component. For example:
export const OrdersFilter = (props) => (
<Filter {...props}>
<TextInput label="username" source="username" />
<TextInput label="partnerId" source="partnerId" />
</Filter>
);
Because it is a key-value filter and I can't understand how I can add additional fields to the user filter field.
Or how I can wrap url changes ('##router/LOCATION_CHANGE') after action ##redux-form/CHANGE to modify the original filter which is passed to the url with the filtred field name :
filter=%7B%22partnerId%22%3A%226%22%7D&order=DESC&page=1&perPage=10'
to
filter={"field": "partnerId","op": "equal","data": 6}&order=DESC&page=1&perPage=10

Answer 1

You should simplify (flatten) the client side filters for react-admin and "translate" them in the shape expected by your backend in your dataProvider

Answer 2

You can choose a custom attribute in the filter and through the backend you can apply the filter.
const UserFilter = (props) => (
<Filter {...props}>
<TextInput label="Username" source="q" alwaysOn />
</Filter>
);
Backend: Loopback4 for example:
async find(#param.filter(User) filter?: Filter<User>): Promise<User[]> {
if(filter && filter.where){
const where = filter.where as any;
if(where["q"]){
where.username = { ilike: '%'+where["q"]+'%' };
filter.where = where;
}
}
const response = await this.userRepository.find(filter);
this.response.set("X-Total-Count", ""+response.length);
this.response.set("access-control-expose-headers", "X-Total-Count");
return response;
}