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 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 "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
import "@fullcalendar/list/main.css";
import "@fullcalendar/bootstrap/main.css";

import events from "./calendar.events";

class Calendar extends Component {
	calendarEvents = events;

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

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

	// External events properties

	evColors = ["danger", "primary", "info", "success", "warning", "green", "pink", "inverse", "purple"];

	constructor(props) {
		super(props);
		this.state = {
			selectedEvent: null,
			evRemoveOnDrop: true,
			evSelectedColor: this.evColors[0],
			evNewName: "",
			_externalEvents: [
				{ color: "green", name: "Lunch" },
				{ color: "danger", name: "Go home" },
				{ color: "info", name: "Do homework" },
				{ color: "warning", name: "Work on UI design" },
				{ color: "inverse", name: "Sleep tight" },
			],
			externalEvents: [],
			dataLaporan: [],
			dataEvent: [],
		};
	}

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

		await this.fetchData();

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

	fetchData = async () => {
		const res = await fetch("http://localhost:1880/pelaporan");
		const data = await res.json();
		this.setState({ dataLaporan: data });
		const dataEvent = this.state.dataLaporan.map((e) => {
			if (!e.penjadwalan) {
				return;
			}
			return {
				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: dataEvent,
		});
	};

	addRandomEvent() {
		// add dynamically an event
		this.addEvent({
			title: "Random Event",
			start: new Date(new Date().getFullYear(), new Date().getMonth(), Math.random() * (30 - 1) + 1),
			backgroundColor: "#c594c5", //purple
			borderColor: "#c594c5", //purple
		});
	}

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

	// add event directly into calendar
	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);
		// is the "remove after drop" checkbox checked?
		if (this.state.evRemoveOnDrop) {
			this.removeExternalEvent(info.draggedEl.textContent);
		}
	};

	getEvColorClasses(evcolor) {
		return "bg-" + evcolor + (this.state.evSelectedColor === evcolor ? " selected" : "");
	}

	addNewExternalEvent = () => {
		const externalEvents = this.state.externalEvents.concat({
			color: this.state.evSelectedColor,
			name: this.state.evNewName,
		});
		this.setState({
			externalEvents,
		});
	};

	removeExternalEvent = (name) => {
		let externalEvents = [...this.state.externalEvents];
		const index = externalEvents.findIndex((e) => e.name === name);
		if (index > -1) {
			externalEvents.splice(index, 1);
			this.setState({
				externalEvents,
			});
		}
	};

	selectColor = (color) => () => {
		this.setState({
			evSelectedColor: color,
		});
	};

	handleCheck = (event) => {
		this.setState({
			//evRemoveOnDrop: event.target.checked
			evRemoveOnDrop: true,
		});
	};

	handleEventCalendar = ({ event }) => {
		const data = {
			title: event.title,
			from_date: event.start,
			to_date: event.end || event.start,
			background_color: event.backgroundColor,
		};
		const update = this.updateJadwal(data);
	};

	updateJadwal = async (data) => {
		try {
			const number = this.props.query.number;
			const ptId = this.props.query.ptId;

			const myHeaders = new Headers();
			myHeaders.append("Content-Type", "application/json");

			const raw = JSON.stringify(data);

			const requestOptions = {
				method: "POST",
				body: raw,
				headers: myHeaders,
			};

			const updated = await fetch(`http://localhost:1880/penjadwalan.add/${number}?ptId=${ptId}`, requestOptions);
			// .catch((error) => console.log("error", error));
			return await updated.json();
		} catch (error) {
			console.log("error", error);
			return false;
		}
	};

	handleInputName = (event) => {
		this.setState({
			evNewName: event.target.value,
		});
	};

	render() {
		const { externalEvents, selectedEvent } = this.state;
		return (
			<ContentWrapper>
				<div className="content-heading">
					<div>
						Jadwal Pemeriksaan
						<small>Format pembuatan jadwal pemeriksaan v.0.1</small>
					</div>
				</div>
				<div className="calendar-app">
					<div className="row">
						<div className="col-xl-3 col-lg-4">
							<div className="row">
								<div className="col-lg-12 col-md-6 col-12">
									{/* START card */}
									<Card className="card-default" title="">
										<CardHeader>
											<CardTitle tag="h4">Draggable Events</CardTitle>
										</CardHeader>
										{/* Default external events list */}
										<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>
											{/* <div className="custom-control custom-checkbox mt-3">
                                                <input className="custom-control-input" id="drop-remove" type="checkbox" onChange={this.handleCheck}/>
                                                <label className="custom-control-label" htmlFor="drop-remove">Remove after Drop</label>
                                            </div> */}
										</CardBody>
									</Card>
									{/* END card */}
								</div>
								<div className="col-lg-12 col-md-6 col-12">
									{/* START card */}
									{/* <Card className="card-default">
										<CardHeader>
											<CardTitle tag="h4">Create Event</CardTitle>
										</CardHeader>
										<CardBody>
											<div className="input-group mb-2">
												<input className="form-control" type="text" placeholder="Event name..." onChange={this.handleInputName} />
												<div className="input-group-btn">
													<button className="btn btn-secondary" onClick={this.addNewExternalEvent} type="button">
														Add
													</button>
												</div>
											</div>
											<p className="text-muted">
												<small>Choose a Color</small>
											</p>
											<ul className="list-inline" id="external-event-color-selector">
												{this.evColors.map((evc) => (
													<li className="list-inline-item p-0" key={evc}>
														<div className={"circle circle-xl " + this.getEvColorClasses(evc)} onClick={this.selectColor(evc)}></div>
													</li>
												))}
											</ul>
										</CardBody>
									</Card> */}
									{/* END card */}
								</div>
							</div>
							<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 className="col-xl-9 col-lg-8">
							<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;