validasi dokumen

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -4,6 +4,8 @@ import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter
 import { addBanding } from "@/actions/banding";
 import { connect } from "react-redux";
 import { toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -19,13 +21,39 @@ class DropzoneWrapper extends Component {
 	}
 }
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const evaluasiSchema = Yup.object().shape({
+	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Harus ada").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+});
 export class ModalPermohonan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			modal1: false,
 			files: [],
-			error: null,
 		};
 	}
 
@@ -66,42 +94,34 @@ export class ModalPermohonan extends Component {
 		});
 	};
 
-	onSubmit = async (e) => {
-		e.preventDefault();
+	onSubmit = async (data) => {
 		const { query, token } = this.props;
 		const { id } = query;
 		const formdata = new FormData();
-		if (this.state.files.length > 0) {
-			this.setState({
-				modal1: !this.state.modal1,
-			});
-
-			this.state.files.forEach((e) => {
+		if (data.dokumen.length > 0) {
+			data.dokumen.forEach((e) => {
 				formdata.append("dokumen", e);
 			});
+		}
+		this.setState({
+			modal1: !this.state.modal1,
+		});
 
-			const toastid = toast.loading("Please wait...");
-			const added = await addBanding(token, id, formdata);
+		const toastid = toast.loading("Please wait...");
+		const added = await addBanding(token, id, formdata);
 
-			if (!added) {
-				toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
-			} else {
-				toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-				Router.push({
-					pathname: "/pt/jawaban-banding",
-				});
-			}
+		if (!added) {
+			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
 		} else {
-			this.setState({ error: "Dokumen harus ada" });
+			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			Router.push({
+				pathname: "/pt/jawaban-banding",
+			});
 		}
 	};
 
-	handleKirim = (e) => {
-		this.onSubmit(e);
-	};
-
 	render() {
-		const { files, error } = this.state;
+		const { files } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -123,38 +143,65 @@ export class ModalPermohonan extends Component {
 				</Modal>
 				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
 					<ModalHeader toggle={this.toggleModal1}>Upload Dokumen Banding</ModalHeader>
-					<ModalBody>
-						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-							<FormGroup>
-								<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</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 ${error ? "text-danger" : ""}`}>{error ? error : "Multiple files upload"}</span>
-								</div>
-							</FormGroup>
-						</form>
-					</ModalBody>
-					<ModalFooter>
-						<Button color="primary" onClick={this.handleKirim}>
-							Kirim
-						</Button>
-					</ModalFooter>
+					<Formik
+						initialValues={{
+							dokumen: [],
+						}}
+						validationSchema={evaluasiSchema}
+						onSubmit={this.onSubmit}
+					>
+						<Form className="form-horizontal">
+							<ModalBody>
+								<FormGroup>
+									<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</label>
+									<div>
+										<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 {...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={(e) => {
+																				this.clearFiles(e);
+																				form.setFieldValue(field.name, []);
+																			}}
+																		>
+																			Clear files
+																		</button>
+																	</small>
+																</div>
+															</div>
+														);
+													}}
+												</DropzoneWrapper>
+											)}
+										</Field>
+										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+									</div>
+								</FormGroup>
+							</ModalBody>
+							<ModalFooter>
+								<Button color="primary" type="submit">
+									Kirim
+								</Button>
+							</ModalFooter>
+						</Form>
+					</Formik>
 				</Modal>
 			</>
 		);

components/PT/Keberatan/ModalPermohonan.js

@@ -5,6 +5,8 @@ import { addKeberatan } from "@/actions/keberatan";
 import { connect } from "react-redux";
 import { notifKeberatan } from "@/actions/notifikasi";
 import { toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -20,13 +22,40 @@ class DropzoneWrapper extends Component {
 	}
 }
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const evaluasiSchema = Yup.object().shape({
+	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+});
+
 export class ModalPermohonan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			modal1: false,
 			files: [],
-			error: null,
 		};
 	}
 
@@ -68,40 +97,34 @@ export class ModalPermohonan extends Component {
 		});
 	};
 
-	onSubmit = async (e) => {
-		e.preventDefault();
-		const { user, query, token } = this.props;
+	onSubmit = async (data) => {
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+		const { query, token } = this.props;
 		const { id } = query;
 		const formdata = new FormData();
-		if (this.state.files.length > 0) {
-			this.setState({
-				modal1: !this.state.modal1,
-			});
-
-			this.state.files.forEach((e) => {
+		if (data.dokumen.length > 0) {
+			data.dokumen.forEach((e) => {
 				formdata.append("dokumen", e);
 			});
-			const tostid = toast.loading("Please wait...");
-			const success = await addKeberatan(token, id, formdata);
-			if (!success) {
-				toast.update(tostid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
-			} else {
-				toast.update(tostid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-				Router.push({
-					pathname: "/pt/jawaban-keberatan",
-				});
-			}
-		} else {
-			this.setState({ error: "Dokumen harus ada" });
 		}
-	};
 
-	handleKirim = (e) => {
-		this.onSubmit(e);
+		const tostid = toast.loading("Please wait...");
+		const success = await addKeberatan(token, id, formdata);
+
+		if (!success) {
+			toast.update(tostid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+		} else {
+			toast.update(tostid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			Router.push({
+				pathname: "/pt/jawaban-keberatan",
+			});
+		}
 	};
 
 	render() {
-		const { files, error } = this.state;
+		const { files } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -123,38 +146,65 @@ export class ModalPermohonan extends Component {
 				</Modal>
 				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
 					<ModalHeader toggle={this.toggleModal1}>Unggah Dokumen Permohonan Keberatan</ModalHeader>
-					<ModalBody>
-						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-							<FormGroup>
-								<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah surat permohonan keberatan atas pengenaan sanksi administratif & dokumen pendukungnya</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 ${error ? "text-danger" : ""}`}>{error ? error : "Multiple files upload"}</span>
-								</div>
-							</FormGroup>
-						</form>
-					</ModalBody>
-					<ModalFooter>
-						<Button color="primary" onClick={this.handleKirim}>
-							Kirim
-						</Button>
-					</ModalFooter>
+					<Formik
+						initialValues={{
+							dokumen: [],
+						}}
+						validationSchema={evaluasiSchema}
+						onSubmit={this.onSubmit}
+					>
+						<Form className="form-horizontal">
+							<ModalBody>
+								<FormGroup>
+									<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</label>
+									<div>
+										<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 {...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={(e) => {
+																				this.clearFiles(e);
+																				form.setFieldValue(field.name, []);
+																			}}
+																		>
+																			Clear files
+																		</button>
+																	</small>
+																</div>
+															</div>
+														);
+													}}
+												</DropzoneWrapper>
+											)}
+										</Field>
+										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+									</div>
+								</FormGroup>
+							</ModalBody>
+							<ModalFooter>
+								<Button color="primary" type="submit">
+									Kirim
+								</Button>
+							</ModalFooter>
+						</Form>
+					</Formik>
 				</Modal>
 			</>
 		);

components/Pelaporan/InputData.js

@@ -237,7 +237,14 @@ export class InputData extends Component {
 														<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}>
+																<button
+																	type="button"
+																	className="btn btn-link"
+																	onClick={(e) => {
+																		this.clearFiles(e);
+																		form.setFieldValue(field.name, []);
+																	}}
+																>
 																	Clear files
 																</button>
 															</small>

components/Pemeriksaan/InputEvaluasi.js

@@ -199,7 +199,14 @@ export default class InputEvaluasi extends Component {
 														<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}>
+																<button
+																	type="button"
+																	className="btn btn-link"
+																	onClick={(e) => {
+																		this.clearFiles(e);
+																		form.setFieldValue(field.name, []);
+																	}}
+																>
 																	Clear files
 																</button>
 															</small>

pages/app/banding/detail.js

@@ -33,9 +33,33 @@ class DropzoneWrapper extends Component {
 }
 
 const selectInstanceId = 1;
+
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
 const jawabanBandingSchema = Yup.object().shape({
 	status: Yup.string().required("Harap Diisi"),
-	dokumen: Yup.array().min(1).required(),
+	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 class JawabanBanding extends Component {
 	constructor(props) {
@@ -212,7 +236,14 @@ class JawabanBanding extends Component {
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
-																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																									<button
+																										type="button"
+																										className="btn btn-link"
+																										onClick={(e) => {
+																											this.clearFiles(e);
+																											form.setFieldValue(field.name, []);
+																										}}
+																									>
 																										Clear files
 																									</button>
 																								</small>

pages/app/keberatan/detail.js

@@ -33,10 +33,35 @@ class DropzoneWrapper extends Component {
 }
 
 const selectInstanceId = 1;
+
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
 const jawabanKeberatanSchema = Yup.object().shape({
 	status: Yup.string().required("Harap Diisi"),
 	keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
-	dokumen: Yup.array().notRequired(),
+	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 class DetailKeberatan extends Component {
 	constructor(props) {
@@ -234,7 +259,14 @@ class DetailKeberatan extends Component {
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
-																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																									<button
+																										type="button"
+																										className="btn btn-link"
+																										onClick={(e) => {
+																											this.clearFiles(e);
+																											form.setFieldValue(field.name, []);
+																										}}
+																									>
 																										Clear files
 																									</button>
 																								</small>

pages/app/pencabutan-sanksi/detail.js

@@ -18,10 +18,33 @@ import { connect } from "react-redux";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
 const jawabanCabutSanksiSchema = Yup.object().shape({
 	status: Yup.string().required("Harap Diisi"),
 	keterangan: Yup.string().max(200).notRequired(),
-	dokumen: Yup.array().notRequired(),
+	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
 let Dropzone = null;
@@ -230,7 +253,14 @@ class JawabanPencabutanSanksi extends Component {
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
-																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																									<button
+																										type="button"
+																										className="btn btn-link"
+																										onClick={(e) => {
+																											this.clearFiles(e);
+																											form.setFieldValue(field.name, []);
+																										}}
+																									>
 																										Clear files
 																									</button>
 																								</small>

pages/pt/dokumen-perbaikan/detail.js

@@ -16,9 +16,32 @@ import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
 const perbaikanSchema = Yup.object().shape({
 	keterangan: Yup.string().min(3).max(200).required("Harap diisi"),
-	dokumen: Yup.array().min(1).required("Harap diisi"),
+	dokumen: Yup.array().min(1, "minimal terdapat 1 dokumen").required("Harap diisi").test("filesize", "Maksimal ukuran Dokumen 15mb", checkIfFilesAreTooBig),
 });
 
 let Dropzone = null;
@@ -204,40 +227,6 @@ class DetailPerbaikanDoc extends Component {
 														</Form>
 													)}
 												</Formik>
-												{/* <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-													
-													<FormGroup>
-														<label className="row-form-label">Upload Dokumen:</label>
-														<div className="row-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>
-														</div>
-													</FormGroup>
-													<FormGroup>
-														<div className="row-xl-10">
-															<Button color="primary" onClick={this.handleKirim} type="submit">
-																Kirim
-															</Button>
-														</div>
-													</FormGroup>
-												</form> */}
 											</Col>
 										</Row>
 									</CardBody>
@@ -251,7 +240,7 @@ class DetailPerbaikanDoc extends Component {
 					{sanksi.data && (
 						<Row>
 							<Col>
-								<Riwayat data={sanksi.data.perbaikan || []} />
+								<Riwayat data={sanksi.data.perbaikan} />
 							</Col>
 						</Row>
 					)}

pages/pt/pencabutan-sanksi/detail.js

@@ -15,8 +15,32 @@ import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
 const docSchema = Yup.object().shape({
-	dokumen: Yup.array().min(1).required("Required"),
+	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 let Dropzone = null;
 class DropzoneWrapper extends Component {