sipadu_mbip/resources/js/components/DatatableParkir.js

import React, { Component } from 'react';
import { Modal } from 'react-bootstrap';
import ClipLoader from 'react-spinners/ClipLoader';
import axios from 'axios';

export default class DatatableParkir extends Component {

	constructor(props) {
		super(props);
		this.state = { 
			data: props.data, 
			currentUrl: props.url,
			showModal: false,
			processing: false,
			responseMessage: '',
			form : {
				current_id: props.current_id,
                id: '',
                status: 'Belum Bayar',
                remark: '',
                amount: '',
            },
		};

		this.onSubmit = this.onSubmit.bind(this);
		this.onChangeStatus = this.onChangeStatus.bind(this);
        this.onChangeRemark = this.onChangeRemark.bind(this);
		this.onChangeAmount = this.onChangeAmount.bind(this);
		this.closeModal = this.closeModal.bind(this);
	}

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

	onUpdateStatus(e){
		this.setState(prevState => ({
            form: {
                ...prevState.form,
                id: e,
            }
        }));
		this.setState({ showModal: true }); 
	}

	closeModal() {
		this.setState({ showModal: false });
	}

	onSubmit(e){
		e.preventDefault();

		let input = prompt("Adakah anda pasti kemaskini status kompaun ini? \nTaip 'yes' untuk teruskan", "");
		if (input == "yes") {
			this.setState({ processing: true });
			let formData = this.state.form;
			axios.post("/api/update/compound/via-dashboard", formData).then(response => {
                if (response.data.success) {
					fetch(this.state.currentUrl).then(response => {
						response.json().then(res => {
							this.setState({ processing: false });
							this.setState({ data: res.data, showModal: false });
						})
					})
					this.setState({ responseMessage: response.data.message });
					alert(response.data.message);
                }else{
                    alert(response.data.message);
                    this.setState({ showModal: false, processing: false, responseMessage: response.data.message });
				}   
            }).catch(error =>{
               console.log(error);
            });
		}else{
			alert('Kemaskini status dibatalkan');
			this.setState({ showModal: false }); 
		}
	}

	render() {
		return(
			<div>
				<div className="data_table_main dt-responsive table-responsive">
					<table id="compoundParkir" className="table table-sm table-striped table-bordered nowrap dataTable" width="100%">
						<thead>
							<tr>
								<th>#</th>
								<th>Kpd</th>
								<th>Jenis</th>
								<th>Tarikh Masa</th>
								<th>Kesalahan</th>
								<th>Kadar Kompaun</th>
								<th>No Plat</th>
								<th>PenguatKuasa</th>
								<th width="110">Status</th>
								<th>Tindakan</th>
							</tr>
						</thead>
						<tbody>
							{   this.state.data.length > 0 ?
									this.state.data.map((item,i) => 
										<tr key={i}>
											<td>
												{item.DT_RowIndex}
											</td>
											<td>
												{item.index !== "" ?<div><small className='label label-success'>{item.index}</small>&nbsp;{item.kpd}</div> : <div>{item.kpd}</div>}
											</td>
											<td>{item.jenis}</td>
											<td>{item.tarikh_masa}</td>
											<td>Seksyen {item.kesalahan.sketr} <br/> {item.kesalahan.nama}</td>
											<td>{item.jumlah_kemaskini_kompaun !== "" ? <div>{item.jumlah_kemaskini_kompaun}</div> : <div>{item.jumlah_asal_kompaun}</div>}</td>
											<td>{item.no_plate}</td>
											<td>{item.enforcer.no_badan}, {item.enforcer.full_name}</td>
											<td>
												{
													item.catatan_dari_admin !== null ?
														item.status !== "Belum Bayar" ?
														<div>
															<div><b>{item.status}</b></div>
															<div style={{ "marginTop": "8px"}}>
																<span>Bayaran: </span><br/>
																RM {item.amount_payment}
															</div>
															<div style={{ "marginTop": "8px"}}>
																<span>Catatan: </span><br/>
																{item.catatan_dari_admin}
															</div>
															<div style={{ "marginTop": "8px"}}>
																<span>Kemaskini: </span><br/>
																{item.updated_at} <br/>
																{item.updated_by !== null ?
																	<div>{item.updated_by.no_badan}</div>
																	: ""
																}
															</div>
														</div>
														:
														<div>
															<div><b>{item.status}</b></div>
															<div style={{ "marginTop": "8px"}}>
																<span>Catatan: </span><br/>
																{item.catatan_dari_admin}
															</div>
															<div style={{ "marginTop": "8px"}}>
																<span>Kemasikini: </span><br/>
																{item.updated_at} <br/>
																{item.updated_by !== null ?
																	<div>{item.updated_by.no_badan}</div>
																	: ""
																}
															</div>
														</div>
													:
													<div><b>{item.status}</b></div>
												}
											</td>
											<td style={{ "textAlign": "center" }}>
												<a href={"/main/compound/"+item.kpd+"/index"} className="btn btn-info btn-sm waves-effect waves-light">
													TERUSKAN
												</a>
												<button data-toggle="modal" data-target="#ajaxModel" onClick={this.onUpdateStatus.bind(this, item._id)} className="btn btn-primary btn-sm waves-effect waves-light">
													KEMASKINI STATUS
												</button>
												<a href={"/main/edit/compound/"+item._id} className="btn btn-danger btn-sm waves-effect waves-light">
													KEMASKINI
												</a> 
											</td>
										</tr>
									)
								:
								<tr>
									<td colSpan="10" style={{ "textAlign": "center" }}>Tiada Data Ditemui</td>
								</tr>
							}
						</tbody>
						<tfoot>
							<tr>
								<th>#</th>
								<th>Kpd</th>
								<th>Jenis</th>
								<th>Tarikh Masa</th>
								<th>Kesalahan</th>
								<th>Kadar Kompaun</th>
								<th>No Plat</th>
								<th>PenguatKuasa</th>
								<th width="110">Status</th>
								<th>Tindakan</th>
							</tr>
						</tfoot>
					</table>
				</div>

				<Modal size="lg" show={this.state.showModal} onHide={this.closeModal}>
					<form className="form-horizontal" onSubmit={this.onSubmit}>
						<Modal.Header closeButton>
							<Modal.Title>Kemaskini Status Kompaun</Modal.Title>
						</Modal.Header>
						<Modal.Body>
							<div className="modal-body">

							{!this.state.processing ?
                            	''
                            :
                               <div className='sweet-loading' style={{'textAlign':'center'}}>
                                    <ClipLoader
                                        style={{'border-color': 'red'}}
                                        sizeUnit={"px"}
                                        size={50}
                                        color={'#123abc'}
                                        loading={this.state.processing}
                                    />
                                </div>
							}
												
								<input type="hidden" name="compound_id" id="compound_id" value={this.state.form.id} />
								<div className="form-group">
									<label className="col-sm-6 control-label"><b>Status</b></label>
									<div className="col-sm-12">
										<select className="form-control" required value={this.state.form.status} onChange={this.onChangeStatus}>
											<option key="Belum Bayar" value="Belum Bayar">Belum Bayar</option>
											<option key="Berbayar" value="Berbayar">Berbayar</option>
											<option key="Batal" value="Batal">Batal</option>
										</select>
									</div>
								</div>

								<div className="form-group">
									<label className="col-sm-6 control-label"><b>Catatan <code>*</code></b></label>
									<div className="col-sm-12">
										<textarea className="form-control"  value={this.state.form.remark} onChange={this.onChangeRemark}/>
									</div>
								</div>
								
								<div className="form-group">
									<label className="col-sm-6 control-label"><b>Jumlah Dibayar <code>*</code></b></label>
									<div className="col-sm-12">
										<input type="number" steps="0.00" className="form-control" placeholder="0.0" value={this.state.form.amount} onChange={this.onChangeAmount} required/>
									</div>
								</div>
							</div>	
						</Modal.Body>
						<Modal.Footer>
							<button type="button" className="btn btn-sm btn-default waves-effect" onClick={this.closeModal}>Close</button>
							<button type="submit" className="btn btn-sm btn-primary waves-effect waves-light">KEMASKINI</button>
						</Modal.Footer>
					</form>
				</Modal>
			</div>
		)
	}
}