PTB-fe/pages/app/perpanjangan-sanksi/editfile.js

import React, { Component } from "react";
import Router from "next/router";
import { connect } from "react-redux";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
// import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
// import 'draft-js/dist/Draft.css';
import dynamic from 'next/dynamic';
const Editor = dynamic(
    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
    { ssr: false })
import draftToHtml from 'draftjs-to-html';
import pdfMake from "pdfmake/build/pdfmake";
import StateToPdfMake from "draft-js-export-pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import { toast } from "react-toastify";
import { addCatatan, getOneCatatan, updateCatatan } from "../../../actions/catatan";
import { getCsrf } from "../../../actions/security";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import { ENV } from '../../../env.js';
import CopyToClipboard from "react-copy-to-clipboard";
import ReactToPrint from "react-to-print";
import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";






// let blocksFromHTML;
// let initialEditorContent;
// if (typeof window !== 'undefined') {
//     blocksFromHTML = convertFromHTML('<ol><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li></ol><p>3dexcjghc</p><p></p> <ul> <li>dfgsfds</li> <li>vsdAGVDASshvdhvhvs</li> <li><span style="color: rgb(26,188,156);">vsdAGVDASshvdhvhvs</span></li> </ul> <p>sadbsghavdklhjbs</p> <p>dajdindfehjrjjnfdq</p><p style="text-align:right;">sadbsghavdklhjbs</p> <p class="text-align:center;">dajdindfehjrjjnfdq</p>');
//     initialEditorContent = ContentState.createFromBlockArray(
//         blocksFromHTML.contentBlocks,
//         blocksFromHTML.entityMap
//     );
// }


class EditFile extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editorState: EditorState.createEmpty(),
            copiedd: false,
            judul: "",

        };
    }

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

    };


    componentDidMount = async () => {
        const { token, query } = this.props;
        const { id } = query;
        const getCatatan = await getOneCatatan(token, id)
        const catatan = getCatatan.data
        const judul = catatan.judul
        this.setState({ catatan, judul });
        let blocksFromHTML;
        let editorState;
        if (typeof window !== 'undefined') {
            const isi = catatan.isi
            blocksFromHTML = convertFromHTML((isi));
            editorState = ContentState.createFromBlockArray(
                blocksFromHTML.contentBlocks,
                blocksFromHTML.entityMap
            );
        }

        this.setState({
            editorState: EditorState.createWithContent(editorState)
        });
    }

    onEditorStateChange = (editorState) => {
        this.setState({
            editorState,
        });
        // localStorage.setItem("editorState", draftToHtml(convertToRaw(editorState.getCurrentContent())))
    };

    handelSimpan = async (data) => {
        if (this.props?.user?.role.id === 2024) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
                confirmButtonColor: "#3e3a8e",
                confirmButtonText: 'Oke'
            })
        } else {
            const getToken = await getCsrf();
            const _csrf = getToken.token;
            const { token, query } = this.props;
            const { id } = query;
            const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
            const toastid = toast.loading("Please wait...");
            const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
                "judul": this.state.judul,
                "isi": isi,
                "catatan_id": id
            }, _csrf);
            if (!added) {
                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
            } else {
                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
                Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
            }
        }

    };
    handleGeneratePDF = () => {
        const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
        console.log(rawContent)
        const stateToPdfMake = new StateToPdfMake(rawContent);
        console.log(stateToPdfMake.generate());

        pdfMake.createPdf(stateToPdfMake.generate()).download();
    };
    setHandleJudul = (e) => {
        this.setState({ judul: e.target.value });
    };
    CloseCopiedd = () => {

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

    Copiedd = () => this.setState({
        copiedd: !this.state.copiedd
    })

    render() {
        const { editorState, catatan } = this.state;
        return (
            <ContentWrapper>
                <Row>
                    <Col lg={12}>
                        <Card body className="card-default">
                            <FormGroup row>
                                <label className="col-md-1  col-form-label">Judul Catatan</label>
                                <div className="col-md-8">

                                    <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} value={this.state.judul} />
                                </div>
                                <div className="col-md-3">
                                    <span className=" d-inline-flex">
                                        <Button className="btn-login mr-2" color onClick={this.handleGeneratePDF}>
                                            <span className="font-color-white">
                                                Print Notulensi
                                            </span>
                                        </Button>
                                    </span>
                                    <span className=" d-inline-flex">
                                        <ReactToPrint
                                            trigger={() => {
                                                return <span>
                                                    <Button color className="btn-login">
                                                        <span className="font-color-white">
                                                            Print Presensi
                                                        </span>
                                                    </Button>
                                                </span>
                                            }}
                                            content={() => this.componentRef}
                                        />
                                    </span>
                                </div>
                            </FormGroup>
                            <div style={{ display: "none" }}>
                                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
                            </div>
                            <Editor
                                editorState={editorState}
                                // wrapperClassName="demo-wrapper"
                                // editorClassName="demo-editor"
                                editorStyle={{ height: 500 }}
                                wrapperClassName="wysiwig-editor-wrapper"
                                editorClassName="form-control"
                                onEditorStateChange={this.onEditorStateChange}
                            />
                            <br />
                            <Row>
                                <Col xl={{ size: 8, offset: 2 }}>
                                    <div className="mb-5"  >
                                        <div className='header-ttd signature-border pt-1 pb-1'>
                                            <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
                                        </div>
                                        <div id="ttd">
                                            {catatan
                                                ? catatan.daftar_kehadiran_peserta?.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>
                                </Col>
                            </Row>


                            <Row>
                                <Col>
                                    {ENV === "local" &&
                                        <CopyToClipboard
                                            text={`http://localhost:3000/signature/letter/${catatan?._id}`}
                                            options={{ asHtml: true }}
                                        >
                                            <div>
                                                <span className="btn-radius">
                                                    <Button color id="Popover1" className="ml-0  mb-2 btn-v1-outline-purple" onClick={() => {
                                                        this.CloseCopiedd()
                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>

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

                                        </CopyToClipboard>
                                    }
                                    {ENV === "production" &&
                                        <CopyToClipboard
                                            text={`https://sidali.kemdikbud.go.id/signature/letter/${catatan?._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.CloseCopiedd()
                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>

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

                                        </CopyToClipboard>
                                    }
                                    {ENV === "development" &&
                                        <CopyToClipboard
                                            text={`https://dev.sidali.kemdikbud.go.id/signature/letter/${catatan?._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.CloseCopiedd()
                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>

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

                                        </CopyToClipboard>
                                    }

                                </Col>
                                <Col>
                                    <div>
                                        <Button color className="btn-login float-right" onClick={this.handelSimpan} >
                                            <span className="font-color-white">
                                                Simpan Catatan
                                            </span>
                                        </Button>
                                    </div>

                                </Col>
                            </Row>

                        </Card>
                    </Col>

                </Row>
            </ContentWrapper>
        );
    }
}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(EditFile);