|
|
@@ -7,13 +7,16 @@ import Header from "@/components/Main/Header";
|
|
|
import DetailPT from "@/components/Main/DetailPT";
|
|
|
import PermohonanPT from "@/components/Main/PermohonanPT";
|
|
|
import Riwayat from "@/components/Keberatan/Riwayat";
|
|
|
-import { getSanksi } from "@/actions/sanksi";
|
|
|
+import { getOneSanksi } from "@/actions/sanksi";
|
|
|
import { addJawabanKeberatan } from "@/actions/keberatan";
|
|
|
import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
|
import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
|
|
|
import { getPT } from "@/actions/PT";
|
|
|
import Loader from "@/components/Common/Loader";
|
|
|
import { toast } from "react-toastify";
|
|
|
+import { connect } from "react-redux";
|
|
|
+import { Formik, Form, Field, ErrorMessage } from "formik";
|
|
|
+import * as Yup from "yup";
|
|
|
|
|
|
let Dropzone = null;
|
|
|
class DropzoneWrapper extends Component {
|
|
|
@@ -30,7 +33,11 @@ class DropzoneWrapper extends Component {
|
|
|
}
|
|
|
|
|
|
const selectInstanceId = 1;
|
|
|
-
|
|
|
+const jawabanKeberatanSchema = Yup.object().shape({
|
|
|
+ status: Yup.string().required("Harap Diisi"),
|
|
|
+ keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
|
|
|
+ dokumen: Yup.array().notRequired(),
|
|
|
+});
|
|
|
class DetailKeberatan extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
@@ -40,7 +47,8 @@ class DetailKeberatan extends Component {
|
|
|
files: [],
|
|
|
keterangan: "",
|
|
|
sanksi: {},
|
|
|
- pt: {},
|
|
|
+ pt: null,
|
|
|
+ data: {},
|
|
|
};
|
|
|
}
|
|
|
|
|
|
@@ -49,10 +57,10 @@ class DetailKeberatan extends Component {
|
|
|
};
|
|
|
|
|
|
componentDidMount = async () => {
|
|
|
- const { query } = this.props;
|
|
|
- const sanksi = await getSanksi(query);
|
|
|
- const pt = await getPT({ id: query.ptId });
|
|
|
- this.setState({ pt, sanksi });
|
|
|
+ const { query, token } = this.props;
|
|
|
+ const sanksi = await getOneSanksi(token, query.id);
|
|
|
+ const pt = sanksi.data.laporan.pt;
|
|
|
+ this.setState({ sanksi, pt });
|
|
|
};
|
|
|
|
|
|
toggleModal = () => {
|
|
|
@@ -95,25 +103,26 @@ class DetailKeberatan extends Component {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- handelSimpan = async (e) => {
|
|
|
- e.preventDefault();
|
|
|
- const { keterangan, selectedOption } = this.state;
|
|
|
- const { noSanksi, ptId } = this.props.query;
|
|
|
+ handelSimpan = async () => {
|
|
|
+ this.toggleModal();
|
|
|
+ const { data } = this.state;
|
|
|
+ const { query, token } = this.props;
|
|
|
+ const { id } = query;
|
|
|
const formdata = new FormData();
|
|
|
- formdata.append("description", keterangan);
|
|
|
- formdata.append("status", selectedOption.value);
|
|
|
- if (this.state.files.length > 0) {
|
|
|
- this.state.files.forEach((e) => {
|
|
|
- formdata.append("files", e);
|
|
|
+ formdata.append("keterangan", data.keterangan);
|
|
|
+ formdata.append("status", data.status);
|
|
|
+ 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/keberatan",
|
|
|
});
|
|
|
- const id = toast.loading("Please wait...");
|
|
|
- const added = await addJawabanKeberatan({ noSanksi, ptId }, formdata);
|
|
|
- if (added) {
|
|
|
- toast.update(id, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
|
|
|
- Router.push({
|
|
|
- pathname: "/app/keberatan",
|
|
|
- });
|
|
|
- }
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -139,80 +148,123 @@ class DetailKeberatan extends Component {
|
|
|
</div>
|
|
|
</div>
|
|
|
<Row>
|
|
|
- {sanksi.data && sanksi.data.length ? (
|
|
|
+ {sanksi.data ? (
|
|
|
<Col xl="9">
|
|
|
<Card className="card-default">
|
|
|
<CardBody>
|
|
|
<Row>
|
|
|
<Col lg={12}>
|
|
|
- <DetailSanksi data={sanksi.data[0]} />
|
|
|
+ <DetailSanksi data={sanksi.data} />
|
|
|
</Col>
|
|
|
</Row>
|
|
|
<Row>
|
|
|
<Col lg={12}>
|
|
|
- <PermohonanPT data={sanksi.data[0].sanksi.keberatan} title="Permohonan Keberatan" />
|
|
|
+ <PermohonanPT data={sanksi.data.pengajuan.keberatan} title="Permohonan Keberatan" />
|
|
|
</Col>
|
|
|
</Row>
|
|
|
<Row>
|
|
|
<Col lg={12}>
|
|
|
<p className="lead bb">Jawaban</p>
|
|
|
- <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
|
|
|
- <FormGroup>
|
|
|
- <label className="row-form-label">Status:</label>
|
|
|
- <div className="row-md-10">
|
|
|
- <Select
|
|
|
- instanceId={selectInstanceId + 1}
|
|
|
- value={this.state.selectedOption}
|
|
|
- onChange={this.handleChangeSelect}
|
|
|
- options={[
|
|
|
- { value: "Menolak", label: "Menolak", className: "State-ACT" },
|
|
|
- { value: "Mengubah Keputusan", label: "Mengubah Keputusan", className: "State-ACT" },
|
|
|
- { value: "Membatalkan Keputusan", label: "Membatalkan Keputusan", className: "State-ACT" },
|
|
|
- ]}
|
|
|
- required
|
|
|
- />
|
|
|
- {/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- <FormGroup>
|
|
|
- <label className="row-form-label">Keterangan Jawaban:</label>
|
|
|
- <div className="row-md-10">
|
|
|
- <Input type="textarea" value={this.state.keterangan} onChange={(e) => this.setState({ keterangan: e.target.value })} required />
|
|
|
- {/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- <FormGroup>
|
|
|
- <label className="row-form-label">Dokumen Jawaban:</label>
|
|
|
- <div className="row-md-10">
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
- {/* <FormGroup>
|
|
|
+ <Formik
|
|
|
+ initialValues={{
|
|
|
+ status: "",
|
|
|
+ keterangan: "",
|
|
|
+ dokumen: [],
|
|
|
+ }}
|
|
|
+ validationSchema={jawabanKeberatanSchema}
|
|
|
+ onSubmit={async (data) => {
|
|
|
+ const { sanksi } = this.state;
|
|
|
+ this.setState({ data });
|
|
|
+ if (sanksi.data.jawaban?.keberatan) this.toggleModal();
|
|
|
+ else await this.handelSimpan();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {() => (
|
|
|
+ <Form className="form-horizontal">
|
|
|
+ <FormGroup>
|
|
|
+ <label className="row-form-label">Status:</label>
|
|
|
+ <div className="row-md-10">
|
|
|
+ <Field name="status">
|
|
|
+ {({ field, form, meta }) => (
|
|
|
+ <Select
|
|
|
+ instanceId={selectInstanceId + 1}
|
|
|
+ value={this.state.selectedOption}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.handleChangeSelect(e);
|
|
|
+ form.setFieldValue(field.name, e.value);
|
|
|
+ }}
|
|
|
+ options={[
|
|
|
+ { value: "Menolak", label: "Menolak", className: "State-ACT" },
|
|
|
+ { value: "Mengubah Keputusan", label: "Mengubah Keputusan", className: "State-ACT" },
|
|
|
+ { value: "Membatalkan Keputusan", label: "Membatalkan Keputusan", className: "State-ACT" },
|
|
|
+ ]}
|
|
|
+ required
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Field>
|
|
|
+ <ErrorMessage name="status" component="div" className="form-text text-danger" />
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup>
|
|
|
+ <label className="row-form-label">Keterangan Jawaban:</label>
|
|
|
+ <div className="row-md-10">
|
|
|
+ <Field name="keterangan">{({ field }) => <Input type="textarea" {...field} required />}</Field>
|
|
|
+ <ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
|
|
|
+ {/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup>
|
|
|
+ <label className="row-form-label">Dokumen Jawaban:</label>
|
|
|
+ <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 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>
|
|
|
+ )}
|
|
|
+ </Field>
|
|
|
+ <ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ {/* <FormGroup>
|
|
|
<div className="row-xl-10"> */}
|
|
|
- <Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.keberatan.jawaban ? this.toggleModal : this.handelSimpan}>
|
|
|
- Simpan
|
|
|
- </Button>
|
|
|
- {/* </div>
|
|
|
+ <FormGroup row>
|
|
|
+ <div className="col-xl-10">
|
|
|
+ <Button color="primary" type="submit">
|
|
|
+ Simpan
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ {/* <Button color="primary" onClick={sanksi.data.jawaban?.keberatan ? this.toggleModal : this.handelSimpan}>
|
|
|
+ Simpan
|
|
|
+ </Button> */}
|
|
|
+ {/* </div>
|
|
|
</FormGroup> */}
|
|
|
- </form>
|
|
|
+ </Form>
|
|
|
+ )}
|
|
|
+ </Formik>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</CardBody>
|
|
|
@@ -221,12 +273,12 @@ class DetailKeberatan extends Component {
|
|
|
) : (
|
|
|
<Loader />
|
|
|
)}
|
|
|
- <Col xl="3">{pt?.data ? <DetailPT data={pt.data[0]} /> : <Loader />}</Col>
|
|
|
+ <Col xl="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
|
|
|
</Row>
|
|
|
- {sanksi.data && sanksi.data.length && (
|
|
|
+ {sanksi.data && (
|
|
|
<Row>
|
|
|
<Col>
|
|
|
- <Riwayat data={sanksi.data[0].sanksi.keberatan.jawaban} />
|
|
|
+ <Riwayat data={sanksi.data.jawaban?.keberatan ? sanksi.data.jawaban.keberatan : null} />
|
|
|
</Col>
|
|
|
</Row>
|
|
|
)}
|
|
|
@@ -247,4 +299,5 @@ class DetailKeberatan extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default DetailKeberatan;
|
|
|
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
|
|
|
+export default connect(mapStateToProps)(DetailKeberatan);
|