checklist TMT

components/Sanksi/Ringkasan.js

@@ -112,34 +112,38 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 								<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
 							</Col>
 						</FormGroup>
-						<FormGroup row>
-							<Col md="4">TMT Berlaku:</Col>
-							<Col md="8">
-								<strong>
-									{dataUpload && dataUpload.akhirsanksi ? (
-										<p>
-											{moment(dataUpload.awalsanksi).format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).format("DD MMMM YYYY")}
-										</p>
-									) : (
-										""
-									)}
-								</strong>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">TMT :</Col>
-							<Col md="8">
-								<strong>
-									{dataUpload && dataUpload.akhirsanksi ? (
-										<p>
-											{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
-										</p>
-									) : (
-										""
-									)}
-								</strong>
-							</Col>
-						</FormGroup>
+						{dataUpload && !dataUpload.tmtCheck ? (
+							<FormGroup row>
+								<Col md="4">TMT Berlaku:</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.akhirsanksi ? (
+											<p>
+												{moment(dataUpload.awalsanksi).format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).format("DD MMMM YYYY")}
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+						) : ("")}
+						{dataUpload && !dataUpload.tmtCheck ? (
+							<FormGroup row>
+								<Col md="4">TMT :</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.akhirsanksi ? (
+											<p>
+												{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+						) : ("")}
 						<FormGroup row>
 							<Col md="4">Sanksi:</Col>
 							<Col md="8">

components/Sanksi/UploadSurat.js

@@ -1,5 +1,5 @@
 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";
@@ -78,6 +78,7 @@ export class UploadSurat extends Component {
 			isiTmt: "",
 			awalsanksi: "",
 			akhirsanksi: "",
+			tmtCheck: false,
 		};
 	}
 
@@ -132,6 +133,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;
 
@@ -142,6 +146,7 @@ export class UploadSurat extends Component {
 				</span>
 			</div>
 		));
+		console.log(this.state.tmtCheck)
 		return (
 			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 				<FormGroup row>
@@ -156,44 +161,60 @@ 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">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>
+				)}
+				{!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">
@@ -244,7 +265,7 @@ export class UploadSurat extends Component {
 						<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
-			</form>
+			</form >
 		);
 	}
 }