react-admin：列表组件中的自定义用户过滤器答案

【问题标题】：react-admin: custom user filters at list componentreact-admin：列表组件中的自定义用户过滤器
【发布时间】：2018-04-28 10:25:26
【问题描述】：

我使用过滤器的后端工作是这样的（例如）：

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

因为它是一个键值过滤器，我不明白如何向用户过滤器字段添加其他字段。

或者我如何在@@redux-form/CHANGE 操作后包装 url 更改（'@@router/LOCATION_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

【问题讨论】：

标签： admin-on-rest react-admin

【解决方案1】：

您应该简化（展平）react-admin 的客户端过滤器，并将它们“翻译”成后端在您的 dataProvider 中所期望的形状

【讨论】：

我认为，它看起来没用，因为我希望允许用户应用过滤器，例如此过滤器 (lefortov.github.io/react-two-way-querybuilder) 中的一条规则，我希望我可以将默认列表过滤器更改为新的过滤器，例如例如。因为有时需要按“like (sql)”条件搜索某些字段，有时按等于条件搜索
没有什么能阻止您自己构建自定义过滤器组件并将其传递给列表组件。查看默认Filter 组件的来源（github.com/marmelab/react-admin/blob/master/packages/…）。简而言之，它将传递一个 setFilters 道具，让您可以做任何您想做的事情
您还可以为每种可能性创建多个过滤器，并在 dataProvider 中为您的后端进行翻译
谢谢，我构建了自定义过滤器元素，效果很好
@AlekseyVlasov 你能展示你对这个问题的解决方案吗？

【解决方案2】：

您可以在过滤器中选择自定义属性，并通过后端应用过滤器。

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

后端：例如 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;
  }

【讨论】：