ptb-fe/pages/app/pemeriksaan/new.js

import React, { Component } from "react";
import Router from "next/router";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Datetime from "react-datetime";
import { insertPemeriksaan } from "../../../actions/pemeriksaan";
import "react-datetime/css/react-datetime.css";
import {
	Row,
	Col,
	Card,
	CardHeader,
	CardBody,
	FormGroup,
	FormFeedback,
	FormText,
	Label,
	InputGroup,
	InputGroupAddon,
	InputGroupButtonDropdown,
	InputGroupText,
	Input,
	Button,
	DropdownToggle,
	DropdownMenu,
	CustomInput,
	DropdownItem,
} from "reactstrap";

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 styleHeaderText = {
	color: "brown",
};

class FormStandard extends Component {
	state = {
		dropdownOpen: false,
		splitButtonOpen: false,
		keteranganLaporan: "",
		tanggal: new Date(),
		files: [],
	};

	static getInitialProps({ query }) {
		return { query };
	}

	setKeteranganPelaporan = (e) => {
		this.setState({ keteranganLaporan: e.target.value });
	};

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

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

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

	onDrop = (files) => {
		this.setState({
			files: files.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "Added " + files.length + " file(s)",
		});
	};

	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 (e) => {
		e.preventDefault();
		const { number, ptId } = this.props.query;
		const formdata = new FormData();
		formdata.append("description", this.state.keteranganLaporan);
		formdata.append("date", this.state.tanggal);
		if (this.state.files.length > 0) {
			this.state.files.forEach((e) => {
				formdata.append("files", e);
			});
		}

		const inserted = await insertPemeriksaan({ number, ptId }, formdata);
		if (inserted) {
			Router.push({
				pathname: "/app/pemeriksaan",
			});
		}
	};

	render() {
		const { files } = this.state;

		const thumbs = files.map((file, index) => (
			<Col md={3} key={index}>
				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
			</Col>
		));
		return (
			<ContentWrapper unwrap>
				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
					<div className="p-4 text-center" style={styleHeaderText}>
						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
						<h3 className="m-0">Universitas Satyagama</h3>
						<p>0742/O/1990</p>
						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
					</div>
				</div>
				<div className="p-3">
					<div className="content-heading">
						<div>
							Evaluasi Data
							<small>Form update data evaluasi v.0.1</small>
						</div>
					</div>
					<Row>
						<Col xl="9">
							<Card className="card-default">
								<CardHeader>
									<label>Informasi Laporan</label>
								</CardHeader>
								<CardBody>
									<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
											<div className="col-md-10">
												<Input type="text" disabled value={this.props.query.number} />
												{/* <span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span> */}
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Tanggal</label>
											<div className="col-md-10">
												<Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
												<span className="form-text">Tanggal</span>
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Keterangan Laporan</label>
											<div className="col-md-10">
												<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} />
												<span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Upload File Pendukung</label>
											<div className="col-md-10">
												<DropzoneWrapper className="" onDrop={this.onDrop}>
													{({ getRootProps, getInputProps, isDragActive }) => {
														return (
															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
																<input {...getInputProps()} />
																<div className="dropzone-previews flex">
																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
																</div>
																<div className="d-flex align-items-center">
																	<small className="ml-auto">
																		<button type="button" className="btn btn-link" onClick={this.clearFiles}>
																			Clear files
																		</button>
																	</small>
																</div>
															</div>
														);
													}}
												</DropzoneWrapper>
												<span className="form-text">Multiple files upload</span>
											</div>
										</FormGroup>
										<FormGroup row>
											<div className="col-xl-10">
												<button className="btn btn-sm btn-primary" type="submit">
													Submit Evaluasi
												</button>
											</div>
										</FormGroup>
									</form>
								</CardBody>
							</Card>
							{/* END card */}
						</Col>
						<Col xl="3">
							<div className="card card-default">
								<div className="card-body">
									<div className="text-center">
										<h3 className="mt-0">Universitas Satyagama</h3>
										<p>0742/O/1990</p>
									</div>
									<hr />
									<ul className="list-unstyled px-4">
										<li>
											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
										</li>
										<li>
											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
										</li>
									</ul>
								</div>
							</div>
						</Col>
					</Row>
				</div>
			</ContentWrapper>
		);
	}
}

export default FormStandard;