sip

components/Extras/calendar.view.js

@@ -1,270 +1,324 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
+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 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 "@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';
+import events from "./calendar.events";
 
 class Calendar extends Component {
-    calendarEvents = events;
+	calendarEvents = events;
 
-    calendarPlugins = [
-        interactionPlugin,
-        dayGridPlugin,
-        timeGridPlugin,
-        listPlugin,
-        bootstrapPlugin
-    ];
+	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];
 
-    calendarHeader = {
-        left: 'prev,next today',
-        center: 'title',
-        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
-    };
+	calendarHeader = {
+		left: "prev,next today",
+		center: "title",
+		right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+	};
 
-    // External events properties
+	// External events properties
 
-    evColors = [
-        'danger',
-        'primary',
-        'info',
-        'success',
-        'warning',
-        'green',
-        'pink',
-        'inverse',
-        'purple'
-    ];
+	evColors = ["danger", "primary", "info", "success", "warning", "green", "pink", "inverse", "purple"];
 
-    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:[
-            { color: 'info', name: 'Jadwal Pemeriksaan - BI:54678' }
-        ]
-    };
+	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: [],
+		};
+	}
 
-    componentDidMount() {
-        /* initialize the external events */
-        new Draggable(this.refs.externalEventsList, {
-            itemSelector: '.fce-event',
-            eventData: function(eventEl) {
-                return {
-                    title: eventEl.innerText.trim()
-                };
-            }
-        });
-    }
+	async componentDidMount() {
+		/* initialize the external events */
+		new Draggable(this.refs.externalEventsList, {
+			itemSelector: ".fce-event",
+			eventData: function (eventEl) {
+				return {
+					title: eventEl.innerText.trim(),
+				};
+			},
+		});
 
-    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
-        });
-    }
+		await this.fetchData();
 
-    dayClick = date => {
-        this.setState({
-            selectedEvent: {
-                date: date.dateStr
-            }
-        });
-    };
+		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" }] });
+		}
+	}
 
-    // add event directly into calendar
-    addEvent(event) {
-        this.calendarEvents.push(event);
-    }
+	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,
+		});
+	};
 
-    handleEventReceive = info => {
-        var styles = getComputedStyle(info.draggedEl);
-        info.event.setProp('backgroundColor', styles.backgroundColor);
-        info.event.setProp('borderColor', styles.borderColor);
+	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
+		});
+	}
 
-        // is the "remove after drop" checkbox checked?
-        if (this.state.evRemoveOnDrop) {
-            this.removeExternalEvent(info.draggedEl.textContent);
-        }
-    };
+	dayClick = (date) => {
+		this.setState({
+			selectedEvent: {
+				date: date.dateStr,
+			},
+		});
+	};
 
-    getEvColorClasses(evcolor) {
-        return 'bg-' + evcolor + (this.state.evSelectedColor === evcolor ? ' selected' : '');
-    }
+	// add event directly into calendar
+	addEvent(event) {
+		this.calendarEvents.push(event);
+	}
 
-    addNewExternalEvent = () => {
-        const externalEvents = this.state.externalEvents.concat({
-            color: this.state.evSelectedColor,
-            name: this.state.evNewName
-        });
-        this.setState({
-            externalEvents
-        });
-    };
+	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);
+		}
+	};
 
-    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
-            });
-        }
-    };
+	getEvColorClasses(evcolor) {
+		return "bg-" + evcolor + (this.state.evSelectedColor === evcolor ? " selected" : "");
+	}
 
-    selectColor = color => () => {
-        this.setState({
-            evSelectedColor: color
-        });
-    };
+	addNewExternalEvent = () => {
+		const externalEvents = this.state.externalEvents.concat({
+			color: this.state.evSelectedColor,
+			name: this.state.evNewName,
+		});
+		this.setState({
+			externalEvents,
+		});
+	};
 
-    handleCheck = event => {
-        this.setState({
-            //evRemoveOnDrop: event.target.checked
-            evRemoveOnDrop: true
-        });
-    };
+	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,
+			});
+		}
+	};
 
-    handleInputName = event => {
-        this.setState({
-            evNewName: event.target.value
-        });
-    };
+	selectColor = (color) => () => {
+		this.setState({
+			evSelectedColor: color,
+		});
+	};
 
-    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 bg-' + ev.color} key={ev.name+ev.color}>{ev.name}</div>
-                                                )
-                                            }
-                                            </div>
-                                            {/* <div className="custom-control custom-checkbox mt-3">
+	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.calendarEvents}
-                                        themeSystem={"bootstrap"}
-                                        header={this.calendarHeader}
-                                        editable={true}
-                                        droppable={true}
-                                        deepChangeDetection={true}
-                                        dateClick={this.dayClick}
-                                        eventReceive={this.handleEventReceive}
-                                        >
-                                    </FullCalendar>
-                                </CardBody>
-                            </Card>
-                        </div>
-                    </div>
-                </div>
-            </ContentWrapper>
-        );
-    }
+										</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;

package.json

@@ -18,10 +18,10 @@
         "@fortawesome/fontawesome-free": "5.15.3",
         "@fullcalendar/bootstrap": "4.4.2",
         "@fullcalendar/core": "4.4.2",
-        "@fullcalendar/daygrid": "4.4.2",
+        "@fullcalendar/daygrid": "^4.4.2",
         "@fullcalendar/interaction": "4.4.2",
         "@fullcalendar/list": "4.4.2",
-        "@fullcalendar/react": "4.4.2",
+        "@fullcalendar/react": "^4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
         "@react-google-maps/api": "1.13.0",
         "animate.css": "3.7.2",

pages/app/pelaporan.new.js

@@ -547,7 +547,7 @@ class FormStandard extends Component {
 			const inserted = await fetch("http://localhost:1880/pelaporan.create", requestOptions);
 			// .catch((error) => console.log("error", error));
 			return inserted;
-		} catch (e) {
+		} catch (error) {
 			console.log("error", error);
 			return false;
 		}

pages/app/penjadwalan.js

@@ -42,7 +42,7 @@ class BugTracker extends Component {
 					<td>{moment(value.created_at).fromNow()}</td>
 					<td>
 						<div className="ml-auto">
-							<button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e)}>
+							<button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e, value.pt_id, value._number)}>
 								Proses
 							</button>
 						</div>
@@ -52,13 +52,14 @@ class BugTracker extends Component {
 		});
 	};
 
-	newProcessClick = (e, PT_ID) => {
+	newProcessClick = (e, PT_ID, number) => {
 		//router = useRouter();
 		//const query = { ptId: PT_ID };
 		//    '/app/profile'
 		e.preventDefault();
 		Router.push({
 			pathname: "/app/penjadwalan.todo",
+			query: { ptId: PT_ID, number: number },
 		});
 	};
 
@@ -263,48 +264,31 @@ class BugTracker extends Component {
 										</thead>
 										<tbody>
 											{this.renderTable()}
-											{/*//{" "}
-											    <tr>
-												// <td>BI:54678</td>
-												//{" "}
+											{/* <tr>
+												<td>BI:54678</td>
 												<td className="text-nowrap">
-													//{" "}
 													<div className="media align-items-center">
-														//{" "}
 														<a className="mr-3" href="">
-															// <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-															//{" "}
+															<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
 														</a>
-														//{" "}
 														<div className="media-body d-flex">
-															//{" "}
 															<div>
-																// <h4 className="m-0">Universitas Satyagama</h4>
-																// <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																// <p>Jalan Kamal Raya No 2-A Cengkareng</p>
-																// <p> </p>
-																//{" "}
+																<h4 className="m-0">Universitas Satyagama</h4>
+																<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																<p>Jalan Kamal Raya No 2-A Cengkareng</p>
+																<p> </p>
 															</div>
-															//{" "}
 														</div>
-														//{" "}
 													</div>
-													//{" "}
 												</td>
-												// <td>{moment("2020-04-04 11:45:26.123").fromNow()}</td>
-												//{" "}
+												<td>{moment("2020-04-04 11:45:26.123").fromNow()}</td>
 												<td>
-													//{" "}
 													<div className="ml-auto">
-														//{" "}
 														<button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e)}>
 															Proses
 														</button>
-														//{" "}
 													</div>
-													//{" "}
 												</td>
-												//{" "}
 											</tr> */}
 										</tbody>
 									</table>

pages/app/penjadwalan.todo.js

@@ -1,9 +1,13 @@
-import React from 'react';
-import dynamic from 'next/dynamic';
+import React from "react";
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
 
 // https://github.com/fullcalendar/fullcalendar-react/issues/17
-const DynamicCalendar = dynamic(() => import('../../components/Extras/calendar.view.js'), {
-    ssr: false
+const DynamicCalendar = dynamic(() => import("../../components/Extras/calendar.view.js"), {
+	ssr: false,
 });
 
-export default () => <DynamicCalendar />;
+export default () => {
+	const router = useRouter();
+	return <DynamicCalendar query={router.query} />;
+};