PTB-fe/components/Extras/calendar.view.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Card, CardBody, CardHeader, CardTitle, Button, Row, Col, FormGroup, Input } from "reactstrap";
import { getPelaporan, getOneLaporan, updateLaporan } from "@/actions/pelaporan";
import { updateJadwal } from "@/actions/penjadwalan";
import DetailLaporan from "@/components/Penjadwalan/DetailLaporan";
import Link from "next/link";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import bootstrapPlugin from "@fullcalendar/bootstrap";
import Select from "react-select";
import moment from "moment-timezone";
import { connect } from "react-redux";
import Loader from "@/components/Common/Loader";
import Router from "next/router";
import { ToastContainer, toast } from "react-toastify";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import Datetime from "react-datetime";
import 'moment/locale/id';
import { getCsrf } from "../../actions/security";
import { createLog } from "../../actions/log";
moment.locale('id')
import Swal from "sweetalert2";

const checkIfFilesAreTooBig = (files) => {
	let valid = true;
	if (files) {
		files.map((file) => {
			if (file.size > 15 * 1024 * 1024) {
				valid = false;
			}
		});
	}
	return valid;
};
const status = [
	{ value: "Ditindaklanjuti DIKTI", label: "Ditindaklanjuti DIKTI", className: "State-ACT" },
	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
];

const statusLLDIKTI = [
	{ value: "Ditindaklanjuti LLDIKTI", label: "Ditindaklanjuti LLDIKTI", className: "State-ACT" },
	{ value: "Delegasi ke DIKTI", label: "Delegasi ke DIKTI", className: "State-ACT" },
	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
];

const jadwalSchema = Yup.object().shape({
	judul: Yup.string().required("Wajib diisi"),
	dari_tanggal: Yup.date().required("Wajib diisi"),
	sampai_tanggal: Yup.date().required("Wajib diisi"),
});

const laporanSchema = Yup.object().shape({
	keterangan: Yup.string().required("Harus diisi"),
	dokumen: Yup.array().min(1).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;
	}
}


class Calendar extends Component {
	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];

	calendarHeader = {
		left: "prev,next today",
		center: "title",
		right: "dayGridMonth,timeGridWeek,timeGridDay",
	};

	constructor(props) {
		super(props);
		this.state = {
			selectedEvent: null,
			evRemoveOnDrop: true,
			evNewName: "",
			externalEvents: [],
			dataLaporan: [],
			dataEvent: [],
			laporan: {},
			selectedOption: null,
			color: "",
			disabled: true,
			files: [],
		};
	}

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

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

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

	async componentDidMount() {
		const { token, query } = this.props;
		const laporan = await getOneLaporan(token, query.id);
		const dataLaporan = await getPelaporan(token, { jadwal: true });

		this.setState({ dataLaporan });
		this.getDataEvent();
		this.defaultStatus();
		this.setState({ laporan });

		let color = "#" + Math.random().toString(16).slice(2, 8);
		if (laporan.data.jadwal) {
			color = laporan.data.jadwal.warna;
		}
		this.setState({ color });
	}

	componentShouldUpdate(nextProps, nextState) {
		return nextState.dataLaporan !== this.state.dataLaporan;
	}

	getStatus = () => (this.props.user?.role.id === 2021 ? statusLLDIKTI : status);

	getDataEvent = () => {
		const dataEvent = this.state.dataLaporan.data.map((e) => ({
			id: e._id,
			title: e.jadwal.judul,
			start: moment(e.jadwal.dari_tanggal).format("YYYY-MM-DD"),
			end: moment(e.jadwal.sampai_tanggal).add(1, "d").format("YYYY-MM-DD"),
			backgroundColor: e.jadwal.warna,
			borderColor: e.jadwal.warna,
		}));
		this.setState({ dataEvent });
	};

	eventClick = (info) => {
		const data = {
			title: info.event.title,
			start: moment(info.event.start).format("DD MMMM YYYY"),
			end: moment(info.event.end - 1).format("DD MMMM YYYY"),
		};
		this.setState({ selectedEvent: data });
	};

	handleEventReceive = (info) => {
		var styles = getComputedStyle(info.draggedEl);
		info.event.setProp("backgroundColor", styles.backgroundColor);
		info.event.setProp("borderColor", styles.borderColor);
		this.handleEventCalendar(info);
	};
	logSuccessUpdateJadwal = async () => {
		const { query, token } = this.props;
		const { id } = query;
		const getToken = await getCsrf();
		const _csrf = getToken.token;
		await createLog(token, { aktivitas: `Berhasil menetapkan jadwal, id: ${id}`, _csrf: _csrf });

	}

	handleEventCalendar = async (data) => {
		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 { query, token } = this.props;
			const { id } = query;
			const { color, laporan } = this.state;
			const getToken = await getCsrf();
			const _csrf = getToken.token;
			await toast.promise(

				updateJadwal(token, id, {
					judul: "No.Laporan " + laporan.data.no_laporan + " - " + data.judul,
					dari_tanggal: data.dari_tanggal,
					sampai_tanggal: data.sampai_tanggal,
					warna: color,
				}, _csrf),

				{
					pending: "Loading",
					success: "Success",
					error: "Error",
				}

			);
			Router.push("/app/penjadwalan");
			const dataLaporan = await getPelaporan(token, { jadwal: true });
			this.setState({ dataLaporan });
			this.getDataEvent();
		}

	};

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

	handleChangeSelect = (selectedOption) => this.setState({ selectedOption });
	logUpdateLaporanSuccess = async () => {
		const getToken = await getCsrf();
		const _csrf = getToken.token;
		const { token, query } = this.props;
		const { id } = query;
		await createLog(token, { aktivitas: `Berhasil mengubah data laporan, id: ${id}`, _csrf: _csrf });

	}
	logUpdateLaporanError = async () => {
		const getToken = await getCsrf();
		const _csrf = getToken.token;
		const { token, query } = this.props;
		const { id } = query;
		await createLog(token, { aktivitas: `Berhasil mengubah data laporan, id: ${id}`, _csrf: _csrf });
	}

	handleSimpan = async (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;
			let update = null;
			if (value.status.value === this.getStatus()[1].value || value.status.value === this.getStatus()[2].value) {
				const toastid = toast.loading("Please wait...");
				const data = { keterangan: value.keterangan };
				const formdata = new FormData();
				formdata.append("keterangan", value.keterangan);
				this.state.files.forEach((e) => {
					formdata.append("dokumen", e);
				});
				formdata.append("aktif", "false");
				if (value.status.value === this.getStatus()[1].value) {
					data.change_role = "true";
					update = await updateLaporan(token, id, data, _csrf);
					Router.push("/app/penjadwalan");
				} else if (value.status.value === this.getStatus()[2].value) {

					update = await updateLaporan(token, id, formdata, _csrf + `&redudansi=true`);
					Router.push("/app/penjadwalan");
				}
				if (!update) {
					toast.update(toastid, { render: "Gagal simpan jadwal", type: "error", isLoading: false, autoClose: true, closeButton: true });
					this.logUpdateLaporanError()

				} else {
					toast.update(toastid, { render: "Input jadwal berhasil", type: "success", isLoading: false, autoClose: true, closeButton: true });
					this.logUpdateLaporanSuccess()
					Router.push("/app/penjadwalan");
				}
				Router.push("/app/penjadwalan");
			}
			Router.push("/app/penjadwalan");
		}

	};

	render() {
		const { files, externalEvents, laporan, selectedOption, selectedEvent } = 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 (
			<ContentWrapper>
				<div className="content-heading">
					<span className="font-color-white">
						Membuat Jadwal Pemeriksaan
					</span>
					<div className="ml-auto">
						<Link href="/app/penjadwalan">
							<Button className="color-3e3a8e" color>
								<span className="font-color-white">
									&lt; Kembali
								</span>
							</Button>
						</Link>
					</div>
				</div>
				<div className="calendar-app">
					{laporan.data ? (
						<Row>
							<Col>
								<Card className="card-default">
									<CardBody>
										<DetailLaporan noStatus data={laporan.data} role={this.props.user.role.id} />
									</CardBody>
								</Card>
							</Col>
						</Row>
					) : (
						<Row className="mb-4">
							<Col>
								<Loader />
							</Col>
						</Row>
					)}
					<div className="row">
						<div className="col-xl-4 col-lg-5">
							<div className="row">
								<div className="col-lg-12 col-md-6 col-12">
									<Card className="card-default">
										<div class="header-penjadwalan">
											<h2 class="card-title-1">Status Pelaporan</h2>
										</div>
										<CardBody>
											<Formik
												enableReinitialize={true}
												initialValues={{
													status: this.getStatus()[0],
													keterangan: "",
												}}
												validationSchema={selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? laporanSchema : null}
												onSubmit={this.handleSimpan}
											>
												{({ isSubmitting }) => (
													<Form>
														<FormGroup>
															<label className="col-form-label">Status Laporan</label>
															<Field name="status">
																{({ field, form }) => (
																	<Select
																		value={field.value}
																		onChange={(e) => {
																			form.setFieldValue(field.name, e);
																			this.handleChangeSelect(e);
																		}}
																		options={this.getStatus()}
																		required
																		isDisabled={laporan.data?.sanksi}
																	/>
																)}
															</Field>
															<ErrorMessage name="status" component="div" className="form-text text-danger" />
														</FormGroup>
														{selectedOption?.value === this.getStatus()[0].value ? (
															""
														) : (
															selectedOption?.value === this.getStatus()[1].value ? (
																<FormGroup>
																	<label className="col-form-label">Keterangan<span className=" text-danger">*</span></label>
																	<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
																	<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
																</FormGroup>
															) : (
																<div>
																	<FormGroup >
																		<label className="col-form-label">Keterangan<span className=" text-danger">*</span></label>
																		<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
																		<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
																	</FormGroup>
																	<FormGroup >
																		<label className=" col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
																		<div >
																			<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>

															)


														)}
														<div className="btn-simpanjadwal">
															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan color-3e3a8e" color block disabled={laporan.data?.sanksi || isSubmitting} >
																<h4 className="text-btn-penjadwalan-1 font-color-white">Simpan</h4>
															</Button>
														</div>
													</Form>
												)}
											</Formik>
										</CardBody>
									</Card>
									{selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? (
										""
									) : (
										<>
											<Card className="card-default" title="">
												<div class="header-penjadwalan">
													<h2 className="card-title-1">Input Jadwal</h2>
												</div>
												<CardBody>
													<Formik
														enableReinitialize={true}
														initialValues={{
															judul: laporan.data?.jadwal?.judul ? laporan.data.jadwal.judul.split("- ")[1] : "",
															dari_tanggal: laporan.data?.jadwal?.dari_tanggal ? moment(laporan.data.jadwal.dari_tanggal).format("DD MMMM YYYY") : "",
															sampai_tanggal: laporan.data?.jadwal?.sampai_tanggal ? moment(laporan.data.jadwal.sampai_tanggal).format("DD MMMM YYYY") : "",
														}}
														validationSchema={jadwalSchema}
														onSubmit={this.handleEventCalendar}
													>
														{({ isSubmitting }) => (
															<Form>
																<FormGroup>
																	<label className="col-form-label">Warna</label>
																	<div className="badge d-block" style={{ backgroundColor: this.state.color, color: "white" }}>
																		{this.state.color}
																	</div>
																	{/* <div className="warna-penjadwalan-block" style={{ backgroundColor: this.state.color, color: "white" }}></div> */}
																</FormGroup>

																<FormGroup>
																	<label className="col-form-label">Judul<span className=" text-danger">*</span></label>
																	<Field name="judul">{({ field, form }) => <Input disabled={laporan.data?.sanksi} type="text" placeholder="judul" {...field} />}</Field>
																	<ErrorMessage name="judul" component="div" className="form-text text-danger" />
																</FormGroup>
																<Row>
																	<Col>
																		<FormGroup>
																			<label className="col-form-label">Dari Tanggal</label>
																			<Field name="dari_tanggal">
																				{({ field, form }) => (
																					<Datetime
																						timeFormat={false}
																						locale="id"
																						inputProps={{ className: "form-control" }}
																						value={field.value}
																						dateFormat="DD MMMM YYYY"
																						closeOnSelect={true}
																						onChange={(e) => {
																							form.setFieldValue(field.name, e);
																						}}
																					/>
																				)}
																			</Field>
																			<ErrorMessage name="dari_tanggal" component="div" className="form-text text-danger" />
																		</FormGroup>
																	</Col>
																	<Col>
																		<FormGroup>
																			<label className="col-form-label">Sampai Tanggal</label>
																			<Field name="sampai_tanggal">
																				{({ field, form }) => (
																					<Datetime
																						timeFormat={false}
																						locale="id"
																						dateFormat="DD MMMM YYYY"
																						inputProps={{ className: "form-control" }}
																						value={field.value}
																						closeOnSelect={true}
																						onChange={(e) => {
																							form.setFieldValue(field.name, e);
																						}}
																					/>
																				)}
																			</Field>
																			<ErrorMessage name="sampai_tanggal" component="div" className="form-text text-danger" />
																		</FormGroup>
																	</Col>
																</Row>

																<FormGroup>
																	<div className="btn-simpanpenjadwalan">
																		<Button className="btn-colorpenjadwalan" color block type="submit" disabled={laporan.data?.sanksi || isSubmitting}>
																			<h4 className="text-btn-penjadwalan-1 font-color-white">Simpan</h4>
																		</Button>
																	</div>
																</FormGroup>
															</Form>
														)}
													</Formik>
												</CardBody>
											</Card>
										</>
									)}
									<div className="mb-3">
										{selectedEvent && (
											<div>
												<p>Selected:</p>
												<div className="box-placeholder">{JSON.stringify(selectedEvent)}</div>
											</div>
										)}
										{!selectedEvent && (
											<div>
												<p>Click calendar to show information</p>
											</div>
										)}
									</div>
								</div>
							</div>
						</div>
						<div className="col-xl-8 col-lg-7">
							<Card className="card-default">
								<CardBody>
									{/* START calendar */}
									<FullCalendar
										defaultView={this.dayGridMonth}
										plugins={this.calendarPlugins}
										events={this.state.dataEvent}
										themeSystem={"bootstrap"}
										header={this.calendarHeader}
										deepChangeDetection={true}
										eventClick={this.eventClick}
									></FullCalendar>
								</CardBody>
							</Card>
						</div>
					</div>
				</div>
			</ContentWrapper >
		);
	}
}

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