PTB-fe/components/Sanksi/TablePenetapanSanksi.js

import React, { Component } from "react";
import { Card, Table } from "reactstrap";
import { getPelanggaran } from "@/actions/pelanggaran";
import { connect } from "react-redux";
import Button from "reactstrap/lib/Button";
import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
import Router from "next/router";
import { ToastContainer, toast } from "react-toastify";



export class TablePenetapanSanksi extends Component {
	checkedData = [];

	constructor(props) {
		super(props);
		this.state = {
			pelanggaran: null,
			checkedData: [],
			labelSanksi: [],
			btnDelegasi: false,

		};
	}

	componentDidMount = async () => {
		const { token } = this.props;
		const pelanggaran = await getPelanggaran(token);
		this.setState({ pelanggaran });
	};

	onHandleChange = (evt) => {
		const checked = evt.target.checked;
		const item = evt.target.value;
		if (checked) this.checkedData.push(evt.target.value);
		else this.checkedData = this.checkedData.filter((e) => e != item);
		this.props.setCheckedData(this.checkedData);
	};

	setLabelSanksi = (evt, label_sanksi) => {
		const checked = evt.target.checked;
		const item = evt.target.value;
		if (checked && label_sanksi === "Ringan") this.state.labelSanksi.push({ value: item, labelSanksi: label_sanksi });
		else if (label_sanksi === "Ringan") this.state.labelSanksi = this.state.labelSanksi.filter((e) => e.value != item);
		console.log(this.state.labelSanksi)
	}

	// handleDelegasi = async (value) => {
	// 	const { token, query, data } = this.props;
	// 	let update = null;
	// 	if (this.state.labelSanksi.length > 0) {
	// 		data.change_role = "true";
	// 		data.keterangan = "delegasi ke LLDIKTI"
	// 		update = await updateLaporan(token, query, data);
	// 		Router.push("/app/sanksi");
	// 	}

	// }

	handleDelegasi = async (e) => {
		const toastid = toast.loading("Please wait...");
		const { query, token, data } = this.props;
		data.change_role = "true";
		data.keterangan = "delegasi ke LLDIKTI"
		await updateLaporan(token, query, data);
		toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
		Router.push({
			pathname: "/app/sanksi",
		});
	};






	render() {
		const { pelanggaran, labelSanksi } = this.state;

		return (
			<Card className="card-default">
				<Table bordered hover responsive>
					<thead>
						<tr>
							<th>No</th>
							<th>Jenis Pelanggaran</th>
							<th>Sanksi</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						{pelanggaran
							? pelanggaran.data.map((jp, index) => (
								<tr key={jp._id}>
									<td>
										<label>{index + 1}</label>
									</td>
									<td>
										<div className="media align-items-center">
											<div className="media-body d-flex">
												<div>
													<p>{jp.pelanggaran}</p>
													{/* <p>TMT : {jp.tmt_bulan} Bulan</p> */}
													<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
												</div>
											</div>
										</div>
									</td>
									<td>
										<div className="media align-items-center">
											<div className="media-body d-flex">
												<div>
													<p>{jp.sanksi}</p>
													<p>Keterangan : {jp.keterangan_sanksi}</p>
												</div>
											</div>
										</div>
									</td>
									<td>
										<div className="checkbox c-checkbox">
											<label>
												<input type="checkbox" value={jp._id} onChange={(evt) => {
													this.onHandleChange(evt)
													this.setLabelSanksi(evt, jp.label_sanksi)
												}} />
												<span className="fa fa-check"></span>
											</label>
										</div>
									</td>
								</tr>
							))
							: ""}
					</tbody>
				</Table>
				{
					labelSanksi.length &&
					<Button className="btn-login" color onClick={this.handleDelegasi} >
						<span className="font-color-white">
							Delegasi ke LLDIKTI
						</span>
					</Button>

				}
			</Card>
		);
	}
}

const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(TablePenetapanSanksi);