sipadu_mbip/resources/js/components/DatatableKT.js

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

export default class DatatableKT 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="compoundKT" className="table table-sm table-striped table-bordered nowrap" width="100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Kpd</th>
                                <th>Jenis</th>
                                <th>Tarikh Masa</th>
                                <th>Kesalahan</th>
                                <th width="110">Kadar Kompaun</th>
                                <th>Nric</th>
                                <th>Nama</th>
                                <th>PenguatKuasa</th>
                                <th>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.nric}</td>
                                            <td>{item.nama}</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="11" 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 width="110">Kadar Kompaun</th>
                                <th>Nric</th>
                                <th>Nama</th>
                                <th>PenguatKuasa</th>
                                <th>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>
        )
    }
}