|  | @@ -61,6 +61,11 @@ const checkIfFilesAreCorrectType = (files) => {
 | 
	
		
			
				|  |  |  const jawabanBandingSchema = Yup.object().shape({
 | 
	
		
			
				|  |  |  	status: Yup.string().required("Harap Diisi"),
 | 
	
		
			
				|  |  |  	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 | 
	
		
			
				|  |  | +	keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
 | 
	
		
			
				|  |  | +	dokumen_terima_banding: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 | 
	
		
			
				|  |  | +	tanggal_terima_banding: Yup.string().notRequired("Wajib diisi"),
 | 
	
		
			
				|  |  | +	no_banding: Yup.string().min(3).notRequired("Harap Diisi"),
 | 
	
		
			
				|  |  | +	tanggal_surat_banding: Yup.string().notRequired("Wajib diisi"),
 | 
	
		
			
				|  |  |  });
 | 
	
		
			
				|  |  |  class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  	constructor(props) {
 | 
	
	
		
			
				|  | @@ -71,6 +76,11 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  			files: [],
 | 
	
		
			
				|  |  |  			sanksi: {},
 | 
	
		
			
				|  |  |  			pt: null,
 | 
	
		
			
				|  |  | +			fileDocTerimaBanding: [],
 | 
	
		
			
				|  |  | +			no_banding: "",
 | 
	
		
			
				|  |  | +			tglJawabanBanding: "",
 | 
	
		
			
				|  |  | +			keterangan: "",
 | 
	
		
			
				|  |  | +			tglSuratBanding: "",
 | 
	
		
			
				|  |  |  		};
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -106,6 +116,16 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  			stat: "Added " + files.length + " file(s)",
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  | +	onDropDocTerimaBanding = (fileDocTerimaBanding) => {
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			fileDocTerimaBanding: fileDocTerimaBanding.map((file) =>
 | 
	
		
			
				|  |  | +				Object.assign(file, {
 | 
	
		
			
				|  |  | +					preview: URL.createObjectURL(file),
 | 
	
		
			
				|  |  | +				})
 | 
	
		
			
				|  |  | +			),
 | 
	
		
			
				|  |  | +			stat: "Added " + fileDocTerimaBanding.length + " file(s)",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	uploadFiles = (e) => {
 | 
	
		
			
				|  |  |  		e.preventDefault();
 | 
	
	
		
			
				|  | @@ -125,6 +145,18 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  			files: [],
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  | +	clearFilesDocTerimaBandig = (e) => {
 | 
	
		
			
				|  |  | +		e.preventDefault();
 | 
	
		
			
				|  |  | +		e.stopPropagation();
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			stat: this.state.fileDocTerimaBanding.length ? this.state.fileDocTerimaBanding.length + " file(s) cleared." : "No files to clear.",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			fileDocTerimaBanding: [],
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	handelSimpan = async () => {
 | 
	
		
			
				|  |  |  		if (this.state.modal === true) {
 | 
	
	
		
			
				|  | @@ -135,9 +167,16 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  		const { id } = query;
 | 
	
		
			
				|  |  |  		const formdata = new FormData();
 | 
	
		
			
				|  |  |  		formdata.append("status", data.status);
 | 
	
		
			
				|  |  | +		formdata.append("keterangan", data.keterangan);
 | 
	
		
			
				|  |  | +		formdata.append("no_banding", data.no_banding);
 | 
	
		
			
				|  |  | +		formdata.append("tanggal_terima_banding", data.tanggal_terima_banding);
 | 
	
		
			
				|  |  | +		formdata.append("tanggal_surat_banding", data.tanggal_surat_banding);
 | 
	
		
			
				|  |  |  		data.dokumen.forEach((e) => {
 | 
	
		
			
				|  |  |  			formdata.append("dokumen", e);
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  | +		data.dokumen_terima_banding.forEach((e) => {
 | 
	
		
			
				|  |  | +			formdata.append("dokumen_terima_banding", e);
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  |  		const toastid = toast.loading("Please wait...");
 | 
	
		
			
				|  |  |  		const added = await addJawabanBanding(token, id, formdata);
 | 
	
		
			
				|  |  |  		if (!added) {
 | 
	
	
		
			
				|  | @@ -150,8 +189,15 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +	setTglJawabanBanding = (tglJawabanBanding) => {
 | 
	
		
			
				|  |  | +		this.setState({ tglJawabanBanding })
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +	setTglSuratBanding = (tglSuratBanding) => {
 | 
	
		
			
				|  |  | +		this.setState({ tglSuratBanding })
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  	render() {
 | 
	
		
			
				|  |  | -		const { files, sanksi, pt } = this.state;
 | 
	
		
			
				|  |  | +		const { files, sanksi, pt, fileDocTerimaBanding } = this.state;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  		const thumbs = files.map((file, index) => (
 | 
	
		
			
				|  |  |  			<div md={3} key={index}>
 | 
	
	
		
			
				|  | @@ -160,6 +206,13 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  			</div>
 | 
	
		
			
				|  |  |  		));
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +		const thumbsDocTerimaBanding = fileDocTerimaBanding.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>
 | 
	
		
			
				|  |  | +		));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  		return (
 | 
	
		
			
				|  |  |  			<ContentWrapper unwrap>
 | 
	
		
			
				|  |  |  				{/* <Header /> */}
 | 
	
	
		
			
				|  | @@ -187,7 +240,12 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  												<Formik
 | 
	
		
			
				|  |  |  													initialValues={{
 | 
	
		
			
				|  |  |  														status: "",
 | 
	
		
			
				|  |  | +														keterangan: "",
 | 
	
		
			
				|  |  |  														dokumen: [],
 | 
	
		
			
				|  |  | +														tanggal_terima_banding: "",
 | 
	
		
			
				|  |  | +														no_banding: "",
 | 
	
		
			
				|  |  | +														dokumen_terima_banding: [],
 | 
	
		
			
				|  |  | +														tanggal_surat_banding: ""
 | 
	
		
			
				|  |  |  													}}
 | 
	
		
			
				|  |  |  													validationSchema={jawabanBandingSchema}
 | 
	
		
			
				|  |  |  													onSubmit={async (data) => {
 | 
	
	
		
			
				|  | @@ -221,7 +279,44 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  																</div>
 | 
	
		
			
				|  |  |  															</FormGroup>
 | 
	
		
			
				|  |  |  															<FormGroup>
 | 
	
		
			
				|  |  | -																<label className="row-form-label">Dokumen Jawaban<span className="text-danger">*</span>:</label>
 | 
	
		
			
				|  |  | +																<label className="row-form-label">Keterangan:</label>
 | 
	
		
			
				|  |  | +																<div className="row-md-10">
 | 
	
		
			
				|  |  | +																	<Field name="keterangan">{({ field }) => <Input type="textarea" {...field} />}</Field>
 | 
	
		
			
				|  |  | +																	<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +																	{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
 | 
	
		
			
				|  |  | +																</div>
 | 
	
		
			
				|  |  | +															</FormGroup>
 | 
	
		
			
				|  |  | +															<FormGroup>
 | 
	
		
			
				|  |  | +																<label className="row-form-label">Nomor Surat Jawaban Atas Permohonan Banding:</label>
 | 
	
		
			
				|  |  | +																<div className="row-md-10">
 | 
	
		
			
				|  |  | +																	<Field name="no_Banding">{({ field }) => <Input type="text" {...field} />}</Field>
 | 
	
		
			
				|  |  | +																	<ErrorMessage name="no_Banding" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +																</div>
 | 
	
		
			
				|  |  | +															</FormGroup>
 | 
	
		
			
				|  |  | +															<FormGroup>
 | 
	
		
			
				|  |  | +																<label className="row-form-label">Tanggal Surat Jawaban Atas Permohonan Banding :</label>
 | 
	
		
			
				|  |  | +																<div className="row-md-10">
 | 
	
		
			
				|  |  | +																	<Field name="tanggal_terima_banding">
 | 
	
		
			
				|  |  | +																		{({ field, form }) => (
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +																			<DatePicker
 | 
	
		
			
				|  |  | +																				selected={this.state.tglJawabanBanding || field.value}
 | 
	
		
			
				|  |  | +																				onChange={(e) => {
 | 
	
		
			
				|  |  | +																					form.setFieldValue(field.name, e);
 | 
	
		
			
				|  |  | +																					this.setTglJawabanBanding(e)
 | 
	
		
			
				|  |  | +																				}}
 | 
	
		
			
				|  |  | +																				dateFormat="dd/MM/yyyy"
 | 
	
		
			
				|  |  | +																				placeholderText="Isi Tanggal"
 | 
	
		
			
				|  |  | +																				locale={id}
 | 
	
		
			
				|  |  | +																				className="form-control bg-white"
 | 
	
		
			
				|  |  | +																			/>
 | 
	
		
			
				|  |  | +																		)}
 | 
	
		
			
				|  |  | +																	</Field>
 | 
	
		
			
				|  |  | +																	<ErrorMessage name="tanggal_terima_banding" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +																</div>
 | 
	
		
			
				|  |  | +															</FormGroup>
 | 
	
		
			
				|  |  | +															<FormGroup>
 | 
	
		
			
				|  |  | +																<label className="row-form-label">Dokumen Jawaban Atas Permohonan Banding:</label>
 | 
	
		
			
				|  |  |  																<div className="row-md-10">
 | 
	
		
			
				|  |  |  																	<Field name="dokumen">
 | 
	
		
			
				|  |  |  																		{({ field, form }) => (
 | 
	
	
		
			
				|  | @@ -244,7 +339,8 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  																										</div>
 | 
	
		
			
				|  |  |  																									}
 | 
	
		
			
				|  |  |  																									</div>
 | 
	
		
			
				|  |  | -																								</div>																							</div>
 | 
	
		
			
				|  |  | +																								</div>
 | 
	
		
			
				|  |  | +																							</div>
 | 
	
		
			
				|  |  |  																							<div className="d-flex align-items-center">
 | 
	
		
			
				|  |  |  																								<small className="ml-auto">
 | 
	
		
			
				|  |  |  																									<button
 | 
	
	
		
			
				|  | @@ -269,6 +365,80 @@ class JawabanBanding extends Component {
 | 
	
		
			
				|  |  |  																	<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 | 
	
		
			
				|  |  |  																</div>
 | 
	
		
			
				|  |  |  															</FormGroup>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +															<FormGroup>
 | 
	
		
			
				|  |  | +																<label className="row-form-label">Tanda Terima Surat Jawaban Permohonan Banding<span className="star-color">*</span> :</label>
 | 
	
		
			
				|  |  | +																<div className="row-md-10">
 | 
	
		
			
				|  |  | +																	<Field name="tanggal_surat_banding">
 | 
	
		
			
				|  |  | +																		{({ field, form }) => (
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +																			<DatePicker
 | 
	
		
			
				|  |  | +																				selected={this.state.tglSuratBanding || field.value}
 | 
	
		
			
				|  |  | +																				onChange={(e) => {
 | 
	
		
			
				|  |  | +																					form.setFieldValue(field.name, e);
 | 
	
		
			
				|  |  | +																					this.setTglSuratBanding(e)
 | 
	
		
			
				|  |  | +																				}}
 | 
	
		
			
				|  |  | +																				dateFormat="dd/MM/yyyy"
 | 
	
		
			
				|  |  | +																				placeholderText="Isi Tanggal"
 | 
	
		
			
				|  |  | +																				locale={id}
 | 
	
		
			
				|  |  | +																				className="form-control bg-white"
 | 
	
		
			
				|  |  | +																			/>
 | 
	
		
			
				|  |  | +																		)}
 | 
	
		
			
				|  |  | +																	</Field>
 | 
	
		
			
				|  |  | +																	<ErrorMessage name="tanggal_surat_banding" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +																</div>
 | 
	
		
			
				|  |  | +															</FormGroup>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +															<FormGroup>
 | 
	
		
			
				|  |  | +																<label className="row-form-label">Dokumen Tanda Terima Surat Jawaban Permohonan banding<span className="star-color">*</span>:</label>
 | 
	
		
			
				|  |  | +																<div className="row-md-10">
 | 
	
		
			
				|  |  | +																	<Field name="dokumen_terima_banding">
 | 
	
		
			
				|  |  | +																		{({ field, form }) => (
 | 
	
		
			
				|  |  | +																			<DropzoneWrapper
 | 
	
		
			
				|  |  | +																				className=""
 | 
	
		
			
				|  |  | +																				onDrop={(e) => {
 | 
	
		
			
				|  |  | +																					this.onDropDocTerimaBanding(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.fileDocTerimaBanding.length > 0 ? <Row><span className="text-left">{thumbsDocTerimaBanding}</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={(e) => {
 | 
	
		
			
				|  |  | +																											this.clearFilesDocTerimaBandig(e);
 | 
	
		
			
				|  |  | +																											form.setFieldValue(field.name, []);
 | 
	
		
			
				|  |  | +																										}}
 | 
	
		
			
				|  |  | +																									>
 | 
	
		
			
				|  |  | +																										Reset dokumen
 | 
	
		
			
				|  |  | +																									</button>
 | 
	
		
			
				|  |  | +																								</small>
 | 
	
		
			
				|  |  | +																							</div>
 | 
	
		
			
				|  |  | +																						</div>
 | 
	
		
			
				|  |  | +																					);
 | 
	
		
			
				|  |  | +																				}}
 | 
	
		
			
				|  |  | +																			</DropzoneWrapper>
 | 
	
		
			
				|  |  | +																		)}
 | 
	
		
			
				|  |  | +																	</Field>
 | 
	
		
			
				|  |  | +																	<ErrorMessage name="dokumen_terima_banding" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | +																	<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 | 
	
		
			
				|  |  | +																</div>
 | 
	
		
			
				|  |  | +															</FormGroup>
 | 
	
		
			
				|  |  |  															<FormGroup row>
 | 
	
		
			
				|  |  |  																<div className="col-xl-10">
 | 
	
		
			
				|  |  |  																	<Button color className="color-3e3a8e btn-login" type="submit">
 |