|  | @@ -3,39 +3,18 @@ import Router from "next/router";
 | 
	
		
			
				|  |  |  import ContentWrapper from "@/components/Layout/ContentWrapper";
 | 
	
		
			
				|  |  |  import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
 | 
	
		
			
				|  |  |  import Link from "next/link";
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +import { getPT } from "@/actions/PT";
 | 
	
		
			
				|  |  |  // React Slider
 | 
	
		
			
				|  |  |  import Slider from "rc-slider";
 | 
	
		
			
				|  |  |  import "rc-slider/assets/index.css";
 | 
	
		
			
				|  |  |  // React Select
 | 
	
		
			
				|  |  |  import Select from "react-select";
 | 
	
		
			
				|  |  |  // DateTimePicker
 | 
	
		
			
				|  |  | -import Datetime from "react-datetime";
 | 
	
		
			
				|  |  |  import "react-datetime/css/react-datetime.css";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -import https from "https";
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -import CardTool from "@/components/Common/CardTool";
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -import dummyData from "../PT-ID.json";
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |  var pembina = [];
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  class Search extends Component {
 | 
	
		
			
				|  |  | -	static async getInitialProps(ctx) {
 | 
	
		
			
				|  |  | -		pembina = [];
 | 
	
		
			
				|  |  | -		const httpsAgent = new https.Agent({
 | 
	
		
			
				|  |  | -			rejectUnauthorized: false,
 | 
	
		
			
				|  |  | -		});
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -		const jsonPembina = [{ id: "ABEAE958-4F20-40EF-B145-B8014EC98D8F", nama: "Badan Intelijen Negara", singkatan: "BIN" }];
 | 
	
		
			
				|  |  | -		var numrows = jsonPembina.length;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -		for (var i = 0; i < numrows; i++) {
 | 
	
		
			
				|  |  | -			pembina.push({ value: jsonPembina[i].id, label: jsonPembina[i].nama, className: "State-" + jsonPembina[i].singkatan });
 | 
	
		
			
				|  |  | -		}
 | 
	
		
			
				|  |  | -	}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |  	state = {
 | 
	
		
			
				|  |  |  		selectedOptionMulti: [],
 | 
	
		
			
				|  |  |  		data: [],
 | 
	
	
		
			
				|  | @@ -66,68 +45,60 @@ class Search extends Component {
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	fetchData = async () => {
 | 
	
		
			
				|  |  | -		var qPembina = "";
 | 
	
		
			
				|  |  | -		if (this.state.selectedOptionMulti.value !== undefined) {
 | 
	
		
			
				|  |  | -			qPembina = "&pembina=" + this.state.selectedOptionMulti.value;
 | 
	
		
			
				|  |  | -		}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -		const searchValue = "q=" + document.getElementById("searchInput").value;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -		const httpsAgent = new https.Agent({
 | 
	
		
			
				|  |  | -			rejectUnauthorized: false,
 | 
	
		
			
				|  |  | -		});
 | 
	
		
			
				|  |  | -		const jsonData = dummyData;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +		const searchValue = document.getElementById("searchInput").value;
 | 
	
		
			
				|  |  | +		const jsonData = await getPT({ search: searchValue });
 | 
	
		
			
				|  |  |  		this.setState({ data: jsonData });
 | 
	
		
			
				|  |  | -		console.log("jsonData : ", jsonData);
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	handleApplyClick = () => {
 | 
	
		
			
				|  |  |  		console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
 | 
	
		
			
				|  |  |  		this.fetchData();
 | 
	
		
			
				|  |  | -		if (this.state.data.length > 0) {
 | 
	
		
			
				|  |  | +		if (this.state.data.length) {
 | 
	
		
			
				|  |  |  			this.renderTableData();
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	handleSearchClick = () => {
 | 
	
		
			
				|  |  |  		this.fetchData();
 | 
	
		
			
				|  |  | -		if (this.state.data.length > 0) {
 | 
	
		
			
				|  |  | +		if (this.state.data.length) {
 | 
	
		
			
				|  |  |  			this.renderTableData();
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	renderTableData() {
 | 
	
		
			
				|  |  | -		return this.state.data.map((pt, index) => {
 | 
	
		
			
				|  |  | -			return (
 | 
	
		
			
				|  |  | -				<tr>
 | 
	
		
			
				|  |  | -					<td>
 | 
	
		
			
				|  |  | -						<label>{index + 1}</label>
 | 
	
		
			
				|  |  | -					</td>
 | 
	
		
			
				|  |  | -					<td>
 | 
	
		
			
				|  |  | -						<div className="media align-items-center">
 | 
	
		
			
				|  |  | -							<a className="mr-3" href="">
 | 
	
		
			
				|  |  | -								<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
 | 
	
		
			
				|  |  | -							</a>
 | 
	
		
			
				|  |  | -							<div className="media-body d-flex">
 | 
	
		
			
				|  |  | -								<div>
 | 
	
		
			
				|  |  | -									<h4 className="m-0">{pt.nama}</h4>
 | 
	
		
			
				|  |  | -									<small className="text-muted">
 | 
	
		
			
				|  |  | -										{pt.sk_pendirian} - {pt.website} - {pt.email}
 | 
	
		
			
				|  |  | -									</small>
 | 
	
		
			
				|  |  | -									<p>{pt.alamat.jalan}</p>
 | 
	
		
			
				|  |  | -								</div>
 | 
	
		
			
				|  |  | -								<div className="ml-auto">
 | 
	
		
			
				|  |  | -									<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
 | 
	
		
			
				|  |  | -										Buat Laporan
 | 
	
		
			
				|  |  | -									</Button>
 | 
	
		
			
				|  |  | +		return (
 | 
	
		
			
				|  |  | +			this.state.data &&
 | 
	
		
			
				|  |  | +			this.state.data.map((pt, index) => {
 | 
	
		
			
				|  |  | +				return (
 | 
	
		
			
				|  |  | +					<tr>
 | 
	
		
			
				|  |  | +						<td>
 | 
	
		
			
				|  |  | +							<label>{index + 1}</label>
 | 
	
		
			
				|  |  | +						</td>
 | 
	
		
			
				|  |  | +						<td>
 | 
	
		
			
				|  |  | +							<div className="media align-items-center">
 | 
	
		
			
				|  |  | +								<a className="mr-3" href="">
 | 
	
		
			
				|  |  | +									<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
 | 
	
		
			
				|  |  | +								</a>
 | 
	
		
			
				|  |  | +								<div className="media-body d-flex">
 | 
	
		
			
				|  |  | +									<div>
 | 
	
		
			
				|  |  | +										<h4 className="m-0">{pt.nama}</h4>
 | 
	
		
			
				|  |  | +										<small className="text-muted">
 | 
	
		
			
				|  |  | +											{pt.sk_pendirian} - {pt.website} - {pt.email}
 | 
	
		
			
				|  |  | +										</small>
 | 
	
		
			
				|  |  | +										<p>{pt.alamat.jalan}</p>
 | 
	
		
			
				|  |  | +									</div>
 | 
	
		
			
				|  |  | +									<div className="ml-auto">
 | 
	
		
			
				|  |  | +										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
 | 
	
		
			
				|  |  | +											Buat Laporan
 | 
	
		
			
				|  |  | +										</Button>
 | 
	
		
			
				|  |  | +									</div>
 | 
	
		
			
				|  |  |  								</div>
 | 
	
		
			
				|  |  |  							</div>
 | 
	
		
			
				|  |  | -						</div>
 | 
	
		
			
				|  |  | -					</td>
 | 
	
		
			
				|  |  | -				</tr>
 | 
	
		
			
				|  |  | -			);
 | 
	
		
			
				|  |  | -		});
 | 
	
		
			
				|  |  | +						</td>
 | 
	
		
			
				|  |  | +					</tr>
 | 
	
		
			
				|  |  | +				);
 | 
	
		
			
				|  |  | +			})
 | 
	
		
			
				|  |  | +		);
 | 
	
		
			
				|  |  |  		//}
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  
 |