|  | @@ -83,7 +83,11 @@ export class UploadSurat extends Component {
 | 
	
		
			
				|  |  |  			akhirsanksi: "",
 | 
	
		
			
				|  |  |  			tmtCheck: false,
 | 
	
		
			
				|  |  |  			filesBeritaAcara: [],
 | 
	
		
			
				|  |  | -			saveData: []
 | 
	
		
			
				|  |  | +			saveData: [],
 | 
	
		
			
				|  |  | +			terimaSuratSanksi: "",
 | 
	
		
			
				|  |  | +			tglAkhirKeberatan: "",
 | 
	
		
			
				|  |  | +			filesTandaTerimaSS: []
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  		};
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -98,6 +102,7 @@ export class UploadSurat extends Component {
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  |  		this.props.setUploadSuratSanksi(this.state);
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  	onDropBA = (filesBeritaAcara) => {
 | 
	
		
			
				|  |  |  		this.setState({
 | 
	
		
			
				|  |  |  			filesBeritaAcara: filesBeritaAcara.map((file) =>
 | 
	
	
		
			
				|  | @@ -109,6 +114,17 @@ export class UploadSurat extends Component {
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  |  		this.props.setUploadSuratSanksi(this.state);
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  | +	onDropTandaTerimaSS = (filesTandaTerimaSS) => {
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			filesTandaTerimaSS: filesTandaTerimaSS.map((file) =>
 | 
	
		
			
				|  |  | +				Object.assign(file, {
 | 
	
		
			
				|  |  | +					preview: URL.createObjectURL(file),
 | 
	
		
			
				|  |  | +				})
 | 
	
		
			
				|  |  | +			),
 | 
	
		
			
				|  |  | +			stat: "Added " + filesTandaTerimaSS.length + " file(s)",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +		this.props.setUploadSuratSanksi(this.state);
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	componentDidMount = async () => {
 | 
	
		
			
				|  |  |  		const { query, token } = this.props;
 | 
	
	
		
			
				|  | @@ -159,6 +175,17 @@ export class UploadSurat extends Component {
 | 
	
		
			
				|  |  |  		});
 | 
	
		
			
				|  |  |  		this.props.setUploadSuratSanksi(this.state);
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  | +	clearFilesBA = (e) => {
 | 
	
		
			
				|  |  | +		e.preventDefault();
 | 
	
		
			
				|  |  | +		e.stopPropagation();
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			stat: this.state.filesTandaTerimaSS.length ? this.state.filesTandaTerimaSS.length + " file(s) cleared." : "No files to clear.",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			filesBeritaAcara: [],
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +		this.props.setUploadSuratSanksi(this.state);
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	toRingkasan = () => {
 | 
	
		
			
				|  |  |  		this.props.setUploadSuratSanksi(this.state);
 | 
	
	
		
			
				|  | @@ -182,7 +209,7 @@ export class UploadSurat extends Component {
 | 
	
		
			
				|  |  |  		this.setState({ tmtCheck: !this.state.tmtCheck }, this.toRingkasan);
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  	render() {
 | 
	
		
			
				|  |  | -		const { files, filesBeritaAcara } = this.state;
 | 
	
		
			
				|  |  | +		const { files, filesBeritaAcara, terimaSuratSanksi, tglAkhirKeberatan, filesTandaTerimaSS, tmtCheck } = this.state;
 | 
	
		
			
				|  |  |  		const removeFile = file => () => {
 | 
	
		
			
				|  |  |  			const newFiles = [...files]
 | 
	
		
			
				|  |  |  			newFiles.splice(newFiles.indexOf(file), 1)
 | 
	
	
		
			
				|  | @@ -197,6 +224,13 @@ export class UploadSurat extends Component {
 | 
	
		
			
				|  |  |  				filesBeritaAcara: newFiles,
 | 
	
		
			
				|  |  |  			});
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  | +		const removeFileTandaTerimaSS = file => () => {
 | 
	
		
			
				|  |  | +			const newFiles = [...filesTandaTerimaSS]
 | 
	
		
			
				|  |  | +			newFiles.splice(newFiles.indexOf(file), 1)
 | 
	
		
			
				|  |  | +			this.setState({
 | 
	
		
			
				|  |  | +				filesTandaTerimaSS: newFiles,
 | 
	
		
			
				|  |  | +			});
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  |  		const thumbs = files.map((file, index) => (
 | 
	
		
			
				|  |  |  			<p>
 | 
	
		
			
				|  |  |  				<em className="far fa-file" />  {file.name}
 | 
	
	
		
			
				|  | @@ -209,6 +243,12 @@ export class UploadSurat extends Component {
 | 
	
		
			
				|  |  |  				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFileBA(file)} />
 | 
	
		
			
				|  |  |  			</p>
 | 
	
		
			
				|  |  |  		));
 | 
	
		
			
				|  |  | +		const thumbsTandaTerimaSS = filesTandaTerimaSS.map((file, index) => (
 | 
	
		
			
				|  |  | +			<p>
 | 
	
		
			
				|  |  | +				<em className="far fa-file" />  {file.name}
 | 
	
		
			
				|  |  | +				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFileTandaTerimaSS(file)} />
 | 
	
		
			
				|  |  | +			</p>
 | 
	
		
			
				|  |  | +		));
 | 
	
		
			
				|  |  |  		return (
 | 
	
		
			
				|  |  |  			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 | 
	
		
			
				|  |  |  				<FormGroup row>
 | 
	
	
		
			
				|  | @@ -403,6 +443,78 @@ export class UploadSurat extends Component {
 | 
	
		
			
				|  |  |  						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 | 
	
		
			
				|  |  |  					</div>
 | 
	
		
			
				|  |  |  				</FormGroup>
 | 
	
		
			
				|  |  | +				<FormGroup row className="mt-3">
 | 
	
		
			
				|  |  | +					<label className="col-md-2 col-form-label">Tanggal Terima Surat Sanksi</label>
 | 
	
		
			
				|  |  | +					<span className="col-sm-3 float-left">
 | 
	
		
			
				|  |  | +						<DatePicker
 | 
	
		
			
				|  |  | +							selected={terimaSuratSanksi}
 | 
	
		
			
				|  |  | +							onChange={(terimaSuratSanksi) => {
 | 
	
		
			
				|  |  | +								this.setState({ terimaSuratSanksi }, this.toRingkasan)
 | 
	
		
			
				|  |  | +							}}
 | 
	
		
			
				|  |  | +							dateFormat="dd/MM/yyyy"
 | 
	
		
			
				|  |  | +							minDate={this.state.awalsanksi}
 | 
	
		
			
				|  |  | +							placeholderText="Isi Tanggal"
 | 
	
		
			
				|  |  | +							locale={id}
 | 
	
		
			
				|  |  | +							className="form-control bg-white"
 | 
	
		
			
				|  |  | +						/>
 | 
	
		
			
				|  |  | +					</span>
 | 
	
		
			
				|  |  | +				</FormGroup>
 | 
	
		
			
				|  |  | +				<FormGroup row>
 | 
	
		
			
				|  |  | +					<label className="col-md-2 col-form-label">
 | 
	
		
			
				|  |  | +						Dokumen Tanda Terima Surat Sanksi<span>:  </span><span className="text-danger">*</span>
 | 
	
		
			
				|  |  | +					</label>
 | 
	
		
			
				|  |  | +					<div className="col-md-10">
 | 
	
		
			
				|  |  | +						<DropzoneWrapper className="" onDrop={this.onDropTandaTerimaSS}>
 | 
	
		
			
				|  |  | +							{({ getRootProps, getInputProps, isDragActive }) => {
 | 
	
		
			
				|  |  | +								return (
 | 
	
		
			
				|  |  | +									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 | 
	
		
			
				|  |  | +										<input {...getInputProps()} />
 | 
	
		
			
				|  |  | +										<div className="dropzone-style-1">
 | 
	
		
			
				|  |  | +											<div className="center-ver-hor dropzone-previews flex">
 | 
	
		
			
				|  |  | +												{this.state.filesBeritaAcara.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={this.clearFilesBA}>
 | 
	
		
			
				|  |  | +													Reset dokumen
 | 
	
		
			
				|  |  | +												</button>
 | 
	
		
			
				|  |  | +											</small>
 | 
	
		
			
				|  |  | +										</div>
 | 
	
		
			
				|  |  | +									</div>
 | 
	
		
			
				|  |  | +								);
 | 
	
		
			
				|  |  | +							}}
 | 
	
		
			
				|  |  | +						</DropzoneWrapper>
 | 
	
		
			
				|  |  | +						<div>
 | 
	
		
			
				|  |  | +							{thumbsTandaTerimaSS}
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 | 
	
		
			
				|  |  | +					</div>
 | 
	
		
			
				|  |  | +				</FormGroup>
 | 
	
		
			
				|  |  | +				<FormGroup row className="mt-3">
 | 
	
		
			
				|  |  | +					<label className="col-md-2 col-form-label">Akhir Permohonan Keberatan Sanksi</label>
 | 
	
		
			
				|  |  | +					<span className="col-sm-3 float-left">
 | 
	
		
			
				|  |  | +						<DatePicker
 | 
	
		
			
				|  |  | +							selected={tglAkhirKeberatan}
 | 
	
		
			
				|  |  | +							onChange={(tglAkhirKeberatan) => {
 | 
	
		
			
				|  |  | +								this.setState({ tglAkhirKeberatan }, this.toRingkasan)
 | 
	
		
			
				|  |  | +							}}
 | 
	
		
			
				|  |  | +							dateFormat="dd/MM/yyyy"
 | 
	
		
			
				|  |  | +							minDate={terimaSuratSanksi}
 | 
	
		
			
				|  |  | +							placeholderText="Isi Tanggal"
 | 
	
		
			
				|  |  | +							locale={id}
 | 
	
		
			
				|  |  | +							className="form-control bg-white"
 | 
	
		
			
				|  |  | +						/>
 | 
	
		
			
				|  |  | +					</span>
 | 
	
		
			
				|  |  | +				</FormGroup>
 | 
	
		
			
				|  |  |  			</form >
 | 
	
		
			
				|  |  |  		);
 | 
	
		
			
				|  |  |  	}
 |