caption detail laporan

components/Pelaporan/InputData.js

@@ -1,277 +1,277 @@
-import React, { Component } from "react";
-import Router from "next/router";
-import { getPelanggaranPublic } from "@/actions/pelanggaran";
-import { createPelaporan } from "@/actions/pelaporan";
-import Select from "react-select";
-import { Row, Col, FormGroup, Input } from "reactstrap";
-import { connect } from "react-redux";
-import { ToastContainer, toast } from "react-toastify";
-import moment from "moment";
-import "react-toastify/dist/ReactToastify.css";
-import { Formik, Form, Field, ErrorMessage } from "formik";
-import * as Yup from "yup";
-
-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 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 selectInstanceId = 1;
-const laporanSchema = Yup.object().shape({
-	no_laporan: Yup.string().required("Harap Diisi"),
-	keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
-	pelanggaran: Yup.array().min(1).required("Harap Diisi"),
-	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
-});
-export class InputData extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			dropdownOpen: false,
-			splitButtonOpen: false,
-			selectedOptionMulti: [],
-			stat: "Waiting to add files..",
-			pelaporanNumber: moment(new Date()).format("DDMM") + "" + Math.floor(Math.random() * 1000000),
-			keteranganLaporan: "",
-			files: [],
-			pelanggaran: [],
-		};
-	}
-
-	componentDidMount = async () => {
-		const pelanggaran = await getPelanggaranPublic();
-		this.setState({ pelanggaran });
-	};
-
-	optionsJenisPelanggaran = (pelanggaran) => {
-		return pelanggaran.data.map((e) => ({ value: e._id, label: e.pelanggaran, className: "State-ACT" }));
-	};
-
-	setKeteranganPelaporan = (e) => {
-		this.setState({ keteranganLaporan: e.target.value });
-	};
-
-	toggleDropDown = () => {
-		this.setState({
-			dropdownOpen: !this.state.dropdownOpen,
-		});
-	};
-
-	toggleSplit = () => {
-		this.setState({
-			splitButtonOpen: !this.state.splitButtonOpen,
-		});
-	};
-
-	handleChangeSelectMulti = (selectedOptionMulti) => {
-		this.setState({ selectedOptionMulti });
-	};
-
-	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 (data) => {
-		const { token, query } = this.props;
-		const formdata = new FormData();
-		formdata.append("no_laporan", data.no_laporan);
-		formdata.append("pt_id", query.ptId);
-		formdata.append("keterangan", data.keterangan);
-		formdata.append("pelanggaran_id", data.pelanggaran.join());
-		if (data.dokumen.length > 0) {
-			data.dokumen.forEach((e) => {
-				formdata.append("dokumen", e);
-			});
-		}
-
-		const create = createPelaporan(token, formdata);
-		await toast.promise(create, {
-			pending: "Loading...",
-			success: "Berhasil buat laporan",
-			error: "Gagal buat laporan",
-		});
-
-		Router.push({
-			pathname: "/app/pelaporan",
-		});
-	};
-
-	render() {
-		const { selectedOptionMulti, files, pelanggaran } = 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 (
-			<Formik
-				initialValues={{
-					no_laporan: this.state.pelaporanNumber,
-					keterangan: "",
-					pelanggaran: [],
-					dokumen: [],
-				}}
-				validationSchema={laporanSchema}
-				onSubmit={this.onSubmit}
-			>
-				{({ isSubmitting }) => (
-					<Form>
-						<FormGroup row>
-							<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
-							<div className="col-md-10">
-								<Input type="text" name="no_laporan" disabled value={this.state.pelaporanNumber} />
-								<span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
-							</div>
-						</FormGroup>
-
-						<FormGroup row>
-							<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
-							<div className="col-md-10">
-								<Field name="pelanggaran">
-									{({ field, form, meta }) => (
-										<Select
-											instanceId={selectInstanceId + 1}
-											name="pelanggaran"
-											isMulti
-											value={selectedOptionMulti}
-											onChange={(e) => {
-												this.handleChangeSelectMulti(e);
-												form.setFieldValue(
-													field.name,
-													e.map((e) => e.value)
-												);
-											}}
-											options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []}
-											required
-										/>
-									)}
-								</Field>
-								<ErrorMessage name="pelanggaran" component="div" className="form-text text-danger" />
-							</div>
-						</FormGroup>
-
-						<FormGroup row>
-							<label className="col-md-2 col-form-label">Keterangan Laporan</label>
-							<div className="col-md-10">
-								<Field name="keterangan">{({ field }) => <Input type="textarea" placeholder="Keterangan Laporan" {...field} />}</Field>
-								<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
-							</div>
-						</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={(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>
-
-						<FormGroup row>
-							<div className="col-xl-10">
-								<button className="btn btn-sm btn-primary" type="submit" disabled={isSubmitting}>
-									Submit Laporan
-								</button>
-							</div>
-						</FormGroup>
-					</Form>
-				)}
-			</Formik>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(InputData);
+import React, { Component } from "react";
+import Router from "next/router";
+import { getPelanggaranPublic } from "@/actions/pelanggaran";
+import { createPelaporan } from "@/actions/pelaporan";
+import Select from "react-select";
+import { Row, Col, FormGroup, Input } from "reactstrap";
+import { connect } from "react-redux";
+import { ToastContainer, toast } from "react-toastify";
+import moment from "moment";
+import "react-toastify/dist/ReactToastify.css";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+
+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 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 selectInstanceId = 1;
+const laporanSchema = Yup.object().shape({
+	no_laporan: Yup.string().required("Harap Diisi"),
+	keterangan: Yup.string().min(3).max(200).required("Wajib Diisi"),
+	pelanggaran: Yup.array().min(1, "Wajib Diisi").required("Wajib Diisi"),
+	dokumen: Yup.array().min(1, "Wajib Upload Dokumen").required().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig,),
+});
+export class InputData extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			dropdownOpen: false,
+			splitButtonOpen: false,
+			selectedOptionMulti: [],
+			stat: "Waiting to add files..",
+			pelaporanNumber: moment(new Date()).format("DDMM") + "" + Math.floor(Math.random() * 1000000),
+			keteranganLaporan: "",
+			files: [],
+			pelanggaran: [],
+		};
+	}
+
+	componentDidMount = async () => {
+		const pelanggaran = await getPelanggaranPublic();
+		this.setState({ pelanggaran });
+	};
+
+	optionsJenisPelanggaran = (pelanggaran) => {
+		return pelanggaran.data.map((e) => ({ value: e._id, label: e.pelanggaran, className: "State-ACT" }));
+	};
+
+	setKeteranganPelaporan = (e) => {
+		this.setState({ keteranganLaporan: e.target.value });
+	};
+
+	toggleDropDown = () => {
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+	};
+
+	toggleSplit = () => {
+		this.setState({
+			splitButtonOpen: !this.state.splitButtonOpen,
+		});
+	};
+
+	handleChangeSelectMulti = (selectedOptionMulti) => {
+		this.setState({ selectedOptionMulti });
+	};
+
+	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 (data) => {
+		const { token, query } = this.props;
+		const formdata = new FormData();
+		formdata.append("no_laporan", data.no_laporan);
+		formdata.append("pt_id", query.ptId);
+		formdata.append("keterangan", data.keterangan);
+		formdata.append("pelanggaran", data.pelanggaran.join());
+		if (data.dokumen.length > 0) {
+			data.dokumen.forEach((e) => {
+				formdata.append("dokumen", e);
+			});
+		}
+
+		const create = createPelaporan(token, formdata);
+		await toast.promise(create, {
+			pending: "Loading...",
+			success: "Berhasil buat laporan",
+			error: "Gagal buat laporan",
+		});
+
+		Router.push({
+			pathname: "/app/pelaporan",
+		});
+	};
+
+	render() {
+		const { selectedOptionMulti, files, pelanggaran } = 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 (
+			<Formik
+				initialValues={{
+					no_laporan: this.state.pelaporanNumber,
+					keterangan: "",
+					pelanggaran: [],
+					dokumen: [],
+				}}
+				validationSchema={laporanSchema}
+				onSubmit={this.onSubmit}
+			>
+				{({ isSubmitting }) => (
+					<Form>
+						<FormGroup row>
+							<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
+							<div className="col-md-10">
+								<Input type="text" name="no_laporan" disabled value={this.state.pelaporanNumber} />
+								<span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
+							</div>
+						</FormGroup>
+
+						<FormGroup row>
+							<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
+							<div className="col-md-10">
+								<Field name="pelanggaran">
+									{({ field, form, meta }) => (
+										<Select
+											instanceId={selectInstanceId + 1}
+											name="pelanggaran"
+											isMulti
+											value={selectedOptionMulti}
+											onChange={(e) => {
+												this.handleChangeSelectMulti(e);
+												form.setFieldValue(
+													field.name,
+													e.map((e) => e.value)
+												);
+											}}
+											options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []}
+											required
+										/>
+									)}
+								</Field>
+								<ErrorMessage name="pelanggaran" component="div" className="form-text text-danger" />
+							</div>
+						</FormGroup>
+
+						<FormGroup row>
+							<label className="col-md-2 col-form-label">Keterangan Laporan</label>
+							<div className="col-md-10">
+								<Field name="keterangan">{({ field }) => <Input type="textarea" placeholder="Keterangan Laporan" {...field} />}</Field>
+								<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+							</div>
+						</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={(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>
+
+						<FormGroup row>
+							<div className="col-xl-10">
+								<button className="btn btn-sm btn-primary" type="submit" disabled={isSubmitting}>
+									Submit Laporan
+								</button>
+							</div>
+						</FormGroup>
+					</Form>
+				)}
+			</Formik>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(InputData);

pages/laporan/new/index.js

@@ -43,17 +43,17 @@ const checkIfFilesAreCorrectType = (files) => {
 };
 
 const laporanSchema = Yup.object().shape({
-	no_laporan: Yup.string().required("Harap Diisi"),
-	no_hp: Yup.number().required("Harap Diisi"),
+	no_laporan: Yup.string().required(),
+	no_hp: Yup.number().required("Wajib Diisi"),
 	nama: Yup.string().notRequired(),
 	setuju: Yup.boolean().isTrue("Harap diceklis"),
 	alamat: Yup.string().min(3, "Minimal 3 huruf").max(200, "Maksimal 200 huruf").notRequired(),
-	keterangan: Yup.string().min(3, "Minimal 3 huruf").max(200, "Maksimal 200 huruf").required("Harap Diisi"),
+	keterangan: Yup.string().min(3, "Minimal 3 huruf").max(200, "Maksimal 200 huruf").required("Wajib Diisi"),
 	email: Yup.string().email().notRequired(),
-	pelanggaran_id: Yup.array().min(1, "Minimal terdapat 1 jenis pelanggaran").required("Harap Diisi"),
-	pt_id: Yup.string().required("Harap Diisi"),
+	pelanggaran_id: Yup.array().min(1, "Minimal terdapat 1 jenis pelanggaran").required("Wajib Diisi"),
+	pt_id: Yup.string().required("Wajib Diisi"),
 	foto: Yup.array().notRequired().test("filesize", "Maksimal ukuran foto 15mb", checkIfFilesAreTooBig).test("type", "harus jpeg/png", checkIfFilesAreCorrectType),
-	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+	dokumen: Yup.array().min(1, "Wajib upload dokumen").required().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 	is_private: Yup.boolean().notRequired(),
 });
 
@@ -276,7 +276,7 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													Nomor Aktif<span className="text-warning">*</span>
+													Nomor Aktif<span className="star-color">*</span>
 												</label>
 												<div className="col-md-10">
 													<Field name="no_hp">{({ field, form }) => <Input type="tel" {...field} />}</Field>
@@ -326,7 +326,7 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													Perguruan Tinggi yang Dilaporkan<span className="text-warning">*</span>
+													Perguruan Tinggi yang Dilaporkan<span className="star-color">*</span>
 												</label>
 												<div className="col-md-10">
 													<Field name="pt_id">
@@ -348,7 +348,7 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													Jenis Pelanggaran<span className="text-warning">*</span>
+													Jenis Pelanggaran<span className="star-color">*</span>
 												</label>
 												<div className="col-md-10">
 													<Field name="pelanggaran_id">
@@ -374,7 +374,7 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													Keterangan Laporan<span className="text-warning">*</span>
+													Keterangan Laporan<span className="star-color">*</span>
 												</label>
 												<div className="col-md-10">
 													<Field name="keterangan">{({ field }) => <Input type="textarea" {...field} />}</Field>
@@ -383,11 +383,10 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													File Pendukung<span className="text-warning">*</span>
+													File Pendukung<span className="star-color">*</span>
 												</label>
 												<div className="col-md-10">
 													<Field name="dokumen">{({ field, form }) => <Input type="file" multiple onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
-													<p>Ukuran maksimal tiap-tiap dokumen adalah 15mb</p>
 													<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
 												</div>
 											</FormGroup>