ptb-fe/components/Sanksi/UploadSurat.js

import React, { Component } from "react";
import { Row, Col, Input, FormGroup } from "reactstrap";
import Select from "react-select";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import ms from "ms";
import TmtDate from "./TmtDate";
import { addDays, addMonths } from 'date-fns';

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 data = [
	{
		value: "Sanksi Administratif Sedang",
		// label_sanksi: "- Sanksi Administratif ringan"
	},
	{
		sanksi: "Penghentian Pembinaan PT",
		value: "Penghentian Pembinaan PT",
		label_sanksi: "- Sanksi Administratif Berat",
	},
	{
		sanksi: "Pencabutan Izin Perguruan Tinggi Swasta",
		value: "Pencabutan Izin Perguruan Tinggi Swasta",
		label_sanksi: "- Sanksi Administratif Berat",
	},
	{
		sanksi: "Penghentian Pembinaan Program Studi",
		value: "Penghentian Pembinaan Program Studi",
		label_sanksi: "- Sanksi Administratif Berat",
	},
	{
		sanksi: "Pencabutan Izin Program Studi",
		value: "Pencabutan Izin Program Studi",
		label_sanksi: "- Sanksi Administratif Berat",
	},
	{
		sanksi: "Pembubaran Perguruan Tinggi Negeri",
		value: "Pembubaran Perguruan Tinggi Negeri",
		label_sanksi: "- Sanksi Administratif Berat",
	},
];

const listSanksi = data.map((d) => ({
	value: d.value,
	label: d.sanksi,
	label_sanksi: d.label_sanksi,
}));
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: "",
			isiTmt: "",
			awalsanksi: "",
			akhirsanksi: "",
		};
	}

	onDrop = (files) => {
		this.setState({
			files: files.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "Added " + files.length + " file(s)",
		});
		this.props.setUploadSuratSanksi(this.state);
	};

	uploadFiles = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
		});
		this.props.setUploadSuratSanksi(this.state);
	};

	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);
	};

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

	setNomorSanksi = (e) => {
		this.setState({ nomorSanksi: e.target.value }, this.toRingkasan);
	};

	setKeterangan = (e) => {
		this.setState({ keterangan: e.target.value }, this.toRingkasan);
	};

	setListSanksi = (ls) => {
		this.setState({ listSanksi: ls.target.value }, this.toRingkasan);
	};
	handleChangeListSanksi = (listSanksi) => {
		this.setState({ listSanksi }, this.toRingkasan);
	};
	render() {
		const { files } = this.state;

		const thumbs = files.map((file, index) => (
			<div md={3} key={index}>
				<span className="text-left">
					{index + 1}. {file.name}
				</span>
			</div>
		));
		return (
			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
				<FormGroup row>
					<label className="col-md-2 col-form-label">Nomor Surat:</label>
					<div className="col-md-10">
						<Input type="text" value={this.state.nomorSanksi} onChange={this.setNomorSanksi} />
					</div>
				</FormGroup>
				<FormGroup row className="mt-3">
					<label className="col-md-2 col-form-label">Keterangan</label>
					<div className="col-md-10">
						<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
					</div>
				</FormGroup>
				<FormGroup row className="mt-3">
					<label className="col-md-2 col-form-label">Isi TMT</label>
					<span className="col-sm-3 float-left">
						<DatePicker
							selected={this.state.awalsanksi}
							onChange={(awalsanksi) => {
								this.setState({ awalsanksi }, this.toRingkasan)
							}}
							dateFormat="dd/MM/yyyy"
							maxDate={this.state.startDay}
							placeholderText="Dari Tanggal"
						/>
					</span>
					<span className="col-sm-3 float-right">
						<DatePicker
							selected={this.state.akhirsanksi}
							onChange={(akhirsanksi) => {
								this.setState({ akhirsanksi }, this.toRingkasan)
							}}
							dateFormat="dd/MM/yyyy"
							minDate={this.state.awalsanksi}
							maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
							placeholderText="Sampai tanggal"
						/>
					</span>
				</FormGroup>
				<FormGroup row className="mt-1">
					<label className="col-md-2 col-form-label">TMT berlaku</label>
					<div className="col-md-10 mt-2">
						<b>{this.state.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).format("DD-MM-YYYY") : "-"}</b>
					</div>
				</FormGroup>
				<FormGroup row className="mt-1">
					<label className="col-md-2 col-form-label">TMT</label>
					<div className="col-md-10 mt-2">
						<b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).diff(this.state.awalsanksi, 'month') : "-"} bulan</b>
					</div>
				</FormGroup>
				<FormGroup row className="mt-3">
					<label className="col-md-2 col-form-label">List sanksi </label>
					<div className="col-md-10">
						<Select
							options={listSanksi}
							formatOptionLabel={formatOptionLabel}
							isMulti
							onChange={(e) => {
								this.handleChangeListSanksi(e);
							}}
						/>
					</div>
				</FormGroup>
				<FormGroup row>
					<label className="col-md-2 col-form-label">
						Dokumen Surat Sanksi<span>: &nbsp;</span><span className="text-danger">*</span>
					</label>
					<div className="col-md-10">
						<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 ? (
													<Row>
														<span className="text-left">{thumbs}</span>
													</Row>
												) : (
													<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>
						<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
					</div>
				</FormGroup>
			</form>
		);
	}
}

export default UploadSurat;