commit

actions/pelanggaran.js

@@ -1,3 +1,25 @@
+export const getPelanggaranId = async (id) => {
+	try {
+		const data = { id };
+		const myHeaders = new Headers();
+		myHeaders.append("Content-Type", "application/json");
+
+		const raw = JSON.stringify(data);
+
+		const requestOptions = {
+			method: "POST",
+			body: raw,
+			headers: myHeaders,
+		};
+
+		const res = await fetch("http://localhost:5000/pelanggaran", requestOptions);
+		return await res.json();
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
 export const getPelanggaran = async () => {
 	try {
 		const res = await fetch("http://localhost:5000/pelanggaran");

components/Sanksi/Ringkasan.js

@@ -1,8 +1,8 @@
+import { useEffect, useState } from "react";
 import Scrollable from "@/components/Common/Scrollable";
 import { Card, Row, Col, Table, FormGroup } from "reactstrap";
 
-function Ringkasan({ dataLaporan, dataSanksi, dataUpload }) {
-	console.log(dataUpload);
+function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 	return (
 		<>
 			<Row>
@@ -63,32 +63,34 @@ function Ringkasan({ dataLaporan, dataSanksi, dataUpload }) {
 								</tr>
 							</thead>
 							<tbody>
-								{dataSanksi.map((e, i) => (
-									<tr>
-										<td>{++i}</td>
-										<td>
-											<div className="media align-items-center">
-												<div className="media-body d-flex">
-													<div>
-														<p>Pengelolaan perguruan tinggi tidak berprinsip nirlaba</p>
-														<p>TMT : 6 Bulan</p>
-														<p>Level Pelanggaran : Berat</p>
+								{dataPelanggaran
+									? dataPelanggaran.map((e, i) => (
+											<tr key={e._id}>
+												<td>{++i}</td>
+												<td>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<p>{e.pelanggaran}</p>
+																<p>TMT : {e.tmt_bulan} Bulan</p>
+																<p>Level Pelanggaran : {e.label_sanksi}</p>
+															</div>
+														</div>
 													</div>
-												</div>
-											</div>
-										</td>
-										<td>
-											<div className="media align-items-center">
-												<div className="media-body d-flex">
-													<div>
-														<p>Penghentian pembinaan</p>
-														<p>Keterangan : Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan</p>
+												</td>
+												<td>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<p>{e.sanksi}</p>
+																<p>Keterangan : {e.keterangan_sanksi}</p>
+															</div>
+														</div>
 													</div>
-												</div>
-											</div>
-										</td>
-									</tr>
-								))}
+												</td>
+											</tr>
+									  ))
+									: ""}
 							</tbody>
 						</Table>
 					</Card>

components/Sanksi/TablePenetapanSanksi.js

@@ -3,11 +3,13 @@ import { Card, Table } from "reactstrap";
 import { getPelanggaran } from "@/actions/pelanggaran";
 
 export class TablePenetapanSanksi extends Component {
+	checkedData = [];
+
 	constructor(props) {
 		super(props);
 		this.state = {
-			tbljenisPelanggaran: [],
 			pelanggaran: null,
+			// checkedData: [],
 		};
 	}
 
@@ -16,15 +18,12 @@ export class TablePenetapanSanksi extends Component {
 		this.setState({ pelanggaran });
 	};
 
-	onHandleChange = (index) => {
-		const { pelanggaran } = this.state;
-		this.setState((prevState) => ({
-			...prevState,
-			pelanggaran: {
-				data: prevState.pelanggaran.data.map((item, i) => (index !== i ? item : { ...item, checked: !pelanggaran.data[index].checked })),
-			},
-		}));
-		this.props.setCheckedData(pelanggaran.data.filter((e) => e.checked));
+	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);
 	};
 
 	render() {
@@ -71,7 +70,7 @@ export class TablePenetapanSanksi extends Component {
 										<td>
 											<div className="checkbox c-checkbox">
 												<label>
-													<input type="checkbox" onChange={(e) => this.onHandleChange(index)} />
+													<input type="checkbox" value={jp._id} onChange={this.onHandleChange} />
 													<span className="fa fa-check"></span>
 												</label>
 											</div>

pages/app/sanksi/proses.js

@@ -12,6 +12,7 @@ import TablePenetapanSanksi from "@/components/Sanksi/TablePenetapanSanksi";
 import Link from "next/link";
 import { getPelaporan } from "@/actions/pelaporan";
 import { createSanksi } from "@/actions/sanksi";
+import { getPelanggaranId } from "@/actions/pelanggaran";
 
 const stepNavitemStyle = {
 	backgroundColor: "#fcfcfc",
@@ -22,8 +23,8 @@ class ProsesSanksi extends Component {
 		super(props);
 		this.state = {
 			activeStep: "1",
-			checkedData: [],
 			dataUpload: null,
+			dataPelanggaran: {},
 		};
 	}
 
@@ -45,7 +46,6 @@ class ProsesSanksi extends Component {
 			});
 		}
 		const create = await createSanksi({ ptId, number }, formdata);
-		// console.log(create);
 		if (create) {
 			Router.push({
 				pathname: "/app/sanksi",
@@ -61,8 +61,9 @@ class ProsesSanksi extends Component {
 		}
 	};
 
-	setCheckedData = (data) => {
-		this.setState({ checkedData: data });
+	setCheckedData = async (data) => {
+		const result = await getPelanggaranId(data);
+		this.setState({ dataPelanggaran: result });
 	};
 
 	setUploadSuratSanksi = (data) => {
@@ -71,7 +72,7 @@ class ProsesSanksi extends Component {
 
 	render() {
 		const { pelaporan } = this.props;
-		const { checkedData, dataUpload } = this.state;
+		const { dataUpload, dataPelanggaran } = this.state;
 		return (
 			<ContentWrapper unwrap>
 				<Header />
@@ -212,7 +213,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="5">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
-												<Ringkasan dataLaporan={pelaporan.data[0]} dataSanksi={checkedData} dataUpload={dataUpload} />
+												<Ringkasan dataLaporan={pelaporan.data[0]} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} />
 											</div>
 											<hr />
 											<div className="d-flex">