rekomendasi delegasi v1

actions/sanksi.js

@@ -36,11 +36,12 @@ export const getOneSanksi = async (token, id, query = {}) => {
 	try {
 		let url = `/sanksi/${id}`;
 		if (query != {}) {
-			const { banding, aktif } = query;
+			const { banding, aktif, all } = query;
 			url += "?";
 			const parseURL = [];
 			if (banding) parseURL.push(`banding=true`);
 			if (aktif === false) parseURL.push(`aktif=false`);
+			if (all) { parseURL.push(`all=true`); }
 			url += parseURL.join("&");
 		}
 		const res = await axiosAPI.get(url, { headers: { Authorization: token } });

components/RekomendasiDelegasi/DetailSanksi.js

@@ -1,108 +1,110 @@
 import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
-import { Col, FormGroup, Table } from "reactstrap";
+import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
 import { API_URL } from "@/env";
 
 function DetailSanksi({ data, noTitle = false }) {
 	return (
-		<>
-			{noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
-			<form className="form-horizontal">
-				<FormGroup row>
-					<Col md="4">Nomor Sanksi:</Col>
-					<Col md="8">
-						<strong>{data.no_sanksi}</strong>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Nama Perguruan Tinggi:</Col>
-					<Col md="8">
-						<strong>{data.laporan.pt.nama}</strong>
-					</Col>
-				</FormGroup>
+		<Card className="card-default">
+			<CardBody>
+				{noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
+				<form className="form-horizontal">
+					<FormGroup row>
+						<Col md="4">Nomor Sanksi:</Col>
+						<Col md="8">
+							<strong>{data.no_sanksi}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Nama Perguruan Tinggi:</Col>
+						<Col md="8">
+							<strong>{data.laporan.pt.nama}</strong>
+						</Col>
+					</FormGroup>
 
-				<FormGroup row>
-					<Col md="4">Keterangan:</Col>
-					<Col md="8">
-						<Scrollable height="100px" className="list-group">
-							<p>{data.keterangan}</p>
-						</Scrollable>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Dibuat Pada:</Col>
-					<Col md="8">
-						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Dokumen Sanksi:</Col>
-					<Col md="8">
-						<Scrollable height="120px" className="list-group">
-							<table className="table table-bordered bg-transparent">
-								<tbody>
-									{data.dokumen.map((e) => (
-										<tr>
-											<td>
-												<em className="fa-lg far fa-file-code"></em>
-											</td>
-											<td>
-												<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
-													{e.judul}
-												</a>
-											</td>
-										</tr>
-									))}
-								</tbody>
-							</table>
-						</Scrollable>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md={12}>
-						<div className="card b">
-							<div className="card-body bb">
-								<Table responsive>
-									<thead>
-										<tr>
-											<th>Jenis Pelanggaran</th>
-											<th>Sanksi</th>
-										</tr>
-									</thead>
+					<FormGroup row>
+						<Col md="4">Keterangan:</Col>
+						<Col md="8">
+							<Scrollable height="100px" className="list-group">
+								<p>{data.keterangan}</p>
+							</Scrollable>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Dibuat Pada:</Col>
+						<Col md="8">
+							<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Dokumen Sanksi:</Col>
+						<Col md="8">
+							<Scrollable height="120px" className="list-group">
+								<table className="table table-bordered bg-transparent">
 									<tbody>
-										{data.pelanggaran.map((jp, index) => (
-											<tr key={jp._id}>
-												<td width={50}>
-													<div className="media align-items-center">
-														<div className="media-body d-flex">
-															<div>
-																<p>{jp.pelanggaran}</p>
-																<p>TMT : {jp.tmt_bulan} Bulan</p>
-																<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
-															</div>
-														</div>
-													</div>
+										{data.dokumen.map((e) => (
+											<tr>
+												<td>
+													<em className="fa-lg far fa-file-code"></em>
 												</td>
-												<td width={50}>
-													<div className="media align-items-center">
-														<div className="media-body d-flex">
-															<div>
-																<p>{jp.sanksi}</p>
-																<p>Keterangan : {jp.keterangan_sanksi}</p>
-															</div>
-														</div>
-													</div>
+												<td>
+													<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+														{e.judul}
+													</a>
 												</td>
 											</tr>
 										))}
 									</tbody>
-								</Table>
+								</table>
+							</Scrollable>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md={12}>
+							<div className="card b">
+								<div className="card-body bb">
+									<Table responsive>
+										<thead>
+											<tr>
+												<th>Jenis Pelanggaran</th>
+												<th>Sanksi</th>
+											</tr>
+										</thead>
+										<tbody>
+											{data.pelanggaran.map((jp, index) => (
+												<tr key={jp._id}>
+													<td width={50}>
+														<div className="media align-items-center">
+															<div className="media-body d-flex">
+																<div>
+																	<p>{jp.pelanggaran}</p>
+																	<p>TMT : {jp.tmt_bulan} Bulan</p>
+																	<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
+																</div>
+															</div>
+														</div>
+													</td>
+													<td width={50}>
+														<div className="media align-items-center">
+															<div className="media-body d-flex">
+																<div>
+																	<p>{jp.sanksi}</p>
+																	<p>Keterangan : {jp.keterangan_sanksi}</p>
+																</div>
+															</div>
+														</div>
+													</td>
+												</tr>
+											))}
+										</tbody>
+									</Table>
+								</div>
 							</div>
-						</div>
-					</Col>
-				</FormGroup>
-			</form>
-		</>
+						</Col>
+					</FormGroup>
+				</form>
+			</CardBody>
+		</Card>
 	);
 }
 

components/RekomendasiDelegasi/InputEvaluasi.js → components/RekomendasiDelegasi/InputRekomendasi.js

@@ -35,9 +35,7 @@ const checkIfFilesAreCorrectType = (files) => {
 	return valid;
 };
 
-const evaluasiSchema = Yup.object().shape({
-	tanggal: Yup.date().required("Wajib diisi"),
-	judul: Yup.string().min(3).max(150).required("Wajib diisi"),
+const RekomendasiDelegasiSchema = Yup.object().shape({
 	dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
@@ -56,7 +54,7 @@ class DropzoneWrapper extends Component {
 	}
 }
 
-class InputEvaluasi extends Component {
+class InputRekomendasi extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -124,8 +122,6 @@ class InputEvaluasi extends Component {
 		const { token, query } = this.props;
 		const { id } = query;
 		const formdata = new FormData();
-		formdata.append("judul", data.judul);
-		formdata.append("tanggal", data.tanggal);
 		data.dokumen.forEach((e) => {
 			formdata.append("dokumen", e);
 		});
@@ -153,13 +149,6 @@ class InputEvaluasi extends Component {
 		const pelaporan = await getOneLaporan(token, query.id);
 		this.props.changePelaporan(pelaporan);
 	};
-
-	handlechecklist = () => {
-		this.setState({ delegasichecklist: !this.state.delegasichecklist })
-	};
-	// getStatus = () => (this.props.user?.role.id == 2021 ? this.setState({ rolelldikti: !this.state.rolelldikti }) : "")
-
-
 	render() {
 		const { files } = this.state;
 
@@ -174,39 +163,13 @@ class InputEvaluasi extends Component {
 				<p className="lead bb">Evaluasi</p>
 				<Formik
 					initialValues={{
-						tanggal: new Date(),
-						judul: "",
 						dokumen: [],
 					}}
 					validationSchema={evaluasiSchema}
 					onSubmit={this.onSubmit}
 				>
 					<Form className="form-horizontal">
-						<FormGroup row>
-							<label className="col-md-2 col-form-label">Tanggal Dokumen</label>
-							<div className="col-md-10">
-								<Field name="tanggal">
-									{({ field, form }) => (
-										<Datetime
-											timeFormat={false}
-											inputProps={{ className: "form-control" }}
-											value={field.value}
-											onChange={(e) => {
-												form.setFieldValue(field.name, e);
-											}}
-										/>
-									)}
-								</Field>
-								<ErrorMessage name="tanggal" component="div" className="form-text text-danger" />
-							</div>
-						</FormGroup>
-						<FormGroup row>
-							<label className="col-md-2 col-form-label">Judul Dokumen</label>
-							<div className="col-md-10">
-								<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
-								<ErrorMessage name="judul" component="div" className="form-text text-danger" />
-							</div>
-						</FormGroup>
+
 						<FormGroup row>
 							<label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
 							<div className="col-md-10">
@@ -257,18 +220,6 @@ class InputEvaluasi extends Component {
 								</p>
 							</div>
 						</FormGroup>
-						{this.props.user?.role.id === 2021 ? (
-							<FormGroup row>
-								<label className="col-md-2 col-form-label">Delegasi ke dikti</label>
-								<div className="col-md-10 mt-2">
-									<div className="checkbox c-checkbox">
-										<label>
-											<Input type="checkbox" onChange={this.handlechecklist} defaultChecked={this.state.delegasichecklist} />
-											<span className="fa fa-check"></span></label>
-									</div>
-								</div>
-							</FormGroup>
-						) : ("")}
 						<FormGroup row>
 							<div className="col-xl-10">
 								<Button color className="btn-login" type="submit">
@@ -286,4 +237,4 @@ class InputEvaluasi extends Component {
 }
 
 const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(InputEvaluasi);
+export default connect(mapStateToProps)(InputRekomendasi);

components/RekomendasiDelegasi/TableLaporan.js

@@ -63,7 +63,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 													<Link
 														href={{
 															pathname: to,
-															query: { id: data._id },
+															query: { id: data.sanksi?._id },
 														}}
 													>
 														<Button className="btn-login" color>

pages/app/rekomendasi-delegasi/detail.js

@@ -1,25 +1,74 @@
 import React, { Component } from "react";
-import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import Router from "next/router";
 import classnames from "classnames";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import DetailSanksi from "@/components/RekomendasiDelegasi/DetailSanksi";
+import TableRiwayat from "@/components/RekomendasiDelegasi/TableRiwayat";
 import Header from "@/components/Main/Header";
 import Link from "next/link";
+import DetailPT from "@/components/Main/DetailPT";
 import { getPelaporan } from "@/actions/pelaporan";
 import { getOneSanksi } from "@/actions/sanksi";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import { createLog } from "@/actions/log";
 
 const stepNavitemStyle = {
 	backgroundColor: "#fcfcfc",
 };
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+const selectInstanceId = 1;
+
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+const rekomendasiSchema = Yup.object().shape({
+	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+});
 
 class Detail extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			sanksi: {},
+			files: [],
+			pt: {},
 		};
 	}
 
@@ -29,20 +78,78 @@ class Detail extends Component {
 
 	componentDidMount = async () => {
 		const { query, token } = this.props;
-		const sanksi = await getOneSanksi(token, query.id);
-		this.setState({ sanksi });
-		console.log = (this.state.sanksi)
+		const idSanksi = query.id;
+		const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+		const pt = sanksi.data.laporan.pt;
+		this.setState({ sanksi, pt });
+		console.log(this.state.sanksi)
+	};
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	handelSimpan = async () => {
+		const { data } = this.state;
+		const { query, token } = this.props;
+		const { id } = query;
+		const formdata = new FormData();
+		data.dokumen.forEach((e) => {
+			formdata.append("dokumen", e);
+		});
+		const toastid = toast.loading("Please wait...");
+		const added = await addJawabanKeberatan(token, id, formdata);
+		if (!added) {
+			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+		} else {
+			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			Router.push({
+				pathname: "/app/rekomendasi-delegasi",
+			});
+		}
 	};
 
 	render() {
-		const { sanksi } = this.state;
+		const { files, sanksi, pt } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<div md={3} key={index}>
+				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
+				<span className="text-left">{index + 1}.{file.name}</span>
+			</div>
+		));
+
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<span className="font-color-white">
-							Rekomendasi
+							Rekomendasi Delegasi
 						</span>
 						<div className="ml-auto">
 							<Link href="/app/sanksi">
@@ -55,15 +162,96 @@ class Detail extends Component {
 						</div>
 					</div>
 					{sanksi.data && (
-						<Card className="card-default">
-							<CardBody>
-								<Row>
-									<Col>
-										<DetailSanksi data={sanksi.data} />
-									</Col>
-								</Row>
-							</CardBody>
-						</Card>
+						<Row>
+							<Col xl={9}>
+								<DetailSanksi data={sanksi.data} />
+								<Card>
+									<CardBody>
+										<p className="lead bb">Dokumen Rekomendasi Delegasi</p>
+										<Formik
+											initialValues={{
+												dokumen: [],
+											}}
+											validationSchema={rekomendasiSchema}
+											onSubmit={async (data) => {
+												this.setState({ data });
+												await this.handelSimpan();
+											}}
+										>
+											{() => (
+												<Form className="form-horizontal">
+													<FormGroup>
+														<div className="row-md-10">
+															<Field name="dokumen">
+																{({ field, form }) => (
+																	<DropzoneWrapper
+																		className=""
+																		onDrop={(e) => {
+																			this.onDrop(e);
+																			form.setFieldValue(field.name, e);
+																		}}
+																	>
+																		{({ getRootProps, getInputProps, isDragActive }) => {
+																			return (
+																				<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
+																					<input {...getInputProps()} />
+																					<div className="dropzone-previews flex">
+																						<div className="dropzone-style-1">
+																							<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																								<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																									<h5 className="text-center dz-default dz-message">upload dokumen rekomendasi delegasi</h5>
+																								</div>
+																							}
+																							</div>
+																						</div>
+																					</div>
+																					<div className="d-flex align-items-center">
+																						<small className="ml-auto">
+																							<button
+																								type="button"
+																								className="btn btn-link"
+																								onClick={(e) => {
+																									this.clearFiles(e);
+																									form.setFieldValue(field.name, []);
+																								}}
+																							>
+																								Reset dokumen
+																							</button>
+																						</small>
+																					</div>
+																				</div>
+																			);
+																		}}
+																	</DropzoneWrapper>
+																)}
+															</Field>
+															<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+															<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
+														</div>
+													</FormGroup>
+													{/* <FormGroup>
+													<div className="row-xl-10"> */}
+													<FormGroup row>
+														<div className="col-xl-10">
+															<Button color className="color-3e3a8e btn-login" type="submit">
+																<span className="font-color-white">Kirim</span>
+															</Button>
+														</div>
+													</FormGroup>
+													{/* <Button color="primary" onClick={sanksi.data.jawaban?.keberatan ? this.toggleModal : this.handelSimpan}>
+															Simpan
+														</Button> */}
+													{/* </div>
+												</FormGroup> */}
+												</Form>
+											)}
+										</Formik>
+									</CardBody>
+								</Card>
+
+							</Col>
+							<Col xl="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
+						</Row>
 					)}
 				</div>
 			</ContentWrapper>

pages/app/rekomendasi-delegasi/index.js

@@ -26,7 +26,7 @@ class Pemeriksaan extends Component {
 		const { token } = this.props;
 		const pelaporan = await getPelaporan(token, { delegasi: true, sanksi: true });
 		this.setState({ pelaporan });
-		console.log = (this.state.pelaporan);
+		console.log(this.state.pelaporan);
 	};
 
 	render() {