response-admin: настраиваемые пользовательские фильтры в компоненте списка

Моя бэкэнд-работа с фильтрами выглядит так (например):

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": []
    }
  ]
}

Он отлично работает с фильтрами постоянства, но не работает с пользовательскими фильтрами, которые передаются компоненту списка. Например:

export const OrdersFilter = (props) => (
<Filter {...props}>
    <TextInput label="username" source="username" />
    <TextInput label="partnerId" source="partnerId" />
</Filter>
);

Потому что это фильтр «ключ-значение», и я не могу понять, как добавить дополнительные поля в поле пользовательского фильтра.

Или как я могу обернуть изменения URL-адреса ('@@ router / LOCATION_CHANGE') после действия @@ redux-form / CHANGE, чтобы изменить исходный фильтр, который передается URL-адресу с именем фильтруемого поля:

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

react-admin admin-on-rest
person Aleksey Vlasov    schedule 28.04.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вам следует упростить (сгладить) фильтры на стороне клиента для react-admin и «перевести» их в форму, ожидаемую вашим сервером в вашем dataProvider

person Gildas Garcia    schedule 03.05.2018
comment
я думаю, это выглядит бесполезным, потому что я хотел бы разрешить пользователю применять фильтры, как одно правило из этого фильтра (lefortov.github.io/react-two-way-querybuilder), и я надеюсь, что смогу изменить фильтры списка по умолчанию на новые, как в примере. Потому что иногда возникает необходимость поиска по какому-то полю с условием like (sql), а иногда по условию равенства - person Aleksey Vlasov; 21.05.2018
comment
Ничто не мешает вам самостоятельно создать собственный компонент Filter и передать его компоненту List. Посмотрите на источник компонента Filter по умолчанию (github.com/marmelab/react-admin/blob/master/packages/). Вкратце, ему будет передана setFilters опора, позволяющая делать все, что вы хотите. - person Gildas Garcia; 22.05.2018
comment
Вы также можете создать несколько фильтров для каждой возможности и сделать перевод для своего бэкэнда в своем dataProvider. - person Gildas Garcia; 24.05.2018
comment
спасибо, я создал настраиваемый фильтрующий элемент, и он работал нормально - person Aleksey Vlasov; 29.06.2018
comment
@AlekseyVlasov Подскажите, пожалуйста, свое решение этой проблемы? - person Weizhi; 01.08.2019

arrow_upward
1
arrow_downward

Вы можете выбрать настраиваемый атрибут в фильтре и применить фильтр через серверную часть.

const UserFilter = (props) => (
    <Filter {...props}>
        <TextInput label="Username" source="q" alwaysOn />
    </Filter>
);

Backend: Loopback4 например:

 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;
  }
person Carlos Ormeño    schedule 14.01.2021