Как лучше всего установить глобальные фильтры для нескольких ресурсов в react-admin?

Я пытаюсь реализовать пользовательский интерфейс администратора на основе response-admin. Теперь у меня есть несколько ресурсов с одинаковыми критериями фильтрации. Как лучше всего синхронизировать фильтры для всех ресурсов?

Пытался установить filterDefaultValues, фильтры. Хотя пытался назначить один и тот же Filter-Component нескольким ресурсам.

Я действительно не знаю, как синхронизировать YourFilter с MyFilter. Ожидается: вы находитесь в MyData, установите фильтр на основе / apples. Вы переключаетесь на YourData, фильтр должен быть предварительно выбран.

Как это реализовать?

// in src/mydata.js
const MyFilter = (props) => (
    <Filter {...props}>
        <ReferenceInput label="Apple" source="appleid" reference="apples" allowEmpty alwaysOn>
            <SelectInput optionText="applename" />
        </ReferenceInput>
    </Filter>
);

export const MyDataList = (props) => (
    <List {...props} title="My Data" filters={<MyFilter />}>
        <Datagrid>
        // ...
        </Datagrid>
    </List>
);

// in src/yourdata.js
const YourFilter = (props) => (
    <Filter {...props}>
        <ReferenceInput label="Apple" source="appleid" reference="apples" allowEmpty alwaysOn>
            <SelectInput optionText="applename" />
        </ReferenceInput>
    </Filter>
);

export const YourDataList = (props) => (
    <List {...props} title="Your Data" filters={<YourFilter />}>
        <Datagrid>
        // ...
        </Datagrid>
    </List>
);

// in src/App.js
const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="MyData" list={MyDataList} />
    <Resource name="YourData" list={YourDataList} />
  </Admin>
);

reactjs javascript react-redux react-admin
person Daniel P.    schedule 14.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если MyFilter и YourFilter строго одинаковы, вы можете использовать один и тот же компонент фильтра для обоих.

// filters.js
export const CustomFilter = (props) => (
    <Filter {...props}>
        <ReferenceInput label="Apple" source="appleid" reference="apples" allowEmpty alwaysOn>
            <SelectInput optionText="applename" />
        </ReferenceInput>
    </Filter>
);

// ResourceA.js
import { CustomFilter } from './filters';

export const ResourceAList = (props) => (
    <List {...props} title="My Data A" filters={<CustomFilter />}>
        <Datagrid>
        // ...
        </Datagrid>
    </List>
); 

// ResourceB.js
import { CustomFilter } from './filters';

export const ResourceBList = (props) => (
    <List {...props} title="My Data B" filters={<CustomFilter />}>
        <Datagrid>
        // ...
        </Datagrid>
    </List>
); 

// in src/App.js
import { ResourceAList } from './ResourceA';
import { ResourceBList } from './ResourceB';

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="MyDataA" list={ResourceAList} />
    <Resource name="MyDataB" list={ResourceBList} />
  </Admin>
);
person Kmaschta    schedule 15.01.2019
comment
Спасибо за ваш ответ. К сожалению, это не работает. Оба ресурса имеют одинаковые параметры фильтрации, но состояние не зависит. Если изменить фильтры в ResourceA, фильтры в ResourceB не изменятся. Вы знаете, как это решить? - person Daniel P.; 16.01.2019
comment
Я не уверен, что дублированные компоненты должны иметь одно и то же состояние. Обратите внимание на то, что вы разветвляете следующий CodeSandbox и воспроизводите проблему разделения состояний: codesandbox.io/s/n5q09v99xl - person Kmaschta; 16.01.2019