использованиена панели инструментов React-Admin - PullRequest
Новая
       5

использованиена панели инструментов React-Admin

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

Я использую response-admin v2.3.2 с настраиваемым компонентом панели мониторинга, как показано в руководстве по response-admin. 

    <Admin dashboard={MyDashboard}>
       <Resource name="incidents ... />
    </Admin>

Теперь я хотел бы отобразить список инцидентов на панели инструментов.при использовании компонента response-admin, но response-admin жалуется на отсутствующие свойства, такие как 'hasEdit'.

Я просто передал реквизиты компонента панели мониторинга в список, но это, очевидно, не работает: 

    class MyDashboard extends React.Component    {
      constructor(props) {
      super(props)

      render(
        return <List {...this.props}>
          <Datagrid> .... </Datagrid>
        </List>

      )
    }

Можно ли использовать компонент <List /> response-admin на приборной панели и если да, то как это можно сделать?

Заранее спасибо, Томас

Ответы [ 3 ]

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

Мне наконец-то удалось использовать компонентыact-admin, подделав необходимые реквизиты.В компоненте MyDashboard я определяю реквизиты, необходимые для компонента: 

    let fakeProps = {
        basePath: "/incidents",
        hasCreate: false,
        hasEdit: false,
        hasList: true,
        hasShow: false,
        history: {},
        location: { pathname: "/", search: "", hash: "", state: undefined },
        match: { path: "/", url: "/", isExact: true, params: {} },
        options: {},
        permissions: null,
        resource: "incidents"
    }

    <List {...fakeProps}>
      <DataGrid>
        <TextField .... />
      </DataGrid>
    </List>

Это действительно неоптимальное решение, но при первом запуске оно решает мою проблему.

0 голосов
/ 08 февраля 2019

У нас был запрос на создание списка на панели инструментов, поэтому я использовал принятый ответ.Хотя разбиение на страницы не будет вызывать новые запросы к серверу, даже если URL-адрес изменялся.

Это окончательное решение, которое работает с разбиением на страницы с использованием response-router v4.

In <Admin dashboard={Dashboard}> Iдобавлено: 

<Resource name="dashboard-stats"/>

В Dashboard.js вот что у меня есть: 

import React, { Component } from 'react';
import { GET_LIST } from 'react-admin';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';

import dataProvider from './dataProvider';
import {
    List,
    TextField,
    Datagrid
} from 'react-admin';


export default class Dashboard extends Component {
    state = {};

    initProps = {
        basePath: "/",
        hasCreate: false,
        hasEdit: false,
        hasList: true,
        hasShow: false,
        location: { pathname: "/", search: "", hash: "", state: undefined },
        match: { path: "/", url: "/", isExact: true, params: {} },
        options: {
        },
        permissions: null,
        resource: "dashboard-stats",
        perPage: 5
    };

    componentWillMount() {
        this.unlisten = this.props.history.listen((location, action) => {

        if (location.search) {
            //regex from: https://stackoverflow.com/a/8649003/1501205
            let queryParams = JSON.parse('{"' + decodeURI(location.search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
            let perPage = queryParams.perPage;
            let page = queryParams.page;
            this.initProps.perPage = perPage;
            this.initProps.page = page;
            this.initProps.location = location;
            this.setState({'initProps': this.initProps})

            }

        });
    }
    componentWillUnmount() {
        this.unlisten();
    }


    componentDidMount() {

        this.setState({'initProps': this.initProps});

        dataProvider(GET_LIST, 'stats', {
            sort: { field: 'date', order: 'DESC' },
            pagination: { page: 1, perPage: 50 },
        })
        .then(response => {
            this.setState({'stats':  response.data});
        });
    }

    render() {

        const {
            initProps
        } = this.state;

        if(!initProps) {
            return false;
        }


        return <Card>
            <CardHeader title="Welcome to the Dashboard" />


            <List {...initProps} >
                    <Datagrid>
                        <TextField source="description" />
                        <TextField source="state" />
                        <TextField source="date" />
                    </Datagrid>
                </List>

        </Card>;

    }
}

не забудьте обновить местоположение this.initProps.location только что изменившимся местоположением - иначебудет работать для первого клика (изменение маршрута), а затем перестанет работать

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

Возможно, вы хотите отобразить данные из различных ресурсов, в противном случае вы просто используете обычную страницу «Список».

Панель инструментов может сделать это.Взгляните на демонстрационную панель инструментов

Multiple dataProvider (GET_LIST, ..., которую вы передаете компонентам. Вы можете использовать этот компонент демонстрационной панели инструментов в качестве примера. отложенные ордера

...