|  | @@ -5,8 +5,17 @@ import Datetime from "react-datetime";
 | 
	
		
			
				|  |  |  import moment from "moment";
 | 
	
		
			
				|  |  |  import { Row, Col, FormGroup, Input } from "reactstrap";
 | 
	
		
			
				|  |  |  import { ToastContainer, toast } from "react-toastify";
 | 
	
		
			
				|  |  | +import { Formik, Form, Field, ErrorMessage } from "formik";
 | 
	
		
			
				|  |  | +import * as Yup from "yup";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const selectInstanceId = 1;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const evaluasiSchema = Yup.object().shape({
 | 
	
		
			
				|  |  | +	tanggal: Yup.date().required("Required"),
 | 
	
		
			
				|  |  | +	judul: Yup.string().min(3).max(150).required("Required"),
 | 
	
		
			
				|  |  | +	dokumen: Yup.array().min(1).required("Required"),
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  let Dropzone = null;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  class DropzoneWrapper extends Component {
 | 
	
	
		
			
				|  | @@ -84,25 +93,21 @@ export default class InputEvaluasi extends Component {
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -	onSubmit = async (e) => {
 | 
	
		
			
				|  |  | -		e.preventDefault();
 | 
	
		
			
				|  |  | -		const { number, ptId } = this.props.query;
 | 
	
		
			
				|  |  | +	onSubmit = async (data) => {
 | 
	
		
			
				|  |  | +		const { token, query } = this.props;
 | 
	
		
			
				|  |  | +		const { id } = query;
 | 
	
		
			
				|  |  |  		const formdata = new FormData();
 | 
	
		
			
				|  |  | -		formdata.append("title", this.state.judulEvaluasi);
 | 
	
		
			
				|  |  | -		formdata.append("date", this.state.tanggal);
 | 
	
		
			
				|  |  | -		if (this.state.files.length > 0) {
 | 
	
		
			
				|  |  | -			this.state.files.forEach((e) => {
 | 
	
		
			
				|  |  | -				formdata.append("files", e);
 | 
	
		
			
				|  |  | -			});
 | 
	
		
			
				|  |  | -		}
 | 
	
		
			
				|  |  | -		const id = toast.loading("Please wait...");
 | 
	
		
			
				|  |  | -		const inserted = await insertPemeriksaan({ number, ptId }, formdata);
 | 
	
		
			
				|  |  | -		if (inserted) {
 | 
	
		
			
				|  |  | -			toast.update(id, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
 | 
	
		
			
				|  |  | -			Router.push({
 | 
	
		
			
				|  |  | -				pathname: "/app/pemeriksaan",
 | 
	
		
			
				|  |  | -			});
 | 
	
		
			
				|  |  | -		}
 | 
	
		
			
				|  |  | +		formdata.append("judul", data.judul);
 | 
	
		
			
				|  |  | +		formdata.append("tanggal", data.tanggal);
 | 
	
		
			
				|  |  | +		data.dokumen.forEach((e) => {
 | 
	
		
			
				|  |  | +			formdata.append("dokumen", e);
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		await toast.promise(insertPemeriksaan(token, id, formdata), {
 | 
	
		
			
				|  |  | +			pending: "Loading",
 | 
	
		
			
				|  |  | +			success: "Success",
 | 
	
		
			
				|  |  | +			error: "Error",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	render() {
 | 
	
	
		
			
				|  | @@ -116,53 +121,79 @@ export default class InputEvaluasi extends Component {
 | 
	
		
			
				|  |  |  		return (
 | 
	
		
			
				|  |  |  			<>
 | 
	
		
			
				|  |  |  				<p className="lead bb">Evaluasi</p>
 | 
	
		
			
				|  |  | -				<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 | 
	
		
			
				|  |  | -					<FormGroup>
 | 
	
		
			
				|  |  | -						<label>Tanggal Dokumen:</label>
 | 
	
		
			
				|  |  | -						<div>
 | 
	
		
			
				|  |  | -							<Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
 | 
	
		
			
				|  |  | -							{/* <span className="form-text">Tanggal</span> */}
 | 
	
		
			
				|  |  | -						</div>
 | 
	
		
			
				|  |  | -					</FormGroup>
 | 
	
		
			
				|  |  | -					<FormGroup>
 | 
	
		
			
				|  |  | -						<label>Judul Dokumen:</label>
 | 
	
		
			
				|  |  | -						<div>
 | 
	
		
			
				|  |  | -							<Input type="text" value={this.state.judulEvaluasi} onChange={this.setjudulEvaluasi} />
 | 
	
		
			
				|  |  | -							{/* <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>
 | 
	
		
			
				|  |  | -						<label>Upload File Pendukung:</label>
 | 
	
		
			
				|  |  | -						<div>
 | 
	
		
			
				|  |  | -							<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>
 | 
	
		
			
				|  |  | -						<div>
 | 
	
		
			
				|  |  | -							<button className="btn btn-sm btn-primary" type="submit">
 | 
	
		
			
				|  |  | -								Simpan Evaluasi
 | 
	
		
			
				|  |  | -							</button>
 | 
	
		
			
				|  |  | -						</div>
 | 
	
		
			
				|  |  | -					</FormGroup>
 | 
	
		
			
				|  |  | -				</form>
 | 
	
		
			
				|  |  | +				<Formik
 | 
	
		
			
				|  |  | +					initialValues={{
 | 
	
		
			
				|  |  | +						tanggal: new Date(),
 | 
	
		
			
				|  |  | +						judul: "",
 | 
	
		
			
				|  |  | +						dokumen: [],
 | 
	
		
			
				|  |  | +					}}
 | 
	
		
			
				|  |  | +					validationSchema={evaluasiSchema}
 | 
	
		
			
				|  |  | +					onSubmit={this.onSubmit}
 | 
	
		
			
				|  |  | +				>
 | 
	
		
			
				|  |  | +					<Form className="form-horizontal">
 | 
	
		
			
				|  |  | +						<FormGroup>
 | 
	
		
			
				|  |  | +							<label className="col-form-label">Tanggal Dokumen</label>
 | 
	
		
			
				|  |  | +							<Field name="tanggal">
 | 
	
		
			
				|  |  | +								{({ field, form }) => (
 | 
	
		
			
				|  |  | +									<Datetime
 | 
	
		
			
				|  |  | +										timeFormat={false}
 | 
	
		
			
				|  |  | +										inputProps={{ className: "form-control" }}
 | 
	
		
			
				|  |  | +										value={field.value}
 | 
	
		
			
				|  |  | +										onChange={(e) => {
 | 
	
		
			
				|  |  | +											form.setFieldValue(field.name, e);
 | 
	
		
			
				|  |  | +										}}
 | 
	
		
			
				|  |  | +									/>
 | 
	
		
			
				|  |  | +								)}
 | 
	
		
			
				|  |  | +							</Field>
 | 
	
		
			
				|  |  | +							<ErrorMessage name="tanggal" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +						</FormGroup>
 | 
	
		
			
				|  |  | +						<FormGroup>
 | 
	
		
			
				|  |  | +							<label className="col-form-label">Judul Dokumen</label>
 | 
	
		
			
				|  |  | +							<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
 | 
	
		
			
				|  |  | +							<ErrorMessage name="judul" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +						</FormGroup>
 | 
	
		
			
				|  |  | +						<FormGroup row>
 | 
	
		
			
				|  |  | +							<label className="col-md-2 col-form-label">Upload File Pendukung</label>
 | 
	
		
			
				|  |  | +							<div className="col-md-10">
 | 
	
		
			
				|  |  | +								<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 p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 | 
	
		
			
				|  |  | +														<input name="dokumen" {...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>
 | 
	
		
			
				|  |  | +									)}
 | 
	
		
			
				|  |  | +								</Field>
 | 
	
		
			
				|  |  | +								<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +						</FormGroup>
 | 
	
		
			
				|  |  | +						<FormGroup row>
 | 
	
		
			
				|  |  | +							<div className="col-xl-10">
 | 
	
		
			
				|  |  | +								<button className="btn btn-sm btn-primary" type="submit">
 | 
	
		
			
				|  |  | +									Simpan Evaluasi
 | 
	
		
			
				|  |  | +								</button>
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +						</FormGroup>
 | 
	
		
			
				|  |  | +					</Form>
 | 
	
		
			
				|  |  | +				</Formik>
 | 
	
		
			
				|  |  |  			</>
 | 
	
		
			
				|  |  |  		);
 | 
	
		
			
				|  |  |  	}
 |