PTB-fe/pages/app/bypassII/detail.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { getLog } from "@/actions/log";
import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col, FormGroup } from "reactstrap";
import Timeline from "@/components/Main/Timeline";
import { getOnePT } from "@/actions/PT";
import { connect } from "react-redux";
import { getOneLaporan, getPelaporan } from "../../../actions/pelaporan";
import DetailLaporan from "@/components/Main/DetailLaporan";
import Link from "next/link";
import Loader from "@/components/Common/Loader";
import DetailPT from "@/components/Main/DetailPT";
import moment from "moment";
import Datatable from "@/components/Tables/Datatable";
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 = {
    backgroundColor: "#fcfcfc",
};

class bypassIIDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeStep: "1",

            log: {},
            detailLaporanPt: {},
            pelaporan: {},
            pt: {},
        };
    }

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

    componentDidMount = async () => {
        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, listSanksi });
    };

    toggleStep = (activeStep) => () => {
        if (this.state.activeStep !== activeStep) {
            this.setState({
                activeStep: activeStep
            });
            // this.handleAutoSave(this.state.dataPelanggaran, activeStep)

        }
    };
    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 /> */}
                <div className="p-3">
                    <div className="content-heading">
                        <span className="font-color-white">Bypass II</span>
                        <div className="ml-auto">
                            <Link href="/app/bypassII">
                                <Button className="color-3e3a8e" color>
                                    <span className="font-color-white">&lt; Kembali</span>
                                </Button>
                            </Link>
                        </div>
                    </div>
                    <Card className="card-default">
                        <CardBody>
                            <Row>
                                <Col xs="4">
                                    <Nav pills vertical={true} className="cursor-pointer">
                                        <NavItem style={stepNavitemStyle}>
                                            <NavLink
                                                tag="div"
                                                className={classnames({
                                                    active: this.state.activeStep === "1",
                                                })}
                                                onClick={this.toggleStep("1")}
                                            >
                                                <h4 className="text-left my-3">1. Penetapan Sanksi</h4>
                                            </NavLink>
                                        </NavItem>
                                        <NavItem style={stepNavitemStyle}>
                                            <NavLink
                                                tag="div"
                                                className={classnames({
                                                    active: this.state.activeStep === "2",
                                                })}
                                                onClick={this.toggleStep("2")}
                                            >
                                                <h4 className="text-left my-3">2. Penetapan Jenis Pelanggaran</h4>
                                            </NavLink>
                                        </NavItem>
                                        <NavItem style={stepNavitemStyle}>
                                            <NavLink
                                                tag="div"
                                                className={classnames({
                                                    active: this.state.activeStep === "3",
                                                })}
                                                onClick={this.toggleStep("3")}
                                            >
                                                <h4 className="text-left my-3">3. Berita Acara Pleno</h4>
                                            </NavLink>
                                        </NavItem>
                                    </Nav>
                                </Col>

                                <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_Bypass setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} />}
                                            </div>
                                            <FormGroup row className="mt-3">
                                                <label className="col-md-4 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_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_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("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>
                        </CardBody>
                    </Card>



                </div>
            </ContentWrapper>
        )
    }


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