PTB-fe/components/Sanksi/BeritaAcara.js

import React, { useRef, Component } from 'react';
import { useReactToPrint } from "react-to-print";
import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter } from "reactstrap";
import Head from 'next/head'
import SignatureCanvas from 'react-signature-canvas'
import { connect } from "react-redux";
import ComponentToPrint from "./SuratBA_A";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
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";
import ContentEditable from 'react-contenteditable'
import { removePesertaPleno } from '../../actions/sanksi';
import { ToastContainer, toast } from "react-toastify";
import Router from "next/router";



class BeritaAcara extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isEditTempat: false,
            tempat: "",
            isEditTanggal: false,
            tanggal: "",
            setTanggal: false,
            isEditNamaPeserta: false,
            isEditTemuanLain: false,
            temuanLain: [],
            memberatkan: [],
            isEditKeberatan: false,
            isEditMeringankan: false,
            meringankan: [],
            sanksi: "",
            isEditSanksi: false,
            copied: false,
            setmeState: true,
            descPelanggaran: [],
            modalRemovePeserta: false,
            selectedPeserta: ""
        };
    }

    static getInitialProps = async ({ query }) => {
        return { query };
    };

    componentDidMount = async () => {
        const { query, token, dataPelanggaran } = this.props;
        const { id } = query;
        const getDataSave = await getAutoSave({ id, laporan: true });
        const autosaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
        this.setState(autosaveDataSuratBA)
    };

    componentDidUpdate = (prevProps) => {
        const { dataPelanggaran } = this.state;
        if (prevProps.dataPelanggaran != this.state.dataPelanggaran) {
            const descPelanggaran = {}
            dataPelanggaran?.forEach(e => {
                descPelanggaran[e._id] = {
                    simpulan: 'simpulan',
                    rekomendasi: 'rekomendasi'
                }
            });
        }
    }

    updateValueSimpulan = (evt, id) => {
        const descPelanggaran = this.state.descPelanggaran
        this.state.descPelanggaran = {
            ...descPelanggaran, [id]: {
                ...descPelanggaran[id], simpulan: evt.target.value
            }
        }
        this.handleAutoSave()
        // this.setState((prevState) => ({
        //     ...prevState, descPelanggaran: {
        //         ...prevState.descPelanggaran, [id]: {
        //             ...prevState.descPelanggaran[id], simpulan: evt.target.value
        //         }
        //     }
        // }), this.handleAutoSave)
    }
    updateValueRekomendasi = (evt, id) => {
        const descPelanggaran = this.state.descPelanggaran
        this.state.descPelanggaran = {
            ...descPelanggaran, [id]: {
                ...descPelanggaran[id], rekomendasi: evt.target.value
            }
        }
        this.handleAutoSave()
        // this.setState((prevState) => ({
        //     ...prevState, descPelanggaran: {
        //         ...prevState.descPelanggaran, [id]: {
        //             ...prevState.descPelanggaran[id], rekomendasi: evt.target.value
        //         }
        //     }
        // }), this.handleAutoSave)
    }

    setDataSuratBA = () => {
        this.props.setDataSuratBA(this.state);
    }
    handleAutoSave = () => {
        this.props.handleAutoSave()
    }
    isEditTempat = () => {
        this.state.isEditTempat = !this.state.isEditTempat
        this.setDataSuratBA()
        this.handleAutoSave()
        // this.setState({
        //     isEditTempat: !this.state.isEditTempat,
        // }, this.setDataSuratBA, this.handleAutoSave())
    }
    isEditTanggal = () => {
        this.state.isEditTanggal = !this.state.isEditTanggal
        this.setDataSuratBA()
        this.handleAutoSave()
        // this.setState({
        //     isEditTanggal: !this.state.isEditTanggal,
        // }, this.setDataSuratBA, this.handleAutoSave())

    }

    isEditTemuanLain = () => {
        this.state.isEditTemuanLain = !this.state.isEditTemuanLain
        this.setDataSuratBA()
        this.handleAutoSave()
        // this.setState({
        //     isEditTemuanLain: !this.state.isEditTemuanLain,
        // }, this.setDataSuratBA, this.handleAutoSave())
    }

    isEditKeberatan = () => {
        this.state.isEditKeberatan = !this.state.isEditKeberatan
        this.setDataSuratBA()
        this.handleAutoSave()
        // this.setState({
        //     isEditKeberatan: !this.state.isEditKeberatan,
        // }, this.setDataSuratBA, this.handleAutoSave())

    }
    isEditMeringankan = () => {
        this.state.isEditMeringankan = !this.state.isEditMeringankan
        this.setDataSuratBA()
        this.handleAutoSave()
        // this.setState({
        //     isEditMeringankan: !this.state.isEditMeringankan,
        // }, this.setDataSuratBA, this.handleAutoSave())
    }
    isEditSanksi = () => {
        this.state.isEditSanksi = !this.state.isEditSanksi
        this.setDataSuratBA()
        this.handleAutoSave()
        // this.setState({
        //     isEditSanksi: !this.state.isEditSanksi,
        // }, this.setDataSuratBA, this.handleAutoSave())
    }
    updateValueTemuanLain = () => {
        const addTemuanLain = this.refs.inputTemuan.value
        this.state.temuanLain.push(addTemuanLain)
        this.setDataSuratBA(this.state)
        // this.handleAutoSave()

    }
    updateValueMemringankan = () => {
        const addMeringankan = this.refs.inputMeringankan.value
        this.state.meringankan.push(addMeringankan)
        this.setDataSuratBA(this.state)
        // this.handleAutoSave()

    }
    updateValueMemberatkan = () => {
        const addKeberatan = this.refs.inputMemberatkan.value
        this.state.memberatkan.push(addKeberatan)
        this.setDataSuratBA(this.state)
        // this.handleAutoSave()
    }


    Copied = () => this.setState({
        copied: !this.state.copied
    }, this.handleAutoSave())

    CloseCopied = () => {

        setTimeout(() => {
            // this.state.copied = !this.state.copied
            this.setState({
                copied: !this.state.copied
            }, this.handleAutoSave());
        }, 1000);
    }

    setModalRemovePeserta = (modalRemovePeserta) => {
        this.setState({
            modalRemovePeserta: !this.state.modalRemovePeserta
        })
    }

    render() {
        const { dataLaporan, dataSuratBA, dataPelanggaran } = this.props
        const { descPelanggaran, tanggal, setTanggal } = this.state
        return (
            <div>
                <Modal isOpen={this.state.modalRemovePeserta} >
                    <ModalBody>Apakah anda ingin menghapus peserta pleno?</ModalBody>
                    <ModalFooter>

                        <Button color className="btn-login"
                            onClick={async () => {
                                const { query, token } = this.props;
                                const { id: laporan_id } = query;
                                let update = null;
                                const toastid = toast.loading("Please wait...");
                                const peserta_id = this.state.selectedPeserta;
                                update = await removePesertaPleno(token, { laporan_id, peserta_id });
                                if (!update) {
                                    toast.update(toastid, { render: "Gagal hapus peserta pleno", type: "error", isLoading: false, autoClose: true, closeButton: true });
                                } else {
                                    toast.update(toastid, { render: "Berhasil hapus peserta pleno", type: "success", isLoading: false, autoClose: true, closeButton: true });
                                    Router.push(`/app/sanksi/proses?id=${laporan_id}`);
                                    this.setModalRemovePeserta()
                                }
                            }}
                        >

                            <span className="font-color-white">Ya</span>
                        </Button>
                        <Button color className="btn-v2" onClick={this.setModalRemovePeserta}>
                            Tidak
                        </Button>
                    </ModalFooter>
                </Modal>
                <div className=' content-heading border-radius-login'>
                    <span className="btn-radius">
                        <ReactToPrint
                            trigger={() => {
                                return <span>
                                    <Button color className="btn-labeled-4">
                                        <h4 className="p-0 mt-2">Print dan Download</h4>
                                    </Button>
                                </span>
                            }}
                            content={() => this.componentRef}
                        />
                    </span>
                </div>
                <div style={{ display: "none" }}>
                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
                </div>
                <div className='page py-5 m-0 '>
                    <div className='BA-Header'>
                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                        <h4 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h4>
                        {dataLaporan.data && (<h4 className='text-uppercase' >{dataLaporan.data.pt.nama}</h4>)}
                    </div>
                    <div className='BA-body px-5 pt-3'>
                        <p>
                            Pada hari ini
                            {dataSuratBA?.isEditTanggal &&
                                <span>
                                    <DatePicker
                                        selected={tanggal ? new Date(tanggal) : tanggal}
                                        onChange={(tanggal) => {
                                            this.setState({ tanggal, setTanggal: true }, this.setDataSuratBA)
                                        }}
                                        dateFormat="dd/MM/yyyy"
                                        placeholderText="Isi Tanggal"
                                        locale={id}
                                        className="form-control bg-white"
                                    />
                                    <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTanggal} />
                                    <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.isEditTanggal}
                                    />
                                </span>
                            }
                            {setTanggal === true || this.state?.setTanggal === true ?
                                <span onClick={this.isEditTanggal}> {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
                                <span onClick={this.isEditTanggal}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
                            }
                            &nbsp;bertempat di
                            {dataSuratBA?.isEditTempat &&
                                <span>
                                    <input type='text'
                                        defaultValue={""}
                                        ref="inputTempat"
                                        onChange={() => {
                                            this.setState({ tempat: this.refs.inputTempat.value }, 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.isEditTempat() }} />
                                </span>
                            }
                            {this.state?.tempat ?
                                <span onClick={this.isEditTempat} className='hhh'>
                                    &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
                                </span>
                                :
                                <span onClick={this.isEditTempat}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></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:

                            <ol>
                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) =>
                                    <li>
                                        {value.nama}
                                        <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
                                            onClick={() => {
                                                this.setState({
                                                    selectedPeserta: value._id
                                                })
                                                this.setModalRemovePeserta()
                                            }} />
                                    </li>)}
                            </ol>
                        </p>
                        <p>
                            Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:

                            <ol className='mt-3'>
                                <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
                                    {setTanggal === true || this.state?.setTanggal === true ?
                                        <span> &nbsp;{moment(tanggal || this.state?.tanggal).format("DD-MM-YYYY")}</span>
                                        :
                                        <span> &nbsp;....... &nbsp;</span>
                                    }
                                </li>
                                <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
                            </ol>
                        </p>

                        <div className='table-a my-4' >
                            <table>
                                <thead >
                                    <tr>
                                        <th rowspan="2">NO</th>
                                        <th rowspan="2">NAMA DAN IZIN PRODI</th>
                                        <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
                                        <th rowspan="2">SIMPULAN</th>
                                        <th rowspan="2">REKOMENDASI</th>
                                    </tr>
                                    <tr>
                                        <th>PASAL</th>
                                        <th>BUTIR PELANGGARAN</th>
                                        <th>DESKRIPSI PELANGGARAN</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {dataPelanggaran?.data?.map((e, i) => (
                                        <tr key={e._id}>
                                            <td>{++i}</td>
                                            {dataLaporan.data && (<td >{dataLaporan.data.pt.nama}</td>)}
                                            <td>{e.pasal}</td>
                                            <td>{e.butir_pelanggaran}</td>
                                            <td>{e.pelanggaran}</td>
                                            <td >
                                                <ContentEditable
                                                    html={descPelanggaran[e._id]?.simpulan || ""}
                                                    disabled={false}
                                                    onChange={(evt) => {
                                                        this.updateValueSimpulan(evt, e._id), this.setDataSuratBA()

                                                    }}
                                                />
                                            </td>
                                            <td style={{ maxWidth: "80px" }}>
                                                {`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi}` || ""}
                                                {/* <ContentEditable
                                                    html={`Sanksi Administratif berupa ${dataSuratBA?.sanksi||this.state.sanksi}` || ""}
                                                    // html={descPelanggaran[e._id]?.rekomendasi || ""}

                                                    disabled={false}
                                                    // onChange={(evt) => {
                                                    //     this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()
                                                    // }}
                                                /> */}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                        <p>
                            <ol start="3">
                                <li>Temuan Lain:
                                    {this.props.dataSuratBA?.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()
                                            }} />
                                            <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">
                                        {dataSuratBA?.temuanLain?.map((value) => <li>{value}</li>) || this.state?.temuanLain?.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>Hal-hal yang memberatkan, sebagai berikut:
                                    {this.props.dataSuratBA?.isEditKeberatan ?
                                        <span>
                                            <input style={{ height: "30px", width: "250px" }} type='text' defaultValue={""} ref="inputMemberatkan" />
                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemberatkan(), this.isEditKeberatan() }} />
                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditKeberatan} />
                                        </span>

                                        : <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
                                    <ol type="a">
                                        {dataSuratBA?.memberatkan?.map((value) => <li>{value}</li>) || this.state?.memberatkan?.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>hal-hal yang meringankan, sebagai berikut:
                                    {this.props.dataSuratBA?.isEditMeringankan ?
                                        <span>
                                            <input type='text' defaultValue={""} ref="inputMeringankan" />
                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemringankan(), this.isEditMeringankan() }} />
                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditMeringankan} />
                                        </span>

                                        : <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
                                    <ol type="a">
                                        {dataSuratBA?.meringankan?.map((value) => <li>{value}</li>) || this.state?.meringankan?.map((value) => <li>{value}</li>)}
                                    </ol>
                                </li>
                                <li>
                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa
                                        {dataSuratBA?.isEditSanksi &&
                                            <span>
                                                <input type='text'
                                                    defaultValue=""
                                                    ref="inputsanksi"
                                                    onChange={() => {
                                                        this.setState({ sanksi: this.refs.inputsanksi.value }, this.setDataSuratBA)
                                                    }}
                                                />
                                                <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.isEditSanksi() }} />
                                            </span>
                                        }
                                        {dataSuratBA?.sanksi || this.state?.sanksi ?
                                            <span onClick={this.isEditSanksi}>
                                                &nbsp;{dataSuratBA?.sanksi || this.state?.sanksi}
                                            </span>
                                            :
                                            <span onClick={this.isEditSanksi}>[Mohon Diisi]</span>
                                        }
                                    </strong>
                                </li>
                            </ol>
                        </p>
                        <p>
                            Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                        </p>
                        <CopyToClipboard
                            text={`https://dev.sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}
                            options={{ asHtml: true }}
                        >
                            <div>
                                <span className="btn-radius">
                                    <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                        this.CloseCopied()
                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>

                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
                                    </Button>
                                </span>
                                <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
                                </Popover>
                            </div>

                        </CopyToClipboard>

                        <div  >
                            <div className='header-ttd signature-border pt-1 pb-1'>
                                <text className='header-ttd font-weight-bold '>PESERTA RAPAT PENYUSUNAN REKOMENDASI</text>
                            </div>
                            <div id="ttd">
                                {dataLaporan
                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
                                        <div className='ttd-div'>
                                            <div className='sign-ttd'>
                                                <img
                                                    className='sign-ttd'
                                                    src={value.ttd.path} />
                                            </div>
                                            <div className='sign-nama'>
                                                <text>
                                                    {value.nama}
                                                </text>
                                            </div>
                                        </div>
                                    )) : ""}
                            </div>
                        </div>
                    </div>

                </div>
            </div >
        );
    }
}

const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(BeritaAcara)