AORのリストコンポーネントを使用してダッシュボード上の複数のリソースをレンダリングする

Question

AORの「リスト」コンポーネントを使用してダッシュボードに複数のリソースをリストする方法を教えてください。

私の要件は、ダッシュボード上のタブコンポーネントを持つことです。 1 Tab1を、リソ​​ース1のためのデータ・グリッドを表示する必要があり ようにリソース2のためのデータ・グリッドを表示しなければならない。2. TAB2 ...

すべてのデータグリッドにフィルタリングとソートが必要です。

これを達成するために「リスト」コンポーネントを使用しようとしているうちに、フィルタリングと並べ替えの問題が発生しました。 リソースデータがhttps://[domain.com]/#/resource2?filter=[filter_params_applied_on_resource1]

に場所をリダイレクトされTab1を上のリソース1のフィルタリング、アプリケーション状態にロードされた順序に基づいて、私はダッシュボードやその他の内の複数のリソースのをレンダリングするための方法はありますリストされたすべてのリソースを適切にフィルタリングしてrouter-location？

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> 
));