ptb-fe/components/Sanksi/UploadSurat.js

import React, { Component } from "react";
import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";
import Select from "react-select";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// import "react-datepicker/dist/react-datepicker.css";
import ms from "ms";
import { addDays, addMonths } from 'date-fns';
import id from 'date-fns/locale/id';
// registerLocale('id', id)
import { getAutoSave, inputAutoSave } from "@/actions/autosave";
import ComponentToPrint from "./SuratBA_A";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
import Link from "next/dist/client/link";

let Dropzone = null;
class DropzoneWrapper extends Component {
	state = {
		isClient: false,
	};
	componentDidMount = () => {
		Dropzone = require("react-dropzone").default;
		this.setState({ isClient: true });
	};
	render() {
		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
	}
}
const formatOptionLabel = ({ value, sanksi, label_sanksi }) => (
	<div style={{ display: "flex" }}>
		<span className="">{value}</span>
		<div style={{ marginLeft: "10px", color: "#adaca8" }}>{label_sanksi}</div>
	</div>
);

export class UploadSurat extends Component {
	constructor(props) {
		super(props);
		const tmt_awal = new Date();
		this.state = {
			files: [],
			nomorSanksi: "",
			keterangan: "",
			listSanksi: "",
			startDay: tmt_awal,
			maxDay: "",
			awalTMT: "",
			akhirTMT: "",
			tidakPerluTMTCheck: false,
			terimaSuratSanksi: "",
			tglAkhirKeberatan: "",
			filesTandaTerimaSS: [],
			selectedFile: {}

		};
	}

	onDrop = (selectedFile) => {
		this.setState({
			selectedFile: selectedFile.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "Added " + selectedFile.length + " file(s)",
		});
		const selectFile = this.state.selectedFile
		this.setState(prevState => ({
			files: [...prevState.files, ...selectFile]
		}))
	};
	onDropTandaTerimaSS = (filesTandaTerimaSS) => {
		this.setState({
			filesTandaTerimaSS: filesTandaTerimaSS.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "file tanda terima sanksi " + filesTandaTerimaSS.length + " file",
		});
		this.props.setUploadSuratSanksi(this.state);
	};

	componentDidMount = async () => {
		const { query, token } = this.props;
		const { id } = query;
		// const getDataSave = await getAutoSave({ id, laporan: true });
		// const autosaveDataUpload = getDataSave.data?.PenetapanSanksi?.dataUpload;
		// this.setState(autosaveDataUpload)
	}

	clearFiles = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
		});
		this.setState({
			files: [],
		});
		this.props.setUploadSuratSanksi(this.state);
	};
	clearFilesTerimaSanksi = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.filesTandaTerimaSS.length ? this.state.filesTandaTerimaSS.length + " file(s) cleared." : "No files to clear.",
		});
		this.setState({
			filesTandaTerimaSS: [],
		});
		this.props.setUploadSuratSanksi(this.state);
	};

	// handleAutoSave = () => {
	// 	this.props.handleAutoSave()
	// }

	setUploadSuratSanksi = () => {
		this.props.setUploadSuratSanksi(this.state);
	};

	setNomorSanksi = (e) => {
		// this.setState({ nomorSanksi: e.target.value }, this.setUploadSuratSanksi);
		this.state.nomorSanksi = e.target.value
		this.setUploadSuratSanksi()
		// this.handleAutoSave()

	};

	setKeterangan = (e) => {
		// this.setState({ keterangan: e.target.value }, this.setUploadSuratSanksi);
		this.state.keterangan = e.target.value
		this.setUploadSuratSanksi()
		// this.handleAutoSave()
	};
	setAkhirSanksi = (akhirTMT) => {
		// this.setState({ keterangan: e.target.value }, this.setUploadSuratSanksi);
		this.state.akhirTMT = akhirTMT
		this.setUploadSuratSanksi()
		// this.handleAutoSave()
	};

	setListSanksi = (ls) => {
		this.setState({ listSanksi: ls.target.value }, this.setUploadSuratSanksi);
	};
	handleChangeListSanksi = (listSanksi) => {
		this.setState({ listSanksi }, this.setUploadSuratSanksi);
	};
	handleTmtCheck = () => {
		// this.setState({ tmtCheck: !this.state.tmtCheck }, this.setUploadSuratSanksi);
		this.state.tidakPerluTMTCheck = !this.state.tidakPerluTMTCheck
		this.setUploadSuratSanksi()
		// this.handleAutoSave()
	}
	render() {
		const { files, terimaSuratSanksi, tglAkhirKeberatan, filesTandaTerimaSS, tidakPerluTMTCheck } = this.state;
		const removeFile = file => () => {
			const newFiles = [...files]
			newFiles.splice(newFiles.indexOf(file), 1)
			this.setState({
				files: newFiles,
			});
		}
		const removeFileTandaTerimaSS = file => () => {
			const newFiles = [...filesTandaTerimaSS]
			newFiles.splice(newFiles.indexOf(file), 1)
			this.setState({
				filesTandaTerimaSS: newFiles,
			});
		}
		const thumbs = files.map((file, index) => (
			<p>
				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
			</p>
		));
		const thumbsTandaTerimaSS = filesTandaTerimaSS.map((file, index) => (
			<p>
				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFileTandaTerimaSS(file)} />
			</p>
		));
		return (
			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
				<FormGroup row>
					<label className="col-md-4 col-form-label">Nomor Surat<span className="text-danger">*</span></label>
					<div className="col-md-8">
						<Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e) }} />
					</div>
				</FormGroup>
				<FormGroup row className="mt-3">
					<label className="col-md-4 col-form-label">Keterangan<span className="text-danger">*</span></label>
					<div className="col-md-8">
						<Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e) }} required />
					</div>
				</FormGroup>
				<FormGroup row>
					<label className="col-md-4 col-form-label">Tidak Perlu TMT</label>
					<div className="col-md-8 mt-2">
						<div className="checkbox c-checkbox">
							<label>
								<Input type="checkbox" onChange={() => this.handleTmtCheck()} defaultChecked={this.state.tidakPerluTMTCheck} />
								<span className="fa fa-check"></span></label>
						</div>
					</div>
				</FormGroup>
				{!this.state.tidakPerluTMTCheck && (
					<FormGroup row className="mt-3">
						<label className="col-md-4 col-form-label">Isi TMT</label>
						<Row >
							<Col>
								<FormGroup>
									<span className="ml-3">
										<DatePicker
											selected={this.state.awalTMT ? new Date(this.state.awalTMT) : this.state.awalTMT}
											onChange={(awalTMT) => {
												this.setState({ awalTMT }, this.setUploadSuratSanksi)
											}}
											dateFormat="dd/MM/yyyy"
											maxDate={new Date(this.state.startDay)}
											placeholderText="Dari Tanggal"
											locale={id}
											className="form-control bg-white"
										/>
									</span>

								</FormGroup>
							</Col>
							<Col>
								<FormGroup>
									<span className="ml-3">
										<DatePicker
											selected={this.state.akhirTMT ? new Date(this.state.akhirTMT) : this.state.akhirTMT}
											onChange={(akhirTMT) => { this.setAkhirSanksi(akhirTMT) }}
											dateFormat="dd/MM/yyyy"
											minDate={new Date(this.state.awalTMT)}
											maxDate={addMonths(new Date(this.state.awalTMT), 6)}
											placeholderText="Sampai tanggal"
											locale={id}
											className="form-control bg-white"
										/>
									</span>
								</FormGroup>
							</Col>
						</Row>
					</FormGroup>
				)}
				{!this.state.tidakPerluTMTCheck && (
					<FormGroup row className="mt-1">
						<label className="col-md-4 col-form-label">TMT berlaku</label>
						<div className="col-md-8 mt-2">
							<b>{this.state.awalTMT ? moment(this.state.awalTMT).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirTMT ? moment(this.state.akhirTMT).format("DD-MM-YYYY") : "-"}</b>
						</div>
					</FormGroup>
				)}
				{!this.state.tidakPerluTMTCheck && (
					<FormGroup row className="mt-1">
						<label className="col-md-4 col-form-label">TMT</label>
						<div className="col-md-8 mt-2">
							<b>{this.state.akhirTMT ? moment(this.state.akhirTMT).diff(this.state.awalTMT, 'month') : "-"} bulan</b>
						</div>
					</FormGroup>
				)}
				<FormGroup row className="mt-3">
					<label className="col-md-4 col-form-label">List sanksi </label>
					<div className="col-md-8">
						<Select
							options={this.props.listSanksi.map(e => ({ value: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
							isMulti
							formatOptionLabel={formatOptionLabel}
							onChange={(e) => {
								this.handleChangeListSanksi(e);
							}}
						/>
					</div>
				</FormGroup>
				<FormGroup row>
					<label className="col-md-4 col-form-label">
						Dokumen Surat Sanksi<span className="text-danger">*</span>
					</label>
					<div className="col-md-8">
						<DropzoneWrapper className="" onDrop={this.onDrop}>
							{({ getRootProps, getInputProps, isDragActive }) => {
								return (
									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
										<input {...getInputProps()} />
										<div className="dropzone-style-1">
											<div className="center-ver-hor dropzone-previews flex">
												{this.state.files.length > 0 ? (
													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
														<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
													</div>
												) : (
													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
														<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
													</div>
												)}
											</div>
										</div>
										<div className="d-flex align-items-center">
											<small className="ml-auto">
												<button type="button" className="btn btn-link" onClick={this.clearFiles}>
													Reset dokumen
												</button>
											</small>
										</div>
									</div>
								);
							}}
						</DropzoneWrapper>
						<div>
							{thumbs}
						</div>
						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
					</div>
				</FormGroup>
				<FormGroup row className="mt-3">
					<label className="col-md-4 col-form-label">Tanggal Terima Surat Sanksi<span className="text-danger">*</span></label>
					<span className="col-sm-3 float-left">
						<DatePicker
							selected={this.state.terimaSuratSanksi ? new Date(this.state.terimaSuratSanksi) : this.state.terimaSuratSanksi}
							onChange={(terimaSuratSanksi) => {
								this.setState({ terimaSuratSanksi }, this.setUploadSuratSanksi)
							}}
							dateFormat="dd/MM/yyyy"
							minDate={new Date(this.state.awalTMT)}
							placeholderText="Isi Tanggal"
							locale={id}
							className="form-control bg-white"
						/>
					</span>
				</FormGroup>
				<FormGroup row>
					<label className="col-md-4 col-form-label">
						Dokumen Tanda Terima Surat Sanksi<span className="text-danger">*</span>
					</label>
					<div className="col-md-8">
						<DropzoneWrapper className="" onDrop={this.onDropTandaTerimaSS}>
							{({ getRootProps, getInputProps, isDragActive }) => {
								return (
									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
										<input {...getInputProps()} />
										<div className="dropzone-style-1">
											<div className="center-ver-hor dropzone-previews flex">
												{this.state.filesTandaTerimaSS.length > 0 ? (
													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
														<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
													</div>
												) : (
													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
														<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
													</div>
												)}
											</div>
										</div>
										<div className="d-flex align-items-center">
											<small className="ml-auto">
												<button type="button" className="btn btn-link" onClick={this.clearFilesTerimaSanksi}>
													Reset dokumen
												</button>
											</small>
										</div>
									</div>
								);
							}}
						</DropzoneWrapper>
						<div>
							{thumbsTandaTerimaSS}
						</div>
						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
					</div>
				</FormGroup>
				{!this.state.tidakPerluTMTCheck && (
					<FormGroup row className="mt-3">
						<label className="col-md-4 col-form-label">Tanggal Akhir Pengajuan Keberatan<span className="text-danger">*</span>
							<p>
								Note : 21 hari kerja
							</p>
						</label>
						<span className="col-sm-8 float-left">
							<DatePicker
								selected={this.state.tglAkhirKeberatan ? new Date(this.state.tglAkhirKeberatan) : this.state.tglAkhirKeberatan}
								onChange={(tglAkhirKeberatan) => {
									this.setState({ tglAkhirKeberatan }, this.setUploadSuratSanksi)
								}}
								dateFormat="dd/MM/yyyy"
								minDate={new Date(terimaSuratSanksi)}
								placeholderText="DD/MM/YYYY "
								locale={id}
								className="form-control bg-white"
							/>
						</span>
					</FormGroup>
				)}
			</form >
		);
	}
}

export default UploadSurat;