CODEWITHSUNDEEP
admin-on-restreact-admin
Aleksey Vlasov
Aleksey Vlasov

Reputation: 11

react-admin: custom user filters at list component

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

Upvotes: 0

Views: 12500

Answers (2)

Carlos Orme&#241;o
Carlos Orme&#241;o

Reputation: 111

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;
  }

Upvotes: 1

Gildas Garcia
Gildas Garcia

Reputation: 7066

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

Upvotes: 4

Related Questions