|
|
@@ -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 >
|
|
|
);
|
|
|
}
|