AG2L-pwa/components/AG2L/Intervention.js

import React, { Component } from "react";
import classnames from "classnames";
import _ from "lodash";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Griddle from "griddle-react";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import EditIcon from "@material-ui/icons/Edit";
import MenuIcon from "@material-ui/icons/Menu";
import red from "@material-ui/core/colors/red";
import Collapse from "@material-ui/core/Collapse";
// import { FormattedDate, FormattedTime } from "react-intl";
import { withStyles, grey400 } from "@material-ui/core/styles";
import {
    Card,
    CardHeader,
    CardContent,
    CardActions,
    IconButton,
    MenuItem
} from "@material-ui/core";
import GriddleCustomTableComponent from "../custom/GriddleCustomTableComponent";

const styles = theme => ({
    card: {
        maxWidth: 400
    },
    media: {
        height: 0,
        paddingTop: "56.25%" // 16:9
    },
    actions: {
        display: "flex"
    },
    expand: {
        transform: "rotate(0deg)",
        transition: theme.transitions.create("transform", {
            duration: theme.transitions.duration.shortest
        }),
        marginLeft: "auto"
    },
    expandOpen: {
        transform: "rotate(180deg)"
    },
    avatar: {
        backgroundColor: red[500]
    }
});

const iconButtonElement = (
    <IconButton touch tooltip="more" tooltipPosition="bottom-left">
        <MoreVertIcon color={grey400} />
    </IconButton>
);

const rightIconMenu = (
    <MenuIcon iconButtonElement={iconButtonElement}>
        <MenuItem>Call</MenuItem>
    </MenuIcon>
);

class CustomRowComponent extends React.Component {
    state = {
        expanded: false
    };

    handleExpandClick = () => {
        this.setState({ expanded: !this.state.expanded });
    };

    // SchemaName	    SchemaType	        Caption
    // Id_Indice	    int	(Nothing)       
    // Id_Itv	        nvarchar	        Code
    // Id_Res_Aff	    uniqueidentifier	Affaire
    // Id_Res_Elt	    uniqueidentifier	Elément
    // Dt_Crt	        datetime	        Date création
    // Dt_Itv	        datetime	        Date
    // Id_Opr_Sas	    nvarchar	        Demandeur
    // Id_Opr_Itv	    nvarchar	        Intervenant
    // Id_Itv_Typ	    nvarchar	        Type
    // Id_Cli	        nvarchar	        Code client
    // Id_Adr_Key	    nvarchar	        Adresse
    // Id_Cct_Key	    nvarchar	        Contact
    // Id_Res_Elt_Fab	uniqueidentifier	Elément
    // Lbl_Itv	        nvarchar	        Résumé
    // Lbm_Itv_Dmd	    nvarchar	        Demande
    // Lbm_Itv_Sol	    nvarchar	        Description intervention
    // Ldv_Gar	        int	Garantie        
    // Ldv_Sts	        int	Statut          
    // Dt_Clt	        datetime	        Date clôture
    // ClassObjectId	nvarchar	        (Nothing)


    render() {
        const { rowData } = this.props;

        let interventionDate = new Date(rowData.Dt_Itv);
        return (
            <Card>
                <CardHeader title={rowData.Lbl_Itv} subheader={(interventionDate).toLocaleDateString("fr-FR") + ' ' + interventionDate.toLocaleTimeString("fr-FR", {hour: '2-digit', minute:'2-digit'})}/>
                <CardContent>
                </CardContent>
                <CardActions>
                    <IconButton
                        className={classnames(styles.expand, {
                            [styles.expandOpen]: this.state.expanded
                        })}
                        onClick={this.handleExpandClick}
                        aria-expanded={this.state.expanded}
                        aria-label="Show more"
                    >
                        <ExpandMoreIcon />
                    </IconButton>
                    <EditIcon onClick={() => alert('future edit')} />
                </CardActions>
                <Collapse in={this.state.expanded} timeout="auto" unmountOnExit>
                    <CardContent>
                        <h3>Details</h3>
                        <p>
                            {rowData.Id_Adr_Key}
                        </p>
                        <p>
                            {rowData.Id_Cct_Key}
                        </p>
                        <p>
                            {rowData.Lbm_Itv_Dmd}
                        </p>                        
                        <p>
                            {rowData.Id_Opr_Itv}
                        </p>
                    </CardContent>
                </Collapse>

            </Card>
        );
    }
}

CustomRowComponent.propTypes = {
    rowData: PropTypes.func.isRequired,
    editQuest: PropTypes.func.isRequired,

};
// eslint-disable-next-line
class Intervention extends Component {
    state = {
        data: []
    };

    componentWillMount() {
        console.log("componentWillMount Intervention props : ", this.props.data);
        this.setState({
          
            data: this.props.data
        });
    }

    componentDidMount() { }

    componentWillReceiveProps(nextProps) {
        console.log(
            "componentWillReceiveProps Intervention nextProps",
            nextProps.data
        );
        this.setState({
            data: nextProps.data
        });
    }

    // rowDataSelector = (state, props) => {
    //     let o = state
    //         .get("data")
    //         .find(rowMap => rowMap.get("griddleKey") === props.griddleKey);
    //     o = o.concat({ gameId: this.props.gameId });
    //     return o.toJSON();
    // };

    // enhancedWithRowData = connect((state, props) => ({
    //     editQuest: this.props.edit,
    //     // rowData will be available into MyCustomComponent
    //     rowData: this.rowDataSelector(state, props),
    //     value: this.props.gameId
    // }));

    NewLayout = ({ Table, Pagination, Filter }) => (
        <div>
            <Filter />
            <Pagination />
            <Table />
        </div>
    );

    CustomTableBody = ({ rowIds, Row, style, className }) => (
        <div style={style} className={className}>
            {rowIds && rowIds.map(r => <Row key={r} griddleKey={r} />)}
        </div>
    );

    _onNext = () => {
        // const { currentPage, pageSize, filterText } = this.state;
        // this.props.fetchUserGamesRequest(currentPage + 1, pageSize, filterText);
    };

    _onPrevious = () => {
        // const { currentPage, pageSize, filterText } = this.state;
        // this.props.fetchUserGamesRequest(currentPage - 1, pageSize, filterText);
    };

    _onGetPage = pageNumber => {
         const { pageSize, filterText } = this.state;

         this.props._onGetPage(pageNumber, pageSize, filterText)
            .then( (data) => this.setState(data))
        // this.props.fetchUserGamesRequest(pageNumber, pageSize, filterText);
    };

    _onFilter = filterText => {
        // this.setState({ currentPage: 1 });
        // const { currentPage, pageSize } = this.state;
        // this.setState({ filterText });
        // this.props.fetchUserGamesRequest(currentPage, pageSize, filterText);
    };

    render() {
        const { data, currentPage, pageSize, recordCount } = this.state;
        return (
            <div>
                {!this.props.data && (
                    <div className="text-center">
                        <div className="alert alert-info">
                            Aucune intervention disponnible.
            </div>
                    </div>
                )}
                {
                    <Griddle
                        data={this.props.data}
                        pageProperties={{
                            currentPage,
                            pageSize,
                            recordCount
                        }}
                        components={{
                            Layout: this.NewLayout,
                            Row: CustomRowComponent,
                            TableContainer: GriddleCustomTableComponent,
                            TableBody: this.CustomTableBody
                        }}
                        events={{
                            onNext: this._onNext,
                            onPrevious: this._onPrevious,
                            onGetPage: this._onGetPage,
                            onFilter: this._onFilter
                        }}
                    />
                }
            </div>
        );
    }
}

export default Intervention;