ptb-fe/components/Sanksi/DetailSanksi.js

import Scrollable from "@/components/Common/Scrollable";
import moment from "moment";
import { Col, FormGroup, Table, Button } from "reactstrap";
import { API_URL } from "@/env";
import React, { Component } from "react";
import { getOneSanksi } from "../../actions/sanksi";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
import ComponentBA from "../Sanksi/SuratBA _detail";
import Link from "next/dist/client/link";
import { connect } from "react-redux";
import Swal from "sweetalert2";





class DetailSanksi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			sanksi: {},
		};
	}

	static getInitialProps = async ({ query }) => {
		return { query };
	};

	componentDidMount = async () => {
		const { query, token } = this.props;
		const sanksi = await getOneSanksi(token, query.id);
		this.setState({ sanksi });
	};
	handleOpenAlert = () => {
		Swal.fire({
			icon: 'error',
			title: 'Oops...',
			html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
			confirmButtonColor: "#3e3a8e",
			confirmButtonText: 'Oke'
		})
	};


	render() {
		const { sanksi } = this.state
		const lastSanksi = sanksi.data?.sanksi?.at(-1);
		return (
			<>
				<p className="lead bb">Detail Sanksi</p>
				{sanksi.data &&
					<form className="form-horizontal">
						<FormGroup row>
							<Col md="4">Nomor Sanksi:</Col>
							<Col md="8">
								<strong>{sanksi.data.no_sanksi}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Nama Perguruan Tinggi:</Col>
							<Col md="8">
								<strong>{sanksi.data.laporan.pt.nama}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Keterangan:</Col>
							<Col md="8">
								<Scrollable height="100px" className="list-group">
									<p>{sanksi.data.keterangan}</p>
								</Scrollable>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Tanggal Penetapan Sanksi:</Col>
							<Col md="8">
								<strong>{sanksi.data?.masa_berlaku?.from_date ? moment(sanksi.data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY") : "-"}</strong>
							</Col>
						</FormGroup>
						{
							sanksi.data.tanggal_akhir_keberatan &&
							<FormGroup row>
								<Col md="4">Tanggal Akhir Pengajuan Keberatan</Col>
								<Col md="8">
									<strong>{moment(sanksi.data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
								</Col>
							</FormGroup>
						}
						{
							sanksi.data.jawaban?.keberatan?.tanggal_akhir_banding &&
							<FormGroup row>
								<Col md="4">Tanggal Akhir Pengajuan Banding:</Col>
								<Col md="8">
									<strong>{moment(sanksi.data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("D MMMM YYYY")}</strong>
								</Col>
							</FormGroup>
						}
						<FormGroup row>
							<Col md="4">Dokumen Sanksi:</Col>
							<Col md="8">
								<Scrollable height="120px" className="list-group">
									<table className="table table-bordered bg-transparent">
										<tbody>
											{sanksi.data.dokumen.map((e) => (
												<tr>
													<td style={{ width: "30px" }}>
														<em className="fa-lg far fa-file-code"></em>
													</td>
													<td>
														{this.props?.user?.role.id === 2071 ?
															<a className="text-muted" onClick={this.handleOpenAlert} >
																{e.judul}
															</a>
															:
															<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
																{e.judul}
															</a>

														}

													</td>
												</tr>
											))}
										</tbody>
									</table>
								</Scrollable>
							</Col>
						</FormGroup>

						<FormGroup row>
							<Col md="4">Dokumen Acara Pleno:</Col>
							<Col md="8">
								<div>
									{this.props?.user?.role.id === 2071 ?
										<Button color className="btn-labeled-4 mt-0" onClick={this.handleOpenAlert}>
											<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
										</Button>
										:
										<ReactToPrint
											trigger={() => {
												return <span>
													<Link
														href={{
															pathname: "/app/sanksi/detail",
															query: { id: this.props.query.id },
														}}>
														<Button color className="btn-labeled-4 mt-0">
															<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
														</Button>
													</Link>
												</span>
											}}
											content={() => this.componentRef}
										/>
									}

									<div style={{ display: "none" }}>
										<ComponentBA ref={el => (this.componentRef = el)} query={this.props.query} />
									</div>
								</div>

							</Col>
						</FormGroup>
							<FormGroup row>
									<Col md={12}>
										<div className="card b">
											<div className="card-body bb">
												<Table responsive>
													<thead>
														<tr>
															<th>Jenis Pelanggaran</th>
															<th>Sanksi</th>
														</tr>
													</thead>
													<tbody>
														{sanksi.data.pelanggaran.map((jp, index) => (
															<tr key={jp._id}>
																<td width={50}>
																	<div className="media align-items-center">
																		<div className="media-body d-flex">
																			<div>
																				<p>{jp.pelanggaran}</p>
																				<p>Durasi : {jp.tmt_bulan} Bulan</p>
																				<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
																			</div>
																		</div>
																	</div>
																</td>
																<td width={50}>
																	<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>
															</tr>
														))}
													</tbody>
												</Table>
											</div>
										</div>
									</Col>
								</FormGroup>
						{
							sanksi.data.riwayat_sanksi?.length ? (
								<FormGroup row>
									<Col md={12}>
										<div className="card b">
											<div className="card-body bb">
												<Table responsive>
													<thead>
														<tr>
															<th>Sanksi Saat Ini</th>
														</tr>
													</thead>
													<tbody>
														{lastSanksi && (
															<tr key={lastSanksi._id}>
																<td width={50}>
																	<div className="media align-items-center">
																		<div className="media-body d-flex">
																			<div>
																				<p>{lastSanksi.description}</p>
																				<p>
																					Durasi : {moment(sanksi.data?.masa_berlaku?.to_date).diff(sanksi.data?.masa_berlaku?.from_date, 'month')} Bulan
																				</p>
																				<p>Jenis Sanksi Administratif : {lastSanksi.label}</p>
																			</div>
																		</div>
																	</div>
																</td>
																<td width={50}></td>
															</tr>
														)}
													</tbody>
												</Table>
											</div>
										</div>
									</Col>
								</FormGroup>
							) : (
								""
							)
						}
					</form>
				}

			</>
		)
	}



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