|
|
@@ -0,0 +1,443 @@
|
|
|
+import React, { Component } from "react";
|
|
|
+import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";
|
|
|
+import Select from "react-select";
|
|
|
+import DatePicker from "react-datepicker";
|
|
|
+import "react-datepicker/dist/react-datepicker.css";
|
|
|
+// import "react-datepicker/dist/react-datepicker.css";
|
|
|
+import ms from "ms";
|
|
|
+import { addDays, addMonths } from 'date-fns';
|
|
|
+import id from 'date-fns/locale/id';
|
|
|
+// registerLocale('id', id)
|
|
|
+import { getAutoSave, inputAutoSave } from "@/actions/autosave";
|
|
|
+import ComponentToPrint from "./SuratBA_A";
|
|
|
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
|
|
|
+import Link from "next/dist/client/link";
|
|
|
+
|
|
|
+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;
|
|
|
+ }
|
|
|
+}
|
|
|
+const formatOptionLabel = ({ value, sanksi, label_sanksi }) => (
|
|
|
+ <div style={{ display: "flex" }}>
|
|
|
+ <span className="">{value}</span>
|
|
|
+ <div style={{ marginLeft: "10px", color: "#adaca8" }}>{label_sanksi}</div>
|
|
|
+ </div>
|
|
|
+);
|
|
|
+
|
|
|
+export class UploadSurat_Bypass extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ const tmt_awal = new Date();
|
|
|
+ this.state = {
|
|
|
+ files: [],
|
|
|
+ nomorSanksi: "",
|
|
|
+ keterangan: "",
|
|
|
+ listSanksi: "",
|
|
|
+ startDay: tmt_awal,
|
|
|
+ maxDay: "",
|
|
|
+ awalTMT: "",
|
|
|
+ akhirTMT: "",
|
|
|
+ tidakPerluTMTCheck: false,
|
|
|
+ terimaSuratSanksi: "",
|
|
|
+ tglAkhirKeberatan: "",
|
|
|
+ filesTandaTerimaSS: [],
|
|
|
+ selectedFile: {}
|
|
|
+
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ 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]
|
|
|
+ }))
|
|
|
+ };
|
|
|
+ onDropTandaTerimaSS = (filesTandaTerimaSS) => {
|
|
|
+ this.setState({
|
|
|
+ filesTandaTerimaSS: filesTandaTerimaSS.map((file) =>
|
|
|
+ Object.assign(file, {
|
|
|
+ preview: URL.createObjectURL(file),
|
|
|
+ })
|
|
|
+ ),
|
|
|
+ stat: "file tanda terima sanksi " + filesTandaTerimaSS.length + " file",
|
|
|
+ });
|
|
|
+ this.props.setUploadSuratSanksi(this.state);
|
|
|
+ };
|
|
|
+
|
|
|
+ componentDidMount = async () => {
|
|
|
+ const { query, token } = this.props;
|
|
|
+ const { id } = query;
|
|
|
+ // const getDataSave = await getAutoSave({ id, laporan: true });
|
|
|
+ // const autosaveDataUpload = getDataSave.data?.PenetapanSanksi?.dataUpload;
|
|
|
+ // this.setState(autosaveDataUpload)
|
|
|
+ }
|
|
|
+
|
|
|
+ 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: [],
|
|
|
+ });
|
|
|
+ this.props.setUploadSuratSanksi(this.state);
|
|
|
+ };
|
|
|
+ clearFilesTerimaSanksi = (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({
|
|
|
+ filesTandaTerimaSS: [],
|
|
|
+ });
|
|
|
+ this.props.setUploadSuratSanksi(this.state);
|
|
|
+ };
|
|
|
+
|
|
|
+ // handleAutoSave = () => {
|
|
|
+ // this.props.handleAutoSave()
|
|
|
+ // }
|
|
|
+
|
|
|
+ setUploadSuratSanksi = () => {
|
|
|
+ this.props.setUploadSuratSanksi(this.state);
|
|
|
+ };
|
|
|
+
|
|
|
+ setNomorSanksi = (e) => {
|
|
|
+ // this.setState({ nomorSanksi: e.target.value }, this.setUploadSuratSanksi);
|
|
|
+ this.state.nomorSanksi = e.target.value
|
|
|
+ this.setUploadSuratSanksi()
|
|
|
+ // this.handleAutoSave()
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ setKeterangan = (e) => {
|
|
|
+ // this.setState({ keterangan: e.target.value }, this.setUploadSuratSanksi);
|
|
|
+ this.state.keterangan = e.target.value
|
|
|
+ this.setUploadSuratSanksi()
|
|
|
+ // this.handleAutoSave()
|
|
|
+ };
|
|
|
+ setAkhirSanksi = (akhirTMT) => {
|
|
|
+ // this.setState({ keterangan: e.target.value }, this.setUploadSuratSanksi);
|
|
|
+ this.state.akhirTMT = akhirTMT
|
|
|
+ this.setUploadSuratSanksi()
|
|
|
+ // this.handleAutoSave()
|
|
|
+ };
|
|
|
+
|
|
|
+ setListSanksi = (ls) => {
|
|
|
+ this.setState({ listSanksi: ls.target.value }, this.setUploadSuratSanksi);
|
|
|
+ };
|
|
|
+ handleChangeListSanksi = (listSanksi) => {
|
|
|
+ this.setState({ listSanksi }, this.setUploadSuratSanksi);
|
|
|
+ };
|
|
|
+ handleTmtCheck = () => {
|
|
|
+ // this.setState({ tmtCheck: !this.state.tmtCheck }, this.setUploadSuratSanksi);
|
|
|
+ this.state.tidakPerluTMTCheck = !this.state.tidakPerluTMTCheck
|
|
|
+ this.setUploadSuratSanksi()
|
|
|
+ // this.handleAutoSave()
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ const { files, terimaSuratSanksi, tglAkhirKeberatan, filesTandaTerimaSS, tidakPerluTMTCheck } = this.state;
|
|
|
+ const removeFile = file => () => {
|
|
|
+ const newFiles = [...files]
|
|
|
+ newFiles.splice(newFiles.indexOf(file), 1)
|
|
|
+ this.setState({
|
|
|
+ files: 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}
|
|
|
+ <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(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>
|
|
|
+ <label className="col-md-2 col-form-label">Nomor Surat<span className="text-danger">*</span></label>
|
|
|
+ <div className="col-md-10">
|
|
|
+ <Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e) }} />
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup row className="mt-3">
|
|
|
+ <label className="col-md-2 col-form-label">Keterangan<span className="text-danger">*</span></label>
|
|
|
+ <div className="col-md-10">
|
|
|
+ <Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e) }} required />
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup row>
|
|
|
+ <label className="col-md-2 col-form-label">Tidak Perlu TMT</label>
|
|
|
+ <div className="col-md-10 mt-2">
|
|
|
+ <div className="checkbox c-checkbox">
|
|
|
+ <label>
|
|
|
+ <Input type="checkbox" onChange={() => this.handleTmtCheck()} defaultChecked={this.state.tidakPerluTMTCheck} />
|
|
|
+ <span className="fa fa-check"></span></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ {/* {this.state.tidakPerluTMTCheck && (
|
|
|
+ <FormGroup row className="mt-3">
|
|
|
+ <label className="col-md-2 col-form-label">Tanggal Penetapan Sanksi</label>
|
|
|
+ <span className="col-sm-3 float-left">
|
|
|
+ <DatePicker
|
|
|
+ selected={this.state.awalTMT ? new Date(this.state.awalTMT) : this.state.awalTMT}
|
|
|
+ onChange={(awalTMT) => {
|
|
|
+ this.setState({ awalTMT }, this.setUploadSuratSanksi)
|
|
|
+ }}
|
|
|
+ dateFormat="dd/MM/yyyy"
|
|
|
+ maxDate={new Date(this.state.startDay)}
|
|
|
+ placeholderText="Isi Tanggal"
|
|
|
+ locale={id}
|
|
|
+ className="form-control bg-white"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </FormGroup>
|
|
|
+ )} */}
|
|
|
+ {!this.state.tidakPerluTMTCheck && (
|
|
|
+ <FormGroup row className="mt-3">
|
|
|
+ <label className="col-md-2 col-form-label">Isi TMT</label>
|
|
|
+ <Row >
|
|
|
+ <Col>
|
|
|
+ <FormGroup>
|
|
|
+ <span className="ml-3">
|
|
|
+ <DatePicker
|
|
|
+ selected={this.state.awalTMT ? new Date(this.state.awalTMT) : this.state.awalTMT}
|
|
|
+ onChange={(awalTMT) => {
|
|
|
+ this.setState({ awalTMT }, this.setUploadSuratSanksi)
|
|
|
+ }}
|
|
|
+ dateFormat="dd/MM/yyyy"
|
|
|
+ maxDate={new Date(this.state.startDay)}
|
|
|
+ placeholderText="Dari Tanggal"
|
|
|
+ locale={id}
|
|
|
+ className="form-control bg-white"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </FormGroup>
|
|
|
+ </Col>
|
|
|
+ <Col>
|
|
|
+ <FormGroup>
|
|
|
+ <span className="ml-3">
|
|
|
+ <DatePicker
|
|
|
+ selected={this.state.akhirTMT ? new Date(this.state.akhirTMT) : this.state.akhirTMT}
|
|
|
+ // onChange={(akhirTMT, e) => {
|
|
|
+ // this.setState({ akhirTMT }, this.setUploadSuratSanksi(e), this.props.handleAutoSave(e))
|
|
|
+ // }}
|
|
|
+ onChange={(akhirTMT) => { this.setAkhirSanksi(akhirTMT) }}
|
|
|
+ dateFormat="dd/MM/yyyy"
|
|
|
+ minDate={new Date(this.state.awalTMT)}
|
|
|
+ maxDate={addMonths(new Date(this.state.awalTMT), 6)}
|
|
|
+ placeholderText="Sampai tanggal"
|
|
|
+ locale={id}
|
|
|
+ className="form-control bg-white"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </FormGroup>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </FormGroup>
|
|
|
+ )}
|
|
|
+ {!this.state.tidakPerluTMTCheck && (
|
|
|
+ <FormGroup row className="mt-1">
|
|
|
+ <label className="col-md-2 col-form-label">TMT berlaku</label>
|
|
|
+ <div className="col-md-10 mt-2">
|
|
|
+ <b>{this.state.awalTMT ? moment(this.state.awalTMT).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirTMT ? moment(this.state.akhirTMT).format("DD-MM-YYYY") : "-"}</b>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ )}
|
|
|
+ {!this.state.tidakPerluTMTCheck && (
|
|
|
+ <FormGroup row className="mt-1">
|
|
|
+ <label className="col-md-2 col-form-label">TMT</label>
|
|
|
+ <div className="col-md-10 mt-2">
|
|
|
+ <b>{this.state.akhirTMT ? moment(this.state.akhirTMT).diff(this.state.awalTMT, 'month') : "-"} bulan</b>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ )}
|
|
|
+ <FormGroup row className="mt-3">
|
|
|
+ <label className="col-md-2 col-form-label">List sanksi </label>
|
|
|
+ <div className="col-md-10">
|
|
|
+ <Select
|
|
|
+ options={this.props.listSanksi.map(e => ({ value: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
|
|
|
+ isMulti
|
|
|
+ formatOptionLabel={formatOptionLabel}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.handleChangeListSanksi(e);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup row>
|
|
|
+ <label className="col-md-2 col-form-label">
|
|
|
+ Dokumen Surat Sanksi<span className="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <div className="col-md-10">
|
|
|
+ <DropzoneWrapper className="" onDrop={this.onDrop}>
|
|
|
+ {({ 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.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={this.clearFiles}>
|
|
|
+ Reset dokumen
|
|
|
+ </button>
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ </DropzoneWrapper>
|
|
|
+ <div>
|
|
|
+ {thumbs}
|
|
|
+ </div>
|
|
|
+ <p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ {/* <FormGroup row>
|
|
|
+ <label className="col-md-2 col-form-label">
|
|
|
+ Dokumen Laporan Evaluasi dan Pembahasan
|
|
|
+ </label>
|
|
|
+ <div className="col-md-10">
|
|
|
+
|
|
|
+ <div style={{ display: "none" }}>
|
|
|
+ <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
|
|
|
+ </div>
|
|
|
+ <ReactToPrint
|
|
|
+ trigger={() => {
|
|
|
+ return <span>
|
|
|
+ <Button color className="btn-labeled-4 mt-0">
|
|
|
+ <h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
|
|
|
+ </Button>
|
|
|
+ </span>
|
|
|
+ }}
|
|
|
+ content={() => this.componentRef}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </FormGroup> */}
|
|
|
+ <FormGroup row className="mt-3">
|
|
|
+ <label className="col-md-2 col-form-label">Tanggal Terima Surat Sanksi<span className="text-danger">*</span></label>
|
|
|
+ <span className="col-sm-3 float-left">
|
|
|
+ <DatePicker
|
|
|
+ selected={this.state.terimaSuratSanksi ? new Date(this.state.terimaSuratSanksi) : this.state.terimaSuratSanksi}
|
|
|
+ onChange={(terimaSuratSanksi) => {
|
|
|
+ this.setState({ terimaSuratSanksi }, this.setUploadSuratSanksi)
|
|
|
+ }}
|
|
|
+ dateFormat="dd/MM/yyyy"
|
|
|
+ minDate={new Date(this.state.awalTMT)}
|
|
|
+ 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 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.filesTandaTerimaSS.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.clearFilesTerimaSanksi}>
|
|
|
+ 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>
|
|
|
+ {!this.state.tidakPerluTMTCheck && (
|
|
|
+ <FormGroup row className="mt-3">
|
|
|
+ <label className="col-md-2 col-form-label">Tanggal Akhir Pengajuan Keberatan<span className="text-danger">*</span>
|
|
|
+ <p>
|
|
|
+ Note : 21 hari kerja
|
|
|
+ </p>
|
|
|
+ </label>
|
|
|
+ <span className="col-sm-3 float-left">
|
|
|
+ <DatePicker
|
|
|
+ selected={this.state.tglAkhirKeberatan ? new Date(this.state.tglAkhirKeberatan) : this.state.tglAkhirKeberatan}
|
|
|
+ onChange={(tglAkhirKeberatan) => {
|
|
|
+ this.setState({ tglAkhirKeberatan }, this.setUploadSuratSanksi)
|
|
|
+ }}
|
|
|
+ dateFormat="dd/MM/yyyy"
|
|
|
+ minDate={new Date(terimaSuratSanksi)}
|
|
|
+ placeholderText="Isi Tanggal"
|
|
|
+ locale={id}
|
|
|
+ className="form-control bg-white"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </FormGroup>
|
|
|
+ )}
|
|
|
+ </form >
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default UploadSurat_Bypass;
|
