revisi tmt v1.2

components/Sanksi/Ringkasan.js

@@ -122,9 +122,9 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 							<Col md="4">TMT Berlaku:</Col>
 							<Col md="8">
 								<strong>
-									{dataUpload && dataUpload.isiTmt ? (
+									{dataUpload && dataUpload.akhirsanksi ? (
 										<p>
-											{moment(dataUpload.startDay).format("DD MMMM YYYY")} - {moment(dataUpload.isiTmt).format("DD MMMM YYYY")}
+											{moment(dataUpload.awalsanksi).format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).format("DD MMMM YYYY")}
 										</p>
 									) : (
 										""

components/Sanksi/TmtDate.js

@@ -4,6 +4,7 @@ import "react-datepicker/dist/react-datepicker.css";
 import FormGroup from "reactstrap/lib/FormGroup";
 import ms from "ms";
 import { Component } from "react";
+import { addDays, addMonths } from 'date-fns';
 
 class TmtDate extends Component {
 	constructor(props) {
@@ -11,36 +12,61 @@ class TmtDate extends Component {
 		const tmt_awal = new Date();
 		this.state = {
 			startDay: tmt_awal,
-			maxDay: new Date(+new Date(tmt_awal) + ms("180d")),
+			maxDay: "",
 			isiTmt: "",
+			awalsanksi: "",
+			akhirsanksi: "",
 		};
 	}
-
+	handleAwalSanksi = (awalsanksi) => {
+		this.setState({ awalsanksi });
+		// this.props.setUploadSuratSanksi(this.state);
+	};
+	handleAkhirSanksi = (akhirsanksi) => {
+		this.setState({ akhirsanksi });
+		// this.props.setUploadSuratSanksi(this.state);
+	};
 	render() {
 		return (
 			<div>
 				<FormGroup row className="mt-3">
 					<label className="col-md-2 col-form-label">Isi TMT</label>
-					<div className="col-md-10">
+					<span className="col-sm-3 float-left">
 						<DatePicker
-							selected={this.state.isiTmt}
+							selected={this.state.awalsanksi}
 							onChange={(e) => {
-								this.setState({ isiTmt: e });
-								this.props.setTmt({ startDate: this.state.startDay, endDate: this.state.isiTmt });
+								this.handleAwalSanksi(e);
+								// this.props.setTmt({ startDate: this.state.awalsanksi, endDate: this.state.akhirsanksi });
 							}}
+							selectsStart
+							startDate={this.state.awalsanksi}
 							dateFormat="dd/MM/yyyy"
-							minDate={this.state.startDay}
-							maxDate={this.state.maxDay}
-							placeholderText="isi TMT"
-						// maxDate={addDays(new Date(), 5)}
+							maxDate={this.state.startDay}
+							placeholderText="Dari Tanggal"
+							showDisabledMonthNavigation
 						/>
-						<strong>Max pengisian TMT 6 bulan</strong>
-					</div>
+					</span>
+					<span className="col-sm-3 float-right">
+						<DatePicker
+							selected={this.state.akhirsanksi}
+							onChange={(e) => {
+								this.handleAkhirSanksi(e);
+								// this.props.setTmt({ startDate: this.state.awalsanksi, endDate: this.state.akhirsanksi });
+							}}
+							selectsEnd
+							endDate={this.state.akhirsanksi}
+							dateFormat="dd/MM/yyyy"
+							minDate={this.state.awalsanksi}
+							maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
+							placeholderText="Sampai tanggal"
+							showDisabledMonthNavigation
+						/>
+					</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>{moment(this.state.startDay).format("DD-MM-YYYY")}</b> hingga <b>{this.state.isiTmt ? moment(this.state.isiTmt).format("DD-MM-YYYY") : "-"}</b>
+						<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>
 			</div>

components/Sanksi/UploadSurat.js

@@ -1,10 +1,11 @@
 import React, { Component } from "react";
 import { Row, Col, Input, FormGroup } from "reactstrap";
 import Select from "react-select";
-// import TmtDate from "./TmtDate";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import ms from "ms";
+import TmtDate from "./TmtDate";
+import { addDays, addMonths } from 'date-fns';
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -72,10 +73,10 @@ export class UploadSurat extends Component {
 			nomorSanksi: "",
 			keterangan: "",
 			listSanksi: "",
-			// tmtDate: "",
-			startDay: tmt_awal,
-			maxDay: new Date(+new Date(tmt_awal) + ms("180d")),
+			maxDay: "",
 			isiTmt: "",
+			awalsanksi: "",
+			akhirsanksi: "",
 		};
 	}
 
@@ -131,11 +132,10 @@ export class UploadSurat extends Component {
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
-	handleTmtDate = (isiTmt) => {
-		this.setState({ isiTmt });
+	handleTmtDate = (startDate) => {
+		this.setState({ startDate });
 		this.props.setUploadSuratSanksi(this.state);
 	};
-
 	render() {
 		const { files } = this.state;
 
@@ -163,29 +163,42 @@ export class UploadSurat extends Component {
 					</div>
 				</FormGroup>
 				{/* <TmtDate setTmt={this.handleTmtDate} /> */}
+				{/* <TmtDate /> */}
+
 
 
 				<FormGroup row className="mt-3">
 					<label className="col-md-2 col-form-label">Isi TMT</label>
-					<div className="col-md-10">
+					<span className="col-sm-3 float-left">
 						<DatePicker
-							selected={this.state.isiTmt}
-							onChange={(e) => {
-								this.handleTmtDate(e);
+							selected={this.state.awalsanksi}
+							onChange={(awalsanksi) => {
+								this.setState({ awalsanksi })
+								this.props.setUploadSuratSanksi(this.state);
 							}}
 							dateFormat="dd/MM/yyyy"
-							minDate={this.state.startDay}
-							maxDate={this.state.maxDay}
-							placeholderText="isi TMT"
-						// maxDate={addDays(new Date(), 5)}
+							maxDate={this.state.startDay}
+							placeholderText="Dari Tanggal"
 						/>
-						<strong>Max pengisian TMT 6 bulan</strong>
-					</div>
+					</span>
+					<span className="col-sm-3 float-right">
+						<DatePicker
+							selected={this.state.akhirsanksi}
+							onChange={(akhirsanksi) => {
+								this.setState({ akhirsanksi })
+								this.props.setUploadSuratSanksi(this.state);
+							}}
+							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>{moment(this.state.startDay).format("DD-MM-YYYY")}</b> hingga <b>{this.state.isiTmt ? moment(this.state.isiTmt).format("DD-MM-YYYY") : "-"}</b>
+						<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>