import React, { useState, useEffect } from 'react';
import {
GridComponent,
ColumnDirective,
ColumnsDirective,
Page,
Inject,
Edit,
EditSettingsModel,
Toolbar,
ToolbarItems,
dataStateChange,
} from '@syncfusion/ej2-react-grids';
import { getOrders, addOrder, updateOrder, deleteOrder } from './orderService';
import './App.css';
const App: React.FC = () => {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const [data, setData] = useState();
useEffect(() => {
refreshGrid();
}, []);
function refreshGrid() {
console.log("Hi")
getOrders()
.then(
data => {
setData(data);
}
);
console.log(data)
}
function dataStateChange(args: any){
refreshGrid();
}
function dataSourceChanged(state: any) {
console.log(state)
if (state.action === "add") {
console.log(state);
addOrder(state.data)
.then(res => state.endEdit());
} else if (state.action === "edit") {
updateOrder(state.data)
.then(res => state.endEdit());
} else if (state.requestType === "delete") {
deleteOrder(state.data[0].OrderID)
.then(res => state.endEdit());
}
}
return (
<div style={{ margin: '10%', marginTop: '5%' }}>
<GridComponent dataSource={data}
allowPaging={true}
editSettings={editOptions}
toolbar={toolbarOptions}
dataSourceChanged={dataSourceChanged}
dataStateChange = {dataStateChange}
>
<ColumnsDirective>
<ColumnDirective field='WID' headerText='Well ID' width='110' allowEditing={false} isPrimaryKey={true}/>
<ColumnDirective field='DPWellName' headerText='Wll Name' width='250' />
<ColumnDirective field='Cat' headerText='CAT' width="110" editType='dropdownedit' />
<ColumnDirective field='WaterOutWellName' headerText='WaterOut WellName' width='250' />
<ColumnDirective field='Project' headerText='Project' width='200' editType='dropdownedit' />
<ColumnDirective field='ProductionTank' headerText='Production Tank' width='150' />
<ColumnDirective field='MarketingArea' headerText='Marketing Area' width='120' />
<ColumnDirective field='Route' headerText='Route' width='110'/>
<ColumnDirective field='Length' headerText='Length' width='110' editType='dropdownedit'/>
<ColumnDirective field='Bench' headerText='Bench' width='120' editType='dropdownedit'/>
<ColumnDirective field='WI' headerText='WI' width='120' editType= 'numericedit'/>
<ColumnDirective field='NRI' headerText='NRI' width='120' />
<ColumnDirective field='FirstGasIP' headerText='FirstGas IP' width='120' editType= 'numericedit'/>
<ColumnDirective field='FirstOilIP' headerText='FirstOil IP' width='120' editType= 'numericedit'/>
<ColumnDirective field='GasDe' headerText='GasDe' width='90' editType= 'numericedit'/>
<ColumnDirective field='GasB' headerText='GasB' width='90' editType= 'numericedit'/>
<ColumnDirective field='OilDe' headerText='OilDe' width='90' editType= 'numericedit'/>
<ColumnDirective field='OilB' headerText='OilB' width='90' editType= 'numericedit'/>
<ColumnDirective field='PeakGasIP' headerText='PeakGasIP' width='120' editType= 'numericedit'/>
<ColumnDirective field='PeakOilIP' headerText='PeakOilIP' width='120' editType= 'numericedit'/>
<ColumnDirective field='TypeCurve' headerText='TypeCurve' width='120'/>
<ColumnDirective field='SHLFNL' headerText='SHLFNL' width='90'/>
<ColumnDirective field='SHLFSL' headerText='SHLFSL' width='90'/>
<ColumnDirective field='SHLFWL' headerText='SHLFWL' width='90'/>
<ColumnDirective field='SHLFEL' headerText='SHLFEL' width='90'/>
<ColumnDirective field='SHLSec' headerText='SHLSec' width='90'/>
<ColumnDirective field='SHLBlk' headerText='SHLBlk' width='90'/>
<ColumnDirective field='SHLTwnshp' headerText='SHLTwnshp' width='90'/>
</ColumnsDirective>
<Inject services={[Page, Edit, Toolbar]} />
</GridComponent>
</div>
);
}
export default App;