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

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
import { updateJadwal } from "../../actions/penjadwalan";
import { getPelaporan } from "../../actions/pelaporan";
import Select from "react-select";
import Link from "next/link";

import Scrollable from "@/components/Common/Scrollable";
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 events from "./calendar.events";

const selectInstanceId = 1;
class Calendar extends Component {
	calendarEvents = events;

	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];

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

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

	async componentDidMount() {
		/* initialize the external events */
		new Draggable(this.refs.externalEventsList, {
			itemSelector: ".fce-event",
			eventData: function (eventEl) {
				return {
					title: eventEl.innerText.trim(),
				};
			},
		});

		const dataLaporan = await getPelaporan({ penjadwalan: true });
		const { data } = await getPelaporan({ number: this.props.query.number, ptId: this.props.query.ptId });
		this.setState({ dataLaporan });
		this.getDataEvent();

		// const cek = this.state.dataLaporan.data.filter((e) => e._number === this.props.query.number && e.pt_id == this.props.query.ptId)[0];
		this.setState({ laporan: data[0] });
		let color = "#" + Math.floor(Math.random() * 16777215).toString(16);
		if (data[0].penjadwalan) {
			color = data[0].penjadwalan.background_color;
		}
		this.setState({ externalEvents: [{ id: this.props.query.number, color: color, name: "Jadwal Pemeriksaan - BI:" + this.props.query.number }] });
	}

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

	getDataEvent = () => {
		const dataEvent = this.state.dataLaporan.data
			.filter((e) => e.penjadwalan)
			.map((e) => ({
				title: e.penjadwalan.title,
				start: new Date(e.penjadwalan.from_date),
				end: new Date(e.penjadwalan.to_date),
				backgroundColor: e.penjadwalan.background_color, //red
				borderColor: e.penjadwalan.background_color,
			}));
		this.setState({ dataEvent });
	};

	dayClick = (date) => {
		this.setState({
			selectedEvent: {
				date: date.dateStr,
			},
		});
	};

	addEvent(event) {
		this.calendarEvents.push(event);
	}

	handleEventReceive = (info) => {
		var styles = getComputedStyle(info.draggedEl);
		info.event.setProp("backgroundColor", styles.backgroundColor);
		info.event.setProp("borderColor", styles.borderColor);
		this.handleEventCalendar(info);
	};

	handleEventCalendar = async ({ event }) => {
		const number = this.props.query.number;
		const ptId = this.props.query.ptId;
		const data = {
			title: event.title,
			from_date: event.start,
			to_date: event.end || event.start,
			background_color: event.backgroundColor,
		};

		const update = await updateJadwal({ number, ptId }, data);
	};

	render() {
		const { externalEvents, selectedEvent, laporan } = this.state;
		return (
			<ContentWrapper>
				<div className="content-heading">
					<div>
						Jadwal Pemeriksaan
						<small>Format pembuatan jadwal pemeriksaan v.0.1</small>
					</div>
					<div className="ml-auto">
						<Link href="/app/penjadwalan" as="/app/penjadwalan">
							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
						</Link>
					</div>
				</div>
				<div className="calendar-app">
					<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" title="">
										<CardHeader>
											<CardTitle tag="h4">Daftar Pemeriksaan</CardTitle>
										</CardHeader>
										<CardBody>
											<div className="external-events" ref="externalEventsList">
												{externalEvents.map((ev) => (
													<div
														className="fce-event"
														style={{
															backgroundColor: ev.color,
														}}
														key={ev.name + ev.color}
														data-id={ev.id}
													>
														{ev.name}
													</div>
												))}
											</div>
										</CardBody>
									</Card>
									{/* Aside card */}
									<div className="card b">
										<CardHeader>
											<CardTitle tag="h4">Detail Laporan</CardTitle>
										</CardHeader>
										<table className="table">
											<tbody>
												<tr>
													<td>
														<strong>Status</strong>
													</td>
													<td>
														<Select
															instanceId={selectInstanceId + 1}
															value={this.state.selectedOption}
															onChange={this.handleChangeSelect}
															options={[
																{ value: "ditolak", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
																{ value: "mengubah sanksi", label: "Delegasi ke lldikti", className: "State-ACT" },
																{ value: "mencabut sanksi", label: "Ditutup", className: "State-ACT" },
															]}
															required
														/>
													</td>
												</tr>
												<tr>
													<td>
														<strong>Nomor Laporan</strong>
													</td>
													<td>1155937274981</td>
												</tr>
												<tr>
													<td>
														<strong>Perguruan Tinggi</strong>
													</td>
													<td>Universitas Satyagama</td>
												</tr>
												<tr>
													<td>
														<strong>Jenis Pelanggaran</strong>
													</td>
													<td>
														<Scrollable height="75px" className="list-group">
															<ul>
																<li>Lorem ipsum dolor sit amet.</li>
																<li>Lorem, ipsum dolor.</li>
																<li>Lorem ipsum dolor sit.</li>
															</ul>
														</Scrollable>
													</td>
												</tr>
												<tr>
													<td>
														<strong>Keterangan Laporan</strong>
													</td>
													<td>
														<Scrollable height="100px" className="list-group">
															<p>
																Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta iusto facilis ab animi molestiae totam quibusdam eveniet aperiam vitae! Voluptas, laboriosam tempore? Vitae, modi
																asperiores.
															</p>
														</Scrollable>
													</td>
												</tr>
												<tr>
													<td>
														<strong>File Pendukung</strong>
													</td>
													<td>
														<Scrollable height="120px" className="list-group">
															<table className="table table-bordered bg-transparent">
																<tbody>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-code"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				database.controller.js
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-image"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				baground-lg.png
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-code"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				picture.controller.js
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-word"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				applicat-diagrams.docx
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-code"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				database.controller.js
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-code"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				database.controller.js
																			</a>
																		</td>
																	</tr>
																</tbody>
															</table>
														</Scrollable>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									{/* end Aside card */}
								</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}
										editable={true}
										droppable={true}
										deepChangeDetection={true}
										dateClick={this.dayClick}
										eventReceive={this.handleEventReceive}
										eventDrop={this.handleEventCalendar}
										eventResize={this.handleEventCalendar}
									></FullCalendar>
								</CardBody>
							</Card>
						</div>
					</div>
				</div>
			</ContentWrapper>
		);
	}
}

export default Calendar;