|
|
@@ -5,8 +5,17 @@ import Datetime from "react-datetime";
|
|
|
import moment from "moment";
|
|
|
import { Row, Col, FormGroup, Input } from "reactstrap";
|
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
|
+import { Formik, Form, Field, ErrorMessage } from "formik";
|
|
|
+import * as Yup from "yup";
|
|
|
|
|
|
const selectInstanceId = 1;
|
|
|
+
|
|
|
+const evaluasiSchema = Yup.object().shape({
|
|
|
+ tanggal: Yup.date().required("Required"),
|
|
|
+ judul: Yup.string().min(3).max(150).required("Required"),
|
|
|
+ dokumen: Yup.array().min(1).required("Required"),
|
|
|
+});
|
|
|
+
|
|
|
let Dropzone = null;
|
|
|
|
|
|
class DropzoneWrapper extends Component {
|
|
|
@@ -84,25 +93,21 @@ export default class InputEvaluasi extends Component {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- onSubmit = async (e) => {
|
|
|
- e.preventDefault();
|
|
|
- const { number, ptId } = this.props.query;
|
|
|
+ onSubmit = async (data) => {
|
|
|
+ const { token, query } = this.props;
|
|
|
+ const { id } = query;
|
|
|
const formdata = new FormData();
|
|
|
- formdata.append("title", this.state.judulEvaluasi);
|
|
|
- formdata.append("date", this.state.tanggal);
|
|
|
- if (this.state.files.length > 0) {
|
|
|
- this.state.files.forEach((e) => {
|
|
|
- formdata.append("files", e);
|
|
|
- });
|
|
|
- }
|
|
|
- const id = toast.loading("Please wait...");
|
|
|
- const inserted = await insertPemeriksaan({ number, ptId }, formdata);
|
|
|
- if (inserted) {
|
|
|
- toast.update(id, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
|
|
|
- Router.push({
|
|
|
- pathname: "/app/pemeriksaan",
|
|
|
- });
|
|
|
- }
|
|
|
+ formdata.append("judul", data.judul);
|
|
|
+ formdata.append("tanggal", data.tanggal);
|
|
|
+ data.dokumen.forEach((e) => {
|
|
|
+ formdata.append("dokumen", e);
|
|
|
+ });
|
|
|
+
|
|
|
+ await toast.promise(insertPemeriksaan(token, id, formdata), {
|
|
|
+ pending: "Loading",
|
|
|
+ success: "Success",
|
|
|
+ error: "Error",
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
render() {
|
|
|
@@ -116,53 +121,79 @@ export default class InputEvaluasi extends Component {
|
|
|
return (
|
|
|
<>
|
|
|
<p className="lead bb">Evaluasi</p>
|
|
|
- <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
|
|
|
- <FormGroup>
|
|
|
- <label>Tanggal Dokumen:</label>
|
|
|
- <div>
|
|
|
- <Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
|
|
|
- {/* <span className="form-text">Tanggal</span> */}
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- <FormGroup>
|
|
|
- <label>Judul Dokumen:</label>
|
|
|
- <div>
|
|
|
- <Input type="text" value={this.state.judulEvaluasi} onChange={this.setjudulEvaluasi} />
|
|
|
- {/* <Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} /> */}
|
|
|
- {/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- <FormGroup>
|
|
|
- <label>Upload File Pendukung:</label>
|
|
|
- <div>
|
|
|
- <DropzoneWrapper className="" onDrop={this.onDrop}>
|
|
|
- {({ getRootProps, getInputProps, isDragActive }) => {
|
|
|
- return (
|
|
|
- <div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
|
|
|
- <input {...getInputProps()} />
|
|
|
- <div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}</div>
|
|
|
- <div className="d-flex align-items-center">
|
|
|
- <small className="ml-auto">
|
|
|
- <button type="button" className="btn btn-link" onClick={this.clearFiles}>
|
|
|
- Clear files
|
|
|
- </button>
|
|
|
- </small>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }}
|
|
|
- </DropzoneWrapper>
|
|
|
- <span className="form-text">Multiple files upload</span>
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- <FormGroup>
|
|
|
- <div>
|
|
|
- <button className="btn btn-sm btn-primary" type="submit">
|
|
|
- Simpan Evaluasi
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- </form>
|
|
|
+ <Formik
|
|
|
+ initialValues={{
|
|
|
+ tanggal: new Date(),
|
|
|
+ judul: "",
|
|
|
+ dokumen: [],
|
|
|
+ }}
|
|
|
+ validationSchema={evaluasiSchema}
|
|
|
+ onSubmit={this.onSubmit}
|
|
|
+ >
|
|
|
+ <Form className="form-horizontal">
|
|
|
+ <FormGroup>
|
|
|
+ <label className="col-form-label">Tanggal Dokumen</label>
|
|
|
+ <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" />
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup>
|
|
|
+ <label className="col-form-label">Judul Dokumen</label>
|
|
|
+ <Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
|
|
|
+ <ErrorMessage name="judul" component="div" className="form-text text-danger" />
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup row>
|
|
|
+ <label className="col-md-2 col-form-label">Upload File Pendukung</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 p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
|
|
|
+ <input name="dokumen" {...getInputProps()} />
|
|
|
+ <div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}</div>
|
|
|
+ <div className="d-flex align-items-center">
|
|
|
+ <small className="ml-auto">
|
|
|
+ <button type="button" className="btn btn-link" onClick={this.clearFiles}>
|
|
|
+ Clear files
|
|
|
+ </button>
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ </DropzoneWrapper>
|
|
|
+ )}
|
|
|
+ </Field>
|
|
|
+ <ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup row>
|
|
|
+ <div className="col-xl-10">
|
|
|
+ <button className="btn btn-sm btn-primary" type="submit">
|
|
|
+ Simpan Evaluasi
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ </Form>
|
|
|
+ </Formik>
|
|
|
</>
|
|
|
);
|
|
|
}
|