sipadu_mbip/resources/js/components/compound/NewCompoundDataTable.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ClipLoader from 'react-spinners/ClipLoader';
import {ExportCSV} from '../ExportCSV';
import DatatableParkir from './../DatatableParkir';
import DatatablePelbagai from './../DatatablePelbagai';

export default class NewCompoundDataTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            current_id: this.props.current_id,
            dataCompound: [],
            loading: 'null',
            current_url: 'null',
            total:{
                baru: this.props.baru,
                invest: this.props.invest,
                notice: this.props.notice,
                inven: this.props.inven,
                collap: this.props.collap,
                comp: this.props.comp
            },
            check: {
                kpd: true,
                date: true,
                faulty: true,
                enforcer: true,
                platno: false,
                companyno: false,
                nric: false,
            },
            form: {
                modul: this.props.modul,
                status: this.props.status,
                type: 'Parkir',
                kpd: '',
                start_date: new Date().getFullYear() + '-' + ("0" + (new Date().getMonth() + 1)).slice(-2) + '-' + ("0" + new Date().getDate()).slice(-2),
                end_date: new Date().getFullYear() + '-' + ("0" + (new Date().getMonth() + 1)).slice(-2) + '-' + ("0" + new Date().getDate()).slice(-2),
                faulty: 'All',
                enforcer:  'All',
                plate_no: '',
                company_no: '',
                nric: '',
            },
            list_enforcer: JSON.parse(this.props.enforcer),
            list_faulty: JSON.parse(this.props.faulty),
        };

        this.onCheckKpd = this.onCheckKpd.bind(this);
        this.onCheckDate = this.onCheckDate.bind(this);
        this.onCheckPlateNo = this.onCheckPlateNo.bind(this);
        this.onCheckCompanyNo = this.onCheckCompanyNo.bind(this);
        this.onCheckNric = this.onCheckNric.bind(this);

        this.onChangeKpd = this.onChangeKpd.bind(this);
        this.onChangeType = this.onChangeType.bind(this);
        this.onChangeStart = this.onChangeStart.bind(this);
        this.onChangeEnd = this.onChangeEnd.bind(this);
        this.onChangeFaulty = this.onChangeFaulty.bind(this);
        this.onChangeEnforcer = this.onChangeEnforcer.bind(this); 
        this.onChangePlateNo = this.onChangePlateNo.bind(this);  
        this.onChangeCompanyNo = this.onChangeCompanyNo.bind(this);
        this.onChangeNric = this.onChangeNric.bind(this);
        this.onChangeStatus = this.onChangeStatus.bind(this);

        this.onSubmit = this.onSubmit.bind(this);
    }

    onCheckKpd(e){
        this.setState(prevState => ({
            check: {
                ...prevState.check,
                kpd: !this.state.check.kpd
            },
        }))
    }
    onCheckDate(e){
        this.setState(prevState => ({
            check: {
                ...prevState.check,
                date: !this.state.check.date
            }
        }))
    }
    onCheckPlateNo(e){
        this.setState(prevState => ({
            check: {
                ...prevState.check,
                 platno: !this.state.check.platno
            }
        }))
    }
    onCheckCompanyNo(e){
        this.setState(prevState => ({
            check: {
                ...prevState.check,
                companyno: !this.state.check.companyno
            }
        }))
    }
    onCheckNric(e){
        this.setState(prevState => ({
            check: {
                ...prevState.check,
                nric: !this.state.check.nric
            }
        }))
    }


    onChangeKpd(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                kpd: value
            }
        }));
    }

    onChangeType(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                type: value
            },
            loading: 'null',
            dataCompound: []
        }));
    }

    onChangeStart(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                start_date: value
            }
        }));
    }

    onChangeEnd(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                end_date: value
            }
        }));
    }

    onChangeFaulty(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                faulty: value
            }
        }));
    }

    onChangeEnforcer(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                enforcer: value
            }
        }));
    }

    onChangePlateNo(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                plate_no: value
            }
        }));
    }

    onChangeCompanyNo(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                company_no: value
            }
        }));
    }

    onChangeNric(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                nric: value
            }
        }));
    }

    onChangeStatus(e){
        let value = e.target.value;
        this.setState(prevState => ({
            form: {
                ...prevState.form,
                status: value
            }
        }));
    }

    onSubmit(e){
        e.preventDefault();
        this.setState({  loading: true });
        let formData = {
            type: this.state.form.type,
            enforcer: this.state.form.enforcer,
            faulty: this.state.form.faulty,
            modul: this.state.form.modul,
            status: this.state.form.status,
        };

        if(this.state.check.date){
            formData = {
                ...formData,
                start_date: this.state.form.start_date,
                end_date: this.state.form.end_date, 
            }
        }else{
            formData = {
                ...formData,
                start_date: '',
                end_date: '', 
            }
        }

        if(this.state.check.kpd){
            formData = {
                ...formData,
                kpd: this.state.form.kpd, 
            }
        }else if(this.state.check.platno){
            formData = {
                ...formData,
                plate_no: this.state.form.plate_no,
            }
        }else if(this.state.check.companyno){
            formData = {
                ...formData,
                company_no: this.state.form.company_no,
            }
        }else if(this.state.check.nric){
            formData = {
                ...formData,
                nric: this.state.form.nric,
            }
        }
   
        let queryString = Object.keys(formData).map(key => key + '=' + formData[key]).join('&');

        fetch('/api/list/compound?'+queryString).then(response => {
            response.json().then(res => {
                this.setState({ dataCompound: res.data, loading: false, current_url: '/api/list/compound?'+queryString });
            })
        })
    }

    render() {
        return (
            <div className="row">
                <div className="col-xl-2 col-md-12">
                    <div className="panel panel-default">
                        <div className="panel-heading">
                            <h4 className="panel-title"> Modul Kategori </h4>
                        </div>
                       
                        <div className="panel-body">
                            <div><a href="/main/compound" className="active">Baru</a>&nbsp;<label className="badge badge-inverse-danger">{this.state.total.baru}</label></div>
                            <div><a href="/main/compound/investigation">Pengesahan Kompaun</a>&nbsp;<label className="badge badge-success">{this.state.total.invest}</label></div>
                            <div><a href="/main/compound/notice">Notis Amaran</a>&nbsp;<label className="badge badge-success">{this.state.total.notice}</label> </div>
                            <div><a href="/main/compound/confiscated">Sitaan</a>&nbsp;<label className="badge badge-success">{this.state.total.inven}</label> </div>
                            <div><a href="/main/compound/completed">Kompaun Dijelaskan</a>&nbsp;<label className="badge badge-success">{this.state.total.comp}</label></div>
                        </div>
                    </div>
                </div>

                <div className="col-xl-10 col-md-12">

                    <div className="row">
                        <div className="col-md-12">
                            <div className="card">
                                <div className="card-block">
                                    <form className="main cussPayment" onSubmit={this.onSubmit}>

                                        <div className="row clearfix">
                                            <div className="col-lg-3">
                                                <label><input type="checkbox" onClick={this.onCheckKpd} defaultChecked={true} />&nbsp;<b>No</b></label>
                                                <div className="input-group input-group-sm">
                                                    <span className="input-group-prepend">
                                                        <label className="input-group-text">KPD</label>
                                                    </span>
                                                    <input type="text" className="form-control form-control-sm" placeholder="SCM4744" value={this.state.form.kpd} onChange={this.onChangeKpd} required={this.state.check.kpd}/>
                                                </div>
                                            </div>

                                            
                                            <div className="col-lg-3">
                                                <label><b>Jenis Kompaun <code>*</code></b></label>
                                                <select className="form-control form-control-sm" value={this.state.form.type} onChange={this.onChangeType} required>
                                                    <option>Parkir</option>
                                                    <option>Pelbagai</option>
                                                </select>
                                            </div>
                                        </div>
                                       
                                        <div className="row clearfix" style={{marginBottom: "1.25em"}}>
                                            <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <label><input type="checkbox" onClick={this.onCheckDate} defaultChecked={true} />&nbsp;<b>Tarikh</b></label>
                                            </div>
                                            <div className="col-lg-3">
                                                <input type="date" className=" form-control form-control-sm" value={this.state.form.start_date} onChange={this.onChangeStart} required={this.state.check.date}/>
                                            </div>
                                            <span><b>-</b></span>
                                            <div className="col-lg-3">
                                                <input type="date" className="form-control form-control-sm" value={this.state.form.end_date} onChange={this.onChangeEnd} />
                                            </div>
                                        </div>

                                        <div className="row clearfix" style={{marginBottom: "1.25em"}}>
                                            <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <label><b>Seksyen Kesalahan</b></label>
                                            </div>
                                            <div className="col-lg-9 .offset-xl-3">
                                                <select className="form-control form-control-sm" defaultValue="All" onChange={this.onChangeFaulty} required={this.state.check.faulty}>
                                                    <option value="All">All</option>
                                                    {this.state.list_faulty.map((act,i) => 
                                                        <optgroup label={act.nama} key={i}>
                                                            {act.faulty.map((faulty,j) =>
                                                             <option key={j} value={faulty._id}>Seksyen {faulty.sketr}</option>
                                                            )}
                                                        </optgroup>
                                                    )}
                                                </select>
                                            </div>
                                        </div>
                        
                                        <div className="row clearfix" style={{marginBottom: "1.25em"}}>
                                            <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <label><b>PenguatKuasa</b></label>
                                            </div>
                                            <div className="col-lg-6 .offset-xl-6">
                                                <select className="form-control form-control-sm" defaultValue="All" onChange={this.onChangeEnforcer} required={this.state.check.enforcer}>
                                                    <option value="All">All</option>
                                                    {this.state.list_enforcer.map((staff, i) => 
                                                        <option key={i} value={staff._id}>{staff.no_badan}, {staff.full_name}</option>
                                                    )}
                                                </select>
                                            </div>
                                        </div>

                                        <div className="row clearfix" style={{marginBottom: "1.25em"}}>
                                            <div className="col-lg-3">
                                                <label><input type="checkbox" onClick={this.onCheckPlateNo} defaultChecked={false} />&nbsp;<b>No.Plat</b></label>
                                                <input type="text" className="form-control form-control-sm" placeholder="no plat" value={this.state.form.plate_no} onChange={this.onChangePlateNo} required={this.state.check.platno}/>
                                            </div>
                                            <div className="col-lg-3">
                                                <label><input type="checkbox" onClick={this.onCheckCompanyNo} defaultChecked={false} />&nbsp;<b> No.Syarikat</b></label>
                                                <input type="text" className="form-control form-control-sm" placeholder="no syarikat" value={this.state.form.company_no} onChange={this.onChangeCompanyNo} required={this.state.check.companyno}/>
                                            </div>
                                            <div className="col-lg-3">
                                                <label><input type="checkbox" onClick={this.onCheckNric} defaultChecked={false} />&nbsp;<b>NRIC</b></label>
                                                <input type="text" className="form-control form-control-sm" placeholder="nric" value={this.state.form.nric} onChange={this.onChangeNric} required={this.state.check.nric} />
                                            </div>
                                        </div>

                                        <div className="row clearfix" style={{marginBottom: "1.25em"}}>
                                            <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <label><b>Status</b></label>
                                            </div>
                                            <div className="col-lg-3 .offset-xl-9">
                                                <select className="form-control form-control-sm" defaultValue="All" onChange={this.onChangeStatus} required>
                                                    <option value="All">All</option>
                                                    <option value="Belum Bayar">Belum Bayar</option>
                                                    <option value="Batal">Batal</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div className="form-group">
								         	<button type="submit" id="tapis" className="btn btn-info btn-sm waves-effect waves-light">Carian</button>
								        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="col-md-12">
                    <div className="card">
                        <div className="card-header">
                            <h5>Senarai Kompaun</h5>
                            {  this.state.dataCompound.length > 0 ?
                                <ExportCSV csvData={this.state.dataCompound} fileName="Report_saman_1" type={this.state.form.type} />
                                : ''
                            }
                        </div>
                        <div className="card-block contact-details">
                            { this.state.loading !== 'null' ? 
                                !this.state.loading ?
                                    this.state.form.type === 'Parkir' ?
                                        <DatatableParkir data={this.state.dataCompound} url={this.state.current_url} current_id={this.state.current_id} />
                                        :
                                        <DatatablePelbagai data={this.state.dataCompound} url={this.state.current_url} current_id={this.state.current_id}/>
                                    :
                                    <div className='sweet-loading' style={{'textAlign':'center'}}>
                                        <ClipLoader
                                            style={{'border-color': 'red'}}
                                            sizeUnit={"px"}
                                            size={50}
                                            color={'#123abc'}
                                           loading={this.state.loading}
                                         />
                                    </div>
                                        
                                : ''
                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('newcompound')) {
    const component = document.getElementById('newcompound');
    const props = Object.assign({}, component.dataset)
    ReactDOM.render(<NewCompoundDataTable {...props} />, component);
}