|
|
@@ -3,7 +3,7 @@ import { insertPemeriksaan } from "@/actions/pemeriksaan";
|
|
|
import Router from "next/router";
|
|
|
import Datetime from "react-datetime";
|
|
|
import moment from "moment";
|
|
|
-import { Row, Col, FormGroup, Input, Button, Progress } from "reactstrap";
|
|
|
+import { Row, Col, FormGroup, Input, Button, Progress, Card } from "reactstrap";
|
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
|
import { Formik, Form, Field, ErrorMessage } from "formik";
|
|
|
import * as Yup from "yup";
|
|
|
@@ -11,6 +11,8 @@ import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
|
|
|
import { connect } from "react-redux";
|
|
|
import { getCsrf } from "../../actions/security";
|
|
|
import Swal from "sweetalert2";
|
|
|
+import Select from "react-select";
|
|
|
+
|
|
|
|
|
|
|
|
|
const selectInstanceId = 1;
|
|
|
@@ -44,6 +46,10 @@ const evaluasiSchema = Yup.object().shape({
|
|
|
dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
|
|
|
});
|
|
|
|
|
|
+const ditutupSchema = Yup.object().shape({
|
|
|
+ keterangan: Yup.string().required("Harus diisi"),
|
|
|
+ dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
|
|
|
+});
|
|
|
let Dropzone = null;
|
|
|
|
|
|
class DropzoneWrapper extends Component {
|
|
|
@@ -59,6 +65,11 @@ class DropzoneWrapper extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+const status = [
|
|
|
+ { value: "Evaluasi", label: "Evaluasi", className: "State-ACT" },
|
|
|
+ { value: "Ditutup", label: "Ditutup", className: "State-ACT" },
|
|
|
+];
|
|
|
+
|
|
|
|
|
|
class InputEvaluasi extends Component {
|
|
|
constructor(props) {
|
|
|
@@ -72,9 +83,23 @@ class InputEvaluasi extends Component {
|
|
|
delegasichecklist: false,
|
|
|
rolelldikti: false,
|
|
|
selectedFile: {},
|
|
|
+ selectedOption: null,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
+ async componentDidMount() {
|
|
|
+
|
|
|
+ this.defaultStatus();
|
|
|
+
|
|
|
+ }
|
|
|
+ defaultStatus = async () => {
|
|
|
+ return this.setState({ selectedOption: status[0] });
|
|
|
+ };
|
|
|
+
|
|
|
+ handleChangeSelect = (selectedOption) => this.setState({ selectedOption });
|
|
|
+
|
|
|
+ getStatus = () => (status);
|
|
|
+
|
|
|
setjudulEvaluasi = (e) => {
|
|
|
this.setState({ judulEvaluasi: e.target.value });
|
|
|
};
|
|
|
@@ -105,15 +130,6 @@ class InputEvaluasi extends Component {
|
|
|
stat: "Added " + selectedFile.length + " file(s)",
|
|
|
});
|
|
|
const selectFile = this.state.selectedFile
|
|
|
- // this.state.files.push(...this.state.selectedFile)
|
|
|
- // this.setState({
|
|
|
- // files: files.map((file) =>
|
|
|
- // Object.assign(file, {
|
|
|
- // preview: URL.createObjectURL(file),
|
|
|
- // })
|
|
|
- // ),
|
|
|
- // stat: "Added " + files.length + " file(s)",
|
|
|
- // });
|
|
|
this.setState(prevState => ({
|
|
|
files: [...prevState.files, ...selectFile]
|
|
|
}))
|
|
|
@@ -193,11 +209,47 @@ class InputEvaluasi extends Component {
|
|
|
handlechecklist = () => {
|
|
|
this.setState({ delegasichecklist: !this.state.delegasichecklist })
|
|
|
};
|
|
|
- // getStatus = () => (this.props.user?.role.id == 2021 ? this.setState({ rolelldikti: !this.state.rolelldikti }) : "")
|
|
|
+
|
|
|
+ handleTutupLaporan = async (data, value) => {
|
|
|
+ if (this.props?.user?.role.id === 2024) {
|
|
|
+ Swal.fire({
|
|
|
+ icon: 'error',
|
|
|
+ title: 'Oops...',
|
|
|
+ html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
|
|
|
+ confirmButtonColor: "#3e3a8e",
|
|
|
+ confirmButtonText: 'Oke'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ const getToken = await getCsrf();
|
|
|
+ const _csrf = getToken.token;
|
|
|
+ const { token, query } = this.props;
|
|
|
+ const { id } = query;
|
|
|
+ const formdata = new FormData();
|
|
|
+ formdata.append("keterangan", data.keterangan);
|
|
|
+ this.state.files.forEach((e) => {
|
|
|
+ formdata.append("dokumen", e);
|
|
|
+ });
|
|
|
+ formdata.append("aktif", "false");
|
|
|
+ // formdata.append("_csrf", _csrf)
|
|
|
+ await toast.promise(updateLaporan(token, id, formdata, _csrf + `&redudansi=true`), {
|
|
|
+ pending: "Loading",
|
|
|
+ success: {
|
|
|
+ render: "success",
|
|
|
+ autoClose: 1000
|
|
|
+ },
|
|
|
+ error: "Error",
|
|
|
+
|
|
|
+ });
|
|
|
+ await Router.push({
|
|
|
+ pathname: "/app/pemeriksaan",
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
|
|
|
|
|
|
render() {
|
|
|
- const { files } = this.state;
|
|
|
+ const { files, selectedOption } = this.state;
|
|
|
const removeFile = file => () => {
|
|
|
const newFiles = [...files]
|
|
|
newFiles.splice(newFiles.indexOf(file), 1)
|
|
|
@@ -213,123 +265,245 @@ class InputEvaluasi extends Component {
|
|
|
));
|
|
|
return (
|
|
|
<>
|
|
|
- <p className="lead bb">Evaluasi</p>
|
|
|
<Formik
|
|
|
+ enableReinitialize={true}
|
|
|
initialValues={{
|
|
|
- tanggal: new Date(),
|
|
|
- judul: "",
|
|
|
+ status: this.getStatus()[0],
|
|
|
+ keterangan: "",
|
|
|
dokumen: [],
|
|
|
}}
|
|
|
- validationSchema={evaluasiSchema}
|
|
|
- onSubmit={this.onSubmit}
|
|
|
+ validationSchema={selectedOption?.value === this.getStatus()[1].value ? ditutupSchema : null}
|
|
|
+ onSubmit={this.handleTutupLaporan}
|
|
|
>
|
|
|
{({ isSubmitting }) => (
|
|
|
- <Form className="form-horizontal">
|
|
|
+ <Form>
|
|
|
<FormGroup row>
|
|
|
- <label className="col-md-2 col-form-label">Tanggal Evaluasi</label>
|
|
|
+ <label className="col-md-2 col-form-label font-weight-bold font-color-black">Status Laporan</label>
|
|
|
<div className="col-md-10">
|
|
|
- <Field name="tanggal">
|
|
|
+ <Field name="status">
|
|
|
{({ field, form }) => (
|
|
|
- <Datetime
|
|
|
- timeFormat={false}
|
|
|
- inputProps={{ className: "form-control" }}
|
|
|
+ <Select
|
|
|
value={field.value}
|
|
|
onChange={(e) => {
|
|
|
form.setFieldValue(field.name, e);
|
|
|
+ this.handleChangeSelect(e);
|
|
|
}}
|
|
|
+ options={this.getStatus()}
|
|
|
+ required
|
|
|
/>
|
|
|
)}
|
|
|
</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" />
|
|
|
+ <ErrorMessage name="status" 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">
|
|
|
- <Field name="dokumen">
|
|
|
- {({ field, form, meta }) => (
|
|
|
- <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 name="dokumen" {...getInputProps()} />
|
|
|
- <div className="dropzone-style-1">
|
|
|
- <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
|
|
|
- <div className="text-center fa-2x icon-cloud-upload mr-2 ">
|
|
|
- <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
|
|
|
- </div> :
|
|
|
- <div className="text-center fa-2x icon-cloud-upload mr-2 ">
|
|
|
- <h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
|
|
|
+ {selectedOption?.value === this.getStatus()[0].value ? (
|
|
|
+ ""
|
|
|
+ ) : (
|
|
|
+ <div>
|
|
|
+ <FormGroup row>
|
|
|
+ <label className="col-md-2 col-form-label">Keterangan<span className=" text-danger">*</span></label>
|
|
|
+ <div className="col-md-10">
|
|
|
+ <Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
|
|
|
+ <ErrorMessage name="keterangan" 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">
|
|
|
+ <Field name="dokumen">
|
|
|
+ {({ field, form, meta }) => (
|
|
|
+ <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 name="dokumen" {...getInputProps()} />
|
|
|
+ <div className="dropzone-style-1">
|
|
|
+ <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
|
|
|
+ <div className="text-center fa-2x icon-cloud-upload mr-2 ">
|
|
|
+ <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
|
|
|
+ </div> :
|
|
|
+ <div className="text-center fa-2x icon-cloud-upload mr-2 ">
|
|
|
+ <h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
|
|
|
+ </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>
|
|
|
- </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>
|
|
|
- {thumbs}
|
|
|
- <ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
|
|
|
- <p className="mrgn-top-5 font-color-black">
|
|
|
- Ukuran setiap dokumen maksimal 15mb
|
|
|
- </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>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ </DropzoneWrapper>
|
|
|
+ )}
|
|
|
+ </Field>
|
|
|
+ {thumbs}
|
|
|
+ <ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
|
|
|
+ <p className="mrgn-top-5 font-color-black">
|
|
|
+ Ukuran setiap dokumen maksimal 15mb
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- ) : ("")}
|
|
|
- <FormGroup row>
|
|
|
- <div className="col-xl-10">
|
|
|
- <Button color className="btn-login" type="submit" disabled={isSubmitting}>
|
|
|
- <span className="font-color-white">
|
|
|
- Simpan Evaluasi
|
|
|
- </span>
|
|
|
- </Button>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup>
|
|
|
+ <div className="col-xl-10">
|
|
|
+ <Button color className="btn-login width-133 mt-4" type="submit" disabled={isSubmitting}>
|
|
|
+ <span className="font-color-white">
|
|
|
+ Tutup Laporan
|
|
|
+ </span>
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+
|
|
|
</div>
|
|
|
- </FormGroup>
|
|
|
- </Form>
|
|
|
|
|
|
- )}
|
|
|
|
|
|
+ )}
|
|
|
+ </Form>
|
|
|
+ )}
|
|
|
</Formik>
|
|
|
+
|
|
|
+
|
|
|
+ {selectedOption?.value === this.getStatus()[1].value ? (
|
|
|
+ ""
|
|
|
+ ) : (
|
|
|
+ <Card>
|
|
|
+ <Formik
|
|
|
+ initialValues={{
|
|
|
+ tanggal: new Date(),
|
|
|
+ judul: "",
|
|
|
+ dokumen: [],
|
|
|
+ }}
|
|
|
+ validationSchema={evaluasiSchema}
|
|
|
+ onSubmit={this.onSubmit}
|
|
|
+ >
|
|
|
+ {({ isSubmitting }) => (
|
|
|
+ <Form className="form-horizontal">
|
|
|
+ <FormGroup row>
|
|
|
+ <label className="col-md-2 col-form-label">Tanggal Evaluasi</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">
|
|
|
+ <Field name="dokumen">
|
|
|
+ {({ field, form, meta }) => (
|
|
|
+ <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 name="dokumen" {...getInputProps()} />
|
|
|
+ <div className="dropzone-style-1">
|
|
|
+ <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
|
|
|
+ <div className="text-center fa-2x icon-cloud-upload mr-2 ">
|
|
|
+ <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
|
|
|
+ </div> :
|
|
|
+ <div className="text-center fa-2x icon-cloud-upload mr-2 ">
|
|
|
+ <h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
|
|
|
+ </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>
|
|
|
+ {thumbs}
|
|
|
+ <ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
|
|
|
+ <p className="mrgn-top-5 font-color-black">
|
|
|
+ Ukuran setiap dokumen maksimal 15mb
|
|
|
+ </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" disabled={isSubmitting}>
|
|
|
+ <span className="font-color-white">
|
|
|
+ Simpan Evaluasi
|
|
|
+ </span>
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ </Form>
|
|
|
+
|
|
|
+ )}
|
|
|
+
|
|
|
+ </Formik>
|
|
|
+ </Card>
|
|
|
+ )}
|
|
|
</>
|
|
|
);
|
|
|
}
|