Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Chris-Code-Sample-2.1.jsx
import * as React from "react";
const Component = React.Component;
import axios from 'axios';
// ES2015 module syntax
import { Button } from '@progress/kendo-react-buttons';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { orderBy } from '@progress/kendo-data-query';
import { filterBy } from '@progress/kendo-data-query';
import EditForm from './cVocabForm.jsx';
const EditCommandCell = props => {
return (
<td>
<button
className="k-button k-primary"
onClick={() => props.enterEdit(props.dataItem)}
>
Edit
</button>
</td>
);
};
//DOCS:
/*
2020.09.05.CT:TODO - Edit + Update Grid Row in External Pop-Up Form:
https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-external-form
https://wordpress.stackexchange.com/questions/282163/wordpress-ajax-with-axios/284423
*/
export default class Vocab extends React.Component {
constructor(props) {
super(props);
this.state = {
sort: [
{ field: 'Term', dir: 'asc' }
],
filter: {
logic: "and",
filters: []
},
name: '',
vocab: '',
openForm: false,
editItem: {}
};
this.GetVocabData = this.GetVocabData.bind(this);
}
enterEdit = item => {
this.setState({
openForm: true,
editItem: item
});
};
MyEditCommandCell = props => (
<EditCommandCell {...props} enterEdit={this.enterEdit} />
);
handleSubmit = (event) => {
this.setState({
vocab: this.state.vocab.map(item => {
if (event.ID === item.ID) {
item = { ...event };
}
return item;
}),
openForm: false
});
}
handleCancelEdit = () => {
this.setState({ openForm: false })
}
GetVocabData() {
event.preventDefault();
var params = new URLSearchParams();
params.append('action', 'sa_api_getVoiceVocab');
let sURL_Site = '/';
let sURL_Ajax = sURL_Site+"wp-admin/admin-ajax.php";
axios.post(sURL_Ajax, params)
.then(res => {
console.log(res);
this.dataRecieved(res.data);
});
//2020.03.23.CT-TODO: res.data --> Fill data into the grid below:
}
componentDidMount() {
var params = new URLSearchParams();
params.append('action', 'sa_api_getVoiceVocab');
let sURL_Site = '/';
let sURL_Ajax = sURL_Site+"wp-admin/admin-ajax.php";
axios.post(sURL_Ajax, params)
.then(res => {
console.log(res);
//this.setState({ vocab: res.data});
this.dataRecieved(res.data);
});
}
dataRecieved(items) {
this.setState({
...this.state,
vocab: items
});
}
render() {
return (
<React.Fragment>
<form onSubmit={this.GetVocabData}>
<Button primary={true}
type="submit">
Get Vocab Data
</Button>
</form>
<hr></hr>
<Grid
style={{ height: '300px' }}
data={orderBy(filterBy([...this.state.vocab], this.state.filter), this.state.sort)}
sortable={true}
sort={this.state.sort}
onSortChange={(e) => {
this.setState({
sort: e.sort
});
}}
filterable
filter={this.state.filter}
onFilterChange={(e) => {
this.setState({
filter: e.filter
});
}}
>
<Column field="ID" title="ID" width="70px" sortable={true} filterable={false}/>
<Column field="Term" title="Term" width="120px" sortable={true}/>
<Column field="LexicalClass" title="LexicalClass" width="140px" sortable={true} filterable={false}/>
<Column field="Definition" title="Definition" sortable={false} filterable={false}/>
<Column field="Sentence" title="Sentence" sortable={false} filterable={false}/>
<Column cell={this.MyEditCommandCell} sortable={false} filterable={false} />
</Grid>
{this.state.openForm &&
<EditForm
cancelEdit={this.handleCancelEdit}
onSubmit={this.handleSubmit}
item={this.state.editItem}
/>
}
</React.Fragment>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment