Chris-Code-Sample-2.1.jsx

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>
    )
  }
}