commit

actions/autosave.js

@@ -0,0 +1,35 @@
+import axios from "@/config/axios";
+
+export const getAutoSave = async ({ token, laporan, sanksi, id }) => {
+    try {
+        let url = "";
+        if (laporan) {
+            url += `/auto/save/${id}?laporan=true`;
+        }
+        if (sanksi) {
+            url += `/auto/save/${id}?sanksi=true`;
+        }
+        const res = await axios.get(url, { headers: { Authorization: token } });
+        return res.data;
+    } catch (error) {
+        console.log("error", error);
+        return false;
+    }
+};
+
+export const inputAutoSave = async ({ token, laporan, sanksi, id, data }) => {
+    try {
+        let url = "";
+        if (laporan) {
+            url += `/auto/save/${id}?laporan=true`;
+        }
+        if (sanksi) {
+            url += `/auto/save/${id}?sanksi=true`;
+        }
+        const res = await axios.post(url, data, { headers: { Authorization: token } });
+        return res.data;
+    } catch (error) {
+        console.log("error", error);
+        return false;
+    }
+};

components/Sanksi/BeritaAcara_A.js

@@ -6,23 +6,29 @@ import SignatureCanvas from 'react-signature-canvas'
 import ComponentToPrint from "./SuratBA";
 import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
 
-
-
 class BeritaAcara extends Component {
 
     render() {
+        // console.log(this.props.laporan)
         return (
             <div>
-                <h1>kekekekekekek</h1>
-                <ReactToPrint content={() => this.componentRef}>
+                <ReactToPrint pageStyle='print' content={() => this.componentRef}>
                     <PrintContextConsumer>
                         {({ handlePrint }) => (
-                            <button onClick={handlePrint}>Print this out!</button>
+                            <div className=' content-heading border-radius-login'>
+                                <span className="btn-radius">
+                                    <Button onClick={handlePrint} color className="btn-labeled-4">
+                                        <h4 className="p-0 mt-2">Print dan Download</h4>
+                                    </Button>
+                                </span>
+                            </div>
+
                         )}
                     </PrintContextConsumer>
                 </ReactToPrint>
-                <ComponentToPrint ref={el => (this.componentRef = el)} />
-
+                {/* <div style={{ display: "none" }}> */}
+                <ComponentToPrint laporan={this.props.laporan} ref={el => (this.componentRef = el)} />
+                {/* </div> */}
             </div >
 
         );

components/Sanksi/SuratBA.js

@@ -0,0 +1,230 @@
+import React, { Component } from 'react';
+import SignatureCanvas from 'react-signature-canvas'
+
+
+class ComponentToPrint extends React.Component {
+    render() {
+        return (
+            <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 className='BA-body'>
+                        <ol>
+                            <li>.....</li>
+                            <li>.....</li>
+                            <li>.....</li>
+                        </ol>
+                    </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:
+                    </p>
+                    <div className='BA-body'>
+                        <ol>
+                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi …….., tanggal ……..;</li>
+                            <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
+                            {/* <div style={{ overflow: "auto" }}> */}
+                            <table className='table-a'>
+                                <tbody>
+                                    <tr>
+                                        <th rowspan="2">NO</th>
+                                        <th rowspan="2">NAMA DAN IZIN PRODI</th>
+                                        <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
+                                        <th rowspan="2">SIMPULAN</th>
+                                        <th rowspan="2">REKOMENDASI</th>
+                                    </tr>
+                                    <tr>
+                                        <th>PASAL</th>
+                                        <th>BUTIR PELANGGARAN</th>
+                                        <th>DESKRIPSI PELANGGARAN</th>
+                                    </tr>
+                                    <tr>
+                                        <td>......</td>
+                                        <td>......</td>
+                                        <td>......</td>
+                                        <td>.....</td>
+                                        <td>......</td>
+                                        <td>......</td>
+                                        <td>......</td>
+                                    </tr>
+                                    <tr>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                    </tr>
+                                    <tr>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                    </tr>
+                                    <tr>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                    </tr>
+                                    <tr>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                    </tr>
+                                    <tr>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                    </tr>
+                                    <tr>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                            {/* </div> */}
+
+                            <li>Temuan Lain:
+                                <ol type="a">
+                                    <li>......</li>
+                                    <li>......</li>
+                                </ol>
+                            </li>
+                            <li>Hal-hal yang memberatkan, sebagai berikut:
+                                <ol type="a">
+                                    <li>......</li>
+                                    <li>......</li>
+                                </ol>
+                            </li>
+                            <li>hal-hal yang meringankan, sebagai berikut:
+                                <ol type="a">
+                                    <li>......</li>
+                                    <li>......</li>
+                                </ol>
+                            </li>
+                            <li>
+                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa …………………………..”.</strong>
+                            </li>
+                        </ol>
+                    </div>
+                    <p className='BA-body'>
+                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
+                    </p>
+                    <table className='demo'>
+                        <tbody>
+                            <tr>
+                                <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
+                            </tr>
+                            <tr>
+                                <td contenteditable='true'>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                                <td>Nama</td>
+                                <td>
+                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div id="footer">
+                    <span>*LAPORAN HASIL EVALUASI DAN PEMBAHASAN …………. – …bulan&tahun…</span>
+                    {/* <span class="custom-footer-page-number">Number: </span> */}
+                </div>
+            </div >
+
+        );
+    }
+}
+
+export default ComponentToPrint

components/Sanksi/TmtDate.js

@@ -1,77 +0,0 @@
-import React from "react";
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import FormGroup from "reactstrap/lib/FormGroup";
-import ms from "ms";
-import { Component } from "react";
-import { addDays, addMonths } from 'date-fns';
-
-class TmtDate extends Component {
-	constructor(props) {
-		super(props);
-		const tmt_awal = new Date();
-		this.state = {
-			startDay: tmt_awal,
-			maxDay: "",
-			isiTmt: "",
-			awalsanksi: "",
-			akhirsanksi: "",
-		};
-	}
-	handleAwalSanksi = (awalsanksi) => {
-		this.setState({ awalsanksi });
-		// this.props.setUploadSuratSanksi(this.state);
-	};
-	handleAkhirSanksi = (akhirsanksi) => {
-		this.setState({ akhirsanksi });
-		// this.props.setUploadSuratSanksi(this.state);
-	};
-	render() {
-		return (
-			<div>
-				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">Isi TMT</label>
-					<span className="col-sm-3 float-left">
-						<DatePicker
-							selected={this.state.awalsanksi}
-							onChange={(e) => {
-								this.handleAwalSanksi(e);
-								// this.props.setTmt({ startDate: this.state.awalsanksi, endDate: this.state.akhirsanksi });
-							}}
-							selectsStart
-							startDate={this.state.awalsanksi}
-							dateFormat="dd/MM/yyyy"
-							maxDate={this.state.startDay}
-							placeholderText="Dari Tanggal"
-							showDisabledMonthNavigation
-						/>
-					</span>
-					<span className="col-sm-3 float-right">
-						<DatePicker
-							selected={this.state.akhirsanksi}
-							onChange={(e) => {
-								this.handleAkhirSanksi(e);
-								// this.props.setTmt({ startDate: this.state.awalsanksi, endDate: this.state.akhirsanksi });
-							}}
-							selectsEnd
-							endDate={this.state.akhirsanksi}
-							dateFormat="dd/MM/yyyy"
-							minDate={this.state.awalsanksi}
-							maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
-							placeholderText="Sampai tanggal"
-							showDisabledMonthNavigation
-						/>
-					</span>
-				</FormGroup>
-				<FormGroup row className="mt-1">
-					<label className="col-md-2 col-form-label">TMT berlaku</label>
-					<div className="col-md-10 mt-2">
-						<b>{this.state.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).format("DD-MM-YYYY") : "-"}</b>
-					</div>
-				</FormGroup>
-			</div>
-		);
-	}
-}
-
-export default TmtDate;

components/Sanksi/UploadSurat.js

@@ -5,10 +5,10 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 // import "react-datepicker/dist/react-datepicker.css";
 import ms from "ms";
-import TmtDate from "./TmtDate";
 import { addDays, addMonths } from 'date-fns';
 import id from 'date-fns/locale/id';
 // registerLocale('id', id)
+import { getAutoSave, inputAutoSave } from "@/actions/autosave";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -83,6 +83,7 @@ export class UploadSurat extends Component {
 			akhirsanksi: "",
 			tmtCheck: false,
 			filesBeritaAcara: [],
+			saveData: []
 		};
 	}
 
@@ -109,6 +110,22 @@ export class UploadSurat extends Component {
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
+	componentDidMount = async () => {
+		const { query, token } = this.props;
+		const { id } = query;
+		const getDataSave = await getAutoSave({ token, id, laporan: true });
+		const saveData = getDataSave.data?.penetapanSanksi;
+		this.setState(saveData)
+	}
+
+	handleAutoSave = async () => {
+		const { query, token } = this.props;
+		const { id } = query;
+		const { nomorSanksi, keterangan } = this.state
+		const saveData = await inputAutoSave({ data: { penetapanSanksi: { nomorSanksi, keterangan } }, token, id, laporan: true })
+
+	}
+
 	uploadFiles = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -153,12 +170,17 @@ export class UploadSurat extends Component {
 	}
 	render() {
 		const { files, filesBeritaAcara } = this.state;
-
 		const removeFile = file => () => {
 			const newFiles = [...files]
 			newFiles.splice(newFiles.indexOf(file), 1)
 			this.setState({
 				files: newFiles,
+			});
+		}
+		const removeFileBA = file => () => {
+			const newFiles = [...filesBeritaAcara]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
 				filesBeritaAcara: newFiles,
 			});
 		}
@@ -171,7 +193,7 @@ export class UploadSurat extends Component {
 		const thumbsBA = filesBeritaAcara.map((file, index) => (
 			<p>
 				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
-				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFileBA(file)} />
 			</p>
 		));
 		return (
@@ -179,13 +201,13 @@ export class UploadSurat extends Component {
 				<FormGroup row>
 					<label className="col-md-2 col-form-label">Nomor Surat:</label>
 					<div className="col-md-10">
-						<Input type="text" value={this.state.nomorSanksi} onChange={this.setNomorSanksi} />
+						<Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e); this.handleAutoSave() }} />
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
 					<label className="col-md-2 col-form-label">Keterangan</label>
 					<div className="col-md-10">
-						<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
+						<Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e); this.handleAutoSave() }} required />
 					</div>
 				</FormGroup>
 				<FormGroup row>

pages/app/sanksi/proses.js

@@ -17,6 +17,7 @@ import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import { ToastContainer, toast } from "react-toastify";
 import BeritaAcara from "@/components/Sanksi/BeritaAcara_A";
+import { autosave } from "@/actions/autosave";
 
 
 const stepNavitemStyle = {
@@ -33,6 +34,7 @@ class ProsesSanksi extends Component {
 			dataPelanggaran: {},
 			pelaporan: {},
 			listSanksi: [],
+			dataSave: {}
 		};
 	}
 
@@ -261,7 +263,6 @@ class ProsesSanksi extends Component {
 											<Card>
 												<BeritaAcara />
 											</Card>
-
 											<div className="d-flex">
 												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
 													<span className="font-color-white">Previous</span>
@@ -274,7 +275,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="5">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Sanksi</h2>
-												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran.data} />}
+												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran.data} query={this.props.query} />}
 											</div>
 											<hr />
 											<div className="d-flex">

styles/bootstrap/_buttons.scss

@@ -224,6 +224,22 @@ input[type="button"] {
   }
 }
 
+.btn-labeled-4 {
+  border: #3e3a8e solid 2px;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 3%;
+  color: #3e3a8e;
+  background: white;
+  transition: ease background-color 250ms;
+
+  &:hover {
+    background-color: #e9e8e8;
+    opacity: 0.9;
+    color: #3e3a8e;
+  }
+}
+
 .btn-labeled-3 {
   border: #3e3a8e solid 2px;
   padding-top: 0;

styles/bootstrap/_progress.scss

@@ -1,8 +1,13 @@
 // Disable animation if transitions are disabled
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
-    from { background-position: $progress-height 0; }
-    to { background-position: 0 0; }
+    from {
+      background-position: $progress-height 0;
+    }
+
+    to {
+      background-position: 0 0;
+    }
   }
 }
 
@@ -45,3 +50,136 @@
     }
   }
 }
+
+
+.BA-logo {
+  width: 250px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 10px;
+}
+
+.BA-header {
+  font-family: "Times New Roman", Times, serif;
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.BA-div {
+  padding-top: 100px;
+}
+
+.BA-p p {
+  padding: 10px;
+}
+
+.BA-body {
+  font-family: "Times New Roman", Times, serif;
+  padding-top: 0px;
+  padding-left: 50px;
+  padding-right: 50px;
+
+}
+
+.demo {
+  border: 1px solid #C0C0C0;
+  border-collapse: collapse;
+  padding: 5px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.demo th {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  background: #F0F0F0;
+  text-align: center;
+}
+
+.demo td {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  height: 100px;
+  min-width: 200px;
+}
+
+.table-a {
+  border: 1px solid #C0C0C0;
+  border-collapse: collapse;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 5px;
+  margin-left: -128px auto;
+  margin-right: auto;
+  table-layout: fixed;
+}
+
+.table-a th {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  background: #F0F0F0;
+  text-align: center;
+}
+
+.table-a td {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  word-wrap: break-word;
+  max-width: 150px;
+}
+
+#footer {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #979595;
+}
+
+////////////////////////////-----SuratBA_A
+
+// body {
+//   margin: 0;
+//   padding: 0;
+//   background-color: #FAFAFA;
+//   font: 12pt "Tahoma";
+// }
+
+// * {
+//   box-sizing: border-box;
+//   -moz-box-sizing: border-box;
+// }
+
+// .page {
+//   width: 21cm;
+//   min-height: 29.7cm;
+//   padding: 2cm;
+//   margin: 1cm auto;
+//   border: 1px #D3D3D3 solid;
+//   border-radius: 5px;
+//   background: white;
+//   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+// }
+
+// .subpage {
+//   padding: 1cm;
+//   border: 5px red solid;
+//   height: 256mm;
+//   outline: 2cm #FFEAEA solid;
+// }
+
+// @page {
+//   size: A4;
+//   margin: 0;
+// }
+
+// @media print {
+
+//   body,
+//   page[size="A4"] {
+//     margin: 0;
+//     box-shadow: 0;
+//   }
+// }