Application search feature for data table. Basic stage.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent e32b6d167c
commit 89b4e6dc10

@ -111,14 +111,27 @@ class ApplicationListing extends Component {
componentWillMount() {
//Fetch all the applications from backend and create application objects.
this.setState({data: this.data});
}
/**
* Handles the search action.
* When typing in the search bar, this method will be invoked.
* */
_searchApplications(word) {
let searchedData = [];
_searchApplications(event, word) {
let searchedData;
if (word){
searchedData = this.data.filter((dataItem) => {
return dataItem.applicationName.includes(word);
});
} else {
console.log("no")
console.log(this.data)
searchedData = this.data;
}
this.setState({data: searchedData}, console.log("Searched data ", this.state.data));
}
/**
@ -155,7 +168,7 @@ class ApplicationListing extends Component {
</CardActions>
<DataTable headers={this.headers}
data={this.data}
data={this.state.data}
handleRowClick={this._onRowClick.bind(this)}
noDataMessage={{type: 'button', text: 'Create Application'}}/>
</Card>

@ -63,6 +63,12 @@ class DataTable extends Component {
this.setState({data: this.props.data, headers: this.props.headers})
}
shouldComponentUpdate(nextProps, nextState) {
console.log("next Props", nextProps.data);
this.setState({data: nextProps.data});
return true;
}
/**
* Triggers when user click on table row.
* This method invokes the parent method handleRowClick, which is passed via props.
@ -75,6 +81,8 @@ class DataTable extends Component {
render() {
const {data, headers} = this.state;
console.log(data);
let noDataContent = null;
if (this.props.noDataMessage.type === 'button') {

Loading…
Cancel
Save