muncul alert jika UploadSurat.js tidak terisi semua

components/Sanksi/BeritaAcara_A.js

@@ -1,511 +0,0 @@
-import React, { useRef, Component } from 'react';
-import { useReactToPrint } from "react-to-print";
-import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, } from "reactstrap";
-import Head from 'next/head'
-import SignatureCanvas from 'react-signature-canvas'
-import ComponentToPrint from "./SuratBA";
-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'
-
-
-
-class BeritaAcara extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isEditTempat: false,
-            tempat: <strong>[Mohon Diisi]</strong>,
-            isEditTanggal: false,
-            tanggal: "",
-            setTanggal: false,
-            isEditNamaPeserta: false,
-            isEditTemuanLain: false,
-            temuanLain: [],
-            memberatkan: [],
-            isEditKeberatan: false,
-            isEditMeringankan: false,
-            meringankan: [],
-            sanksi: "[Mohon Diisi]",
-            isEditSanksi: false,
-            copied: false,
-            setmeState: true,
-            descPelanggaran: [],
-        };
-    }
-
-    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);
-    }
-
-    render() {
-        const { dataLaporan, dataSuratBA, dataPelanggaran } = this.props
-        const { descPelanggaran, tanggal, setTanggal } = this.state
-        return (
-            <div>
-                <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'>
-                    <page>
-                        <div className='BA-logo'>
-                            <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
-                        </div>
-                        <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
-                        {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
-                        <div className='body'>
-                            <p className='body'>
-                                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}>
-                                        &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:
-                            </p>
-                            <div className='body'>
-                                <ol>
-                                    {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
-                                </ol>
-                            </div>
-                        </div>
-                        <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:
-                        </p>
-                        <div className='body'>
-                            <ol>
-                                <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>
-                                <table className='table-a'>
-                                    <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 className='BA-header'>{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>
-                                                    <ContentEditable
-                                                        html={descPelanggaran[e._id]?.rekomendasi || ""}
-                                                        disabled={false}
-                                                        onChange={(evt) => {
-                                                            this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()
-
-                                                        }}
-                                                    />
-                                                </td>
-
-                                            </tr>
-
-                                        ))}
-                                    </tbody>
-                                </table>
-                                <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>
-                        </div>
-                        <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>
-                                    <span className="btn-radius">
-                                        <Button color id="Popover1" className="btn-labeled-3" onClick={() => {
-                                            this.CloseCopied()
-                                        }} >
-
-                                            <h4 className="p-0 mt-2 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h4>
-                                        </Button>
-                                    </span>
-                                    <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
-                                        <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
-                                    </Popover>
-                                </div>
-
-                            </CopyToClipboard>
-                        </p>
-                        {/* <table className='demo'>
-                            <tbody>
-
-                                <tr>
-                                    <th className='thdemo' colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
-                                </tr>
-                                <tr className='trdemo'>
-                                    <th className='trdemo'>No</th>
-                                    <th className='trdemo'>Nama</th>
-                                    <th className='trdemo'>Tanda Tangan</th>
-                                </tr>
-                                {dataLaporan
-                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value, index) => (
-                                        <tr>
-                                            <td className='trdemo'>{index + 1}</td>
-                                            <td className=' tddemo'>{value.nama}</td>
-                                            <td className='tddemo'>
-                                                <img
-                                                    style={{ width: "200px" }}
-                                                    src={value.ttd.path} />
-
-
-                                            </td>
-                                        </tr>)) : ""}
-                            </tbody>
-                        </table> */}
-                        {/* <div>
-                            <div id="ttd-header" className='text-center signature-border'>
-                                <span className='text-center'> PESERTA RAPAT PENYUSUNAN REKOMENDASI</span>
-                            </div>
-                            <div id="ttd">
-
-                                {dataLaporan
-                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
-                                        <div className='ttd-div'>
-                                            <img
-                                                className='sign-ttd'
-                                                src={value.ttd.path} />
-                                            <div className='sign-nama font-color-black'>{value.nama}</div>
-                                        </div>
-                                    )) : ""}
-                            </div>
-                        </div> */}
-                        <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>
-
-
-                    </page>
-                </div >
-            </div >
-
-        );
-    }
-}
-export default BeritaAcara

components/Sanksi/UploadSurat.js

@@ -25,50 +25,13 @@ class DropzoneWrapper extends Component {
 		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
 	}
 }
-
-const data = [
-	{
-		value: "Sanksi Administratif Sedang",
-		// label_sanksi: "- Sanksi Administratif ringan"
-	},
-	{
-		sanksi: "Penghentian Pembinaan PT",
-		value: "Penghentian Pembinaan PT",
-		label_sanksi: "- Sanksi Administratif Berat",
-	},
-	{
-		sanksi: "Pencabutan Izin Perguruan Tinggi Swasta",
-		value: "Pencabutan Izin Perguruan Tinggi Swasta",
-		label_sanksi: "- Sanksi Administratif Berat",
-	},
-	{
-		sanksi: "Penghentian Pembinaan Program Studi",
-		value: "Penghentian Pembinaan Program Studi",
-		label_sanksi: "- Sanksi Administratif Berat",
-	},
-	{
-		sanksi: "Pencabutan Izin Program Studi",
-		value: "Pencabutan Izin Program Studi",
-		label_sanksi: "- Sanksi Administratif Berat",
-	},
-	{
-		sanksi: "Pembubaran Perguruan Tinggi Negeri",
-		value: "Pembubaran Perguruan Tinggi Negeri",
-		label_sanksi: "- Sanksi Administratif Berat",
-	},
-];
-
-// const listSanksi = data.map((d) => ({
-// 	value: d.value,
-// 	label: d.sanksi,
-// 	label_sanksi: d.label_sanksi,
-// }));
 const formatOptionLabel = ({ value, sanksi, label_sanksi }) => (
 	<div style={{ display: "flex" }}>
 		<span className="">{value}</span>
 		<div style={{ marginLeft: "10px", color: "#adaca8" }}>{label_sanksi}</div>
 	</div>
 );
+
 export class UploadSurat extends Component {
 	constructor(props) {
 		super(props);
@@ -84,7 +47,6 @@ export class UploadSurat extends Component {
 			awalsanksi: "",
 			akhirsanksi: "",
 			tmtCheck: false,
-			saveData: [],
 			terimaSuratSanksi: "",
 			tglAkhirKeberatan: "",
 			filesTandaTerimaSS: [],
@@ -118,19 +80,11 @@ export class UploadSurat extends Component {
 	componentDidMount = async () => {
 		const { query, token } = this.props;
 		const { id } = query;
-		const getDataSave = await getAutoSave({ token, id, laporan: true });
-		const saveData = getDataSave.data?.penetapanSanksi;
-		this.setState(saveData)
+		// const getDataSave = await getAutoSave({ id, laporan: true });
+		// const autosaveDataUpload = getDataSave.data?.PenetapanSanksi?.dataUpload;
+		// this.setState(autosaveDataUpload)
 	}
 
-	// handleAutoSave = async () => {
-	// 	const { query, token } = this.props;
-	// 	const { id } = query;
-	// 	const { nomorSanksi, keterangan } = this.state
-	// 	const saveData = await inputAutoSave({ data: { penetapanSanksi: { nomorSanksi, keterangan } }, token, id, laporan: true })
-
-	// }
-
 	uploadFiles = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -145,11 +99,9 @@ export class UploadSurat extends Component {
 		e.stopPropagation();
 		this.setState({
 			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
-			stat: this.state.filesBeritaAcara.length ? this.state.filesBeritaAcara.length + " file(s) cleared." : "No files to clear.",
 		});
 		this.setState({
 			files: [],
-			filesBeritaAcara: [],
 		});
 		this.props.setUploadSuratSanksi(this.state);
 	};
@@ -165,29 +117,49 @@ export class UploadSurat extends Component {
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
-	toRingkasan = () => {
+	// handleAutoSave = () => {
+	// 	this.props.handleAutoSave()
+	// }
+
+	setUploadSuratSanksi = () => {
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
 	setNomorSanksi = (e) => {
-		this.setState({ nomorSanksi: e.target.value }, this.toRingkasan);
+		// this.setState({ nomorSanksi: e.target.value }, this.setUploadSuratSanksi);
+		this.state.nomorSanksi = e.target.value
+		this.setUploadSuratSanksi()
+		// this.handleAutoSave()
+
 	};
 
 	setKeterangan = (e) => {
-		this.setState({ keterangan: e.target.value }, this.toRingkasan);
+		// this.setState({ keterangan: e.target.value }, this.setUploadSuratSanksi);
+		this.state.keterangan = e.target.value
+		this.setUploadSuratSanksi()
+		// this.handleAutoSave()
+	};
+	setAkhirSanksi = (akhirsanksi) => {
+		// this.setState({ keterangan: e.target.value }, this.setUploadSuratSanksi);
+		this.state.akhirsanksi = akhirsanksi
+		this.setUploadSuratSanksi()
+		// this.handleAutoSave()
 	};
 
 	setListSanksi = (ls) => {
-		this.setState({ listSanksi: ls.target.value }, this.toRingkasan);
+		this.setState({ listSanksi: ls.target.value }, this.setUploadSuratSanksi);
 	};
 	handleChangeListSanksi = (listSanksi) => {
-		this.setState({ listSanksi }, this.toRingkasan);
+		this.setState({ listSanksi }, this.setUploadSuratSanksi);
 	};
 	handleTmtCheck = () => {
-		this.setState({ tmtCheck: !this.state.tmtCheck }, this.toRingkasan);
+		// this.setState({ tmtCheck: !this.state.tmtCheck }, this.setUploadSuratSanksi);
+		this.state.tmtCheck = !this.state.tmtCheck
+		this.setUploadSuratSanksi()
+		// this.handleAutoSave()
 	}
 	render() {
-		const { files, filesBeritaAcara, terimaSuratSanksi, tglAkhirKeberatan, filesTandaTerimaSS, tmtCheck } = this.state;
+		const { files, terimaSuratSanksi, tglAkhirKeberatan, filesTandaTerimaSS, tmtCheck } = this.state;
 		const removeFile = file => () => {
 			const newFiles = [...files]
 			newFiles.splice(newFiles.indexOf(file), 1)
@@ -219,13 +191,13 @@ export class UploadSurat extends Component {
 				<FormGroup row>
 					<label className="col-md-2 col-form-label">Nomor Surat:</label>
 					<div className="col-md-10">
-						<Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e); this.props.handleAutoSave() }} />
+						<Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e) }} />
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
 					<label className="col-md-2 col-form-label">Keterangan</label>
 					<div className="col-md-10">
-						<Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e); this.props.handleAutoSave() }} required />
+						<Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e) }} required />
 					</div>
 				</FormGroup>
 				<FormGroup row>
@@ -233,7 +205,7 @@ export class UploadSurat extends Component {
 					<div className="col-md-10 mt-2">
 						<div className="checkbox c-checkbox">
 							<label>
-								<Input type="checkbox" onChange={this.handleTmtCheck} defaultChecked={this.state.tmtCheck} />
+								<Input type="checkbox" onChange={() => this.handleTmtCheck()} defaultChecked={this.state.tmtCheck} />
 								<span className="fa fa-check"></span></label>
 						</div>
 					</div>
@@ -243,12 +215,12 @@ export class UploadSurat extends Component {
 						<label className="col-md-2 col-form-label">Tanggal Penetapan Sanksi</label>
 						<span className="col-sm-3 float-left">
 							<DatePicker
-								selected={this.state.awalsanksi}
+								selected={this.state.awalsanksi ? new Date(this.state.awalsanksi) : this.state.awalsanksi}
 								onChange={(awalsanksi) => {
-									this.setState({ awalsanksi }, this.toRingkasan)
+									this.setState({ awalsanksi }, this.setUploadSuratSanksi)
 								}}
 								dateFormat="dd/MM/yyyy"
-								maxDate={this.state.startDay}
+								maxDate={new Date(this.state.startDay)}
 								placeholderText="Isi Tanggal"
 								locale={id}
 								className="form-control bg-white"
@@ -264,12 +236,12 @@ export class UploadSurat extends Component {
 								<FormGroup>
 									<span className="ml-3">
 										<DatePicker
-											selected={this.state.awalsanksi}
+											selected={this.state.awalsanksi ? new Date(this.state.awalsanksi) : this.state.awalsanksi}
 											onChange={(awalsanksi) => {
-												this.setState({ awalsanksi }, this.toRingkasan)
+												this.setState({ awalsanksi }, this.setUploadSuratSanksi)
 											}}
 											dateFormat="dd/MM/yyyy"
-											maxDate={this.state.startDay}
+											maxDate={new Date(this.state.startDay)}
 											placeholderText="Dari Tanggal"
 											locale={id}
 											className="form-control bg-white"
@@ -282,12 +254,13 @@ export class UploadSurat extends Component {
 								<FormGroup>
 									<span className="ml-3">
 										<DatePicker
-											selected={this.state.akhirsanksi}
-											onChange={(akhirsanksi) => {
-												this.setState({ akhirsanksi }, this.toRingkasan)
-											}}
+											selected={this.state.akhirsanksi ? new Date(this.state.akhirsanksi) : this.state.akhirsanksi}
+											// onChange={(akhirsanksi, e) => {
+											// 	this.setState({ akhirsanksi }, this.setUploadSuratSanksi(e), this.props.handleAutoSave(e))
+											// }}
+											onChange={(akhirsanksi) => { this.setAkhirSanksi(akhirsanksi) }}
 											dateFormat="dd/MM/yyyy"
-											minDate={this.state.awalsanksi}
+											minDate={new Date(this.state.awalsanksi)}
 											maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
 											placeholderText="Sampai tanggal"
 											locale={id}
@@ -320,8 +293,8 @@ export class UploadSurat extends Component {
 					<div className="col-md-10">
 						<Select
 							options={this.props.listSanksi.map(e => ({ value: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
-							formatOptionLabel={formatOptionLabel}
 							isMulti
+							formatOptionLabel={formatOptionLabel}
 							onChange={(e) => {
 								this.handleChangeListSanksi(e);
 							}}
@@ -393,12 +366,12 @@ export class UploadSurat extends Component {
 					<label className="col-md-2 col-form-label">Tanggal Terima Surat Sanksi</label>
 					<span className="col-sm-3 float-left">
 						<DatePicker
-							selected={terimaSuratSanksi}
+							selected={this.state.terimaSuratSanksi ? new Date(this.state.terimaSuratSanksi) : this.state.terimaSuratSanksi}
 							onChange={(terimaSuratSanksi) => {
-								this.setState({ terimaSuratSanksi }, this.toRingkasan)
+								this.setState({ terimaSuratSanksi }, this.setUploadSuratSanksi)
 							}}
 							dateFormat="dd/MM/yyyy"
-							minDate={this.state.awalsanksi}
+							minDate={new Date(this.state.awalsanksi)}
 							placeholderText="Isi Tanggal"
 							locale={id}
 							className="form-control bg-white"
@@ -448,16 +421,17 @@ export class UploadSurat extends Component {
 				<FormGroup row className="mt-3">
 					<label className="col-md-2 col-form-label">Akhir Permohonan Keberatan Sanksi
 						<p>
-							Note : 21 hari kerja						</p>
+							Note : 21 hari kerja
+						</p>
 					</label>
 					<span className="col-sm-3 float-left">
 						<DatePicker
-							selected={tglAkhirKeberatan}
+							selected={this.state.tglAkhirKeberatan ? new Date(this.state.tglAkhirKeberatan) : this.state.tglAkhirKeberatan}
 							onChange={(tglAkhirKeberatan) => {
-								this.setState({ tglAkhirKeberatan }, this.toRingkasan)
+								this.setState({ tglAkhirKeberatan }, this.setUploadSuratSanksi)
 							}}
 							dateFormat="dd/MM/yyyy"
-							minDate={terimaSuratSanksi}
+							minDate={new Date(terimaSuratSanksi)}
 							placeholderText="Isi Tanggal"
 							locale={id}
 							className="form-control bg-white"

pages/app/sanksi/proses.js

@@ -18,6 +18,7 @@ import Loader from "@/components/Common/Loader";
 import { ToastContainer, toast } from "react-toastify";
 import BeritaAcara from "@/components/Sanksi/BeritaAcara";
 import { getAutoSave, inputAutoSave } from "@/actions/autosave";
+import swal from "sweetalert2";
 
 
 
@@ -137,11 +138,37 @@ class ProsesSanksi extends Component {
 	setUploadSuratSanksi = (data) => {
 		this.setState({ dataUpload: data });
 
+
 	};
 	setDataSuratBA = (data) => {
 		this.setState({ dataSuratBA: data });
 
 	};
+	validation = (activeStep) => {
+		const dataUpload = this.state.dataUpload
+		if (
+			dataUpload?.nomorSanksi === undefined || dataUpload?.nomorSanksi === "" ||
+			dataUpload?.keterangan === undefined || dataUpload?.keterangan === "" ||
+			dataUpload?.awalsanksi === undefined || dataUpload?.awalsanksi === "" ||
+			dataUpload?.listSanksi === undefined || dataUpload?.listSanksi === null ||
+			dataUpload?.files === undefined || dataUpload?.files.length === 0 || dataUpload?.files === null ||
+			dataUpload?.terimaSuratSanksi === undefined || dataUpload?.terimaSuratSanksi === "" ||
+			dataUpload?.tglAkhirKeberatan === undefined || dataUpload?.tglAkhirKeberatan === "" ||
+			dataUpload?.filesTandaTerimaSS === undefined || dataUpload?.filesTandaTerimaSS.length === 0 || dataUpload?.files === null
+		) {
+			swal.fire({
+				title: "Form Wajib Diisi",
+				icon: "error",
+				confirmButtonColor: "#3e3a8e",
+			});
+		} else {
+			this.setState({
+				activeStep: "6"
+			});
+		}
+
+
+	}
 
 	render() {
 		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA } = this.state
@@ -225,7 +252,8 @@ class ProsesSanksi extends Component {
 												className={classnames({
 													active: this.state.activeStep === "6",
 												})}
-												onClick={this.toggleStep("6")}
+												onClick={this.validation}
+											// onClick={this.toggleStep("6")}
 											>
 												<h4 className="text-left my-3">6. Ringkasan</h4>
 											</NavLink>
@@ -307,7 +335,7 @@ class ProsesSanksi extends Component {
 												<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("6")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={() => { this.validation() }}>
 													<span className="font-color-white">Next</span>
 												</Button>
 											</div>