Filtering numbers not working

[Raidus]

Hi,

I'm trying to filter numbers like this:

const RankingFilter = props => (
  <Filter {...props}>
    <TextInput label="Keywords" source="keyword" alwaysOn />
    <TextInput label="ASIN" source="asin" />
    <NumberInput source="rankSerp_lte" />
    <NumberInput source="rankSerp_gte" />
  </Filter>
);

export const RankingList = props => (
  <List title="All Rankings" {...props} filters={<RankingFilter />}>
    <Datagrid>
      <TextField source="image" />
      <TextField source="asin" />
      <TextField source="keyword" />
      <NumberField source="rankSerp" label="Rank (SERP)" />
      <NumberField source="rankOrganic" label="Rank (Organic)" />
      <TextField source="view" />
      <TextField source="updatedAt" />
    </Datagrid>
  </List>
);

The entries of rankSerp are stored as Type "Number" as well.

However no data is shown when I insert some numbers in the filter input fields.

Is this a bug or did I miss something?

[leperone]

Hi Raidus,

I fear Parse Server doesn't offer the *_lte / *_gte syntax for rest api queries. See documentation at http://docs.parseplatform.org/rest/guide/#query-constraints

So your code is performing an equality comparison between the value of your filter and the value of the non-existent key rankSerp_lte.

You should pass to the fetch function the value {"$gte":999}

[Raidus]

Hi leperone,

thank you for your response.

Actually I'm not sure how to use the fetch function in this example.

Using cURL I can get only the filtered results.

curl -X GET \
  -H "X-Parse-Application-Id: xxx" \
  -H "X-Parse-REST-API-Key: yyy" \
  -G \
  --data-urlencode 'where={"rankSerp":{"$gte":0}}' \
https://zzz.herokuapp.com/parse/classes/Ranking

This example gives me a bad request:

export default class MinMaxInput extends Component {
  handleClick = () => {
    fetch(
      `https://zzz.herokuapp.com/parse/classes/Ranking?${encodeURIComponent(
        'where={"rankSerp":{"$gte":0}}',
      )}`,
      {
        method: 'GET',
        headers: new Headers({
          'X-Parse-Application-Id': 'xxx',
          'X-Parse-REST-API-Key': 'yyy',
          'Content-Type': 'application/x-www-form-urlencoded',
        }),
      },
    ).catch(e => console.log(e));
  };

  render() {
    return (
      <span>
        <FlatButton label="Test" onClick={this.handleClick} />
      </span>
    );
  }
}

[leperone]

I'm not a redux form expert, but a naive and untested solution could be to transform input values using the parse and format functions https://marmelab.com/admin-on-rest/Inputs.html#transforming-input-value-tofrom-record

Something like this..

<NumberInput label="Test" source="rankSerp" parse={value => `{"$gte":${value}}`} format={value => value !== undefined ? value.substring(value.lastIndexOf(":")+1,value.lastIndexOf("}")) : undefined}/>