Каков наилучший способ установки глобальных фильтров для нескольких ресурсов в реагирующих администраторах? - PullRequest
Новая
       28

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

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

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

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

Я действительно не знаю, как синхронизировать «YourFilter» с «MyFilter». Ожидаемый: вы находитесь на MyData, установите фильтр на основе / яблок. Вы переключаетесь на 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>
);

1 Ответ

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

Если 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>
);
...