ReferenceInput Выбор входа для формы компонента фильтра - PullRequest
Новая
       11

ReferenceInput Выбор входа для формы компонента фильтра

0 голосов
/ 04 мая 2020

Я создал настраиваемый компонент фильтра для своего представления списка, и у меня возникли проблемы с заполнением поля выбора ВСЕХ доступных параметров для свойства. например, 

<Form onSubmit={onSubmit} initialValues={filterValues} >
    {({ handleSubmit }) => (
       <form onSubmit={handleSubmit}>
          <ReferenceInput label="Ring Id" source="ringid" reference="candidates">
              <SelectInput optionText="ringid" />
          </ReferenceInput>
       </form>
     )}
</Form>

Без создания провайдера данных «getMany» Мне сказали, что я могу получить доступ ко всем (2000+ идентификаторов) «ringid», полученным из провайдера «getList», и перечислить каждый идентификатор в Выберите поле ввода и выполните поиск в моем настраиваемом компоненте фильтра.

Представленные проблемы:

  1. Мне нужно жестко указать количество результатов, которые я могу получить (по умолчанию 25)
  2. Когда Я отправляю форму в поиск через компонент фильтра «Связанная ссылка больше не доступна». появляется, и поиск не выполняется.
  3. Компонент «getMany» построен только наполовину, но кажется, что ReferenceInput хочет использовать только «getMany» (мне сказали, что создание серверной части и кода сборки для использования getMany не является приоритетом для сборки, поэтому я не могу собрать сам)

25 заполненных идентификаторов Скриншот

Ошибка формы при отправке фильтра ScreenShot

Итак, я хотелось бы получить некоторую помощь в правильном направлении, чтобы заполнить SelectInput всех доступных идентификаторов в getList dataProvider и быть уверенным, что я даже могу использовать этот ввод в моем компоненте формы фильтра. Заранее благодарим вас за любые отзывы.

1 Ответ

0 голосов
/ 05 мая 2020

1: Да, я думаю, что нет возможности добавить разбиение на страницы в ReferenceInput, вы должны жестко его закодировать, но, если ваш бэкэнд уже поддерживает текстовый поиск, вы можете использовать AutocompleteInput как дочерний, позволяя пользователям фильтровать результаты: 

<ReferenceInput 
     label="Ring Id" 
     source="ringid" 
     reference="candidates"
     filterToQuery={searchText => ({ paramNameThatYourBackendExpects: searchText })}
>
    <AutocompleteInput optionText="ringid" />
</ReferenceInput>

2 & 3: 2 происходит из-за 3. ReferenceInput только «хочет» использовать getMany, потому что он также поддерживает SelectManyInput как дочерний. В таком случае лучше получить все выбранные параметры сразу, чем вызывать один one, поэтому для упрощения кода ReferenceInput всегда использует getMany. Если вы не можете реализовать внутреннюю часть getMany, но можете добавить код в свой dataProvider, вы можете реализовать getMany, выполнив несколько вызовов getOne:

Предполагая, что dataProvider v3: 

this.getMany = async (resource, params) => {

    const response = {data: []}

    for (const id of params.id) {
        response.data.push(await this.getOne(resource, {id}))
    }

    return response
}

v2 зависит от реализации, просто следуйте тому же принципу.

Если вы не можете изменить dataProvider, например, сторонний dataProvider, вы можете обернуть его:

v3 

const fakeGetManyDataProvider = dataProvider => ({
    ...dataProvider,
    getMany: async (resource, params) => {
        const response = {data: []}

        for (const id of params.id) {
            response.data.push(await dataProvider.getOne(resource, {id}))
        }

        return response
    }
})

v2 

import { GET_MANY, GET_ONE } from 'react-admin'

const fakeGetManyDataProvider = dataProvider => async (verb, resource, params) => {
    if (verb === GET_MANY) {
            const response = {data: []}

            for (const id of params.id) {
                response.data.push(await dataProvider(GET_ONE, resource, {id}))
            }

            return response
    }
    return dataProvider(verb, resource, params)
}

Обратите внимание, что обработка ошибок опущена для простоты, реагирующий администратор ожидает отклоненных обещаний вместо необработанных ожиданий, поэтому вы должны обрабатывать ошибки.

...