import React, { useState, useEffect } from "react";
import { ColumnDirective, ColumnsDirective, GridComponent, Group, Resize, Toolbar, Page, ExcelExport, PdfExport, Reorder } from '@syncfusion/ej2-react-grids';
import { Inject, Sort, Filter, Edit, } from '@syncfusion/ej2-react-grids';
import { getUsers, addUser, updateUser, deleteUser } from "../services/users_service";
const Users = () => {
const toolbarOptions = ['ExcelExport', 'PdfExport', 'CsvExport', 'Print', 'Search', 'Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }//mode: 'Dialog' };
const [data, setData] = useState();
useEffect(() => {
getUsers().then(data => {
setData(data);
})
}, [])
let grid;
const dataSourceChanged = (state) => {
console.log(state);
if(state.action === "add") {
addUser(state.data);
state.endEdit();
//state.endEdit();
} else if (state.action === "edit") {
updateUser(state.data);
state.endEdit();
} else if (state.requestType === "delete") {
deleteUser(state.data[0].id);
state.endEdit();
}
}
const dataStateChange = (state) => {
console.log(state);
}
const actionFailure = (state) => {
console.log("failure", state)
}
const toolbarClick = (args) => {
switch (args.item.text) {
case 'PDF Export':
grid.pdfExport();
break;
case 'Excel Export':
grid.excelExport();
break;
case 'CSV Export':
grid.csvExport();
break;
default:
break;
}
}
return(
<>
<br /><br />
<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={data}
editSettings={editSettings}
allowResizing={true}
allowReordering={true}
toolbar={toolbarOptions}
allowSorting={true}
allowFiltering={true}
allowPaging={true}
allowExcelExport={true}
allowPdfExport={true}
allowGrouping={true}
toolbarClick={toolbarClick.bind(this)}
ref={g => grid = g }
actionFailure={actionFailure}
dataSourceChanged={dataSourceChanged}
dataStateChange = {dataStateChange}
>
<ColumnsDirective>
<ColumnDirective field='id' headerText='id' allowEditing={false} isPrimaryKey={true} width='150' />
<ColumnDirective field='email' headerText='email' width='150' />
<ColumnDirective field='username' headerText='username' width='150' />
<ColumnDirective field='contact_id' headerText='contact_id' width='150' />
<ColumnDirective field='created_at' headerText='created_at' allowEditing={false} width='150' />
<ColumnDirective field='updated_at' headerText='updated_at' allowEditing={false} width='150' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport, PdfExport, Group, Sort, Filter, Resize, Reorder, Edit]}/>
</GridComponent>
</div>
</div>
</>
)
}
export default Users;
