|
|
@@ -1,89 +1,37 @@
|
|
|
import React, { Component } from "react";
|
|
|
import { Card, Table } from "reactstrap";
|
|
|
+import { getPelanggaran } from "@/actions/pelanggaran";
|
|
|
|
|
|
export class TablePenetapanSanksi extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
- hisJenisPelanggaran: [],
|
|
|
+ checkedData: [],
|
|
|
tbljenisPelanggaran: [],
|
|
|
+ pelanggaran: null,
|
|
|
};
|
|
|
}
|
|
|
- handleApplyClick = () => {
|
|
|
- const _noSangsi = document.getElementById("noSangsi").value;
|
|
|
|
|
|
- const _hisJP = [];
|
|
|
- //Get data for filter by checked
|
|
|
- this.state.tbljenisPelanggaran.filter((_jp) => _jp.checked == true).map((selectedPelanggaran) => _hisJP.push(selectedPelanggaran));
|
|
|
-
|
|
|
- this.state.hisJenisPelanggaran = [];
|
|
|
- this.state.hisJenisPelanggaran.push({
|
|
|
- noSangsi: _noSangsi,
|
|
|
- pelanggaran: _hisJP,
|
|
|
- });
|
|
|
-
|
|
|
- console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran);
|
|
|
+ componentDidMount = async () => {
|
|
|
+ const pelanggaran = await getPelanggaran();
|
|
|
+ this.setState({ pelanggaran });
|
|
|
};
|
|
|
- // handle particular changes on each checkbox
|
|
|
- onHandleChange(listName, index) {
|
|
|
- //set state to checkbox and data in promise mode
|
|
|
- this.setState({
|
|
|
- [listName]: this.state[listName].map((item, i) => (index !== i ? item : { ...item, checked: !this.state[listName][index].checked })),
|
|
|
- });
|
|
|
- }
|
|
|
|
|
|
- renderTableData = () => {
|
|
|
- return this.state.tbljenisPelanggaran.map((jp, index) => {
|
|
|
- return (
|
|
|
- <tr>
|
|
|
- <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.TMTBulan} Bulan</p>
|
|
|
- <p>Level Pelanggaran : {jp.LabelSangsi}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <div className="media align-items-center">
|
|
|
- <div className="media-body d-flex">
|
|
|
- <div>
|
|
|
- <p>{jp.Sangsi}</p>
|
|
|
- <p>Keterangan : {jp.KeteranganSangsi}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <div className="checkbox c-checkbox">
|
|
|
- <label>
|
|
|
- {/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
|
|
|
- <input
|
|
|
- //name="cb"{jp.idPelanggaran}
|
|
|
- type="checkbox"
|
|
|
- // checked={
|
|
|
- // jp.checked=true
|
|
|
- // }
|
|
|
- checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
|
|
|
- //{this.state.listA[0].checked}
|
|
|
- onChange={(e) => this.onHandleChange("tbljenisPelanggaran", jp.idPelanggaran)}
|
|
|
- />
|
|
|
- <span className="fa fa-check"></span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- );
|
|
|
- });
|
|
|
+ onHandleChange = (index) => {
|
|
|
+ const { pelanggaran, checkedData } = this.state;
|
|
|
+ this.setState((prevState) => ({
|
|
|
+ ...prevState,
|
|
|
+ pelanggaran: {
|
|
|
+ data: prevState.pelanggaran.data.map((item, i) => (index !== i ? item : { ...item, checked: !pelanggaran.data[index].checked })),
|
|
|
+ },
|
|
|
+ }));
|
|
|
+ this.setState({ checkedData: pelanggaran.data.filter((e) => e.checked) });
|
|
|
+ // prevState.data.map((item, i) => (index !== i ? item : { ...item, checked: !pelanggaran.data[index].checked }));
|
|
|
+ console.log(checkedData);
|
|
|
};
|
|
|
|
|
|
render() {
|
|
|
+ const { pelanggaran } = this.state;
|
|
|
return (
|
|
|
<Card className="card-default">
|
|
|
<Table bordered hover responsive>
|
|
|
@@ -95,7 +43,46 @@ export class TablePenetapanSanksi extends Component {
|
|
|
<th></th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
- <tbody>{this.renderTableData()}</tbody>
|
|
|
+ <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.TMTBulan} Bulan</p>
|
|
|
+ <p>Level Pelanggaran : {jp.LabelSangsi}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div className="media align-items-center">
|
|
|
+ <div className="media-body d-flex">
|
|
|
+ <div>
|
|
|
+ <p>{jp.Sangsi}</p>
|
|
|
+ <p>Keterangan : {jp.KeteranganSangsi}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div className="checkbox c-checkbox">
|
|
|
+ <label>
|
|
|
+ <input type="checkbox" onChange={(e) => this.onHandleChange(index)} />
|
|
|
+ <span className="fa fa-check"></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ ))
|
|
|
+ : ""}
|
|
|
+ </tbody>
|
|
|
</Table>
|
|
|
</Card>
|
|
|
);
|