autosave penetapan sanksi, input no hp pt

components/Layout/SidebarUserBlock.js

@@ -1,19 +1,40 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Collapse } from "reactstrap";
-
+import { Collapse, Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown, ModalHeader, ModalBody, ModalFooter, Modal, FormFeedback, Button } from "reactstrap";
+import classNames from 'classnames';
+import PhoneInput from 'react-phone-input-2'
+import 'react-phone-input-2/lib/style.css'
+import OtpInput from 'react-otp-input';
 import { connect } from "react-redux";
+import { createotp, getkontakpt, createkontak } from "../../actions/auth";
+import swal from "sweetalert2";
+
+
+
 
 class SidebarUserBlock extends Component {
 	state = {
 		showUserBlock: true,
 		user: {},
 		role: {},
+		ddOpen: false,
+		ddselected: false,
+		phone: "",
+		otp: "",
+		modalOTP: false,
+		modalPhone: false
 	};
 
-	async componentDidMount() {
+	componentDidMount = async () => {
+		const { token } = this.props;
 		const user = this.props.user;
+
+		const kontakPT = await getkontakpt(token);
+		const oldPhone = kontakPT?.data.map((data) => (data.no_hp)).toString()
 		this.setState({ user, role: user.role });
+		if (oldPhone) {
+			this.setState({ phone: oldPhone })
+		}
 	}
 
 	componentDidUpdate(oldProps) {
@@ -21,28 +42,211 @@ class SidebarUserBlock extends Component {
 			this.setState({ showUserBlock: this.props.showUserBlock });
 		}
 	}
+	toggleDropDown = () => this.setState({
+		ddOpen: !this.state.ddOpen
+	})
+	toggleDropItem = () =>
+		this.setState({
+			ddselected: !this.state.ddselected
+		})
+	handleSubmitTelepon = async () => {
+		this.setState({ loadingProses: true })
+		const { token } = this.props
+		await createotp({ no_hp: this.state.phone }, token)
+
+
+		this.setState({ modalPhone: false, modalOTP: true })
+	}
 
+	otpClose = () => {
+		this.setState({ modalOTP: false, ddselected: false })
+		// localStorage.setItem("closeverif", "true");
+	}
+	handleSubmitOtp = async () => {
+		const { token } = this.props
+		const create = await createkontak({ otp: this.state.otp, no_hp: this.state.phone }, token)
+		if (create.error) {
+			swal.fire({
+				title: create.error.message,
+				icon: "error",
+				content: create.error.message,
+				confirmButtonColor: "#3e3a8e",
+			});
+		} else {
+			swal.fire({
+				title: "Data berhasil dikirim",
+				icon: "success",
+				confirmButtonColor: "#3e3a8e",
+			});
+			this.setState({ ddselected: false, modalOTP: false })
+		}
+
+	}
 	render() {
 		const { user, role } = this.state;
 		return (
 			<Collapse id="user-block" isOpen={this.state.showUserBlock}>
-				<div>
-					<div className="item user-block">
-						{/* User picture */}
-						<div className="user-block-picture">
-							<div className="user-block-status">
-								<img className="rounded-circle" src={role.id === 2022 ? "/static/img/univ-avatar.png" : "/static/img/logo-single.png"} alt="Avatar" width="60" height="60" />
-								<div className="circle bg-success circle-lg"></div>
+				<Modal isOpen={this.state.ddselected} style={{ width: '400px' }}>
+					<ModalBody>
+						<div className="modalLoginPT-a">
+							<img
+								className="icon-triangle-onModalPT mt-0"
+								src="/static/img/Frame_10.png"
+							></img>
+
+							<h4 className=" font-color-black mt-1">Edit Nomor Telepon Perguruan Tinggi</h4>
+						</div>
+
+						<div className="modalLoginPT-b">
+							<label className=" font-weight-bold h6">
+								Nomor Telepon :
+							</label>
+							<div className="border-2">
+								<PhoneInput
+									country={'id'}
+									value={this.state.kontakPT?.data.map((data) => (data.no_hp)) || this.state.phone}
+									onChange={phone => this.setState({ phone })} />
 							</div>
 						</div>
-						{/* Name and Job */}
-						<div className="user-block-info">
-							<span className="user-block-name">{user.nama}</span>
-							<span className="user-block-role">{role.nama}</span>
+						<div className="">
+							<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
+								<span className=" font-color-black">
+									Batal
+								</span>
+							</Button>
+							<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitTelepon}>
+								{this.state.loadingProses ?
+									(
+										<div class="d-flex justify-content-center">
+											<span
+												class="spinner-border spinner-border-sm text-white"
+												role="status"
+											></span>
+											<span className="font-color-white">
+												&nbsp; Diproses...
+											</span>
+										</div>
+									) : (
+										<span className="font-color-white">
+											Simpan
+										</span>
+									)}
+							</Button>
 						</div>
-					</div>
+					</ModalBody>
+				</Modal>
+				<Modal isOpen={this.state.modalOTP} style={{ width: '400px' }} >
+					<ModalBody>
+						<div className="modalLoginPT-a">
+							<img
+								className="icon-triangle-onModalPT mt-auto mb-auto"
+								src="/static/img/Frame_10.png"
+							></img>
+
+							<h3 className=" font-color-black">Masukan Kode OTP</h3>
+						</div>
+
+						{/* <div className="modalLoginPT-b"> */}
+
+						<div className=" mt-5 mb-5">
+							<OtpInput
+								invalid={this.state.error}
+								value={this.state.otp}
+								onChange={(otp) => { this.setState({ otp }) }}
+								numInputs={4}
+								renderSeparator={<span className=" font-color-black font-weight-bold mr-2 ml-2">-</span>}
+								renderInput={(props) => <input {...props} style={{ width: "50px", height: "50px", textAlign: "center", marginLeft: "auto", marginRight: "auto", borderRadius: "7px", fontSize: "30px" }} />}
+
+							/>   <p className="  mt-3">
+								*Kode OTP terkirim ke nomor WA {this.state.phone}
+							</p>
+							<FormFeedback invalid={this.state.error}>
+								Kode verifikasi harus diisi
+							</FormFeedback>
+						</div>
+
+						<div>
+							<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
+								<span className=" font-color-black">
+									Batal
+								</span>
+							</Button>
+							<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitOtp}
+							>
+								<span className=" font-color-white">
+									Kirim
+								</span>
+							</Button>
+						</div>
+					</ModalBody>
+
+				</Modal>
+				<div>
+					{role.id === 2022 ? (
+						<div className="item user-block">
+							{/* User picture */}
+							<div className="user-block-picture">
+								<div className="user-block-status">
+									<img className="rounded-circle" src={role.id === 2022 ? "/static/img/univ-avatar.png" : "/static/img/logo-single.png"} alt="Avatar" width="60" height="60" />
+									<div className="circle bg-success circle-lg"></div>
+								</div>
+							</div>
+							{/* Name and Job */}
+							<div className="user-block-info">
+								<span className="user-block-name">
+									<div className="col ">
+										<div className=" d-inline-flex justify-content-center">
+											<span className="font-color-black font-weight-bold text-center">{user.nama}</span>
+										</div>
+										<div className=" d-inline-flex ml-1">
+											<Dropdown isOpen={this.state.ddOpen} toggle={this.toggleDropDown}>
+												<DropdownToggle data-toggle="dropdown" tag="span">
+													<span style={{ width: "20px" }} >
+														<img className="" src="/static/img/Down.png"></img>
+													</span>
+												</DropdownToggle>
+												<DropdownMenu positionFixed={true}  >
+													<DropdownItem onClick={this.toggleDropItem}>
+														<span className=" font-color-black font-weight-bold">
+															Edit Nomor Telepon
+														</span>
+													</DropdownItem>
+												</DropdownMenu>
+											</Dropdown>
+										</div>
+
+
+									</div>
+								</span>
+								<span className="user-block-role">{role.nama}</span>
+							</div>
+						</div>
+					) :
+						(
+							<div className="item user-block">
+								{/* User picture */}
+								<div className="user-block-picture">
+									<div className="user-block-status">
+										<img className="rounded-circle" src={role.id === 2022 ? "/static/img/univ-avatar.png" : "/static/img/logo-single.png"} alt="Avatar" width="60" height="60" />
+										<div className="circle bg-success circle-lg"></div>
+									</div>
+								</div>
+								{/* Name and Job */}
+								<div className="user-block-info">
+									<span className="user-block-name">
+										<div className="col ">
+											<div className=" d-inline-flex justify-content-center">
+												<h6 className="font-color-black font-weight-bold text-center">{user.nama}</h6>
+											</div>
+										</div>
+									</span>
+									<span className="user-block-role">{role.nama}</span>
+								</div>
+							</div>
+						)}
+
 				</div>
-			</Collapse>
+			</Collapse >
 		);
 	}
 }

components/Sanksi/Ringkasan.js

@@ -39,7 +39,6 @@ export class Ringkasan extends Component {
 
 	render() {
 		const { dataLaporan, dataPelanggaran, dataUpload } = this.props
-		console.log(dataUpload)
 		return (
 			<>
 				<Row>

components/Sanksi/UploadSurat.js

@@ -4,6 +4,8 @@ import Select from "react-select";
 import { addDays, addMonths } from 'date-fns';
 import Datetime from "react-datetime";
 import moment from "moment";
+import { getAutoSave } from "@/actions/autosave";
+
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -60,6 +62,8 @@ export class UploadSurat extends Component {
 		this.setState(prevState => ({
 			files: [...prevState.files, ...selectFile]
 		}))
+		this.props.setUploadSuratSanksi(this.state);
+
 	};
 	onDropTandaTerimaSS = (filesTandaTerimaSS) => {
 		this.setState({
@@ -76,9 +80,9 @@ export class UploadSurat extends Component {
 	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)
+		const getDataSave = await getAutoSave({ id, laporan: true });
+		const autosaveDataUpload = getDataSave.data?.PenetapanSanksi?.dataUpload;
+		this.setState(autosaveDataUpload)
 	}
 
 	clearFiles = (e) => {
@@ -104,9 +108,9 @@ export class UploadSurat extends Component {
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
-	// handleAutoSave = () => {
-	// 	this.props.handleAutoSave()
-	// }
+	handleAutoSave = () => {
+		this.props.handleAutoSave()
+	}
 
 	setUploadSuratSanksi = () => {
 		this.props.setUploadSuratSanksi(this.state);
@@ -153,32 +157,37 @@ export class UploadSurat extends Component {
 			this.setState({ awalTMT: "", akhirTMT: "", tglAkhirKeberatan: "", terimaSuratSanksi: "" })
 		}
 	}
+	removeFile = file => () => {
+		const files = this.state.files
+		const newFiles = [...files]
+		newFiles.splice(newFiles.indexOf(file), 1)
+		this.setState({
+			files: newFiles,
+		}, () => this.props.setUploadSuratSanksi(this.state));
+
+
+	}
+	removeFileTandaTerimaSS = file => () => {
+		const filesTandaTerimaSS = this.state.filesTandaTerimaSS
+		const newFiles = [...filesTandaTerimaSS]
+		newFiles.splice(newFiles.indexOf(file), 1)
+		this.setState({
+			filesTandaTerimaSS: newFiles,
+		}, () => this.props.setUploadSuratSanksi(this.state));
+	}
 	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" />&nbsp;&nbsp;{file.name}
-				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+				<em className="far fa-file" />&nbsp;&nbsp;{file.path}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={this.removeFile(file)} />
 			</p>
 		));
 		const thumbsTandaTerimaSS = filesTandaTerimaSS.map((file, index) => (
 			<p>
-				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
-				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFileTandaTerimaSS(file)} />
+				<em className="far fa-file" />&nbsp;&nbsp;{file.path}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={this.removeFileTandaTerimaSS(file)} />
 			</p>
 		));
 		return (
@@ -277,6 +286,7 @@ export class UploadSurat extends Component {
 					<label className="col-md-4 col-form-label">List sanksi </label>
 					<div className="col-md-8">
 						<Select
+							value={this.state.listSanksi}
 							options={this.props.listSanksi.map(e => ({ value: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
 							isMulti
 							formatOptionLabel={formatOptionLabel}

pages/app/sanksi/proses.js

@@ -264,7 +264,8 @@ class ProsesSanksi extends Component {
 	};
 
 	setUploadSuratSanksi = (data) => {
-		this.setState({ dataUpload: data });
+		this.setState({ dataUpload: data }, () => this.handleAutoSave());
+
 
 
 	};
@@ -279,7 +280,7 @@ class ProsesSanksi extends Component {
 
 
 	};
-	validasiSanksiOn5 = (activeStep) => {
+	validasiSanksiOn5 = (empat, lima) => () => {
 		const dataPelanggaran = this.state.dataPelanggaran
 		if (dataPelanggaran?.data === undefined) {
 			swal.fire({
@@ -291,14 +292,16 @@ class ProsesSanksi extends Component {
 			this.setState({
 				activeStep: "4"
 			});
+			this.handleAutoSave(this.state.dataPelanggaran, empat)
 		}
 		else {
 			this.setState({
 				activeStep: "5"
 			});
+			this.handleAutoSave(this.state.dataPelanggaran, lima)
 		}
 	}
-	validasiSanksiOn6 = (activeStep) => {
+	validasiSanksiOn6 = (empat, enam) => () => {
 		const dataPelanggaran = this.state.dataPelanggaran
 		if (dataPelanggaran?.data === undefined) {
 			swal.fire({
@@ -310,11 +313,15 @@ class ProsesSanksi extends Component {
 			this.setState({
 				activeStep: "4"
 			});
+			this.handleAutoSave(this.state.dataPelanggaran, empat)
+
 		}
 		else {
 			this.setState({
 				activeStep: "6"
 			});
+			this.handleAutoSave(this.state.dataPelanggaran, enam)
+
 		}
 	}
 	validation = (activeStep) => {
@@ -396,7 +403,7 @@ class ProsesSanksi extends Component {
 				swal.fire({
 					title: "Data belum lengkap",
 					icon: "error",
-					html:'Mohon diisi terlebih dahulu sebelum melanjutkan ke tahap berikutnya',
+					html: 'Mohon diisi terlebih dahulu sebelum melanjutkan ke tahap berikutnya',
 					confirmButtonColor: "#3e3a8e",
 				});
 				this.setState({
@@ -420,7 +427,7 @@ class ProsesSanksi extends Component {
 			) {
 				swal.fire({
 					title: "Data belum lengkap",
-					html:'Mohon diisi terlebih dahulu sebelum melanjutkan ke tahap berikutnya',
+					html: 'Mohon diisi terlebih dahulu sebelum melanjutkan ke tahap berikutnya',
 					icon: "error",
 					confirmButtonColor: "#3e3a8e",
 				});
@@ -445,6 +452,7 @@ class ProsesSanksi extends Component {
 
 	render() {
 		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, thisclose } = this.state
+		console.log(dataUpload)
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -517,7 +525,7 @@ class ProsesSanksi extends Component {
 													active: this.state.activeStep === "5",
 												})}
 												// onClick={this.toggleStep("5")}
-												onClick={this.validasiSanksiOn5}
+												onClick={this.validasiSanksiOn5("4", "5")}
 												disabled={thisclose === "Ditutup"}
 											>
 												<h4 className="text-left my-3">5. Berita Acara Pleno</h4>
@@ -530,7 +538,7 @@ class ProsesSanksi extends Component {
 													active: this.state.activeStep === "6",
 												})}
 												// onClick={this.toggleStep("6")}
-												onClick={this.validasiSanksiOn6}
+												onClick={this.validasiSanksiOn6("4", "6")}
 												disabled={thisclose === "Ditutup"}
 											>
 												<h4 className="text-left my-3">6. Penetapan Sanksi</h4>
@@ -618,7 +626,7 @@ class ProsesSanksi extends Component {
 												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
 													<span className="font-color-white">Previous</span>
 												</Button>
-												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.validasiSanksiOn5}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.validasiSanksiOn5("4", "5")}>
 													<span className="font-color-white">Next</span>
 												</Button>
 											</div>