bypass 2 80%

components/BypassII/BeritaAcara.js

@@ -44,13 +44,557 @@ class BeritaAcara_Bypass extends Component {
             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())
+
+    }
+    isEditTanggal_2 = () => {
+        this.state.isEditTanggal_2 = !this.state.isEditTanggal_2
+        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
+        })
+    }
+    removeTemuanLain = index => () => {
+        const temuanLain = this.state.temuanLain
+        const data = [...temuanLain]
+        data.splice(index, 1);
+
+        this.setState({
+            temuanLain: data,
+        }, this.setDataSuratBA()
+        );
+
+
+    }
+    removeMemberatkan = index => () => {
+        const memberatkan = this.state.memberatkan
+        const data = [...memberatkan]
+        data.splice(index, 1);
+
+        this.setState({
+            memberatkan: data,
+        }, this.setDataSuratBA()
+        );
+
+    }
+    removeMeringankan = index => () => {
+        const meringankan = this.state.meringankan
+        const data = [...meringankan]
+        data.splice(index, 1);
+
+        this.setState({
+            meringankan: data,
+        }, this.setDataSuratBA()
+        );
+
+    }
 
     render() {
-        const { pt } = this.props
+        const { dataLaporan, dataSuratBA, dataPelanggaran, pt } = this.props
+        const { descPelanggaran, tanggal, setTanggal, setTanggal_2, tanggal_2, temuanLain } = this.state
+
         return (
             <div>
-                <h4>{pt.data?.nama}</h4>
+                <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)} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} pt={this.props.pt} />
+                </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>
+                        {pt?.data && (<h4 className='text-uppercase' >{pt.data.nama}</h4>)}
+                    </div>
+                    <div className='BA-body px-5 pt-3'>
+                        <p>
+                            Pada hari ini
+                            {dataSuratBA?.isEditTanggal &&
+                                <span style={{ textIndent: "0rem" }}>
+                                    <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 {pt?.data && (<span>{pt.data.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 {pt?.data && (<span>{pt.data.nama}</span>)}, disampaikan sebagai berikut:
+
+                            <ol className='mt-3'>
+                                <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {pt?.data && (<span>{pt.data.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>
+                                    } */}
+                                    {dataSuratBA?.isEditTanggal_2 &&
+                                        <span style={{ textIndent: "0rem" }}>
+                                            <DatePicker
+                                                selected={tanggal_2 ? new Date(tanggal_2) : tanggal_2}
+                                                onChange={(tanggal_2) => {
+                                                    this.setState({ tanggal_2, setTanggal_2: 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_2} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.isEditTanggal_2}
+                                            />
+                                        </span>
+                                    }
+                                    {setTanggal_2 === true || this.state?.setTanggal_2 === true ?
+                                        <span onClick={this.isEditTanggal_2}> {moment(tanggal_2 || this.state?.tanggal_2).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal_2 || this.state?.tanggal_2).format("D")}&nbsp; bulan &nbsp;{moment(tanggal_2 || this.state?.tanggal_2).format("MMMM")} tahun &nbsp;{moment(tanggal_2 || this.state?.tanggal_2).format("YYYY")},</span> :
+                                        <span onClick={this.isEditTanggal_2}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></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>
+                                            {pt.data && (<td >{pt.data.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}` || ""}
+                                            </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, index) =>
+                                            //     <li>
+                                            //         {value}
+                                            //         <button onClick={removeTemuanLain(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                            //         />
+                                            //     </li>) ||
+                                            this.state?.temuanLain?.map((value, index) =>
+                                                <li>
+                                                    {value}
+                                                    <button onClick={
+                                                        this.removeTemuanLain(index)
+                                                    } className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                                    />
+                                                </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, index) =>
+                                                <li>
+                                                    {value}
+                                                    <button onClick={
+                                                        this.removeMemberatkan(index)
+                                                    } className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                                    />
+                                                </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, index) =>
+                                                <li>
+                                                    {value}
+                                                    <button onClick={
+                                                        this.removeMeringankan(index)
+                                                    } className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                                    />
+                                                </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>
+                        {/* {ENV === "production" &&
+                            <CopyToClipboard
+                                text={`https://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>
+                                        </Button>
+                                    </span>
+                                    <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
+                                        <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                    </Popover>
+                                </div>
+
+                            </CopyToClipboard>
+                        }
+                        {ENV === "development" &&
+                            <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>
+                                        </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 >
         );
     }

components/BypassII/SuratBA_A.js

@@ -27,27 +27,26 @@ class ComponentToPrint extends React.Component {
 
 
     componentDidMount = async () => {
-        const { query, token } = this.props;
-        const { id } = query;
-        const dataLaporan = await getOneLaporan(token, id);
-        const getDataSave = await getAutoSave({ id, laporan: true });
-        const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
-        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
-        this.setState({ dataLaporan });
-        this.setState(dataPelanggaran)
-        this.setState(autoSaveDataSuratBA)
+        // const { query, token } = this.props;
+        // const { id } = query;
+        // const dataLaporan = await getOneLaporan(token, id);
+        // const getDataSave = await getAutoSave({ id, laporan: true });
+        // const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        // const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
+        // this.setState({ dataLaporan });
+        // this.setState(dataPelanggaran)
+        // this.setState(autoSaveDataSuratBA)
 
     };
 
     render() {
-        const { dataLaporan, descPelanggaran } = this.state
-        const { dataPelanggaran, dataSuratBA } = this.props
+        const { dataLaporan, dataSuratBA, dataPelanggaran, pt } = this.props   
         return (
             <page>
                 <div className='BA-Header'>
                     <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                     <h3 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
-                    {dataLaporan.data && (<h3 className='text-uppercase' >{dataLaporan.data.pt.nama}</h3>)}
+                    {pt?.data && (<h3 className='text-uppercase' >{pt.data.nama}</h3>)}
                 </div>
                 <div className='BA-body pt-3'>
                     <p>
@@ -65,16 +64,16 @@ class ComponentToPrint extends React.Component {
                             <span>-</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>
+                        telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {pt?.data && (<span>{pt.data.nama}</span>)}, yang dihadiri oleh:
+                        {/* <ol>
                             {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
-                        </ol>
+                        </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:
+                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {pt.data && (<span>{pt.data.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
+                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {pt.data && (<span>{pt.data.nama}</span>)}, tanggal
                                 {dataSuratBA?.setTanggal_2 === true || this.state?.setTanggal_2 === true ?
                                     <span> &nbsp;{moment(dataSuratBA?.tanggal_2 || this.state?.tanggal_2).format("DD-MM-YYYY")}</span>
                                     :
@@ -104,7 +103,7 @@ class ComponentToPrint extends React.Component {
                                 {dataPelanggaran?.data?.map((e, i) => (
                                     <tr key={e._id}>
                                         <td>{++i}</td>
-                                        {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
+                                        {pt.data && (<td className='BA-header'>{pt.data.nama}</td>)}
                                         <td>{e.pasal}</td>
                                         <td>{e.butir_pelanggaran}</td>
                                         <td>{e.pelanggaran}</td>

components/BypassII/TablePenetapanSanksi.js

@@ -28,20 +28,20 @@ export class TablePenetapanSanksi_Bypass extends Component {
 	}
 
 	componentDidMount = async () => {
-		const { token, query } = this.props;
-		const { id } = query;
+		const { token } = this.props;
+		// const { id } = query;
 		const pelanggaran = await getPelanggaran(token);
-		const getDataSave = await getAutoSave({ id, laporan: true });
-		const getDataPelanggaranfromAutoSave = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
-		if (this.state.trigger === false || this.ttate.trigger === true) {
-			if (getDataPelanggaranfromAutoSave === "null")
-				this.setState({ checkedData: [] })
-			else{
-				this.setState({
-					checkedData: getDataPelanggaranfromAutoSave ? getDataPelanggaranfromAutoSave?.data?.map(e => e._id) : [],
-					labelSanksi: getDataPelanggaranfromAutoSave ? getDataPelanggaranfromAutoSave?.data?.map(e => ({ value: e._id, labelSanksi: e.label_sanksi })) : []
-				})
-			}}
+		// const getDataSave = await getAutoSave({ id, laporan: true });
+		// const getDataPelanggaranfromAutoSave = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
+		// if (this.state.trigger === false || this.state.trigger === true) {
+		// 	if (getDataPelanggaranfromAutoSave === "null")
+		// 		this.setState({ checkedData: [] })
+		// 	else{
+		// 		this.setState({
+		// 			checkedData: getDataPelanggaranfromAutoSave ? getDataPelanggaranfromAutoSave?.data?.map(e => e._id) : [],
+		// 			labelSanksi: getDataPelanggaranfromAutoSave ? getDataPelanggaranfromAutoSave?.data?.map(e => ({ value: e._id, labelSanksi: e.label_sanksi })) : []
+		// 		})
+		// 	}}
 			this.setState({
 				pelanggaran
 			});
@@ -77,9 +77,7 @@ export class TablePenetapanSanksi_Bypass extends Component {
 					{pelanggaran && <Datatable options={{
 						responsive: false, ordering: true,
 						paging: false,
-						// searching:false,
 						ordering: false,
-						// info: false,
 					}}>
 						<table className="table w-100" >
 							<thead>
@@ -101,7 +99,6 @@ export class TablePenetapanSanksi_Bypass extends Component {
 												<div className="media-body d-flex">
 													<div>
 														<p>{jp.pelanggaran}</p>
-														{/* <p>TMT : {jp.tmt_bulan} Bulan</p> */}
 														<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
 													</div>
 												</div>
@@ -123,7 +120,7 @@ export class TablePenetapanSanksi_Bypass extends Component {
 													<input type="checkbox" checked={checkedData.find(id => id === jp._id)} value={jp._id} onChange={(evt) => {
 														this.onHandleChange(evt)
 														this.setLabelSanksi(evt, jp.label_sanksi)
-														this.props.handleAutoSave()
+														// this.props.handleAutoSave()
 													}} />
 													<span className="fa fa-check"></span>
 												</label>
@@ -140,17 +137,7 @@ export class TablePenetapanSanksi_Bypass extends Component {
 					</Datatable>
 
 					}
-					{/* {this.props.user?.role.id === 2020 ? (
-						labelSanksi.length && labelSanksi.filter((e) => e.labelSanksi === "Ringan" || e.labelSanksi === "Sedang").length === labelSanksi.length ? (
-							<Button className="btn-login float-right" color onClick={this.ondelegasi} >
-								<span className="font-color-white">
-									Delegasi ke LLDIKTI
-								</span>
-							</Button>
-						) : ("")
-					) : ("")
-					} */}
-					<div className="float-right m-2 ">
+					{/* <div className="float-right m-2 ">
 						{this.props.user?.role.id === 2020 ? (
 							labelSanksi.length && labelSanksi.filter((e) => e.labelSanksi === "Ringan" || e.labelSanksi === "Sedang").length === labelSanksi.length ? (
 								<Button className="btn-login float-right" color onClick={this.ondelegasi} >
@@ -162,7 +149,7 @@ export class TablePenetapanSanksi_Bypass extends Component {
 						) : ("")
 						}
 
-					</div>
+					</div> */}
 
 
 				</div>

components/BypassII/UploadSurat.js

@@ -83,7 +83,7 @@ export class UploadSurat_Bypass extends Component {
 
 	componentDidMount = async () => {
 		const { query, token } = this.props;
-		const { id } = query;
+		// const { id } = query;
 		// const getDataSave = await getAutoSave({ id, laporan: true });
 		// const autosaveDataUpload = getDataSave.data?.PenetapanSanksi?.dataUpload;
 		// this.setState(autosaveDataUpload)

components/Sanksi/TablePenetapanSanksi.js

@@ -33,7 +33,7 @@ export class TablePenetapanSanksi extends Component {
 		const pelanggaran = await getPelanggaran(token);
 		const getDataSave = await getAutoSave({ id, laporan: true });
 		const getDataPelanggaranfromAutoSave = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
-		if (this.state.trigger === false || this.ttate.trigger === true) {
+		if (this.state.trigger === false || this.state.trigger === true) {
 			if (getDataPelanggaranfromAutoSave === "null")
 				this.setState({ checkedData: [] })
 			else{

components/Sanksi/UploadSurat.js

@@ -205,24 +205,6 @@ export class UploadSurat extends Component {
 						</div>
 					</div>
 				</FormGroup>
-				{/* {this.state.tidakPerluTMTCheck && (
-					<FormGroup row className="mt-3">
-						<label className="col-md-2 col-form-label">Tanggal Penetapan Sanksi</label>
-						<span className="col-sm-3 float-left">
-							<DatePicker
-								selected={this.state.awalTMT ? new Date(this.state.awalTMT) : this.state.awalTMT}
-								onChange={(awalTMT) => {
-									this.setState({ awalTMT }, this.setUploadSuratSanksi)
-								}}
-								dateFormat="dd/MM/yyyy"
-								maxDate={new Date(this.state.startDay)}
-								placeholderText="Isi Tanggal"
-								locale={id}
-								className="form-control bg-white"
-							/>
-						</span>
-					</FormGroup>
-				)} */}
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-3">
 						<label className="col-md-2 col-form-label">Isi TMT</label>
@@ -250,9 +232,6 @@ export class UploadSurat extends Component {
 									<span className="ml-3">
 										<DatePicker
 											selected={this.state.akhirTMT ? new Date(this.state.akhirTMT) : this.state.akhirTMT}
-											// onChange={(akhirTMT, e) => {
-											// 	this.setState({ akhirTMT }, this.setUploadSuratSanksi(e), this.props.handleAutoSave(e))
-											// }}
 											onChange={(akhirTMT) => { this.setAkhirSanksi(akhirTMT) }}
 											dateFormat="dd/MM/yyyy"
 											minDate={new Date(this.state.awalTMT)}
@@ -336,27 +315,6 @@ export class UploadSurat extends Component {
 						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
-				{/* <FormGroup row>
-					<label className="col-md-2 col-form-label">
-						Dokumen Laporan Evaluasi dan Pembahasan
-					</label>
-					<div className="col-md-10">
-
-						<div style={{ display: "none" }}>
-							<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
-						</div>
-						<ReactToPrint
-							trigger={() => {
-								return <span>
-									<Button color className="btn-labeled-4 mt-0">
-										<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
-									</Button>
-								</span>
-							}}
-							content={() => this.componentRef}
-						/>
-					</div>
-				</FormGroup> */}
 				<FormGroup row className="mt-3">
 					<label className="col-md-2 col-form-label">Tanggal Terima Surat Sanksi<span className="text-danger">*</span></label>
 					<span className="col-sm-3 float-left">

pages/app/bypassII/detail.js

@@ -16,6 +16,10 @@ import classnames from "classnames";
 import BeritaAcara_Bypass from "../../../components/BypassII/BeritaAcara";
 import { UploadSurat_Bypass } from "../../../components/BypassII/UploadSurat";
 import { TablePenetapanSanksi_Bypass } from "../../../components/BypassII/TablePenetapanSanksi";
+import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
+import ComponentToPrint from "../../../components/BypassII/SuratBA_A";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+
 
 
 const stepNavitemStyle = {
@@ -43,8 +47,9 @@ class bypassIIDetail extends Component {
         const { query, token } = this.props;
         const ptId = query.ptId;
         const pelaporan = await getPelaporan(token, { pt_id: ptId, all: true, aktif: true });
+        const { data: listSanksi } = await getPelanggaranSanksi(token)
         const pt = await getOnePT(token, ptId);
-        this.setState({ pelaporan, pt });
+        this.setState({ pelaporan, pt, listSanksi });
     };
 
     toggleStep = (activeStep) => () => {
@@ -56,9 +61,24 @@ class bypassIIDetail extends Component {
 
         }
     };
+    setDataSuratBA = (data) => {
+        this.setState({ dataSuratBA: data });
+
+    };
+
+    setCheckedData = async (data) => {
+        const { token } = this.props;
+        const result = await getPelanggaran(token, { id: data.join(",") });
+        this.setState({ dataPelanggaran: result });
+        // this.handleAutoSave(result)
+    };
+    setUploadSuratSanksi = (data) => {
+        this.setState({ dataUpload: data });
 
 
+    };
     render() {
+        const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA } = this.state
         return (
             <ContentWrapper unwrap>
                 {/* <Header /> */}
@@ -116,75 +136,73 @@ class bypassIIDetail extends Component {
 
                                 <Col xs="8">
                                     <TabContent activeTab={this.state.activeStep} className="border-0">
-                                    <TabPane tabId="1">
-											<div className="pt-3 mb-3">
-												<h2>Penetapan Sanksi</h2>
-												{/* {this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi}  />}
-											</div>
-											<FormGroup row className="mt-3">
-												<label className="col-md-2 col-form-label">
-													Dokumen Laporan Evaluasi dan Pembahasan
-												</label>
-												<div className="col-md-10">
-
-													<div style={{ display: "none" }}>
-														<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />
-													</div>
-													<ReactToPrint
-														trigger={() => {
-															return <span>
-
-																<Button color className="btn-labeled-4 mt-0">
-																	<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
-																</Button>
-															</span>
-														}}
-														content={() => this.componentRef}
-													/>
-												</div>
-											</FormGroup>
-											<hr />
-											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("4")}>
-													<span className="font-color-white">Previous</span>
-												</Button>
-												<Button className="ml-auto btn-login color-3e3a8e" color onClick={() => { this.validation() }}>
-													<span className="font-color-white">Next</span>
-												</Button> */}
-											</div>
-										</TabPane>
+                                        <TabPane tabId="1">
+                                            <div className="pt-3 mb-3">
+                                                <h2>Penetapan Sanksi</h2>
+                                                {this.state.listSanksi && <UploadSurat_Bypass setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} />}
+                                            </div>
+                                            <FormGroup row className="mt-3">
+                                                <label className="col-md-2 col-form-label">
+                                                    Dokumen Laporan Evaluasi dan Pembahasan
+                                                </label>
+                                                <div className="col-md-10">
+
+                                                    <div style={{ display: "none" }}>
+                                                        <ComponentToPrint ref={el => (this.componentRef = el)} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataSuratBA={dataSuratBA} pt={this.state.pt} />
+                                                    </div>
+                                                    <ReactToPrint
+                                                        trigger={() => {
+                                                            return <span>
+
+                                                                <Button color className="btn-labeled-4 mt-0">
+                                                                    <h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
+                                                                </Button>
+                                                            </span>
+                                                        }}
+                                                        content={() => this.componentRef}
+                                                    />
+                                                </div>
+                                            </FormGroup>
+                                            <hr />
+                                            <div className="d-flex">
+                                                {/* <Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("4")}>
+                                                    <span className="font-color-white">Previous</span>
+                                                </Button> */}
+                                                <Button className="ml-auto btn-login color-3e3a8e" color onClick={() => { this.toggleStep("2") }}>
+                                                    <span className="font-color-white">Next</span>
+                                                </Button>
+                                            </div>
+                                        </TabPane>
                                         <TabPane tabId="2">
-											<div className="pt-3 mb-3">
-												<h2>Penetapan Jenis Pelanggaran</h2>
-												{/* <TablePenetapanSanksi query={this.props.query} handleDelegasi={this.handleDelegasi} handleAutoSave={this.handleAutoSave} setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran} />
-											</div>
-											<hr />
-											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("2")}>
-													<span className="font-color-white">Previous</span>
-												</Button>
-												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("4")}>
-													<span className="font-color-white">Next</span>
-												</Button> */}
-											</div>
-										</TabPane>
+                                            <div className="pt-3 mb-3">
+                                                <h2>Penetapan Jenis Pelanggaran</h2>
+                                                <TablePenetapanSanksi_Bypass setCheckedData={this.setCheckedData} />
+                                            </div>
+                                            <hr />
+                                            <div className="d-flex">
+                                                <Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("1")}>
+                                                    <span className="font-color-white">Previous</span>
+                                                </Button>
+                                                <Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("3")}>
+                                                    <span className="font-color-white">Next</span>
+                                                </Button>
+                                            </div>
+                                        </TabPane>
                                         <TabPane tabId="3">
-											{/* <Card>
-												<BeritaAcara query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />
-											</Card> */}
                                             <Card>
-                                                 <BeritaAcara_Bypass pt={this.state.pt}/>
+                                                <BeritaAcara_Bypass dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataSuratBA={dataSuratBA} pt={this.state.pt} />
                                             </Card>
-                                           
-											<div className="d-flex">
-												<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.toggleStep("5")}>
-													<span className="font-color-white">Next</span>
-												</Button>
-											</div>
-										</TabPane>
+
+
+                                            <div className="d-flex">
+                                                <Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("2")}>
+                                                    <span className="font-color-white">Previous</span>
+                                                </Button>
+                                                <Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("3")}>
+                                                    <span className="font-color-white">Next</span>
+                                                </Button>
+                                            </div>
+                                        </TabPane>
                                     </TabContent>
                                 </Col>
                             </Row>