commit

components/Sanksi/BeritaAcara_A.js

@@ -36,7 +36,7 @@ class BeritaAcara extends Component {
             sanksi: "[Mohon Diisi]",
             isEditSanksi: false,
             copied: false,
-            setTemuanLain: true,
+            setmeState: true,
         };
     }
 
@@ -70,13 +70,7 @@ class BeritaAcara extends Component {
         }, this.setDataSuratBA, this.handleAutoSave())
 
     }
-    isEditNamaPeserta = () => {
-        this.setState({
-            isEditNamaPeserta: !this.state.isEditNamaPeserta,
-        }, this.setDataSuratBA, this.handleAutoSave())
-
 
-    }
     isEditTemuanLain = () => {
         this.setState({
             isEditTemuanLain: !this.state.isEditTemuanLain,
@@ -102,30 +96,29 @@ class BeritaAcara extends Component {
     }
     updateValueTemuanLain = () => {
         const addTemuanLain = this.refs.inputTemuan.value
-        this.setState({
-            temuanLain: [...this.state.temuanLain, addTemuanLain]
-        }, this.setDataSuratBA, this.handleAutoSave())
+        this.state.temuanLain.push(addTemuanLain)
+        this.setDataSuratBA(this.state)
+        this.handleAutoSave()
+        // this.setState({
+        //     temuanLain: [...this.state.temuanLain, addTemuanLain]
+        // }, this.setDataSuratBA, this.handleAutoSave())
 
     }
     updateValueMemringankan = () => {
         const addMeringankan = this.refs.inputMeringankan.value
-        this.setState({
-            meringankan: [...this.state.meringankan, addMeringankan]
-        }, this.setDataSuratBA, this.handleAutoSave())
+        this.state.meringankan.push(addMeringankan)
+        this.setDataSuratBA(this.state)
+        this.handleAutoSave()
+        // this.setState({
+        //     meringankan: [...this.state.meringankan, addMeringankan]
+        // }, this.setDataSuratBA, this.handleAutoSave())
 
     }
     updateValueMemberatkan = () => {
         const addKeberatan = this.refs.inputMemberatkan.value
-        this.setState({
-            memberatkan: [...this.state.memberatkan, addKeberatan]
-        }, this.setDataSuratBA, this.handleAutoSave())
-
-    }
-    updateValueSanksi = () => {
-        this.setState({
-            isEditSanksi: false,
-            sanksi: this.refs.inputSanksi.value
-        }, this.setDataSuratBA, this.handleAutoSave())
+        this.state.memberatkan.push(addKeberatan)
+        this.setDataSuratBA(this.state)
+        this.handleAutoSave()
 
     }
 
@@ -140,13 +133,13 @@ class BeritaAcara extends Component {
             this.setState({
                 copied: !this.state.copied
             });
-        }, 3000);
+        }, 1000);
     }
 
 
     render() {
         const { dataPelanggaran, dataLaporan, dataSuratBA } = this.props
-        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, autoSaveDataSuratBA } = this.state
+        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, isEditTemuanLain, isEditKeberatan, isEditMeringankan, isEditSanksi, autoSaveDataSuratBA, autoSaveDataPelanggaran } = this.state
 
         return (
             <div>
@@ -207,7 +200,7 @@ class BeritaAcara extends Component {
                                             defaultValue=""
                                             ref="inputTempat"
                                             onChange={() => {
-                                                this.setState({ tempat: this.refs.inputTempat.value, settempat: true }, this.setDataSuratBA)
+                                                this.setState({ tempat: this.refs.inputTempat.value }, this.setDataSuratBA)
                                             }}
                                         />
                                         <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTempat} />
@@ -260,8 +253,20 @@ class BeritaAcara extends Component {
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        {dataPelanggaran
-                                            ? dataPelanggaran.map((e, i) => (
+                                        {dataPelanggaran?.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>
+
+                                        )) ||
+
+                                            autoSaveDataPelanggaran?.map((e, i) => (
                                                 <tr key={e._id}>
                                                     <td>{++i}</td>
                                                     {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
@@ -272,8 +277,7 @@ class BeritaAcara extends Component {
                                                     <td contenteditable='true'>[Mohon Diisi]</td>
                                                 </tr>
 
-                                            ))
-                                            : ""}
+                                            ))}
                                     </tbody>
                                 </table>
                                 <li>Temuan Lain:
@@ -319,14 +323,28 @@ class BeritaAcara extends Component {
                                     </ol>
                                 </li>
                                 <li>
-                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa {isEditSanksi ?
-                                        <span>
-                                            <input type='text'
-                                                defaultValue=""
-                                                ref="inputSanksi" />
-                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditSanksi} />
-                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.updateValueSanksi} />
-                                        </span> : <span onClick={this.isEditSanksi}>&nbsp;{dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi}</span>}</strong>
+                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa
+                                        {isEditSanksi &&
+                                            <span>
+                                                <input type='text'
+                                                    defaultValue=""
+                                                    ref="inputsanksi"
+                                                    onChange={() => {
+                                                        this.setState({ sanksi: this.refs.inputsanksi.value }, this.setDataSuratBA)
+                                                    }}
+                                                />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditSanksi} />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditSanksi() }} />
+                                            </span>
+                                        }
+                                        {dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi ?
+                                            <span onClick={this.isEditSanksi}>
+                                                &nbsp;{dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi}
+                                            </span>
+                                            :
+                                            <span onClick={this.isEditSanksi}>[Mohon Diisi]</span>
+                                        }
+                                    </strong>
                                 </li>
                             </ol>
                         </div>
@@ -339,16 +357,18 @@ class BeritaAcara extends Component {
                                 options={{ asHtml: true }}
                             >
                                 <div>
-                                    <Button color="" id="Popover1" className="btn-labeled-notHover" onClick={() => {
-                                        this.setState({
-                                            setTemuanLain: !this.state.setTemuanLain
-                                        }, this.setDataSuratBA()), this.handleAutoSave(), this.CloseCopied()
-                                    }}>
-                                        <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Copy Link Add Peserta</h4>
-                                    </Button>
+                                    <span className="btn-radius">
+                                        <Button color id="Popover1" className="btn-labeled-3" onClick={() => {
+                                            this.setState({
+                                                setmeState: !this.state.setmeState
+                                            }, this.setDataSuratBA()), this.handleAutoSave(), this.CloseCopied()
+                                        }} >
+
+                                            <h4 className="p-0 mt-2 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h4>
+                                        </Button>
+                                    </span>
                                     <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
-                                        <PopoverHeader>Berhasil Copy Link</PopoverHeader>
-                                        <PopoverBody><strong>Link</strong>:https://dev.sidali.kemdikbud.go.id//app/signature/pleno-sanksi/${dataLaporan.data?._id}</PopoverBody>
+                                        <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
                                     </Popover>
                                 </div>
 
@@ -358,13 +378,19 @@ class BeritaAcara extends Component {
                             <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} />

pages/app/sanksi/proses.js

@@ -55,11 +55,12 @@ class ProsesSanksi extends Component {
 		this.setState({ pelaporan, listSanksi, autoSaveDataSuratBA, autoSaveDataPelanggaran });
 	};
 
-	handleAutoSave = async () => {
+	handleAutoSave = async (data) => {
+
 		const { query, token } = this.props;
 		const { id } = query;
-		const { dataSuratBA, dataUpload, dataPelanggaran } = this.state
-		await inputAutoSave({ data: { PenetapanSanksi: { dataSuratBA, dataUpload, dataPelanggaran } }, token, id, laporan: true })
+		const { dataSuratBA, dataUpload } = this.state
+		await inputAutoSave({ data: { PenetapanSanksi: { dataSuratBA, dataUpload, dataPelanggaran: data } }, token, id, laporan: true })
 
 	}
 	done = async (e) => {
@@ -131,6 +132,7 @@ class ProsesSanksi extends Component {
 		const { token } = this.props;
 		const result = await getPelanggaran(token, { id: data.join(",") });
 		this.setState({ dataPelanggaran: result });
+		this.handleAutoSave(result)
 	};
 
 	setUploadSuratSanksi = (data) => {
@@ -269,7 +271,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="3">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Jenis Pelanggaran</h2>
-												<TablePenetapanSanksi handleDelegasi={this.handleDelegasi} handleAutoSave={this.handleAutoSave} setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran.data} data={pelaporan.data} />
+												<TablePenetapanSanksi handleDelegasi={this.handleDelegasi} handleAutoSave={this.handleAutoSave} setCheckedData={this.setCheckedData} data={pelaporan.data} />
 											</div>
 											<hr />
 											<div className="d-flex">

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

@@ -24,6 +24,7 @@ class PlenoSanksi extends Component {
             signature: "",
             nama: "",
             data: {},
+            changesign: false
 
         }
     }
@@ -56,7 +57,9 @@ class PlenoSanksi extends Component {
     updateValueSignature = () => {
         const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
         this.setState({
-            signature: addsig
+            signature: addsig,
+            changesign: true
+
         })
     }
 
@@ -101,8 +104,7 @@ class PlenoSanksi extends Component {
 
 
     render() {
-        const { dataPelanggaran, dataLaporan, dataSuratBA, signature, nama } = this.state
-
+        const { dataPelanggaran, dataLaporan, dataSuratBA, signature, nama, changesign } = this.state
         return (
             <ContentWrapper unwrap>
                 <Modal isOpen={this.state.modal} >
@@ -115,7 +117,7 @@ class PlenoSanksi extends Component {
                             </div>
                         </FormGroup>
                         <FormGroup row>
-                            <SignatureCanvas penColor='black' canvasProps={{ width: 493, height: 200, className: 'sigCanvas signature-border' }} ref={(ref) => { this.sigPad = ref }} />
+                            <SignatureCanvas penColor='black' canvasProps={{ className: 'sigCanvas signature-style' }} ref={(ref) => { this.sigPad = ref }} onEnd={(e) => this.setState({ changesign: false })} />
 
                             <ModalFooter>
                                 <Button color className="btn-login" onClick={this.updateValueSignature
@@ -128,7 +130,7 @@ class PlenoSanksi extends Component {
                             </ModalFooter>
                         </FormGroup>
                         <ModalFooter>
-                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC"} className="btn-login" onClick={this.onSubmit}>
+                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className="btn-login" onClick={this.onSubmit}>
                                 <span className="font-color-white">Kirim</span>
                             </Button>
                         </ModalFooter>

styles/bootstrap/_print.scss

@@ -178,14 +178,18 @@
   margin-right: auto;
 }
 
-.demo th {
+.demo .thdemo {
   border: 1px solid #C0C0C0;
   padding: 5px;
   background: #F0F0F0;
   text-align: center;
 }
+.demo .trdemo{
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+}
 
-.demo td {
+.demo .tddemo  {
   border: 1px solid #C0C0C0;
   padding: 5px;
   height: 100px;
@@ -277,8 +281,14 @@ body {
 
 
 }
-.signature-border{
-  border: 1px solid#979595;}
+.signature-style{
+  border: 1px solid#b9b9b9;
+width: 350px;
+height: 200px;
+margin-left: auto;
+margin-right: auto;
+}
+  
 
 
   /////////////////////Coba pake flex wrap