commit Surat BA state

components/Charts/chart-flot.scss

@@ -34,9 +34,10 @@
     }
 }
 .flot-chart {
-    display: inline-block;
-    width: 150%;
-    height: 250px;
+    // display: inline-block;
+   height: 150px;
+   width: 300px;
+   margin-right: -70px;
     // font-size: 15px;
     .legend {
         font-size: 13px;
@@ -59,7 +60,7 @@
 
         .legendColorBox>div,
         .legendColorBox>div>div {
-            border-radius: 400px;
+            // border-radius: 400px;
         }
     }
 }

components/Main/ChartdataHome.js

@@ -118,10 +118,10 @@ class ChartdataHome extends Component {
 			<Col lg={12}>
 				<Card>
 					<CardBody>
-						<FlotChart options={this.ChartSpline.options} data={this.state.dataChart.data} className="flot-chart" height="150px" width="350px" />
+						<FlotChart options={this.ChartSpline.options} data={this.state.dataChart.data} className="flot-chart" height="150px" width="300px" />
 					</CardBody>
 					<div align="center">
-						<h5 className="font-weight-bold">Data Statistik Pengunjung Bulan {`${this.convertMonth(new Date().getMonth() + 1)} ${new Date().getFullYear()}`}</h5>
+						<h5 className="font-weight-bold font-10">Data Statistik Pengunjung Bulan {`${this.convertMonth(new Date().getMonth() + 1)} ${new Date().getFullYear()}`}</h5>
 					</div>
 				</Card>
 			</Col>

components/NaikSanksi/InputTanggal.js

@@ -156,7 +156,9 @@ class InputTanggal extends Component {
         formdata.append("keterangan", data.keterangan);
         formdata.append("from_date", data.from_date);
         formdata.append("to_date", data.to_date);
-        formdata.append("sanksi", JSON.stringify(data.sanksi));
+        // formdata.append("sanksi", JSON.stringify(data.sanksi.map((e) => ({ label: e.value }))));
+        formdata.append("sanksi", JSON.stringify(data.sanksi.map((e) => ({ label: e.value.split(";")[0], description: e.value.split(";")[1], level: e.value.split(";")[2] }))));
+
         this.state.files.forEach((e) => {
             formdata.append("dokumen", e);
         });
@@ -186,6 +188,8 @@ class InputTanggal extends Component {
                 <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
             </p>
         ));
+
+        console.log(this.props.listSanksi)
         return (
             <Card className="card-default">
                 <CardBody>
@@ -325,7 +329,7 @@ class InputTanggal extends Component {
                                     <label className="col-md-2 col-form-label">List sanksi </label>
                                     <div className="col-md-10">
                                         <Field name="sanksi">{({ field, form }) => <Select
-                                            options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
+                                            options={this.props.listSanksi.map(e => ({ value: e, label: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
                                             isMulti
                                             onChange={(e) => {
                                                 form.setFieldValue(field.name, e);

components/NaikSanksi/TableLaporan.js

@@ -65,7 +65,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 
 											<td>
 												{/* {data.sanksi.masa_berlaku?.to_date ? (<h4 className="m-0"> {moment(data.sanksi.masa_berlaku?.from_date).format("DD MMMM YYYY")} - {moment(data.sanksi.masa_berlaku?.to_date).format("DD MMMM YYYY")}</h4>) : (<h4 className="m-0">6 Bulan</h4>)} */}
-												{data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
+												{data.sanksi.length ? data.sanksi.map((e) => (<h4 className="w-105">Sanksi Administratif {e.label}</h4>)) : data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
 												<p className="w-105">{data.keterangan}</p>
 											</td>
 											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}

components/Sanksi/Ringkasan.js

@@ -65,60 +65,8 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload, autoSaveDataPelan
 								</tr>
 							</thead>
 							<tbody>
-								{dataPelanggaran?.map((e, i) => (
-									<tr key={e._id}>
-										<td>{++i}</td>
-										<td>
-											<div className="media align-items-center">
-												<div className="media-body d-flex">
-													<div>
-														<p>{e.pelanggaran}</p>
-														<p>TMT : {e.tmt_bulan} Bulan</p>
-														<p>Level Pelanggaran : {e.label_sanksi}</p>
-													</div>
-												</div>
-											</div>
-										</td>
-										<td>
-											<div className="media align-items-center">
-												<div className="media-body d-flex">
-													<div>
-														<p>{e.sanksi}</p>
-														<p>Keterangan : {e.keterangan_sanksi}</p>
-													</div>
-												</div>
-											</div>
-										</td>
-									</tr>
-								)) ||
-									autoSaveDataPelanggaran?.map((e, i) => (
-										<tr key={e._id}>
-											<td>{++i}</td>
-											<td>
-												<div className="media align-items-center">
-													<div className="media-body d-flex">
-														<div>
-															<p>{e.pelanggaran}</p>
-															<p>TMT : {e.tmt_bulan} Bulan</p>
-															<p>Level Pelanggaran : {e.label_sanksi}</p>
-														</div>
-													</div>
-												</div>
-											</td>
-											<td>
-												<div className="media align-items-center">
-													<div className="media-body d-flex">
-														<div>
-															<p>{e.sanksi}</p>
-															<p>Keterangan : {e.keterangan_sanksi}</p>
-														</div>
-													</div>
-												</div>
-											</td>
-										</tr>
-									))
-								}
-								{/* {dataPelanggaran
+
+								{dataPelanggaran
 									? dataPelanggaran.map((e, i) => (
 										<tr key={e._id}>
 											<td>{++i}</td>
@@ -145,7 +93,7 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload, autoSaveDataPelan
 											</td>
 										</tr>
 									))
-									: ""} */}
+									: ""}
 							</tbody>
 						</Table>
 					</Card>

components/Sanksi/TablePenetapanSanksi.js

@@ -6,6 +6,8 @@ import Button from "reactstrap/lib/Button";
 import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
 import Router from "next/router";
 import { ToastContainer, toast } from "react-toastify";
+import { getAutoSave } from "@/actions/autosave";
+
 
 
 
@@ -19,22 +21,28 @@ export class TablePenetapanSanksi extends Component {
 			checkedData: [],
 			labelSanksi: [],
 			btnDelegasi: false,
-
 		};
+		this.onHandleChange = this.onHandleChange.bind(this)
 	}
 
 	componentDidMount = async () => {
-		const { token } = this.props;
+		const { token, query } = this.props;
+		const { id } = query;
 		const pelanggaran = await getPelanggaran(token);
-		this.setState({ pelanggaran });
+		const getDataSave = await getAutoSave({ id, laporan: true });
+		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
+		this.setState({ pelanggaran, checkedData: autoSaveDataPelanggaran ? autoSaveDataPelanggaran.data.map(e => e._id) : [] });
+		this.checkedData = this.state.checkedData
 	};
 
 	onHandleChange = (evt) => {
 		const checked = evt.target.checked;
 		const item = evt.target.value;
-		if (checked) this.checkedData.push(evt.target.value);
-		else this.checkedData = this.checkedData.filter((e) => e != item);
-		this.props.setCheckedData(this.checkedData);
+		if (checked) this.state.checkedData.push(evt.target.value);
+		// else this.setState((prevState) => ({ ...prevState, checkedData: prevState.checkedData.filter((e) => e != item) }));
+		// else this.setState({ checkedData: this.state.checkedData.filter((e) => e != item) });
+		else this.state.checkedData = this.state.checkedData.filter((e) => e != item)
+		this.props.setCheckedData(this.state.checkedData);
 	};
 
 	setLabelSanksi = (evt, label_sanksi) => {
@@ -50,7 +58,6 @@ export class TablePenetapanSanksi extends Component {
 
 	render() {
 		const { pelanggaran, labelSanksi, checkedData } = this.state;
-		console.log(labelSanksi)
 
 		return (
 			<Card className="card-default">
@@ -94,7 +101,7 @@ export class TablePenetapanSanksi extends Component {
 									<td>
 										<div className="checkbox c-checkbox">
 											<label>
-												<input type="checkbox" value={jp._id} onChange={(evt) => {
+												<input type="checkbox" checked={checkedData.find(id => id === jp._id)} value={jp._id} onChange={(evt) => {
 													this.onHandleChange(evt)
 													this.setLabelSanksi(evt, jp.label_sanksi)
 													this.props.handleAutoSave()

components/TurunSanksi/InputTanggal.js

@@ -52,6 +52,11 @@ const rekomendasiSchema = Yup.object().shape({
 });
 
 let Dropzone = null;
+const level_sanksi = {
+    "Sanksi Administratif Ringan": 1,
+    "Sanksi Administratif Sedang": 2,
+    "Sanksi Administratif Berat": 3,
+}
 
 class DropzoneWrapper extends Component {
     state = {
@@ -79,7 +84,6 @@ class InputTanggal extends Component {
             from_date: "",
             to_date: "",
             startDay: tmt_awal,
-            sanksi: {},
             keteranganLaporan: "",
             tmtCheck: false,
             listSanksi: ""
@@ -156,7 +160,7 @@ class InputTanggal extends Component {
         formdata.append("keterangan", data.keterangan);
         formdata.append("from_date", data.from_date);
         formdata.append("to_date", data.to_date);
-        formdata.append("sanksi", JSON.stringify(data.sanksi));
+        formdata.append("sanksi", JSON.stringify(data.sanksi.map((e) => ({ label: e.value.split(";")[0], description: e.value.split(";")[1], level: e.value.split(";")[2] }))));
         this.state.files.forEach((e) => {
             formdata.append("dokumen", e);
         });
@@ -325,7 +329,7 @@ class InputTanggal extends Component {
                                     <label className="col-md-2 col-form-label">List sanksi </label>
                                     <div className="col-md-10">
                                         <Field name="sanksi">{({ field, form }) => <Select
-                                            options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
+                                            options={this.props.listSanksi.map(e => ({ value: e, label: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
                                             isMulti
                                             onChange={(e) => {
                                                 form.setFieldValue(field.name, e);

components/TurunSanksi/TableLaporan.js

@@ -65,7 +65,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 
 											<td>
 												{/* <h4 className="w-105">Sanksi Administratif: {data.pelanggaran.map((e) => e.label_sanksi)}</h4> */}
-												{data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
+												{data.sanksi.length ? data.sanksi.map((e) => (<h4 className="w-105">Sanksi Administratif {e.label}</h4>)) : data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
 												<p className="w-105">{data.sanksi.keterangan}</p>
 											</td>
 											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}

pages/app/index.js

@@ -73,6 +73,7 @@ class App extends Component {
                 <p className="lead txt-size">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
                 <hr className="my-4" />
                 <p className="txt-size">Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
+
                 <p className="lead">
                   {/* <Link href="/laporan/new">
 										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
@@ -98,17 +99,24 @@ class App extends Component {
                     </span>
                   </Link>
                 </p>
-                <div>
-                  <span className="cd-home-1">
-                    <img className="ditbaga-logo float-lg-none" src="/static/img/ditbaga-logo.png" alt="applogo" />
-                  </span>
-                  <span className="cd-home-2">
-                    <ChartdataHome className="" />
-                  </span>
+                <div id="video-css">
+                  <video controls>
+                    <source src="/static/img/video/video_buat_laporan.mp4" type="video/mp4" />
+                  </video>
+                  <div className="d-flex flex-column">
+                    <div>
+                      <ChartdataHome />
+                    </div>
+                    <div>
+                      <img className="pl-5" src="/static/img/ditbaga-logo.png" alt="applogo" />
+                    </div>
+                  </div>
                 </div>
+
               </Col>
               <Col>
                 <Login />
+                {/* <ChartdataHome /> */}
               </Col>
             </Row>
           </Jumbotron>

pages/app/turun-sanksi/index.js

@@ -27,6 +27,7 @@ class NaikSanksi extends Component {
 
 	render() {
 		const { pelaporan, sanksi } = this.state;
+		console.log(sanksi)
 		return (
 			<ContentWrapper>
 				<div className="content-heading">

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

@@ -132,7 +132,7 @@ class PlenoSanksi extends Component {
                             </Button>
                         </ModalFooter>
                         <ModalFooter>
-                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className="btn-login" onClick={this.onSubmit}>
+                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className="btn-labeled-notHover pt-2 pb-2 " onClick={this.onSubmit}>
                                 <span className="font-color-white">Kirim</span>
                             </Button>
                         </ModalFooter>

styles/app.scss

@@ -42,4 +42,7 @@
 
 // PTB Apps
 @import "app/app/timeline";
-@import "app/extras/calendar";
+@import "app/extras/calendar";
+
+//MY CSS
+@import "app/app/mycss";

styles/app/app/mycss.scss

@@ -0,0 +1,32 @@
+.huruf-besar{
+
+}
+
+#video-css video{
+    width: 450px;
+
+}
+
+#video-css{
+    display: flex;
+    flex-wrap: wrap;    
+}
+#video-css img{
+    width: 150px;
+}
+@media only screen and (max-width: 1366px) {
+    #video-css video{
+        width: 450px;
+        margin-right: -10px;
+    
+    }
+    #video-css img{
+        width: 140px;
+        margin-top: -20px;
+    }
+    #video-css{
+        display: flex;
+        flex-wrap: wrap;   
+        margin-top: -15px; 
+    }
+}

styles/bootstrap/_images.scss

@@ -107,10 +107,7 @@
 //   height: auto;
 //   width: 72px;
 //   height: 37px; }
-.ditbaga-logo {
-  margin-top: 55%;
 
-}
 
 .logo-nav {
   width: 60%;