|
|
@@ -1,6 +1,6 @@
|
|
|
import React, { useRef, Component } from 'react';
|
|
|
import { useReactToPrint } from "react-to-print";
|
|
|
-import { Row, Col, Button } from "reactstrap";
|
|
|
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, } from "reactstrap";
|
|
|
import Head from 'next/head'
|
|
|
import SignatureCanvas from 'react-signature-canvas'
|
|
|
import ComponentToPrint from "./SuratBA";
|
|
|
@@ -9,6 +9,9 @@ import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
|
|
|
import DatePicker from "react-datepicker";
|
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
|
import id from 'date-fns/locale/id';
|
|
|
+import CopyToClipboard from "react-copy-to-clipboard";
|
|
|
+import { getAutoSave } from "@/actions/autosave";
|
|
|
+
|
|
|
|
|
|
|
|
|
class BeritaAcara extends Component {
|
|
|
@@ -32,22 +35,23 @@ class BeritaAcara extends Component {
|
|
|
meringankan: [],
|
|
|
sanksi: "[Mohon Diisi]",
|
|
|
isEditSanksi: false,
|
|
|
- signature: [],
|
|
|
- peserta: [{
|
|
|
- nama: "",
|
|
|
- signature: "",
|
|
|
-
|
|
|
- }]
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ Copied: false,
|
|
|
+ setTemuanLain: true,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
static getInitialProps = async ({ query }) => {
|
|
|
return { query };
|
|
|
};
|
|
|
+
|
|
|
+ componentDidMount = async () => {
|
|
|
+ const { query, token } = this.props;
|
|
|
+ const { id } = query;
|
|
|
+ const getDataSave = await getAutoSave({ id, laporan: true });
|
|
|
+ const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
|
|
|
+ const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran.data;
|
|
|
+ this.setState({ autoSaveDataPelanggaran, autoSaveDataSuratBA });
|
|
|
+ };
|
|
|
setDataSuratBA = () => {
|
|
|
this.props.setDataSuratBA(this.state);
|
|
|
}
|
|
|
@@ -57,102 +61,83 @@ class BeritaAcara extends Component {
|
|
|
isEditTempat = () => {
|
|
|
this.setState({
|
|
|
isEditTempat: !this.state.isEditTempat,
|
|
|
- })
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
+
|
|
|
}
|
|
|
isEditTanggal = () => {
|
|
|
this.setState({
|
|
|
isEditTanggal: !this.state.isEditTanggal,
|
|
|
- })
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
+
|
|
|
}
|
|
|
isEditNamaPeserta = () => {
|
|
|
this.setState({
|
|
|
isEditNamaPeserta: !this.state.isEditNamaPeserta,
|
|
|
- })
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
+
|
|
|
|
|
|
}
|
|
|
isEditTemuanLain = () => {
|
|
|
this.setState({
|
|
|
isEditTemuanLain: !this.state.isEditTemuanLain,
|
|
|
- })
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
}
|
|
|
+
|
|
|
isEditKeberatan = () => {
|
|
|
this.setState({
|
|
|
isEditKeberatan: !this.state.isEditKeberatan,
|
|
|
- })
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
+
|
|
|
}
|
|
|
isEditMeringankan = () => {
|
|
|
this.setState({
|
|
|
isEditMeringankan: !this.state.isEditMeringankan,
|
|
|
- })
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
}
|
|
|
isEditSanksi = () => {
|
|
|
this.setState({
|
|
|
isEditSanksi: !this.state.isEditSanksi,
|
|
|
- })
|
|
|
- this.handleAutoSave()
|
|
|
- }
|
|
|
- updateValueTempat = () => {
|
|
|
- this.setState({
|
|
|
- isEditTempat: false,
|
|
|
- tempat: this.refs.inputTempat.value
|
|
|
- }, this.setDataSuratBA)
|
|
|
- this.handleAutoSave()
|
|
|
- }
|
|
|
- updateValueNamaPeserta = () => {
|
|
|
- const addNamaPeserta = this.refs.inputNamaPeserta.value
|
|
|
- this.setState({
|
|
|
- namaPeserta: [...this.state.namaPeserta, addNamaPeserta]
|
|
|
- }, this.setDataSuratBA)
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
+
|
|
|
}
|
|
|
updateValueTemuanLain = () => {
|
|
|
const addTemuanLain = this.refs.inputTemuan.value
|
|
|
this.setState({
|
|
|
temuanLain: [...this.state.temuanLain, addTemuanLain]
|
|
|
- }, this.setDataSuratBA)
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
+
|
|
|
}
|
|
|
updateValueMemringankan = () => {
|
|
|
const addMeringankan = this.refs.inputMeringankan.value
|
|
|
this.setState({
|
|
|
meringankan: [...this.state.meringankan, addMeringankan]
|
|
|
- }, this.setDataSuratBA)
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
+
|
|
|
}
|
|
|
updateValueMemberatkan = () => {
|
|
|
const addKeberatan = this.refs.inputMemberatkan.value
|
|
|
this.setState({
|
|
|
memberatkan: [...this.state.memberatkan, addKeberatan]
|
|
|
- }, this.setDataSuratBA)
|
|
|
- this.handleAutoSave()
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
+
|
|
|
}
|
|
|
updateValueSanksi = () => {
|
|
|
this.setState({
|
|
|
isEditSanksi: false,
|
|
|
sanksi: this.refs.inputSanksi.value
|
|
|
- }, this.setDataSuratBA)
|
|
|
- this.handleAutoSave()
|
|
|
- }
|
|
|
+ }, this.setDataSuratBA, this.handleAutoSave())
|
|
|
|
|
|
- sigPad = []
|
|
|
- clear = () => {
|
|
|
- this.sigPad.clear()
|
|
|
- }
|
|
|
- updateValueSignature = () => {
|
|
|
- const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
|
|
|
- this.setState({
|
|
|
- signature: [...this.state.signature, addsig]
|
|
|
- }, this.setDataSuratBA)
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+ Copied = () => this.setState({
|
|
|
+ Copied: !this.state.Copied
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
render() {
|
|
|
- const { dataPelanggaran, dataLaporan } = this.props
|
|
|
- const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, trimmedDataURL, signature } = this.state
|
|
|
+ const { dataPelanggaran, dataLaporan, dataSuratBA } = this.props
|
|
|
+ const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, autoSaveDataSuratBA } = this.state
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
@@ -202,22 +187,32 @@ class BeritaAcara extends Component {
|
|
|
/>
|
|
|
</span>
|
|
|
}
|
|
|
- {setTanggal === true ?
|
|
|
- <span onClick={this.isEditTanggal}> {moment(tanggal).locale("id").format("dddd")}, tanggal {moment(tanggal).format("D")} bulan {moment(tanggal).format("MMMM")} tahun {moment(tanggal).format("YYYY")},</span> :
|
|
|
+ {setTanggal === true || autoSaveDataSuratBA?.setTanggal === true ?
|
|
|
+ <span onClick={this.isEditTanggal}> {moment(tanggal || autoSaveDataSuratBA?.tanggal).locale("id").format("dddd")}, tanggal {moment(tanggal || autoSaveDataSuratBA?.tanggal).format("D")} bulan {moment(tanggal || autoSaveDataSuratBA?.tanggal).format("MMMM")} tahun {moment(tanggal || autoSaveDataSuratBA?.tanggal).format("YYYY")},</span> :
|
|
|
<span onClick={this.isEditTanggal}> [Mohon Diisi] </span>
|
|
|
}
|
|
|
bertempat di
|
|
|
- {isEditTempat ?
|
|
|
+ {isEditTempat &&
|
|
|
<span>
|
|
|
<input type='text'
|
|
|
defaultValue=""
|
|
|
- ref="inputTempat" />
|
|
|
+ ref="inputTempat"
|
|
|
+ onChange={() => {
|
|
|
+ this.setState({ tempat: this.refs.inputTempat.value, settempat: true }, this.setDataSuratBA)
|
|
|
+ }}
|
|
|
+ />
|
|
|
<button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTempat} />
|
|
|
- <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueTempat(), this.handleAutoSave() }} />
|
|
|
+ <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditTempat() }} />
|
|
|
+ </span>
|
|
|
+ }
|
|
|
+ {dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat ?
|
|
|
+ <span onClick={this.isEditTempat}>
|
|
|
+ {dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat}
|
|
|
</span>
|
|
|
:
|
|
|
- <span onClick={this.isEditTempat}> {tempat}</span>
|
|
|
+ <span onClick={this.isEditTempat}>[Mohon Diisi]</span>
|
|
|
}
|
|
|
+
|
|
|
,
|
|
|
telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
|
|
|
</p>
|
|
|
@@ -233,8 +228,8 @@ class BeritaAcara extends Component {
|
|
|
<div className='body'>
|
|
|
<ol>
|
|
|
<li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
|
|
|
- {setTanggal === true ?
|
|
|
- <span> {moment(tanggal).format("DD-MM-YYYY")}</span>
|
|
|
+ {setTanggal === true || autoSaveDataSuratBA?.setTanggal === true ?
|
|
|
+ <span> {moment(tanggal || autoSaveDataSuratBA?.tanggal).format("DD-MM-YYYY")}</span>
|
|
|
:
|
|
|
<span> ....... </span>
|
|
|
}
|
|
|
@@ -275,14 +270,17 @@ class BeritaAcara extends Component {
|
|
|
<li>Temuan Lain:
|
|
|
{isEditTemuanLain ?
|
|
|
<span>
|
|
|
- <input style={{ height: "30px", width: "250px" }} type='textarea' defaultValue={""} ref="inputTemuan" />
|
|
|
- <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueTemuanLain(), this.isEditTemuanLain(), this.handleAutoSave() }} />
|
|
|
+ <input style={{ height: "30px", width: "250px" }} type='textarea' defaultValue={""} ref="inputTemuan"
|
|
|
+ />
|
|
|
+ <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => {
|
|
|
+ this.updateValueTemuanLain(), this.isEditTemuanLain(), this.handleAutoSave()
|
|
|
+ }} />
|
|
|
<button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTemuanLain} />
|
|
|
</span>
|
|
|
|
|
|
: <Button onClick={this.isEditTemuanLain} className=" p-0 m-0" color="success">Input Data</Button>}
|
|
|
<ol type="a">
|
|
|
- {temuanLain.map((value) => <li>{value}</li>)}
|
|
|
+ {dataSuratBA?.temuanLain.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.temuanLain.map((value) => <li>{value}</li>)}
|
|
|
</ol>
|
|
|
</li>
|
|
|
<li>Hal-hal yang memberatkan, sebagai berikut:
|
|
|
@@ -295,7 +293,7 @@ class BeritaAcara extends Component {
|
|
|
|
|
|
: <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
|
|
|
<ol type="a">
|
|
|
- {memberatkan.map((value) => <li>{value}</li>)}
|
|
|
+ {dataSuratBA?.memberatkan.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.memberatkan.map((value) => <li>{value}</li>)}
|
|
|
</ol>
|
|
|
</li>
|
|
|
<li>hal-hal yang meringankan, sebagai berikut:
|
|
|
@@ -308,7 +306,7 @@ class BeritaAcara extends Component {
|
|
|
|
|
|
: <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
|
|
|
<ol type="a">
|
|
|
- {meringankan.map((value) => <li>{value}</li>)}
|
|
|
+ {dataSuratBA?.meringankan.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.meringankan.map((value) => <li>{value}</li>)}
|
|
|
</ol>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -319,13 +317,34 @@ class BeritaAcara extends Component {
|
|
|
ref="inputSanksi" />
|
|
|
<button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditSanksi} />
|
|
|
<button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.updateValueSanksi} />
|
|
|
- </span> : <span onClick={this.isEditSanksi}> {sanksi}</span>}</strong>
|
|
|
+ </span> : <span onClick={this.isEditSanksi}> {dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi}</span>}</strong>
|
|
|
</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
- <p className='BA-body'>
|
|
|
+ <p className=''>
|
|
|
Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
|
|
|
</p>
|
|
|
+ <p>
|
|
|
+ <CopyToClipboard
|
|
|
+ text={`https://dev.sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}
|
|
|
+ options={{ asHtml: true }}
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <Button color="" id="Popover1" className="btn-labeled-notHover" onClick={() => {
|
|
|
+ this.setState({
|
|
|
+ setTemuanLain: !this.state.setTemuanLain
|
|
|
+ }, this.setDataSuratBA()), this.handleAutoSave()
|
|
|
+ }}>
|
|
|
+ <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Copy Link Add Peserta</h4>
|
|
|
+ </Button>
|
|
|
+ <Popover placement="bottom" isOpen={this.state.Copied} target="Popover1" toggle={this.Copied}>
|
|
|
+ <PopoverHeader>Berhasil Copy Link</PopoverHeader>
|
|
|
+ <PopoverBody><strong>Link</strong>:https://dev.sidali.kemdikbud.go.id//app/signature/pleno-sanksi/${dataLaporan.data?._id}</PopoverBody>
|
|
|
+ </Popover>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </CopyToClipboard>
|
|
|
+ </p>
|
|
|
<table className='demo'>
|
|
|
<tbody>
|
|
|
|