Question

如何使用AOR的“列表”组件在仪表板上列出多个资源。

我的要求是在仪表板上有一个选项卡式组件，其中： 1. Tab1应显示资源1的数据网格 2. Tab2应显示资源2的数据网格，依此类推......

所有数据网格都应该进行过滤和排序。

在尝试使用“List”组件实现此目的时，我遇到了过滤和排序问题。根据资源数据加载到app-state的顺序，对Tab1上Resource1的过滤将位置重定向到https://[domain.com]/#/resource2?filter=[filter_params_applied_on_resource1]

我是否有办法在仪表板或任何其他路由器位置呈现多个资源，并对所有列出的资源进行适当的过滤？

Answer 1

以下结构在仪表板中运行良好：

import React, { Component } from 'react';
import withWidth from 'material-ui/utils/withWidth';
import { AppBarMobile, GET_LIST, GET_MANY } from 'admin-on-rest';
import Welcome from './Welcome';
import Moment from 'react-moment';

class Dashspawn extends Component {
    state = {};

    componentDidMount() {
       restClient(GET_LIST, 'spawns', {
           filter: { state: 'jar'},
            sort: { field: 'inoculationjar', order: 'ASC' },
            pagination: { page: 1, perPage: 100 },
        })
        .then(response => response.data)
        .then(newSpawn => {
            this.setState({ newSpawn });
            this.setState({ nbCurrentSpawn: newSpawn.reduce(nb => ++nb, 0) });

        })
        restClient(GET_LIST,....

}

  render() {
        const {
            nbCurrentSpawn_month_one,
            newSpawn,
            newSpawn_month_one,
         etc...

        } = this.state;
        const { width } = this.props;
        return (
           <div>
             {width === 1 && <AppBarMobile title="Bali Mojo" />}
             <Welcome style={styles.welcome} />
             <div style={styles.flex}>
                <div style={styles.leftCol}>
                    <div style={styles.flex}>
Some of your field components..
                    </div>
                <div style={styles.rightCol}>
                    <div style={styles.flex}>
Some more of your field components..
                    </div>
                </div>
             </div>
           );
   }
}

export default withWidth()(Dashspawn);

希望这有帮助。

ps可以使用此GET_LIST的组件示例。添加其他restClient(GETLIST,..和组件以制作信息中心：

import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';
import { List, ListItem } from 'material-ui/List';
import BlockIcon from 'material-ui/svg-icons/content/block';
import { translate } from 'admin-on-rest';

const styles = {
    card: { borderLeft: 'solid 4px #4caf50', flex: 1, marginLeft: '2em' },
    icon: { float: 'right', width: 64, height: 64, padding: 16, color: '#4caf50' },
};

export default translate(({ spawns = [], nb, unitsok, translate }) => (
    <Card style={styles.card}>
        <BlockIcon style={styles.icon} />
        <CardTitle title={nb} subtitle={unitsok} />
        <List>
            {spawns.map(record =>
                <ListItem
                    href={`#/spawns/${record.id}`}
                    key={record.id}
                    primaryText={record.spawncode}
                    secondaryText={new Date(record.inoculationbag).toString('dd-MMM-yyyy').slice(0, 15)}
                />
            )}
        </List>
    </Card>
));

使用AOR的List组件在仪表板上呈现多个资源

1 个答案: