commit

components/Sanksi/BeritaAcara_A.js

@@ -11,6 +11,7 @@ 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'
 
 
 
@@ -184,7 +185,7 @@ class BeritaAcara extends Component {
                     </span>
                 </div>
                 <div style={{ display: "none" }}>
-                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.state.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
+                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
                 </div>
                 <div className='page'>
                     <page>
@@ -197,10 +198,11 @@ class BeritaAcara extends Component {
                             <p className='body'>
                                 Pada hari ini
 
+
                                 {dataSuratBA?.isEditTanggal &&
                                     <span>
                                         <DatePicker
-                                            selected={new Date(this.state.tanggal)}
+                                            selected={tanggal ? new Date(tanggal) : tanggal}
                                             onChange={(tanggal) => {
                                                 this.setState({ tanggal, setTanggal: true }, this.setDataSuratBA)
                                             }}
@@ -218,6 +220,9 @@ class BeritaAcara extends Component {
                                     <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}> &nbsp;[Mohon Diisi] &nbsp;</span>
                                 }
+
+
+
                                 &nbsp;bertempat di
                                 {dataSuratBA?.isEditTempat &&
                                     <span>
@@ -286,22 +291,26 @@ class BeritaAcara extends Component {
                                                 <td>{e.butir_pelanggaran}</td>
                                                 <td>{e.pelanggaran}</td>
                                                 <td>
-                                                    {descPelanggaran[e._id]?.simpulan}
-                                                    <input type='text'
-                                                        defaultValue=""
+                                                    <ContentEditable
+                                                        html={descPelanggaran[e._id]?.simpulan || ""}
+                                                        disabled={false}
                                                         onChange={(evt) => {
                                                             this.updateValueSimpulan(evt, e._id), this.setDataSuratBA()
-                                                        }} />
-                                                </td>
-                                                <td >
 
-                                                    {descPelanggaran[e._id]?.rekomendasi}
-                                                    <input type='text'
-                                                        defaultValue=""
+                                                        }}
+                                                    />
+                                                </td>
+                                                <td>
+                                                    <ContentEditable
+                                                        html={descPelanggaran[e._id]?.rekomendasi || ""}
+                                                        disabled={false}
                                                         onChange={(evt) => {
                                                             this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()
-                                                        }} />
+
+                                                        }}
+                                                    />
                                                 </td>
+
                                             </tr>
 
                                         )) ||
@@ -332,7 +341,7 @@ class BeritaAcara extends Component {
 
                                         : <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>)}
+                                        {dataSuratBA?.temuanLain?.map((value) => <li>{value}</li>) || this.state?.temuanLain?.map((value) => <li>{value}</li>)}
                                     </ol>
                                 </li>
                                 <li>Hal-hal yang memberatkan, sebagai berikut:
@@ -345,7 +354,7 @@ class BeritaAcara extends Component {
 
                                         : <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>)}
+                                        {dataSuratBA?.memberatkan?.map((value) => <li>{value}</li>) || this.state?.memberatkan?.map((value) => <li>{value}</li>)}
                                     </ol>
                                 </li>
                                 <li>hal-hal yang meringankan, sebagai berikut:
@@ -358,7 +367,7 @@ class BeritaAcara extends Component {
 
                                         : <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>)}
+                                        {dataSuratBA?.meringankan?.map((value) => <li>{value}</li>) || this.state?.meringankan?.map((value) => <li>{value}</li>)}
                                     </ol>
                                 </li>
                                 <li>

components/Sanksi/SuratBA.js

@@ -31,13 +31,16 @@ class ComponentToPrint extends React.Component {
         const { id } = query;
         const dataLaporan = await getOneLaporan(token, id);
         const getDataSave = await getAutoSave({ id, laporan: true });
-        const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
-        const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
-        this.setState({ dataLaporan, autoSaveDataPelanggaran, autoSaveDataSuratBA });
+        const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
+        this.setState({ dataLaporan });
+        this.setState(dataPelanggaran)
+        this.setState(dataSuratBA)
+
     };
 
     render() {
-        const { dataLaporan, autoSaveDataSuratBA, autoSaveDataPelanggaran } = this.state
+        const { dataLaporan, autoSaveDataPelanggaran } = this.state
         const { dataPelanggaran, dataSuratBA } = this.props
         return (
             <div className='BA-div' >
@@ -50,16 +53,16 @@ class ComponentToPrint extends React.Component {
                     <div className='BA-body'>
                         <p className='BA-body'>
                             Pada hari ini
-                            {dataSuratBA?.setTanggal === true || autoSaveDataSuratBA?.setTanggal === true ?
-                                <span > {moment(dataSuratBA?.tanggal || autoSaveDataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA?.tanggal || autoSaveDataSuratBA.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(dataSuratBA?.tanggal || autoSaveDataSuratBA.tanggal).format("MMMM")} tahun &nbsp;{moment(dataSuratBA?.tanggal || autoSaveDataSuratBA.tanggal).format("YYYY")},</span> :
+                            {dataSuratBA?.setTanggal === true || this.state?.setTanggal === true ?
+                                <span > {moment(dataSuratBA?.tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("YYYY")},</span> :
                                 <span> &nbsp;............ &nbsp;</span>
                             }
 
 
                             bertempat di
-                            {dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat ?
+                            {dataSuratBA?.tempat || this.state?.tempat ?
                                 <span>
-                                    &nbsp;{dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat}
+                                    &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
                                 </span>
                                 :
                                 <span>........</span>
@@ -88,8 +91,8 @@ class ComponentToPrint extends React.Component {
                     <div className='BA-body'>
                         <ol>
                             <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
-                                {dataSuratBA?.setTanggal === true || autoSaveDataSuratBA?.setTanggal === true ?
-                                    <span> &nbsp;{moment(dataSuratBA?.tanggal || autoSaveDataSuratBA.tanggal).format("DD-MM-YYYY")}</span>
+                                {dataSuratBA?.setTanggal === true || this.state?.setTanggal === true ?
+                                    <span> &nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("DD-MM-YYYY")}</span>
                                     :
                                     <span> &nbsp;....... &nbsp;</span>
                                 }</li>
@@ -111,60 +114,47 @@ class ComponentToPrint extends React.Component {
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    {dataPelanggaran?.map((e, i) => (
+                                    {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='true'>[Mohon Diisi]</td>
-                                            <td contenteditable='true'>[Mohon Diisi]</td>
+                                            <td contenteditable='true'>{dataSuratBA?.descPelanggaran[e._id]?.simpulan || this.state?.descPelanggaran[e._id]?.simpulan}</td>
+                                            <td contenteditable='true'>{dataSuratBA?.descPelanggaran[e._id]?.rekomendasi || this.state?.descPelanggaran[e._id]?.rekomendasi}</td>
                                         </tr>
 
-                                    )) ||
-
-                                        autoSaveDataPelanggaran?.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='true'>[Mohon Diisi]</td>
-                                                <td contenteditable='true'>[Mohon Diisi]</td>
-                                            </tr>
-
-                                        ))}
+                                    ))}
                                 </tbody>
                             </table>
                             {/* </div> */}
 
                             <li>Temuan Lain:
                                 <ol type="a">
-                                    {dataSuratBA?.temuanLain || autoSaveDataSuratBA?.temuanLain ?
-                                        <span>{dataSuratBA?.temuanLain || autoSaveDataSuratBA?.temuanLain.map((value) => <li>{value}</li>)}</span>
+                                    {dataSuratBA?.temuanLain || this.state?.temuanLain ?
+                                        <span>{dataSuratBA?.temuanLain || this.state?.temuanLain.map((value) => <li>{value}</li>)}</span>
                                         : "Belum Diisi"}
                                 </ol>
                             </li>
                             <li>Hal-hal yang memberatkan, sebagai berikut:
                                 <ol type="a">
-                                    {dataSuratBA?.memberatkan || autoSaveDataSuratBA?.memberatkan ?
-                                        <span>{dataSuratBA?.memberatkan || autoSaveDataSuratBA?.memberatkan.map((value) => <li>{value}</li>)}</span>
+                                    {dataSuratBA?.memberatkan || this.state?.memberatkan ?
+                                        <span>{dataSuratBA?.memberatkan || this.state?.memberatkan.map((value) => <li>{value}</li>)}</span>
                                         : "Belum Diisi"}
                                 </ol>
                             </li>
                             <li>hal-hal yang meringankan, sebagai berikut:
                                 <ol type="a">
-                                    {dataSuratBA?.meringankan || autoSaveDataSuratBA?.meringankan ?
-                                        <span>{dataSuratBA?.meringankan || autoSaveDataSuratBA?.meringankan.map((value) => <li>{value}</li>)}</span>
+                                    {dataSuratBA?.meringankan || this.state?.meringankan ?
+                                        <span>{dataSuratBA?.meringankan || this.state?.meringankan.map((value) => <li>{value}</li>)}</span>
                                         : "Belum Diisi"}
                                 </ol>
                             </li>
                             <li>
                                 Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa
-                                    {dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi ?
-                                        <span>{dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi}</span>
+                                    {dataSuratBA?.sanksi || this.state?.sanksi ?
+                                        <span>{dataSuratBA?.sanksi || this.state?.sanksi}</span>
                                         : "Belum Diisi"}
                                     ”.</strong>
                             </li>
@@ -175,14 +165,21 @@ class ComponentToPrint extends React.Component {
                     </p>
                     <table className='demo'>
                         <tbody>
+
                             <tr>
-                                <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
+                                <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) => (
+                                ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value, index) => (
                                     <tr>
-                                        <td>{value.nama}</td>
-                                        <td>
+                                        <td className='trdemo'>{index + 1}</td>
+                                        <td className=' tddemo'>{value.nama}</td>
+                                        <td className='tddemo'>
                                             <img
                                                 style={{ width: "200px" }}
                                                 src={value.ttd.path} />

package-lock.json

@@ -8930,6 +8930,22 @@
         "tinycolor2": "^1.4.1"
       }
     },
+    "react-contenteditable": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.7.tgz",
+      "integrity": "sha512-GA9NbC0DkDdpN3iGvib/OMHWTJzDX2cfkgy5Tt98JJAbA3kLnyrNbBIpsSpPpq7T8d3scD39DHP+j8mAM7BIfQ==",
+      "requires": {
+        "fast-deep-equal": "^3.1.3",
+        "prop-types": "^15.7.1"
+      },
+      "dependencies": {
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        }
+      }
+    },
     "react-copy-to-clipboard": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",

package.json

@@ -85,6 +85,7 @@
     "react-chartist": "0.14.4",
     "react-chartjs-2": "2.11.1",
     "react-color": "2.19.3",
+    "react-contenteditable": "^3.3.7",
     "react-copy-to-clipboard": "^5.1.0",
     "react-data-grid": "6.1.0",
     "react-datepicker": "^4.8.0",

pages/app/sanksi/proses.js

@@ -60,7 +60,6 @@ class ProsesSanksi extends Component {
 
 		const { query, token } = this.props;
 		const { id } = query;
-		this.setState({ dataSuratBA: data });
 		const { dataSuratBA, dataUpload } = this.state
 		await inputAutoSave({ data: { PenetapanSanksi: { dataSuratBA, dataUpload, dataPelanggaran: data } }, token, id, laporan: true })
 	}

pages/signature/pleno-sanksi/[id].js

@@ -213,8 +213,8 @@ class PlenoSanksi extends Component {
                                                 <td>{e.pasal}</td>
                                                 <td>{e.butir_pelanggaran}</td>
                                                 <td>{e.pelanggaran}</td>
-                                                <td >[Mohon Diisi]</td>
-                                                <td >[Mohon Diisi]</td>
+                                                <td >{dataSuratBA?.descPelanggaran[e._id]?.simpulan || ""}</td>
+                                                <td >{dataSuratBA?.descPelanggaran[e._id]?.rekomendasi || ""}</td>
                                             </tr>
 
                                         ))