commmit search pelaporan

pages/app/pelaporan/search.js

@@ -18,6 +18,7 @@ class Search extends Component {
 		data: [],
 		pembina: [],
 		loading: false,
+		noData: false,
 	};
 
 	componentDidMount = async () => {
@@ -58,29 +59,13 @@ class Search extends Component {
 	};
 
 	fetchData = async () => {
-		const pembina = this.props.user.role.id === 2021 ? this.props.user.lembaga.id : this.state.selectedOptionMulti.map((e) => e.value).join(",");
+		const pembina = this.props.user.role.id === 2021 ? this.props.user.lembaga.id : this.state.selectedOptionMulti?.map((e) => e.value).join(",");
 		const searchValue = document.getElementById("searchInput").value;
 		const jsonData = await getPT(this.props.token, { search: searchValue, pembina });
 		this.setState({ data: jsonData.data });
 	};
 
-	handleApplyClick = () => {
-		this.setState({ loading: true });
-		this.fetchData();
-		this.setState({ loading: false });
-		if (this.state.data && this.state.data.length) {
-			this.renderTableData();
-		}
-	};
 
-	handleSearchClick = () => {
-		this.setState({ loading: true });
-		this.fetchData();
-		this.setState({ loading: false });
-		if (this.state.data.length) {
-			this.renderTableData();
-		}
-	};
 
 	renderTableData() {
 		return (
@@ -119,6 +104,25 @@ class Search extends Component {
 			})
 		);
 	}
+	handleApplyClick = () => {
+		this.setState({ loading: true });
+		this.fetchData();
+		this.setState({ loading: false });
+		if (this.state.data && this.state.data.length) {
+			this.renderTableData();
+			this.setState({ noData: true });
+		}
+	};
+
+	handleSearchClick = () => {
+		this.setState({ loading: true });
+		this.fetchData();
+		this.setState({ loading: false });
+		if (this.state.data.length) {
+			this.renderTableData();
+			this.setState({ noData: true });
+		}
+	};
 
 	render() {
 		const { selectedOptionMulti, pembina } = this.state;
@@ -170,7 +174,7 @@ class Search extends Component {
 								<tbody>{this.renderTableData()}</tbody>
 							</Table>
 							<div className="card-footer">
-								<div className="d-flex"></div>
+								<div >{!this.state.data.length > 0 && this.state.noData && (<h3 className=" text-center">Data tidak ditemukan</h3>)}</div>
 							</div>
 						</div>
 					</Col>