React-Admin |Массовое выделение с помощью ReferenceField - PullRequest
Новая
       4

React-Admin |Массовое выделение с помощью ReferenceField

0 голосов
/ 17 сентября 2018

В нашем приложении мы пытаемся использовать Datagrid в ReferenceField для создания / изменения / удаления связанных записей, как показано в https://marmelab.com/blog/2018/07/09/react-admin-tutorials-form-for-related-records.html

Все функциональные возможности, показанные в руководстве, работают хорошо, кроме массовых действий, добавленных в недавнем обновлении реакции-администратора. Нажатие на эти флажки дает

Uncaught TypeError: _this.props.onToggleItem не является функцией

Я полагаю, это потому, что реквизит onToggleItem обычно предоставляется компонентом List, однако в этом приложении Datagrid не имеет родительского компонента List.

Добавление компонента List между ReferenceManyField и Datagrid позволяет массовому выбору / удалению работать после некоторых изменений стиля, однако это вызывает другую проблему: текущая отображаемая страница (т.е. записи 1-10, 11-20 и т. Д.) Сохраняется на ресурс в магазине, и поэтому может возникнуть ситуация, когда магазин говорит, что мы находимся на странице 2, и отображает страницу 2, которая пуста, потому что для заполнения одной страницы достаточно только связанных элементов.

Я что-то здесь упускаю? Или массовый выбор внутри ReferenceManyField в настоящее время невозможен? 

export const NetworksShow = (props) => (
  <Show title={<NetworksTitle />} actions={<NetworksShowActions />} {...props}>

        <ReferenceManyField addLabel={false} target="ipid" reference="acl-network">
          <List style={{ margin: '0px -24px -16px -24px' }} {...props} actions={<NetworkACLCardActions ipid={props.id}/>} filter={{ ipid: _.has(props, 'id') ? props.id : undefined }}>
            <Datagrid hasBulkActions={true}>
              <ReferenceField label="Network" source="ipid" reference="networks">
                <TextField source="name" />
              </ReferenceField>
              <TextField label="URL" source="url" />
              <BWChip label="Action" source="wb" />
              <EditButton />
              <DeleteButton />
            </Datagrid>
          </List>
        </ReferenceManyField>
  </Show>
);

Ответы [ 3 ]

0 голосов
/ 06 декабря 2018

В качестве побочного эффекта https://github.com/marmelab/react-admin/pull/2365, теперь можно использовать ReferenceManyField -> List -> Datagrid, как описано в вопросе.

Например, мы сейчас делаем следующее: 

      <ReferenceManyField addLabel={false} target="groupid" reference="users">
        <List
          style={{ margin: '0px -24px -16px -24px' }}
          filter={{ groupid: id }}
          {...props}
        >
          <Datagrid hasBulkActions>
            <LinkField label="Name" source="name" />
            <LinkField label="Username" source="email" />
            <FlexibleBooleanField label="Email" source="allowemail" />
            <ACLChip label="User Access" source="aclid" />
          </Datagrid>
        </List>
      </ReferenceManyField>

Массовые действия работают с вышеизложенным, и любые проблемы с разбиением на страницы избегаются, так как response-admin теперь проверяет и изменяет нумерацию страниц, если на текущей странице ничего не появляется.

0 голосов
/ 25 января 2019

Я реализовал «DumbList», который берет данные из родительского компонента, а не загружает их сам.Это решает проблему: 

import React from 'react';
import { ListController } from 'ra-core';
import { ListView } from 'ra-ui-materialui/esm/list/List';

export const DumbList = props =>
  <ListController {...props}>
    {controllerProps => {
      let { data } = props
      const ids = Object.keys(data || {})
      const total = ids.length
      return <ListView
        {...props}
        // This is important, otherwise bulkActionsToolbar ends up on very top of the page
        classes={{ card: 'relative' }}
        {...Object.assign(controllerProps, { data, ids, total })} />
    }}
  </ListController>
0 голосов
/ 17 сентября 2018

Как я понял из документации , Datagrid - это просто итератор "тупой компонент" .
Он просто «показывает» вещи, которые родительский элемент - обычно List ( подключенный компонент ) или в вашем случае ReferenceManyField - элемент ранее извлек. Таким образом, я думаю, что BulkActions может быть функциональным только тогда, когда предоставляется элементом List.

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

...