|
|
@@ -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>
|
andi