|
|
@@ -0,0 +1,129 @@
|
|
|
+import React, { Component } from "react";
|
|
|
+import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
|
|
|
+import Router from "next/router";
|
|
|
+import classnames from "classnames";
|
|
|
+import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
|
+import DetailSanksi from "@/components/Main/DetailSanksi";
|
|
|
+import Header from "@/components/Main/Header";
|
|
|
+import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
|
|
|
+import UploadSurat from "@/components/Sanksi/UploadSurat";
|
|
|
+import Ringkasan from "@/components/Sanksi/Ringkasan";
|
|
|
+import TablePenetapanSanksi from "@/components/Sanksi/TablePenetapanSanksi";
|
|
|
+import Link from "next/link";
|
|
|
+import { getPelaporan } from "@/actions/pelaporan";
|
|
|
+import { createSanksi } from "@/actions/sanksi";
|
|
|
+
|
|
|
+const stepNavitemStyle = {
|
|
|
+ backgroundColor: "#fcfcfc",
|
|
|
+};
|
|
|
+
|
|
|
+class Detail extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ activeStep: "1",
|
|
|
+ checkedData: [],
|
|
|
+ dataUpload: null,
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ static getInitialProps = async ({ query }) => {
|
|
|
+ const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
|
|
|
+ return { query, pelaporan };
|
|
|
+ };
|
|
|
+
|
|
|
+ done = async (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ const { ptId, number } = this.props.query;
|
|
|
+ const formdata = new FormData();
|
|
|
+ formdata.append("no_sanksi", this.state.dataUpload.nomorSanksi);
|
|
|
+ formdata.append("description", this.state.dataUpload.keterangan);
|
|
|
+ formdata.append("pelanggaran", this.state.checkedData.map((e) => e._id).join());
|
|
|
+ if (this.state.dataUpload.files.length > 0) {
|
|
|
+ this.state.dataUpload.files.forEach((e) => {
|
|
|
+ formdata.append("files", e);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const create = await createSanksi({ ptId, number }, formdata);
|
|
|
+ // console.log(create);
|
|
|
+ if (create) {
|
|
|
+ Router.push({
|
|
|
+ pathname: "/app/sanksi",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ toggleStep = (activeStep) => () => {
|
|
|
+ if (this.state.activeStep !== activeStep) {
|
|
|
+ this.setState({
|
|
|
+ activeStep,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ setCheckedData = (data) => {
|
|
|
+ this.setState({ checkedData: data });
|
|
|
+ };
|
|
|
+
|
|
|
+ setUploadSuratSanksi = (data) => {
|
|
|
+ this.setState({ dataUpload: data });
|
|
|
+ };
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { pelaporan } = this.props;
|
|
|
+ const { checkedData, dataUpload } = this.state;
|
|
|
+ return (
|
|
|
+ <ContentWrapper unwrap>
|
|
|
+ <Header />
|
|
|
+ <div className="p-3">
|
|
|
+ <div className="content-heading">
|
|
|
+ <div>Detail Sanksi</div>
|
|
|
+ <div className="ml-auto">
|
|
|
+ <Link href="/app/sanksi">
|
|
|
+ <button className="btn btn-sm btn-secondary text-sm">< back</button>
|
|
|
+ </Link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Card className="card-default">
|
|
|
+ <CardBody>
|
|
|
+ <Row>
|
|
|
+ <Col xs="4">
|
|
|
+ <Nav pills vertical={true}>
|
|
|
+ <NavItem style={stepNavitemStyle}>
|
|
|
+ <NavLink
|
|
|
+ tag="div"
|
|
|
+ className={classnames({
|
|
|
+ active: this.state.activeStep === "1",
|
|
|
+ })}
|
|
|
+ onClick={this.toggleStep("1")}
|
|
|
+ >
|
|
|
+ <h4 className="text-left my-3">1. Detail Sanksi</h4>
|
|
|
+ </NavLink>
|
|
|
+ </NavItem>
|
|
|
+ </Nav>
|
|
|
+ </Col>
|
|
|
+ <Col xs="8">
|
|
|
+ <TabContent activeTab={this.state.activeStep} className="border-0">
|
|
|
+ <TabPane tabId="1">
|
|
|
+ <div className="pt-3 mb-3">
|
|
|
+ <h2>Detail Sanksi</h2>
|
|
|
+ <Row>
|
|
|
+ <Col>
|
|
|
+ <DetailSanksi noTitle data={pelaporan.data[0]} />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <hr />
|
|
|
+ </TabPane>
|
|
|
+ </TabContent>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </CardBody>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ </ContentWrapper>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default Detail;
|
