laporan delegasi

actions/log.js

@@ -1,9 +1,9 @@
 import { get } from "../config/request";
 import axios from "@/config/axios";
 
-export const getLog = async (token, ptId) => {
+export const getLog = async (token, laporan_id) => {
 	try {
-		let url = `/pemantauan/${ptId}`;
+		let url = `/pemantauan/${laporan_id}`;
 		const res = await axios.get(url, {
 			headers: {
 				Authorization: token,

actions/pelaporan.js

@@ -5,13 +5,15 @@ export const getPelaporan = async (token, query = {}) => {
 	try {
 		let url = "/laporan";
 		if (query != null) {
-			const { jadwal, evaluasi, pt_id } = query;
+			const { jadwal, evaluasi, pt_id, delegasi } = query;
 			url += "?";
 			const parseURL = [];
 			if (jadwal) {
 				parseURL.push(`jadwal=true`);
 			} else if (evaluasi) {
 				parseURL.push(`evaluasi=true`);
+			} else if (delegasi) {
+				parseURL.push(`delegasi=true`);
 			}
 			if (pt_id) {
 				parseURL.push(`pt_id=${pt_id}`);

components/Main/Timeline.js

@@ -1,5 +1,4 @@
 import moment from "moment";
-import { API_URL } from "@/env";
 
 function Timeline({ data, noFile = false, noJadwal = false }) {
 	const date = data && [...new Set(data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];

pages/app/laporan-delegasi/detail.js

@@ -0,0 +1,93 @@
+import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import { getOneLaporan } from "@/actions/pelaporan";
+import { getLog } from "@/actions/log";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, FormGroup } from "reactstrap";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+import Scrollable from "@/components/Common/Scrollable";
+import Timeline from "@/components/Main/Timeline";
+
+class DetailPelaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+			pemantauan: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
+		const pelaporan = await getOneLaporan(this.props.token, query.id + "?delegasi=true");
+		const pemantauan = await getLog(this.props.token, query.id + "?delegasi=true&asc=true");
+		pemantauan.data = pemantauan.data.filter((e) => e.action != "CREATE LAPORAN");
+		this.setState({ pelaporan, pemantauan });
+	};
+
+	render() {
+		const { pelaporan, pemantauan } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Detail Laporan Delegasi</div>
+						<div className="ml-auto">
+							<Link href="/app/laporan-delegasi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							{pelaporan.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												{<DetailLaporan data={pelaporan.data} />}
+												<p className="lead bb">Keterangan Delegasi</p>
+												<form className="form-horizontal">
+													<FormGroup row>
+														<Col md="4">Alasan Delegasi:</Col>
+														<Col md="8">
+															<Scrollable height="100px" className="list-group">
+																<p>{pelaporan.data.alasan_delegasi}</p>
+															</Scrollable>
+														</Col>
+													</FormGroup>
+												</form>
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<Loader />
+							)}
+						</Col>
+						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data.pt} /> : <Loader />}</Col>
+					</Row>
+					<Row>
+						{pemantauan.data && (
+							<Col xl={12}>
+								<Timeline data={pemantauan.data} />
+							</Col>
+						)}
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(DetailPelaporan);

pages/app/laporan-delegasi/index.js

@@ -17,7 +17,7 @@ class Pelaporan extends Component {
 	}
 
 	componentDidMount = async () => {
-		const pelaporan = await getPelaporan(this.props.token);
+		const pelaporan = await getPelaporan(this.props.token, { delegasi: true });
 		this.setState({ pelaporan });
 	};
 
@@ -26,27 +26,14 @@ class Pelaporan extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>Pelaporan</div>
-					<div className="ml-auto">
-						<Link href="/app/penjadwalan">
-							<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
-						</Link>
-					</div>
+					<div>Laporan Delegasi</div>
+					<div className="ml-auto"></div>
 				</div>
 				<Row>
 					<Col lg="4">
 						<CaseProgress />
 					</Col>
-					<Col lg="8">
-						<div className="mb-3 d-flex">
-							<div>
-								<Link href="/app/pelaporan/search">
-									<Button color="primary">Laporan Baru</Button>
-								</Link>
-							</div>
-						</div>
-						{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
-					</Col>
+					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/laporan-delegasi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);