commit

pages/app/pemantauan/timeline.js

@@ -1,26 +1,27 @@
-import React, { Component, useState } from "react";
+import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Header from "@/components/Main/Header";
-import DetailPT from "@/components/Main/DetailPT";
 import { getLog } from "@/actions/log";
-import { Row, Col } from "reactstrap";
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
 import Timeline from "@/components/Main/Timeline";
 import { getOnePT } from "@/actions/PT";
+import { connect } from "react-redux";
+import { getOneLaporan, getPelaporan } from "../../../actions/pelaporan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
 import Loader from "@/components/Common/Loader";
-import { connect } from "react-redux";
-import { getPelaporan } from "../../../actions/pelaporan";
-import TableLaporan from "../../../components/Main/TableLaporan";
-import TableLaporan from "../../../components/Main/TablePemantauan";
-import { render } from "react-dom";
+import DetailPT from "@/components/Main/DetailPT";
+import moment from "moment";
+import Datatable from "@/components/Tables/Datatable";
+
 
 class Pemantauan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			pt: {},
 			log: {},
-			tablept: {},
+			detailLaporanPt: {},
+			pelaporan: {},
+			pt: {},
 		};
 	}
 
@@ -31,16 +32,23 @@ class Pemantauan extends Component {
 
 	componentDidMount = async () => {
 		const { query, token } = this.props;
-		const tablept = await getPelaporan(token, { pt_id: query.ptId });
-		const pt = await getOnePT(token, query.ptId);
-		this.setState({ pt, tablept });
-	};
+		const ptId = query.ptId
+		const pelaporan = await getPelaporan(token, { pt_id: ptId });
+		const pt = await getOnePT(token, ptId);
+		this.setState({ pelaporan, pt });
 
+	};
 
+	handleLihatPemantaun = async (e, id_laporan) => {
+		const { token } = this.props;
+		const log = await getLog(token, id_laporan)
+		const detailLaporanPt = await getOneLaporan(token, id_laporan)
+		this.setState({ detailLaporanPt, log });
+	}
 
 	render() {
-		const { pt, tablept } = this.state;
-
+		const { detailLaporanPt, log, pt, pelaporan } = this.state;
+		console.log(pelaporan)
 		return (
 			<ContentWrapper unwrap>
 				<div className="p-3">
@@ -53,10 +61,88 @@ class Pemantauan extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">{tablept?.data ? <TablePemantauan listData={tablept.data} linkName="Detail" onclick={() => this.tablept.data()} /> : <Loader />}</Col>
-						<Col xl="3">{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
+						<Col xl={9}>
+							<div className="card b">
+								<div className="card-body">
+									{pelaporan.data?.length ? (
+										<Datatable options={{ responsive: false }}>
+											<table className="table w-100">
+												<thead>
+													<tr>
+														<th>Tanggal</th>
+														<th>No.Laporan</th>
+														<th>Deskripsi Laporan</th>
+														<th>Pelapor</th>
+														<th>Aksi</th>
+													</tr>
+												</thead>
+												<tbody>
+													{pelaporan.data.map((data) => {
+														return (
+															<tr key={data._id}>
+																<td>{moment(data.createdAt).format("DD/MM/YYYY")}</td>
+																<td>{data.no_laporan}</td>
+
+																<td className="text-nowrap">
+																	<div className="media align-items-center">
+																		<div className="media-body d-flex">
+																			<div>
+																				<p>{data.keterangan.length > 35 ? data.keterangan.substring(0, 35) + "..." : data.keterangan}</p>
+																			</div>
+																		</div>
+																	</div>
+																</td>
+
+																<td>{data.user.isPrivate ? "" : data.user.nama}</td>
+
+																<td>
+																	<div>
+
+																		<Button onClick={(e) => this.handleLihatPemantaun(e, data._id)}>
+																			Detail
+																		</Button>
+
+																	</div>
+																</td>
+															</tr>
+														);
+													})}
+												</tbody>
+											</table>
+										</Datatable>
+									) : pelaporan.data ? "Pelaporan tidak ada" : <Loader />}
+								</div >
+							</div >
+						</Col>
+						<Col xl={3}>{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
+					</Row>
+					<Row>
+						<Col xl="12">
+							{detailLaporanPt.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												{<DetailLaporan data={detailLaporanPt.data} />}
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<div></div>
+							)}
+						</Col>
+					</Row>
+					<Row>
+						{log.data && (
+							<Col xl={"12"}>
+								<Timeline data={log.data} />
+							</Col>
+						)}
 					</Row>
 				</div>
+
+
 			</ContentWrapper>
 		);
 	}

pages/laporan/new/index.js

@@ -386,7 +386,7 @@ class App extends Component {
 											</FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">
-													File Pendukung<span className="star-color">*</span>
+													File Pendukung
 												</label>
 												<div className="col-md-10">
 													<Field name="dokumen">{({ field, form }) => <Input type="file" multiple onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>