redudansi di menu penjadwalan

components/Extras/calendar.view.js

@@ -26,7 +26,17 @@ import { createLog } from "../../actions/log";
 moment.locale('id')
 import Swal from "sweetalert2";
 
-
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
 const status = [
 	{ value: "Ditindaklanjuti DIKTI", label: "Ditindaklanjuti DIKTI", className: "State-ACT" },
 	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
@@ -47,7 +57,27 @@ const jadwalSchema = Yup.object().shape({
 
 const laporanSchema = Yup.object().shape({
 	keterangan: Yup.string().required("Harus diisi"),
+	dokumen: Yup.array().min(1).test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+});
+const ditutupSchema = Yup.object().shape({
+	keterangan: Yup.string().required("Harus diisi"),
+	dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
+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;
+	}
+}
+
 
 class Calendar extends Component {
 	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];
@@ -71,9 +101,44 @@ class Calendar extends Component {
 			selectedOption: null,
 			color: "",
 			disabled: true,
+			files: [],
 		};
 	}
 
+	onDrop = (selectedFile) => {
+		this.setState({
+			selectedFile: selectedFile.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + selectedFile.length + " file(s)",
+		});
+		const selectFile = this.state.selectedFile
+		this.setState(prevState => ({
+			files: [...prevState.files, ...selectFile]
+		}))
+	};
+
+	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: [],
+		});
+	};
+
 	static getInitialProps = ({ query }) => ({ query });
 
 	async componentDidMount() {
@@ -214,13 +279,19 @@ class Calendar extends Component {
 			if (value.status.value === this.getStatus()[1].value || value.status.value === this.getStatus()[2].value) {
 				const toastid = toast.loading("Please wait...");
 				const data = { keterangan: value.keterangan };
+				const formdata = new FormData();
+				formdata.append("keterangan", value.keterangan);
+				this.state.files.forEach((e) => {
+					formdata.append("dokumen", e);
+				});
+				formdata.append("aktif", "false");
 				if (value.status.value === this.getStatus()[1].value) {
 					data.change_role = "true";
 					update = await updateLaporan(token, id, data, _csrf);
 					Router.push("/app/penjadwalan");
 				} else if (value.status.value === this.getStatus()[2].value) {
-					data.aktif = "false";
-					update = await updateLaporan(token, id, data, _csrf);
+
+					update = await updateLaporan(token, id, formdata, _csrf + `&redudansi=true`);
 					Router.push("/app/penjadwalan");
 				}
 				if (!update) {
@@ -240,7 +311,20 @@ class Calendar extends Component {
 	};
 
 	render() {
-		const { externalEvents, laporan, selectedOption, selectedEvent } = this.state;
+		const { files, externalEvents, laporan, selectedOption, selectedEvent } = this.state;
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
+		const thumbs = files.map((file, index) => (
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
+		));
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -263,7 +347,7 @@ class Calendar extends Component {
 							<Col>
 								<Card className="card-default">
 									<CardBody>
-										<DetailLaporan noStatus data={laporan.data} role={this.props.user.role.id}/>
+										<DetailLaporan noStatus data={laporan.data} role={this.props.user.role.id} />
 									</CardBody>
 								</Card>
 							</Col>
@@ -316,11 +400,78 @@ class Calendar extends Component {
 														{selectedOption?.value === this.getStatus()[0].value ? (
 															""
 														) : (
-															<FormGroup>
-																<label className="col-form-label">Keterangan<span className=" text-danger">*</span></label>
-																<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
-																<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
-															</FormGroup>
+															selectedOption?.value === this.getStatus()[1].value ? (
+																<FormGroup>
+																	<label className="col-form-label">Keterangan<span className=" text-danger">*</span></label>
+																	<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
+																	<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+																</FormGroup>
+															) : (
+																<div>
+																	<FormGroup >
+																		<label className="col-form-label">Keterangan<span className=" text-danger">*</span></label>
+																		<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
+																		<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+																	</FormGroup>
+																	<FormGroup >
+																		<label className=" col-form-label">Upload File Pendukung<span className="text-danger">*</span></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" + (isDragActive ? "dropzone-drag-active" : "")}>
+																									<input name="dokumen" {...getInputProps()} />
+																									<div className="dropzone-style-1">
+																										<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																											<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																												<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																											</div> :
+																											<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																												<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
+																											</div>
+																										}
+																										</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, []);
+																												}}
+																											>
+																												Reset dokumen
+																											</button>
+																										</small>
+																									</div>
+																								</div>
+																							);
+																						}}
+																					</DropzoneWrapper>
+																				)}
+																			</Field>
+																			{thumbs}
+																			<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+																			<p className="mrgn-top-5 font-color-black">
+																				Ukuran setiap dokumen maksimal 15mb
+																			</p>
+																		</div>
+																	</FormGroup>
+																</div>
+
+															)
+
+
 														)}
 														<div className="btn-simpanjadwal">
 															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan color-3e3a8e" color block disabled={laporan.data?.sanksi || isSubmitting} >
@@ -459,7 +610,7 @@ class Calendar extends Component {
 						</div>
 					</div>
 				</div>
-			</ContentWrapper>
+			</ContentWrapper >
 		);
 	}
 }

components/Pemeriksaan/InputEvaluasi.js

@@ -130,15 +130,6 @@ class InputEvaluasi extends Component {
 			stat: "Added " + selectedFile.length + " file(s)",
 		});
 		const selectFile = this.state.selectedFile
-		// this.state.files.push(...this.state.selectedFile)
-		// this.setState({
-		// 	files: files.map((file) =>
-		// 		Object.assign(file, {
-		// 			preview: URL.createObjectURL(file),
-		// 		})
-		// 	),
-		// 	stat: "Added " + files.length + " file(s)",
-		// });
 		this.setState(prevState => ({
 			files: [...prevState.files, ...selectFile]
 		}))
@@ -371,16 +362,17 @@ class InputEvaluasi extends Component {
 												Ukuran setiap dokumen maksimal 15mb
 											</p>
 										</div>
-										<FormGroup>
-											<div className="col-xl-10">
-												<Button color className="btn-login width-133 mt-4" type="submit" disabled={isSubmitting}>
-													<span className="font-color-white">
-														Tutup Laporan
-													</span>
-												</Button>
-											</div>
-										</FormGroup>
 									</FormGroup>
+									<FormGroup>
+										<div className="col-xl-10">
+											<Button color className="btn-login width-133 mt-4" type="submit" disabled={isSubmitting}>
+												<span className="font-color-white">
+													Tutup Laporan
+												</span>
+											</Button>
+										</div>
+									</FormGroup>
+
 								</div>