|
|
@@ -1,11 +1,14 @@
|
|
|
import React, { Component } from "react";
|
|
|
-import { Row, Col, Input, FormGroup } from "reactstrap";
|
|
|
+import { Row, Col, Input, FormGroup, Label } 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 TmtDate from "./TmtDate";
|
|
|
import { addDays, addMonths } from 'date-fns';
|
|
|
+import id from 'date-fns/locale/id';
|
|
|
+// registerLocale('id', id)
|
|
|
|
|
|
let Dropzone = null;
|
|
|
class DropzoneWrapper extends Component {
|
|
|
@@ -78,6 +81,7 @@ export class UploadSurat extends Component {
|
|
|
isiTmt: "",
|
|
|
awalsanksi: "",
|
|
|
akhirsanksi: "",
|
|
|
+ tmtCheck: false,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
@@ -132,6 +136,9 @@ export class UploadSurat extends Component {
|
|
|
handleChangeListSanksi = (listSanksi) => {
|
|
|
this.setState({ listSanksi }, this.toRingkasan);
|
|
|
};
|
|
|
+ handleTmtCheck = () => {
|
|
|
+ this.setState({ tmtCheck: !this.state.tmtCheck }, this.toRingkasan);
|
|
|
+ }
|
|
|
render() {
|
|
|
const { files } = this.state;
|
|
|
|
|
|
@@ -156,49 +163,98 @@ export class UploadSurat extends Component {
|
|
|
<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
|
|
|
</div>
|
|
|
</FormGroup>
|
|
|
- <FormGroup row className="mt-3">
|
|
|
- <label className="col-md-2 col-form-label">Isi TMT</label>
|
|
|
- <span className="col-sm-3 float-left">
|
|
|
- <DatePicker
|
|
|
- selected={this.state.awalsanksi}
|
|
|
- onChange={(awalsanksi) => {
|
|
|
- this.setState({ awalsanksi }, this.toRingkasan)
|
|
|
- }}
|
|
|
- dateFormat="dd/MM/yyyy"
|
|
|
- maxDate={this.state.startDay}
|
|
|
- placeholderText="Dari Tanggal"
|
|
|
- />
|
|
|
- </span>
|
|
|
- <span className="col-sm-3 float-right">
|
|
|
- <DatePicker
|
|
|
- selected={this.state.akhirsanksi}
|
|
|
- onChange={(akhirsanksi) => {
|
|
|
- this.setState({ akhirsanksi }, this.toRingkasan)
|
|
|
- }}
|
|
|
- dateFormat="dd/MM/yyyy"
|
|
|
- minDate={this.state.awalsanksi}
|
|
|
- maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
|
|
|
- placeholderText="Sampai tanggal"
|
|
|
- />
|
|
|
- </span>
|
|
|
- </FormGroup>
|
|
|
- <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.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).format("DD-MM-YYYY") : "-"}</b>
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- <FormGroup row className="mt-1">
|
|
|
- <label className="col-md-2 col-form-label">TMT</label>
|
|
|
+ <FormGroup row>
|
|
|
+ <label className="col-md-2 col-form-label">Tidak Perlu TMT</label>
|
|
|
<div className="col-md-10 mt-2">
|
|
|
- <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).diff(this.state.awalsanksi, 'month') : "-"} bulan</b>
|
|
|
+ <div className="checkbox c-checkbox">
|
|
|
+ <label>
|
|
|
+ <Input type="checkbox" onChange={this.handleTmtCheck} defaultChecked={this.state.tmtCheck} />
|
|
|
+ <span className="fa fa-check"></span></label>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</FormGroup>
|
|
|
+ {this.state.tmtCheck && (
|
|
|
+ <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.awalsanksi}
|
|
|
+ onChange={(awalsanksi) => {
|
|
|
+ this.setState({ awalsanksi }, this.toRingkasan)
|
|
|
+ }}
|
|
|
+ dateFormat="dd/MM/yyyy"
|
|
|
+ maxDate={this.state.startDay}
|
|
|
+ placeholderText="Isi Tanggal"
|
|
|
+ locale={id}
|
|
|
+ className="form-control bg-white"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </FormGroup>
|
|
|
+ )}
|
|
|
+ {!this.state.tmtCheck && (
|
|
|
+ <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.awalsanksi}
|
|
|
+ onChange={(awalsanksi) => {
|
|
|
+ this.setState({ awalsanksi }, this.toRingkasan)
|
|
|
+ }}
|
|
|
+ dateFormat="dd/MM/yyyy"
|
|
|
+ maxDate={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.akhirsanksi}
|
|
|
+ onChange={(akhirsanksi) => {
|
|
|
+ this.setState({ akhirsanksi }, this.toRingkasan)
|
|
|
+ }}
|
|
|
+ dateFormat="dd/MM/yyyy"
|
|
|
+ minDate={this.state.awalsanksi}
|
|
|
+ maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
|
|
|
+ placeholderText="Sampai tanggal"
|
|
|
+ locale={id}
|
|
|
+ className="form-control bg-white"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </FormGroup>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </FormGroup>
|
|
|
+ )}
|
|
|
+ {!this.state.tmtCheck && (
|
|
|
+ <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.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).format("DD-MM-YYYY") : "-"}</b>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ )}
|
|
|
+ {!this.state.tmtCheck && (
|
|
|
+ <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.akhirsanksi ? moment(this.state.akhirsanksi).diff(this.state.awalsanksi, '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={listSanksi}
|
|
|
+ options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
|
|
|
formatOptionLabel={formatOptionLabel}
|
|
|
isMulti
|
|
|
onChange={(e) => {
|
|
|
@@ -244,7 +300,7 @@ export class UploadSurat extends Component {
|
|
|
<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
|
|
|
</div>
|
|
|
</FormGroup>
|
|
|
- </form>
|
|
|
+ </form >
|
|
|
);
|
|
|
}
|
|
|
}
|