|
|
@@ -1,476 +0,0 @@
|
|
|
-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/Main/presensi_print.js";
|
|
|
-import htmlToPdfmake from "html-to-pdfmake"
|
|
|
-// import htmlToDraft from 'html-to-draftjs';
|
|
|
-import SummerNote from "../../../components/Extras/summernote";
|
|
|
-import Datetime from "react-datetime";
|
|
|
-
|
|
|
-import ContentEditable from 'react-contenteditable'
|
|
|
-import { getOneSanksi } from "@/actions/sanksi";
|
|
|
-import router from "next/router";
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-class EditFile extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props);
|
|
|
- this.state = {
|
|
|
- tanggal: "",
|
|
|
- setTanggal: false,
|
|
|
- isEditTanggal: false,
|
|
|
- isEditTempat: false,
|
|
|
- simpulan: " ",
|
|
|
- rekomendasi: " ",
|
|
|
- isi: [
|
|
|
- {
|
|
|
- Aspek_Perbaikan: "",
|
|
|
- Laporan_Perbaikan: "",
|
|
|
- Hasil_Verifikasi: "",
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- static getInitialProps = async ({ query }) => {
|
|
|
- return { query };
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- componentDidMount = async () => {
|
|
|
- const { token, query } = this.props;
|
|
|
- const { id } = query;
|
|
|
- const getCatatan = await getOneCatatan(token, id)
|
|
|
- // const sanksi = await getOneSanksi(token, idSanksi, { all: true });
|
|
|
- const pt = getCatatan.data?.isi.pt;
|
|
|
- const catatan = getCatatan.data
|
|
|
- const judul = getCatatan.data.judul
|
|
|
- const tempat = catatan.isi.tempat
|
|
|
- const setTanggal = catatan.isi.setTanggal
|
|
|
- const isi = catatan.isi.isi
|
|
|
- const tanggal = catatan.isi.tanggal
|
|
|
- const isEditTanggal = catatan.isi.isEditTanggal
|
|
|
- const isEditTempat = catatan.isi.isEditTempat
|
|
|
- const simpulan = catatan.isi.simpulan
|
|
|
- const rekomendasi = catatan.isi.rekomendasi
|
|
|
-
|
|
|
- this.setState({ isi, catatan, judul, pt, tanggal, tempat, isEditTanggal, isEditTempat, simpulan, rekomendasi, setTanggal });
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- handelSimpan = async (data) => {
|
|
|
- if (this.props?.user?.role.id === 2071) {
|
|
|
- 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": this.state,
|
|
|
- "catatan_id": id,
|
|
|
- "menu": "Perpanjangan Sanksi"
|
|
|
- }, _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}`);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- setHandleJudul = (e) => {
|
|
|
- this.setState({ judul: e.target.value });
|
|
|
- };
|
|
|
- CloseCopiedd = () => {
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.setState({
|
|
|
- copiedd: !this.state.copiedd
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- Copiedd = () => this.setState({
|
|
|
- copiedd: !this.state.copiedd
|
|
|
- })
|
|
|
- isEditTanggal = () => {
|
|
|
- // this.state.isEditTanggal = !this.state.isEditTanggal
|
|
|
- this.setState({
|
|
|
- isEditTanggal: !this.state.isEditTanggal,
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- isEditTempat = () => {
|
|
|
- this.setState({
|
|
|
- isEditTempat: !this.state.isEditTempat,
|
|
|
- })
|
|
|
- }
|
|
|
- handleAspek = (evt, id, field) => {
|
|
|
- const newValue = evt.target.value || evt.target.innerHTML;
|
|
|
-
|
|
|
- this.setState(prevState => ({
|
|
|
- isi: prevState.isi.map((item, index) =>
|
|
|
- index === id
|
|
|
- ? { ...item, [field]: newValue }
|
|
|
- : item
|
|
|
- )
|
|
|
- }));
|
|
|
-
|
|
|
- };
|
|
|
- addRow = () => {
|
|
|
- this.setState(prevState => ({
|
|
|
- isi: [
|
|
|
- ...prevState.isi,
|
|
|
- {
|
|
|
- Aspek_Perbaikan: "",
|
|
|
- Laporan_Perbaikan: "",
|
|
|
- Hasil_Verifikasi: ""
|
|
|
- }
|
|
|
- ]
|
|
|
- }));
|
|
|
- };
|
|
|
- setDataCatatan = (data) => {
|
|
|
- this.setState({ dataCatatan: data });
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- const { catatan, pt, isEditTanggal, tanggal } = 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" value={this.state.judul} disabled={true} />
|
|
|
- </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 className="btn-radius">
|
|
|
- <Button color className="ml-0 btn-v1-outline-purple">Print Dokumen
|
|
|
- </Button>
|
|
|
- </span>
|
|
|
- }}
|
|
|
- content={() => this.componentRef}
|
|
|
- />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- <div style={{ display: "none" }}>
|
|
|
- <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
|
|
|
- </div>
|
|
|
- <div className='page py-5 m-0 mb-3'>
|
|
|
- <div className='BA-Header'>
|
|
|
- <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
|
|
|
- <h4 >LAPORAN HASIL VERIFIKASI DAN VALIDASI DOKUMEN USUL PENCABUTAN SANKSI ADMINISTRATIF</h4>
|
|
|
- {pt && (<h4 className='text-uppercase' >{pt.nama}</h4>)}
|
|
|
- </div>
|
|
|
- <div className='BA-body px-5 pt-3 '>
|
|
|
- <p>
|
|
|
- Pada hari ini
|
|
|
- <span style={{ textIndent: "0rem" }}>
|
|
|
- {isEditTanggal &&
|
|
|
- <span style={{ textIndent: "0rem" }}>
|
|
|
- <Datetime
|
|
|
- timeFormat={false}
|
|
|
- inputProps={{ className: "form-control" }}
|
|
|
- value={tanggal ? new Date(tanggal) : tanggal || "Isi Tanggal"}
|
|
|
- onChange={(tanggal) => {
|
|
|
- this.setState({ tanggal, setTanggal: true })
|
|
|
- }}
|
|
|
- closeOnSelect={true}
|
|
|
-
|
|
|
- />
|
|
|
-
|
|
|
- </span>
|
|
|
- }
|
|
|
- </span>
|
|
|
- {this.state?.setTanggal === true ?
|
|
|
- <span > {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal {moment(tanggal || this.state?.tanggal).format("D")} bulan {moment(tanggal || this.state?.tanggal).locale("id").format("MMMM")} tahun {moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
|
|
|
- <span ><strong> [Mohon Diisi] </strong></span>
|
|
|
- }
|
|
|
- bertempat di
|
|
|
- {this.state.isEditTempat &&
|
|
|
- <span>
|
|
|
- <input type='text'
|
|
|
- defaultValue={""}
|
|
|
- ref="inputTempat"
|
|
|
- onChange={() => {
|
|
|
- this.setState({ tempat: this.refs.inputTempat.value })
|
|
|
- }}
|
|
|
- />
|
|
|
-
|
|
|
- </span>
|
|
|
- }
|
|
|
- {this.state?.tempat ?
|
|
|
- <span className='hhh'>
|
|
|
- {this.state?.tempat}
|
|
|
- </span>
|
|
|
- :
|
|
|
- <span ><strong> [Mohon Diisi] </strong></span>
|
|
|
- }
|
|
|
-
|
|
|
- ,
|
|
|
- telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
|
|
|
- <ol>
|
|
|
- {catatan?.daftar_kehadiran_peserta?.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>
|
|
|
- <div className='table-a my-4 pl-5 pr-5' >
|
|
|
- <table className=' ml-auto mr-auto'>
|
|
|
- <thead >
|
|
|
- <tr>
|
|
|
- <th >NO</th>
|
|
|
- <th>ASPEK PERBAIKAN</th>
|
|
|
- <th >LAPORAN PERBAIKAN</th>
|
|
|
- <th >HASIL VERIFIKASI DAN VALIDASI</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- {this.state.isi?.map((isi, index) => (
|
|
|
- <tr key={index}>
|
|
|
- <td>{index + 1}</td>
|
|
|
-
|
|
|
- <td style={{ width: "30%" }}>
|
|
|
- <ContentEditable
|
|
|
- html={isi.Aspek_Perbaikan}
|
|
|
- onChange={(evt) => { this.handleAspek(evt, index, "Aspek_Perbaikan") }}
|
|
|
- disabled={true}
|
|
|
-
|
|
|
- />
|
|
|
- </td>
|
|
|
-
|
|
|
- <td style={{ width: "30%" }}>
|
|
|
- <ContentEditable
|
|
|
- html={isi.Laporan_Perbaikan}
|
|
|
- onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
|
|
|
- disabled={true}
|
|
|
-
|
|
|
-
|
|
|
- />
|
|
|
- </td>
|
|
|
-
|
|
|
- <td style={{ width: "40%" }}>
|
|
|
- <ContentEditable
|
|
|
- html={isi.Hasil_Verifikasi}
|
|
|
- onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
|
|
|
- disabled={true}
|
|
|
-
|
|
|
-
|
|
|
- />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- ))}
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <div className='table-b my-4 pl-4 pr-5' >
|
|
|
- <tr>
|
|
|
- <td style={{ width: "8%" }}>Simpulan :</td>
|
|
|
- <td >
|
|
|
- <ContentEditable
|
|
|
- html={this.state.simpulan}
|
|
|
- disabled={true}
|
|
|
- onChange={(e) => {
|
|
|
- this.setState({ simpulan: e.target.value });
|
|
|
- }}
|
|
|
- tagName="text"
|
|
|
-
|
|
|
- />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </div>
|
|
|
- <div className='table-b my-4 pl-4 pr-5' >
|
|
|
- <tr>
|
|
|
- <td style={{ width: "8%" }}>Rekomendasi :</td>
|
|
|
- <td >
|
|
|
- <ContentEditable
|
|
|
- html={this.state.rekomendasi}
|
|
|
- disabled={true}
|
|
|
- onChange={(e) => {
|
|
|
- this.setState({ rekomendasi: e.target.value });
|
|
|
- }}
|
|
|
- tagName="text"
|
|
|
-
|
|
|
- />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </div>
|
|
|
-
|
|
|
- <Row>
|
|
|
- <Col xl={{ size: 8, offset: 2 }}>
|
|
|
- <div className="mt-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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <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" /> Link Dokumen Berita Acara</span>
|
|
|
-
|
|
|
- {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> Link Dokumen Berita Acara</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" /> Link Dokumen Berita Acara</span>
|
|
|
-
|
|
|
- {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> Link Dokumen Berita Acara</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" /> Link Dokumen Berita Acara</span>
|
|
|
-
|
|
|
- {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> Link Dokumen Berita Acara</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={() => {
|
|
|
- Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
|
|
|
- }} >
|
|
|
- <span className="font-color-white">
|
|
|
- Kembali </span>
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
-
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
-
|
|
|
- </Card>
|
|
|
- </Col>
|
|
|
-
|
|
|
- </Row>
|
|
|
- </ContentWrapper>
|
|
|
- );
|
|
|
- }
|
|
|
-}
|
|
|
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
|
|
|
-export default connect(mapStateToProps)(EditFile);
|
andi