|
@@ -3,6 +3,7 @@ import Router from "next/router";
|
|
|
import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
|
import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
|
|
import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
|
|
|
// React Slider
|
|
// React Slider
|
|
|
|
|
+import { getPT } from "@/actions/PT";
|
|
|
import Slider from "rc-slider";
|
|
import Slider from "rc-slider";
|
|
|
import "rc-slider/assets/index.css";
|
|
import "rc-slider/assets/index.css";
|
|
|
// React Select
|
|
// React Select
|
|
@@ -57,70 +58,60 @@ class Search extends Component {
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
fetchData = async () => {
|
|
fetchData = async () => {
|
|
|
- var qPembina = "";
|
|
|
|
|
- console.log("this.state.selectedOptionMulti.value : ", this.state.selectedOptionMulti.value);
|
|
|
|
|
- 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 });
|
|
this.setState({ data: jsonData });
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
handleApplyClick = () => {
|
|
handleApplyClick = () => {
|
|
|
console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
|
|
console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
|
|
|
this.fetchData();
|
|
this.fetchData();
|
|
|
- if (this.state.data.length > 0) {
|
|
|
|
|
|
|
+ if (this.state.data && this.state.data.length) {
|
|
|
this.renderTableData();
|
|
this.renderTableData();
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
handleSearchClick = () => {
|
|
handleSearchClick = () => {
|
|
|
this.fetchData();
|
|
this.fetchData();
|
|
|
- if (this.state.data.length > 0) {
|
|
|
|
|
|
|
+ if (this.state.data && this.state.data.length) {
|
|
|
this.renderTableData();
|
|
this.renderTableData();
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
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)}>
|
|
|
|
|
- View
|
|
|
|
|
- </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)}>
|
|
|
|
|
+ View
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- </td>
|
|
|
|
|
- </tr>
|
|
|
|
|
- );
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ </td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ );
|
|
|
|
|
+ })
|
|
|
|
|
+ );
|
|
|
//}
|
|
//}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -144,15 +135,12 @@ class Search extends Component {
|
|
|
<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
|
|
<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
|
|
|
Search
|
|
Search
|
|
|
</button>
|
|
</button>
|
|
|
- <div className="ml-auto">
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div className="ml-auto"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
{/* START card */}
|
|
{/* START card */}
|
|
|
<div className="card card-default">
|
|
<div className="card card-default">
|
|
|
- <div className="card-header">
|
|
|
|
|
- Search Results
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div className="card-header">Search Results</div>
|
|
|
{/* START table-responsive */}
|
|
{/* START table-responsive */}
|
|
|
<Table striped bordered hover>
|
|
<Table striped bordered hover>
|
|
|
<thead>
|
|
<thead>
|
|
@@ -165,8 +153,7 @@ class Search extends Component {
|
|
|
</Table>
|
|
</Table>
|
|
|
{/* END table-responsive */}
|
|
{/* END table-responsive */}
|
|
|
<div className="card-footer">
|
|
<div className="card-footer">
|
|
|
- <div className="d-flex">
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div className="d-flex"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
{/* END card */}
|
|
{/* END card */}
|