AjouterVariation

/**
 * Auto Complete Advance UI Components
 */
import React, { Component, Fragment } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import { Media, Badge } from 'reactstrap';
import IconButton from '@material-ui/core/IconButton';
import {
    Button,
    Form,
    FormGroup,
    Label,
    Input,
    FormText,
    FormFeedback,

    Row,
    FormControl,
    Col
} from 'reactstrap';
import MatButton from '@material-ui/core/Button';
// page title bar
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';

// rct card box
import RctCollapsibleCard from 'Components/RctCollapsibleCard/RctCollapsibleCard';

// intl messages
import IntlMessages from 'Util/IntlMessages';

import axios from 'axios';
import NoImage from '../../categories/Images/noimage.png'
import '../../categories/img.css';


export default class Ajoutervariation extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: props.match.params.id,
            attributes: [],
            product_id: '',
            attribute_id: '',
            values1: [],
            //x: '',
            //y: '',
            //clicked: false,
            value_id: 0,
            //selected: false,
            tabOfId: [],
            //values: [],
            //valuesofproducts: [],
            stock: '',
            regularPrice: '',
            salePrice: '',
            tabofvalueIdLength: '',
            tabofvalueId: [],
            valueId: '',
            file: '',
            fileName: "",
            photo: "",
            filename: null,
            variations: [],
            photos: [],
            number: '',
            status: ''
        }
        this.handleChange = this.handleChange.bind(this);
        this.delete = this.delete.bind(this);
        this.handledChange = this.handledChange.bind(this);
        this.add = this.add.bind(this);
    }
    /********************************************************************************************************/
    componentWillReceiveProps(nextProps) {
        //console.log("nextProps", nextProps);
    }
    /********************************************************************************************************/
    fetchValues() {
        fetch("http://vps649558.ovh.net:8000/api/getAttributesAndValuesOfAProduct/" + this.props.match.params.id)
            .then(Response => Response.json())
            .then(data => {
                //console.log(data.list)
                this.setState({
                    valuesofproducts: data.list
                })
            })
    }
    /********************************************************************************************************/
    fetchData() {
        fetch("http://vps649558.ovh.net:8000/api/getAllVariationOfAProduct/" + this.props.match.params.id)
            .then(Response => Response.json())
            .then(data => {
                // console.log(data.message)
                this.setState({
                    variations: data.message,
                    photos: data.message.photos
                })
            })
    }
    /********************************************************************************************************/
    componentDidMount() {
        fetch("http://vps649558.ovh.net:8000/api/getAllVariationOfAProduct/" + this.props.match.params.id)
            .then(Response => Response.json())
            .then(data => {
                //console.log(data.message)
                this.setState({
                    variations: data.message,
                    photos: data.message.photos
                })
            })
        fetch("http://vps649558.ovh.net:8000/api/getAttributesAndValuesOfAProduct/" + this.props.match.params.id)
            .then(Response => Response.json())
            .then(data => {
                //console.log(data.list)
                this.setState({
                    valuesofproducts: data.list
                })
            })
        fetch("http://vps649558.ovh.net:8000/api/isTheVariationsHasDifferentPrices/" + this.props.match.params.id)
            .then(Response => Response.json())
            .then(data => {
                //console.log(data.status)
                this.setState({
                    status: data.status
                })
            })

    }
    /********************************************************************************************************/
    handleChange = e => {
        //console.log(e.target.value);
        this.setState({
            valueId: e.target.value
        });
    }
    handledChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }
    /********************************************************************************************************/
    handlecatChange = e => {

        this.setState({
            value_id: e.target.value
        });
        //console.log(this.state.value_id);
    }
    /********************************************************************************************************/
    add = (a) => {
        const data = a
        this.state.tabofvalueId.push(data);
        this.setState({
            tabofvalueId: this.state.tabofvalueId
        })
        //console.log(this.state.tabofvalueId)
    }
    handleImgChange = (e) => {

        let files = e.target.files || e.dataTransfer.files;
        if (!files.length)
            return;
        this.createImage(files[0]);
    }
    createImage(file1) {
        let reader = new FileReader();
        //let fileName = this.state.fileName;
        reader.onload = (e) => {
            this.setState({
                file: e.target.result
            })
        };
        reader.readAsDataURL(file1)
        //console.log(file1.name)
        this.setState({
            fileName: file1.name
        })
    }
    save = event => {
        event.preventDefault();

        const formData = new FormData();
        formData.append('product_id', this.props.match.params.id);
        formData.append('tabofvalueId', JSON.stringify(this.state.tabofvalueId));
        formData.append('tabofvalueIdLength', this.state.tabofvalueId.length);
        formData.append('stock', this.state.stock);
        formData.append('regularPrice', this.state.regularPrice);
        formData.append('salePrice', this.state.salePrice);
        formData.append('file', this.state.file);
        formData.append('fileName', this.state.fileName);
        //console.log(JSON.stringify(this.state.tabofvalueId))
        for (var pair of formData.entries()) {
           // console.log(pair[0] + ', ' + pair[1]);
        }
        axios({
            method: 'post',
            url: 'http://vps649558.ovh.net:8000/api/addVariation',
            data: formData,
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            }
        }).then((response) => alert(response.data.message))
            .then(() => this.fetchData())
            .then((response) => {
                //console.log(response)
            })
            .catch(function (response) {
                //console.log(response);
            });
    }
    /********************************************************************************************************/
    delete(id) {
        fetch('http://vps649558.ovh.net:8000/api/deleteAVariation/' + id)
            .then(() => this.fetchData())
    }
    /********************************************************************************************************/
    render() {
        const { values1, valuesofproducts } = this.state;
        //console.log(this.state.valuesofproducts)
        const lStyle1 = {
            width: "50px",
            height: "50px"
        };
        return (
            <div className="responsive-table-wrapper">
                <PageTitleBar title={<IntlMessages id="Variations" />} match={this.props.match} />
                <RctCollapsibleCard
                    heading="Ajouter des variations"
                >
                    <Form>
                        {
                            valuesofproducts && this.state.valuesofproducts.map((val) =>

                                <FormGroup key={val.id} row>
                                    <Label for="valueId" sm={2}>{val.attributeName}</Label>
                                    <Col sm={10}>
                                        <Input type="select" name="valueId" id="valueId" onChange={this.handleChange}>
                                            <option value="0"></option>
                                            {
                                                val.valuesOfAnAttribute.map((attr1) =>
                                                    <option key={attr1.valueId} value={attr1.valueId} onClick={(valueId) => this.add(attr1.valueId)}>{attr1.valueName}</option>
                                                )
                                            }
                                        </Input>
                                    </Col>
                                </FormGroup>
                            )
                        }
                        <FormGroup row>
                            <Label for="stock" sm={2}>Stock</Label>
                            <Col sm={10}>
                                <Input type="text" name="stock" id="stock" placeholder="Stock" value={this.state.stock} onChange={this.handledChange} />
                            </Col>
                        </FormGroup>
                        {this.state.status === '0' ?
                            <div>
                                <FormGroup row>
                                    <Label for="regularPrice" sm={2}>Prix d'achat</Label>
                                    <Col sm={10}>
                                        <Input type="text" name="regularPrice" id="regularPrice" placeholder="Prix d'achat" value={this.state.regularPrice} onChange={this.handledChange} />
                                    </Col>
                                </FormGroup>
                                <FormGroup row>
                                    <Label for="salePrice" sm={2}>Prix de vente</Label>
                                    <Col sm={10}>
                                        <Input type="text" name="salePrice" id="salePrice" placeholder="Prix de vente" value={this.state.salePrice} onChange={this.handledChange} />
                                    </Col>
                                </FormGroup>
                            </div>
                            : null
                        }
                        <FormGroup row>
                            <Label for="file" sm={2}>Image de variation</Label>
                            <Col sm={10}>
                                <Input type="file" onChange={this.handleImgChange} required />
                            </Col>
                        </FormGroup>
                        <Button color="success" style={{ marginLeft: '40%', marginRight: '30%' }} className="mr-10 mb-10" onClick={this.save} disabled={!this.state.file}>Ajouter variation</Button>
                    </Form>
                    {this.state.variations.length > 0 ?
                        this.state.status === '0' ?
                            <div className="table-responsive">
                                <div className="unseen">
                                    <Table hover="true" style={{ textAlign: "center" }}>
                                        <thead>
                                            <tr color="primary" style={{ textAlign: "center" }} >
                                                <th>Stock</th>
                                                <th>Prix d'achat</th>
                                                <th>Prix de vente</th>
                                                <th>Image de variation</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {this.state.variations && this.state.variations.map((variation) =>
                                                <tr key={variation.id} style={{ textAlign: "center" }}>
                                                    <td>{variation.stock}</td>
                                                    <td>{variation.regularPrice}</td>
                                                    <td>{variation.salePrice}</td>
                                                    {variation.photos.map((photo) =>
                                                        photo.onHome == '1' ?
                                                            <td key={photo.id}>
                                                                <img src={"http://vps649558.ovh.net:8000/photo/" + photo.filename} className="zoom" alt="" />
                                                            </td>
                                                            :
                                                            <td key={photo.id}>
                                                                <img src={NoImage} style={lStyle1} alt="" />
                                                            </td>
                                                    )}
                                                    <td>
                                                        <IconButton className="text-danger" aria-label="Delete" onClick={(id) => this.delete(variation.id)}>
                                                            <i className="zmdi zmdi-delete"></i>
                                                        </IconButton>
                                                    </td>
                                                </tr>
                                            )}
                                        </tbody>
                                    </Table>
                                </div>
                            </div>
                            :
                            <div className="table-responsive">
                                <div className="unseen">
                                    <Table hover="true" style={{ textAlign: "center" }}>
                                        <thead>
                                            <tr color="primary" style={{ textAlign: "center" }}>
                                                <th>Stock</th>
                                                <th>Image de variation</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {this.state.variations && this.state.variations.map((variation) =>
                                                <tr key={variation.id} style={{ textAlign: "center" }}>
                                                    <td>{variation.stock}</td>
                                                    {variation.photos.map((photo) =>
                                                        photo.onHome == '1' ? 
                                                            <td key={photo.id}>
                                                                <img src={"http://vps649558.ovh.net:8000/photo/" + photo.filename} className="zoom" alt="" />
                                                            </td>
                                                            :
                                                            <td key={photo.id}>
                                                                <img src={NoImage} style={lStyle1} alt="" />
                                                            </td>
                                                    )}
                                                    <td>
                                                        <IconButton className="text-danger" aria-label="Delete" onClick={(id) => this.delete(variation.id)}>
                                                            <i className="zmdi zmdi-delete"></i>
                                                        </IconButton>
                                                    </td>
                                                </tr>
                                            )}
                                        </tbody>
                                    </Table>
                                </div></div> : null}
                </RctCollapsibleCard>
            </div >
        );
    }
}