Как добавить фильтр в реагирующий админ. Список, заполненный уникальными значениями в списке?

Question

Возможно, новый вопрос ie, но не могу соединить точки. У меня есть компонент фильтра в списке:

const BrandFilter = (props) => (
    <Filter {...props}>
      <SearchInput source="q" alwaysOn />
      <RadioButtonGroupInput source="active" alwaysOn label="" choices={[
        { id: 'true', name: 'Active' },
        { id: 'false', name: 'Inactive' },
        { id: ' ', name: 'All' },
      ]} />
      <QuickFilter source="pursue" label="Pursue" resettable />
      <SelectInput label="Status" source="status" optionText="status" />
    </Filter>
  );

SelectInput ничего не показывает в раскрывающемся списке. Не уверен, если это возможно, но я хотел бы показать выпадающий список с уникальными значениями состояния, которые появляются в записях. Статус не имеет отношения FK; это просто текстовое поле, в которое можно ввести что угодно. Но я все же хотел бы, чтобы пользователь мог видеть значения в раскрывающемся списке и выбирать их. Возможный? Спасибо.

Answer 1

Я вижу два решения:

Сначала, вероятно, лучшее, но с большим количеством работы, это создать новую конечную точку API, например, yourResourceStatuses или yourResource / statuses, которая возвращает различные уникальные значения для поля состояния, а затем ссылку этот новый ресурс с ReferenceInput в качестве вашего родителя SelectInput:

<Filter>
    ....
    <ReferenceInput source="status" reference="resourceStatuses">
        <SelectInput label="Status" source="status" optionText="status" />
    </ReferenceInput>
<Filter/>

Вам также необходимо объявить такой ресурс в Admin, только с именем prop, что позволяет response-admin инициализировать его избыточные хранилища.

<Admin>
    ....
    <Resource name="resourceStatuses"/>
</Admin>

Если вы используете SQL, это может быть так же просто, как

SELECT DISTINCT status from 'table';

Второе, вероятно, приведет к появлению дублирующихся значений состояния в раскрывающемся списке, но потребует меньше работы, если ваша поддержка API текстовый поиск в поле состояния. Изменяет SelectInput для AutocompleteInput и переносит его в ReferenceInput с тем же ресурсом.

<Filter>
    ....
    <ReferenceInput
        source="status"
        reference="yourResource"
        filterToQuery={searchText => ({ status: searchText })}
    >
        <AutocompleteInput label="Status" optionText="status" />
    </ReferenceInput>
<Filter/>

Answer 2

Вы пробовали обернуть его компонентом <ReferenceInput />? В противном случае кажется, что вы должны определить параметры выбора.

В соответствии с документами, завершение в ReferenceInput должно автоматически выбирать параметры в зависимости от источника:

---

https://marmelab.com/react-admin/Inputs.html#selectinput

Прокрутите до конец текста, ссылающегося на SelectInput, и вы увидите это:

---

Совет: Если вы хотите заполнить атрибут choices списком связанных записей, вы должны украсить <SelectInput> with <ReferenceInput> и оставить выбор пуст:

import { SelectInput, ReferenceInput } from 'react-admin';

    <ReferenceInput label="Author" source="author_id" reference="authors">
        <SelectInput optionText="last_name" />
    </ReferenceInput>

---

Если это не сработает, возможно, вы сможете получить данные и определить свои параметры оттуда. Для справки:

<SelectInput source="category" allowEmpty emptyValue={null} choices={[
    { id: 'programming', name: 'Programming' },
    { id: 'lifestyle', name: 'Lifestyle' },
    { id: 'photography', name: 'Photography' },
]} />