|  | @@ -42,7 +42,8 @@ const checkIfFilesAreCorrectType = (files) => {
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const docSchema = Yup.object().shape({
 | 
	
		
			
				|  |  | -	dokumen: Yup.array().max(2, "Maximal 2 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 | 
	
		
			
				|  |  | +	dokumen: Yup.array().max(1, "Maximal 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 | 
	
		
			
				|  |  | +	dokumenRekom: Yup.array().max(1, "Maximal 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 | 
	
		
			
				|  |  |  });
 | 
	
		
			
				|  |  |  let Dropzone = null;
 | 
	
		
			
				|  |  |  class DropzoneWrapper extends Component {
 | 
	
	
		
			
				|  | @@ -63,6 +64,7 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  		super(props);
 | 
	
		
			
				|  |  |  		this.state = {
 | 
	
		
			
				|  |  |  			files: [],
 | 
	
		
			
				|  |  | +			filesRekom: [],
 | 
	
		
			
				|  |  |  			sanksi: {},
 | 
	
		
			
				|  |  |  			pt: null,
 | 
	
		
			
				|  |  |  			error: null,
 | 
	
	
		
			
				|  | @@ -90,19 +92,29 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  			stat: "Added " + selectedFile.length + " file(s)",
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  |  		const selectFile = this.state.selectedFile
 | 
	
		
			
				|  |  | -		this.setState(prevState => ({
 | 
	
		
			
				|  |  | -			files: [...prevState.files, ...selectFile]
 | 
	
		
			
				|  |  | -		}))
 | 
	
		
			
				|  |  | +		// this.setState(prevState => ({
 | 
	
		
			
				|  |  | +		// 	files: [...prevState.files, ...selectFile]
 | 
	
		
			
				|  |  | +		// }))
 | 
	
		
			
				|  |  | +		this.setState({ files: selectFile })
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -	uploadFiles = (e) => {
 | 
	
		
			
				|  |  | -		e.preventDefault();
 | 
	
		
			
				|  |  | -		e.stopPropagation();
 | 
	
		
			
				|  |  | +	onDropRekom = (selectedFile) => {
 | 
	
		
			
				|  |  |  		this.setState({
 | 
	
		
			
				|  |  | -			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
 | 
	
		
			
				|  |  | +			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 => ({
 | 
	
		
			
				|  |  | +		// 	filesRekom: [...prevState.filesRekom, ...selectFile]
 | 
	
		
			
				|  |  | +		// }))
 | 
	
		
			
				|  |  | +		this.setState({ filesRekom: selectFile })
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  	clearFiles = (e) => {
 | 
	
		
			
				|  |  |  		e.preventDefault();
 | 
	
		
			
				|  |  |  		e.stopPropagation();
 | 
	
	
		
			
				|  | @@ -113,7 +125,16 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  			files: [],
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +	clearFilesRekom = (e) => {
 | 
	
		
			
				|  |  | +		e.preventDefault();
 | 
	
		
			
				|  |  | +		e.stopPropagation();
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			stat: this.state.filesRekom.length ? this.state.filesRekom.length + " file(s) cleared." : "No files to clear.",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			filesRekom: [],
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  |  	handleKirim = async (data) => {
 | 
	
		
			
				|  |  |  		const getToken = await getCsrf();
 | 
	
		
			
				|  |  |  		const _csrf = getToken.token;
 | 
	
	
		
			
				|  | @@ -122,6 +143,9 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  		data.dokumen.forEach((e) => {
 | 
	
		
			
				|  |  |  			formdata.append("dokumen", e);
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  | +		data.dokumenRekom.forEach((e) => {
 | 
	
		
			
				|  |  | +			formdata.append("dokumen_rekomendasi", e);
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  |  		const id = toast.loading("Please wait...");
 | 
	
		
			
				|  |  |  		// await FinalisasiPerbaikan(token, query.id, { is_finalisasi: "true" }, _csrf)
 | 
	
		
			
				|  |  |  		const added = await addCabutSanksi(token, query.id, formdata, _csrf);
 | 
	
	
		
			
				|  | @@ -134,11 +158,16 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  			});
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  | -	
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -	render() {
 | 
	
		
			
				|  |  | -		const { files, sanksi, pt } = this.state;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +	render() {
 | 
	
		
			
				|  |  | +		const { files, sanksi, pt, filesRekom } = this.state;
 | 
	
		
			
				|  |  | +		const thumbsRekom = filesRekom.map((file, index) => (
 | 
	
		
			
				|  |  | +			<div md={3} key={index}>
 | 
	
		
			
				|  |  | +				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
 | 
	
		
			
				|  |  | +				<span className="text-left">{index + 1}.{file.name}</span>
 | 
	
		
			
				|  |  | +			</div>
 | 
	
		
			
				|  |  | +		));
 | 
	
		
			
				|  |  |  		const thumbs = files.map((file, index) => (
 | 
	
		
			
				|  |  |  			<div md={3} key={index}>
 | 
	
		
			
				|  |  |  				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
 | 
	
	
		
			
				|  | @@ -177,6 +206,7 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  												<Formik
 | 
	
		
			
				|  |  |  													initialValues={{
 | 
	
		
			
				|  |  |  														dokumen: [],
 | 
	
		
			
				|  |  | +														dokumenRekom: []
 | 
	
		
			
				|  |  |  													}}
 | 
	
		
			
				|  |  |  													validationSchema={docSchema}
 | 
	
		
			
				|  |  |  													onSubmit={this.handleKirim}
 | 
	
	
		
			
				|  | @@ -184,7 +214,7 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  													{() => (
 | 
	
		
			
				|  |  |  														<Form className="form-horizontal">
 | 
	
		
			
				|  |  |  															<FormGroup>
 | 
	
		
			
				|  |  | -																<label className="row-form-label">Upload Dokumen:</label>
 | 
	
		
			
				|  |  | +																<label className="row-form-label"><span className=" font-12 font-weight-bold">Surat permohonan pencabutan sanksi :</span></label>
 | 
	
		
			
				|  |  |  																<div className=" font-color-black block">Note : Dokumen perbaikan akan diperiksa setelah surat permohonan pencabutan sanksi diunggah</div>
 | 
	
		
			
				|  |  |  																<div className="row-md-10">
 | 
	
		
			
				|  |  |  																	<Field name="dokumen">
 | 
	
	
		
			
				|  | @@ -225,9 +255,51 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  																	<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  |  																</div>
 | 
	
		
			
				|  |  |  															</FormGroup>
 | 
	
		
			
				|  |  | +															<FormGroup>
 | 
	
		
			
				|  |  | +																<label className="row-form-label"><span className=" font-12 font-weight-bold">Rekomendasi pencabutan sanksi dari LLDIKTI :</span></label>
 | 
	
		
			
				|  |  | +																<div className="row-md-10">
 | 
	
		
			
				|  |  | +																	<Field name="dokumenRekom">
 | 
	
		
			
				|  |  | +																		{({ field, form }) => (
 | 
	
		
			
				|  |  | +																			<DropzoneWrapper
 | 
	
		
			
				|  |  | +																				className=""
 | 
	
		
			
				|  |  | +																				onDrop={(e) => {
 | 
	
		
			
				|  |  | +																					this.onDropRekom(e);
 | 
	
		
			
				|  |  | +																					form.setFieldValue(field.name, e);
 | 
	
		
			
				|  |  | +																				}}
 | 
	
		
			
				|  |  | +																			>
 | 
	
		
			
				|  |  | +																				{({ getRootProps, getInputProps, isDragActive }) => {
 | 
	
		
			
				|  |  | +																					return (
 | 
	
		
			
				|  |  | +																						<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 | 
	
		
			
				|  |  | +																							<input {...getInputProps()} />
 | 
	
		
			
				|  |  | +																							<div className="dropzone-previews flex">
 | 
	
		
			
				|  |  | +																								<div className="dropzone-style-1">
 | 
	
		
			
				|  |  | +																									<div className="center-ver-hor dropzone-previews flex">{this.state.filesRekom.length > 0 ? <Row><span className="text-left">{thumbsRekom
 | 
	
		
			
				|  |  | +																									}</span></Row> :
 | 
	
		
			
				|  |  | +																										<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>
 | 
	
		
			
				|  |  | +																							<div className="d-flex align-items-center">
 | 
	
		
			
				|  |  | +																								<small className="ml-auto">
 | 
	
		
			
				|  |  | +																									<button type="button" className="btn btn-link" onClick={this.clearFilesRekom}>
 | 
	
		
			
				|  |  | +																										Clear files
 | 
	
		
			
				|  |  | +																									</button>
 | 
	
		
			
				|  |  | +																								</small>
 | 
	
		
			
				|  |  | +																							</div>
 | 
	
		
			
				|  |  | +																						</div>
 | 
	
		
			
				|  |  | +																					);
 | 
	
		
			
				|  |  | +																				}}
 | 
	
		
			
				|  |  | +																			</DropzoneWrapper>
 | 
	
		
			
				|  |  | +																		)}
 | 
	
		
			
				|  |  | +																	</Field>
 | 
	
		
			
				|  |  | +																	<ErrorMessage name="dokumenRekom" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +																</div>
 | 
	
		
			
				|  |  | +															</FormGroup>
 | 
	
		
			
				|  |  |  															<FormGroup>
 | 
	
		
			
				|  |  |  																<div className="row-xl-10">
 | 
	
		
			
				|  |  | -																	<Button color className="color-3e3a8e" disabled={ sanksi.data.is_finalisasi === false || false||lastPengajuan?.index + 1 === sanksi?.data?.index_perbaikan} type="submit">
 | 
	
		
			
				|  |  | +																	<Button color className="color-3e3a8e" disabled={sanksi.data.is_finalisasi === false || false || lastPengajuan?.index + 1 === sanksi?.data?.index_perbaikan} type="submit">
 | 
	
		
			
				|  |  |  																		<span className="font-color-white">
 | 
	
		
			
				|  |  |  																			Kirim
 | 
	
		
			
				|  |  |  																		</span>
 | 
	
	
		
			
				|  | @@ -250,7 +322,7 @@ class DetailPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  					{sanksi.data && (
 | 
	
		
			
				|  |  |  						<Row>
 | 
	
		
			
				|  |  |  							<Col>
 | 
	
		
			
				|  |  | -								<Riwayat data={sanksi.data?.riwayat_pengajuan_cabut_sanksi } />
 | 
	
		
			
				|  |  | +								<Riwayat data={sanksi.data?.riwayat_pengajuan_cabut_sanksi} />
 | 
	
		
			
				|  |  |  							</Col>
 | 
	
		
			
				|  |  |  						</Row>
 | 
	
		
			
				|  |  |  					)}
 |