update 3 BA

components/Sanksi/BeritaAcara_A.js

@@ -5,11 +5,21 @@ 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";
+
 
 class BeritaAcara extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
 
     render() {
-        // console.log(this.props.laporan)
+        const { pelaporan } = this.state
         return (
             <div>
                 <ReactToPrint pageStyle='print' content={() => this.componentRef}>
@@ -27,7 +37,7 @@ class BeritaAcara extends Component {
                     </PrintContextConsumer>
                 </ReactToPrint>
                 {/* <div style={{ display: "none" }}> */}
-                <ComponentToPrint laporan={this.props.laporan} ref={el => (this.componentRef = el)} />
+                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
                 {/* </div> */}
             </div >
 

components/Sanksi/SuratBA.js

@@ -1,31 +1,63 @@
 import React, { Component } from 'react';
 import SignatureCanvas from 'react-signature-canvas'
+import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import { connect } from "react-redux";
+import moment from "moment";
+import 'moment/locale/id'
+moment.locale('id')
+
 
 
 class ComponentToPrint extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataLaporan: {},
+            content: ""
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+        const { id } = query;
+        const dataLaporan = await getOneLaporan(token, id);
+        this.setState({ dataLaporan });
+    };
+
+
+
     render() {
+        const { dataLaporan, today } = this.state
+        console.log(this.state.content)
         return (
-            <div className='BA-div'>
+            <div className='BA-div' >
                 <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>
-                <h3 className='BA-header'>UNIVERSITAS SATYAGAMA</h3>
-                <div className='BA-body'>
-                    <p className='BA-body'>
-                        Pada hari ini …….., tanggal …….. bulan …….. tahun …….., bertempat di …….., telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara …….., yang dihadiri oleh:
-                    </p>
+                <div>
+                    <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                    {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
                     <div className='BA-body'>
-                        <ol>
-                            <li>.....</li>
-                            <li>.....</li>
-                            <li>.....</li>
-                        </ol>
+                        <p className='BA-body'>
+                            Pada hari ini <span>{moment(dataLaporan.createAt).locale("id").format("dddd")}</span>, tanggal&nbsp;{moment(dataLaporan.createAt).format("D")}&nbsp; bulan &nbsp;{moment(dataLaporan.createAt).format("MMMM")} tahun &nbsp;{moment(dataLaporan.createAt).format("YYYY")}, bertempat di<span contenteditable='true'>&nbsp;&nbsp;&nbsp;</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='BA-body'>
+                            <ol>
+                                <li contenteditable='true'>Isi name</li>
+                                <li contenteditable='true'>Isi nama</li>
+                                <li contenteditable='true'>Isi nama</li>
+                            </ol>
+                        </div>
                     </div>
                 </div>
                 <div className='BA-body'>
                     <p className='BA-body'>
-                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara …….., disampaikan sebagai berikut:
+                        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='BA-body'>
                         <ol>
@@ -52,8 +84,8 @@ class ComponentToPrint extends React.Component {
                                         <td>......</td>
                                         <td>.....</td>
                                         <td>......</td>
-                                        <td>......</td>
-                                        <td>......</td>
+                                        <td contenteditable='true'>Isi Table</td>
+                                        <td contenteditable='true'>Isi Table</td>
                                     </tr>
                                     <tr>
                                         <td>&nbsp;</td>
@@ -61,8 +93,8 @@ class ComponentToPrint extends React.Component {
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
                                     </tr>
                                     <tr>
                                         <td>&nbsp;</td>
@@ -70,8 +102,8 @@ class ComponentToPrint extends React.Component {
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
                                     </tr>
                                     <tr>
                                         <td>&nbsp;</td>
@@ -79,8 +111,8 @@ class ComponentToPrint extends React.Component {
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
                                     </tr>
                                     <tr>
                                         <td>&nbsp;</td>
@@ -88,8 +120,8 @@ class ComponentToPrint extends React.Component {
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
                                     </tr>
                                     <tr>
                                         <td>&nbsp;</td>
@@ -97,8 +129,8 @@ class ComponentToPrint extends React.Component {
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
                                     </tr>
                                     <tr>
                                         <td>&nbsp;</td>
@@ -106,8 +138,8 @@ class ComponentToPrint extends React.Component {
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
-                                        <td>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
+                                        <td contenteditable='true'>&nbsp;</td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -115,24 +147,24 @@ class ComponentToPrint extends React.Component {
 
                             <li>Temuan Lain:
                                 <ol type="a">
-                                    <li>......</li>
-                                    <li>......</li>
+                                    <li contenteditable='true'>......</li>
+                                    <li contenteditable='true'>......</li>
                                 </ol>
                             </li>
                             <li>Hal-hal yang memberatkan, sebagai berikut:
                                 <ol type="a">
-                                    <li>......</li>
-                                    <li>......</li>
+                                    <li contenteditable='true'>......</li>
+                                    <li contenteditable='true'>......</li>
                                 </ol>
                             </li>
                             <li>hal-hal yang meringankan, sebagai berikut:
                                 <ol type="a">
-                                    <li>......</li>
-                                    <li>......</li>
+                                    <li contenteditable='true'>......</li>
+                                    <li contenteditable='true'>......</li>
                                 </ol>
                             </li>
                             <li>
-                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa …………………………..”.</strong>
+                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa …………………………..”.</strong>
                             </li>
                         </ol>
                     </div>
@@ -145,71 +177,71 @@ class ComponentToPrint extends React.Component {
                                 <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                             </tr>
                             <tr>
-                                <td contenteditable='true'>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
                             </tr>
                             <tr>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
                             </tr>
                             <tr>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
                             </tr>
                             <tr>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
                             </tr>
                             <tr>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
                             </tr>
                             <tr>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
                             </tr>
                             <tr>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
-                                <td>Nama</td>
+                                <td contenteditable='true'>Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>
@@ -221,10 +253,10 @@ class ComponentToPrint extends React.Component {
                     <span>*LAPORAN HASIL EVALUASI DAN PEMBAHASAN …………. – …bulan&tahun…</span>
                     {/* <span class="custom-footer-page-number">Number: </span> */}
                 </div>
-            </div >
+
+            </div>
 
         );
     }
 }
-
 export default ComponentToPrint

pages/app/sanksi/proses.js

@@ -261,7 +261,7 @@ class ProsesSanksi extends Component {
 										</TabPane>
 										<TabPane tabId="4">
 											<Card>
-												<BeritaAcara />
+												<BeritaAcara query={this.props.query} />
 											</Card>
 											<div className="d-flex">
 												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>