commit

components/Sanksi/SuratBA.js

@@ -10,13 +10,18 @@ moment.locale('id')
 
 
 class ComponentToPrint extends React.Component {
+    formData = {}
     constructor(props) {
         super(props);
         this.state = {
             dataLaporan: {},
             tempat: "[Mohon Diisi]",
             isEditMode: false,
-            temuanLain: []
+            temuanLain: [],
+            memberatkan: [],
+            formData: null,
+            meringankan: [],
+            namaPeserta: [{ nama: "", ttd: [] }]
         };
     }
 
@@ -42,16 +47,41 @@ class ComponentToPrint extends React.Component {
             tempat: this.refs.inputTempat.value
         })
     }
-    // handleTemuanLain = (e) => {
-    //     this.setState({
-    //         temuanLain: [...this.state.temuanLain, {}]
-    //     })
-    // }
+    handleTemuanLain = (e) => {
+        const addTemuanLain = this.refs.inputTemuan.value
+        this.setState({
+            temuanLain: [...this.state.temuanLain, addTemuanLain]
+        }, this.setformData)
+    }
+    handleMemberatkan = (e) => {
+        const addMemberatkan = this.refs.inputMemberatkan.value
+        this.setState({
+            memberatkan: [...this.state.memberatkan, addMemberatkan]
+        }, this.setformData)
+    }
+    handleMeringankan = (e) => {
+        const addMeringankan = this.refs.inputMeringankan.value
+        this.setState({
+            meringankan: [...this.state.meringankan, addMeringankan]
+        }, this.setformData)
+    }
+    setNamaPeserta = () => {
+        const addNamaPeserta = this.refs.inputNama.value
+        this.setState({
+            namaPeserta: [...this.state.namaPeserta, addNamaPeserta]
+        })
+    }
+
+    setformData = (data) => {
+        this.setState({
+            formData: this.state
+        })
+    }
 
 
 
     render() {
-        const { dataLaporan, tempat, isEditMode, temuanLain } = this.state
+        const { dataLaporan, tempat, isEditMode, temuanLain, formData, memberatkan, meringankan, namaPeserta } = this.state
         const { dataPelanggaran } = this.props
         return (
             <div className='BA-div' >
@@ -132,21 +162,42 @@ class ComponentToPrint extends React.Component {
                             {/* </div> */}
 
                             <li>Temuan Lain:
+                                {isEditMode ?
+                                    <span>
+                                        <input type='text' defaultValue={""} ref="inputTemuan" />
+                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleTemuanLain} />
+                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
+                                    </span>
+
+                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                 <ol type="a">
-                                    <li contenteditable='true'>[Mohon Diisi]</li>
-                                    <li contenteditable='true'>[Mohon Diisi]</li>
+                                    {temuanLain.map((value) => <li>{value}</li>)}
                                 </ol>
                             </li>
                             <li>Hal-hal yang memberatkan, sebagai berikut:
+                                {isEditMode ?
+                                    <span>
+                                        <input type='text' defaultValue={""} ref="inputMemberatkan" />
+                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleMemberatkan} />
+                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
+                                    </span>
+
+                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                 <ol type="a">
-                                    <li contenteditable='true'>[Mohon Diisi]</li>
-                                    <li contenteditable='true'>[Mohon Diisi]</li>
+                                    {memberatkan.map((value) => <li>{value}</li>)}
                                 </ol>
                             </li>
                             <li>hal-hal yang meringankan, sebagai berikut:
+                                {isEditMode ?
+                                    <span>
+                                        <input type='text' defaultValue={""} ref="inputMeringankan" />
+                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleMeringankan} />
+                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
+                                    </span>
+
+                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                 <ol type="a">
-                                    <li contenteditable='true'>[Mohon Diisi]</li>
-                                    <li contenteditable='true'>[Mohon Diisi]</li>
+                                    {meringankan.map((value) => <li>{value}</li>)}
                                 </ol>
                             </li>
                             <li>
@@ -163,7 +214,7 @@ class ComponentToPrint extends React.Component {
                                 <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                             </tr>
                             <tr>
-                                <td contenteditable='true'>Isi Nama</td>
+                                <td contenteditable='true' onChange={this.setNamaPeserta} ref="inputNama">Isi Nama</td>
                                 <td>
                                     <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                 </td>