PTB-fe/components/Pemeriksaan/InputEvaluasi.js

import React, { Component } from "react";
import { insertPemeriksaan } from "@/actions/pemeriksaan";
import Router from "next/router";
import Datetime from "react-datetime";
import moment from "moment";
import { Row, Col, FormGroup, Input, Button, Progress, Card } from "reactstrap";
import { ToastContainer, toast } from "react-toastify";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
import { connect } from "react-redux";
import { getCsrf } from "../../actions/security";
import Swal from "sweetalert2";
import Select from "react-select";



const selectInstanceId = 1;
const checkIfFilesAreTooBig = (files) => {
	let valid = true;
	if (files) {
		files.map((file) => {
			if (file.size > 15 * 1024 * 1024) {
				valid = false;
			}
		});
	}
	return valid;
};

const checkIfFilesAreCorrectType = (files) => {
	let valid = true;
	if (files) {
		files.map((file) => {
			if (!["image/jpeg", "image/png"].includes(file.type)) {
				valid = false;
			}
		});
	}
	return valid;
};

const evaluasiSchema = Yup.object().shape({
	tanggal: Yup.date().required("Wajib diisi"),
	judul: Yup.string().min(3).max(150).required("Wajib diisi"),
	dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
});

const ditutupSchema = Yup.object().shape({
	keterangan: Yup.string().required("Harus diisi"),
	dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
});
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 status = [
	{ value: "Evaluasi", label: "Evaluasi", className: "State-ACT" },
	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
];


class InputEvaluasi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dropdownOpen: false,
			splitButtonOpen: false,
			judulEvaluasi: "",
			tanggal: moment().format("D MMMM YYYY"),
			files: [],
			delegasichecklist: false,
			rolelldikti: false,
			selectedFile: {},
			selectedOption: null,
		};
	}

	async componentDidMount() {

		this.defaultStatus();

	}
	defaultStatus = async () => {
		return this.setState({ selectedOption: status[0] });
	};

	handleChangeSelect = (selectedOption) => this.setState({ selectedOption });

	getStatus = () => (status);

	setjudulEvaluasi = (e) => {
		this.setState({ judulEvaluasi: e.target.value });
	};

	setTanggal = (moment) => {
		this.setState({ tanggal: moment.format("D MMMM YYYY") });
	};

	toggleSplit = () => {
		this.setState({
			splitButtonOpen: !this.state.splitButtonOpen,
		});
	};

	toggleDropDown = () => {
		this.setState({
			dropdownOpen: !this.state.dropdownOpen,
		});
	};

	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.state.files.push(...this.state.selectedFile)
		// this.setState({
		// 	files: files.map((file) =>
		// 		Object.assign(file, {
		// 			preview: URL.createObjectURL(file),
		// 		})
		// 	),
		// 	stat: "Added " + files.length + " file(s)",
		// });
		this.setState(prevState => ({
			files: [...prevState.files, ...selectFile]
		}))
	};

	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.",
		});
	};

	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: [],
		});
	};

	onSubmit = async (data, { resetForm }) => {
		if (this.props?.user?.role.id === 2024) {
			Swal.fire({
				icon: 'error',
				title: 'Oops...',
				html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
				confirmButtonColor: "#3e3a8e",
				confirmButtonText: 'Oke'
			})
		} else {
			const getToken = await getCsrf();
			const _csrf = getToken.token;
			const { token, query } = this.props;
			const { id } = query;
			const formdata = new FormData();
			formdata.append("judul", data.judul);
			formdata.append("tanggal", data.tanggal);
			this.state.files.forEach((e) => {
				formdata.append("dokumen", e);
			});
			if (this.state.delegasichecklist == true) {
				await toast.promise(insertPemeriksaan(token, id, formdata, _csrf), {
					pending: "Loading",
					success: "Success",
					error: "Error",
					autoClose: 1000
				});

				data.change_role = "true";
				data.keterangan = "delegasi ke DIKTI"
				Router.push("/app/pemeriksaan");
				update = await updateLaporan(token, id, data);
			} else {
				await toast.promise(insertPemeriksaan(token, id, formdata, _csrf), {
					pending: "Loading",
					success: {
						render: "success",
						autoClose: 1000
					},
					error: "Error",

				});
				Router.push("/app/pemeriksaan");
			}
			this.setState({ files: [] });
			resetForm();
			const pelaporan = await getOneLaporan(token, query.id);
			this.props.changePelaporan(pelaporan);
		}

	};

	handlechecklist = () => {
		this.setState({ delegasichecklist: !this.state.delegasichecklist })
	};

	handleTutupLaporan = async (data, value) => {
		if (this.props?.user?.role.id === 2024) {
			Swal.fire({
				icon: 'error',
				title: 'Oops...',
				html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
				confirmButtonColor: "#3e3a8e",
				confirmButtonText: 'Oke'
			})
		} else {
			const getToken = await getCsrf();
			const _csrf = getToken.token;
			const { token, query } = this.props;
			const { id } = query;
			const formdata = new FormData();
			formdata.append("keterangan", data.keterangan);
			this.state.files.forEach((e) => {
				formdata.append("dokumen", e);
			});
			formdata.append("aktif", "false");
			// formdata.append("_csrf", _csrf)
			await toast.promise(updateLaporan(token, id, formdata, _csrf + `&redudansi=true`), {
				pending: "Loading",
				success: {
					render: "success",
					autoClose: 1000
				},
				error: "Error",

			});
			await Router.push({
				pathname: "/app/pemeriksaan",
			});
		}

	};


	render() {
		const { files, selectedOption } = this.state;
		const removeFile = file => () => {
			const newFiles = [...files]
			newFiles.splice(newFiles.indexOf(file), 1)
			this.setState({
				files: 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>
		));
		return (
			<>
				<Formik
					enableReinitialize={true}
					initialValues={{
						status: this.getStatus()[0],
						keterangan: "",
						dokumen: [],
					}}
					validationSchema={selectedOption?.value === this.getStatus()[1].value ? ditutupSchema : null}
					onSubmit={this.handleTutupLaporan}
				>
					{({ isSubmitting }) => (
						<Form>
							<FormGroup row>
								<label className="col-md-2 col-form-label font-weight-bold font-color-black">Status Laporan</label>
								<div className="col-md-10">
									<Field name="status">
										{({ field, form }) => (
											<Select
												value={field.value}
												onChange={(e) => {
													form.setFieldValue(field.name, e);
													this.handleChangeSelect(e);
												}}
												options={this.getStatus()}
												required
											/>
										)}
									</Field>
									<ErrorMessage name="status" component="div" className="form-text text-danger" />
								</div>

							</FormGroup>
							{selectedOption?.value === this.getStatus()[0].value ? (
								""
							) : (
								<div>
									<FormGroup row>
										<label className="col-md-2 col-form-label">Keterangan<span className=" text-danger">*</span></label>
										<div className="col-md-10">
											<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
											<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
										</div>

									</FormGroup>
									<FormGroup row>
										<label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
										<div className="col-md-10">
											<Field name="dokumen">
												{({ field, form, meta }) => (
													<DropzoneWrapper
														className=""
														onDrop={(e) => {
															this.onDrop(e);
															form.setFieldValue(field.name, e);
														}}
													>
														{({ getRootProps, getInputProps, isDragActive }) => {
															return (
																<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
																	<input name="dokumen" {...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={(e) => {
																					this.clearFiles(e);
																					form.setFieldValue(field.name, []);
																				}}
																			>
																				Reset dokumen
																			</button>
																		</small>
																	</div>
																</div>
															);
														}}
													</DropzoneWrapper>
												)}
											</Field>
											{thumbs}
											<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
											<p className="mrgn-top-5 font-color-black">
												Ukuran setiap dokumen maksimal 15mb
											</p>
										</div>
										<FormGroup>
											<div className="col-xl-10">
												<Button color className="btn-login width-133 mt-4" type="submit" disabled={isSubmitting}>
													<span className="font-color-white">
														Tutup Laporan
													</span>
												</Button>
											</div>
										</FormGroup>
									</FormGroup>
								</div>


							)}
						</Form>
					)}
				</Formik>


				{selectedOption?.value === this.getStatus()[1].value ? (
					""
				) : (
					<Card>
						<Formik
							initialValues={{
								tanggal: new Date(),
								judul: "",
								dokumen: [],
							}}
							validationSchema={evaluasiSchema}
							onSubmit={this.onSubmit}
						>
							{({ isSubmitting }) => (
								<Form className="form-horizontal">
									<FormGroup row>
										<label className="col-md-2 col-form-label">Tanggal Evaluasi</label>
										<div className="col-md-10">
											<Field name="tanggal">
												{({ field, form }) => (
													<Datetime
														timeFormat={false}
														inputProps={{ className: "form-control" }}
														value={field.value}
														onChange={(e) => {
															form.setFieldValue(field.name, e);
														}}
													/>
												)}
											</Field>
											<ErrorMessage name="tanggal" component="div" className="form-text text-danger" />
										</div>
									</FormGroup>
									<FormGroup row>
										<label className="col-md-2 col-form-label">Judul Dokumen</label>
										<div className="col-md-10">
											<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
											<ErrorMessage name="judul" component="div" className="form-text text-danger" />
										</div>
									</FormGroup>
									<FormGroup row>
										<label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
										<div className="col-md-10">
											<Field name="dokumen">
												{({ field, form, meta }) => (
													<DropzoneWrapper
														className=""
														onDrop={(e) => {
															this.onDrop(e);
															form.setFieldValue(field.name, e);
														}}
													>
														{({ getRootProps, getInputProps, isDragActive }) => {
															return (
																<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
																	<input name="dokumen" {...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={(e) => {
																					this.clearFiles(e);
																					form.setFieldValue(field.name, []);
																				}}
																			>
																				Reset dokumen
																			</button>
																		</small>
																	</div>
																</div>
															);
														}}
													</DropzoneWrapper>
												)}
											</Field>
											{thumbs}
											<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
											<p className="mrgn-top-5 font-color-black">
												Ukuran setiap dokumen maksimal 15mb
											</p>
										</div>
									</FormGroup>
									{this.props.user?.role.id === 2021 ? (
										<FormGroup row>
											<label className="col-md-2 col-form-label">Delegasi ke dikti</label>
											<div className="col-md-10 mt-2">
												<div className="checkbox c-checkbox">
													<label>
														<Input type="checkbox" onChange={this.handlechecklist} defaultChecked={this.state.delegasichecklist} />
														<span className="fa fa-check"></span></label>
												</div>
											</div>
										</FormGroup>
									) : ("")}
									<FormGroup row>
										<div className="col-xl-10">
											<Button color className="btn-login" type="submit" disabled={isSubmitting}>
												<span className="font-color-white">
													Simpan Evaluasi
												</span>
											</Button>
										</div>
									</FormGroup>
								</Form>

							)}

						</Formik>
					</Card>
				)}
			</>
		);
	}
}

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