diff --git a/src/components/Partner_Facture.js b/src/components/Partner_Facture.js
index ebdeab5..2b98d8e 100644
--- a/src/components/Partner_Facture.js
+++ b/src/components/Partner_Facture.js
@@ -9,9 +9,12 @@ import { getCookie, setCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import CheckOut from "./CheckOut";
import {
- DataGrid, GridToolbar, frFR,
- GridToolbarExport, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector
+ DataGrid, frFR, GridToolbar, GridToolbarExport, GridToolbarColumnsButton,
+ GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext,
+ gridFilteredSortedRowIdsSelector,
+ gridVisibleColumnFieldsSelector,
} from '@mui/x-data-grid';
+import * as XLSX from 'xlsx';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { Editor } from '@tinymce/tinymce-react';
@@ -66,59 +69,6 @@ const Partner_Facture = (props) => {
const { action, orderid } = useParams();
- function CustomToolbar() {
- return (
-
-
-
-
-
-
-
- );
- }
-
- function gg() {
-
- /* const wb = utils.book_new();
-
- console.log(" ### selectionModel = ", Getall_Parter_Invoice_No_Filter_result);
-
- var new_data2 = []
- const new_data = Getall_Parter_Invoice_No_Filter_result.map((x) => {
-
- //---
-
- var local_node = JSON.parse(x);
- console.log("### local_node = ", local_node);
-
- new_data2.push(local_node);
- });
-
-
- console.log(" ### new_data2 = ", new_data2);
-
-
-
- utils.book_append_sheet(wb, utils.json_to_sheet(new_data2));
-
- writeFileXLSX(wb, "testyy.xlsx");*/
- }
-
const history = useHistory();
const [submenu, setsubmenu] = useState("");
@@ -178,7 +128,7 @@ const Partner_Facture = (props) => {
const columns = [
{ field: '_id', headerName: '_id', hide: true, disableExport: true, },
{ field: 'id', headerName: 'id', hide: true, disableExport: true },
- { field: 'invoice_header_ref_interne', headerName: 'Num Facture', minWidth: 200, flex: 1, hide: false, editable: false, },
+ { field: 'invoice_header_ref_interne', headerName: 'Num Facture', minWidth: 200, flex: 1, hide: false, editable: false, },
{ field: 'order_header_ref_interne', headerName: 'Reference Cmd', minWidth: 200, flex: 1, hide: false, editable: false },
{ field: 'invoice_header_type', headerName: 'Type', width: 100, hide: false, editable: false },
{ field: 'invoice_date', headerName: 'Date Facture', width: 150, hide: false, editable: false },
@@ -192,7 +142,7 @@ const Partner_Facture = (props) => {
{ field: 'order_header_tax_amount', headerName: 'Taxe', width: 150, hide: false, editable: false },
{ field: 'total_header_toutes_taxes', headerName: 'Montant TTC', width: 150, hide: false, editable: false },
{ field: 'reste_to_paye', headerName: 'A payer', width: 150, hide: false, editable: false },
- { field: 'credit_note_ref', headerName: 'Ref. Avoir', width: 150, hide: true, editable: false, },
+ { field: 'credit_note_ref', headerName: 'Ref. Avoir', width: 150, hide: true, editable: false, },
@@ -2528,6 +2478,116 @@ const Partner_Facture = (props) => {
{ "id": "", "label": "", "value": "" },
]
+
+ // DEBUT EXPORT EXCEL DATAGRID
+
+ function CustomToolbar(props) {
+
+ console.log(" my props = ", props);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ function getExcelData(apiRef) {
+ // Select rows and columns
+ const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+ const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);
+
+ // Format the data. Here we only keep the value
+ const data = filteredSortedRowIds.map((id) => {
+ const row = {};
+ visibleColumnsField.forEach((field) => {
+ row[field] = apiRef.current.getCellParams(id, field).value;
+ });
+ return row;
+ });
+
+ return data;
+ }
+
+
+ function ExportButton(props) {
+ return (
+
+
+
+ );
+ }
+
+ function handleExport(apiRef, data_colums) {
+ const data = getExcelData(apiRef);
+
+ const local_config = {
+ keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) {
+ if (mydata.field)
+ return mydata.field;
+ else
+ return "";
+ }),
+
+
+ columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) {
+ if (mydata.headerName)
+ return mydata.headerName;
+ else
+ return "";
+ }),
+
+ fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx',
+ sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"),
+ };
+
+ const rows = data.map((row) => {
+ const mRow = {};
+ for (const key of local_config.keys) {
+ mRow[key] = row[key];
+ }
+ return mRow;
+ });
+
+ const worksheet = XLSX.utils.json_to_sheet(rows);
+ XLSX.utils.sheet_add_aoa(worksheet, [[...local_config.columnNames]], {
+ origin: 'A1',
+ });
+
+ const workbook = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(workbook, worksheet, local_config.sheetName);
+ XLSX.writeFile(workbook, local_config.fileName, { compression: true });
+ }
+
+ function ExportMenuItem(props) {
+ const apiRef = useGridApiContext();
+ const { hideMenu } = props;
+
+ return (
+
+ );
+ }
+
+ // FIN EXPORT EXCEL DATAGRID
+
+
return (
@@ -2724,23 +2784,7 @@ const Partner_Facture = (props) => {
- {/* Total HT
-
-
*/}
@@ -3315,12 +3359,11 @@ const Partner_Facture = (props) => {
}}
>
{
rowsPerPageOptions={[10]}
//disableSelectionOnClick
- /* components={{
- Toolbar: GridToolbar,
- }}*/
+ /* components={{
+ Toolbar: GridToolbar,
+ }}*/
//sx={datagridSx}
diff --git a/src/components/TestUrl_new.js b/src/components/TestUrl_new.js
index 7ee05dd..bf38336 100644
--- a/src/components/TestUrl_new.js
+++ b/src/components/TestUrl_new.js
@@ -56,10 +56,17 @@ import { useDemoData } from '@mui/x-data-grid-generator';
import SignatureCanvas from 'react-signature-canvas';
import Box from '@mui/material/Box';
-import { DataGrid, GridToolbar, GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton , GridToolbarFilterButton , GridToolbarDensitySelector } from '@mui/x-data-grid';
+import {
+ DataGrid, frFR, GridToolbar, GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton,
+ GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext,
+ gridFilteredSortedRowIdsSelector,
+ gridVisibleColumnFieldsSelector,
+} from '@mui/x-data-grid';
//import ContextMenu from 'react-jsx-context-menu';
import { ContextMenu, ContextMenuTrigger } from "react-contextmenu";
+import * as XLSX from 'xlsx';
+
const useStyles = makeStyles((theme) => ({
paper: {
@@ -99,23 +106,120 @@ const localizer = dateFnsLocalizer({
})
-function CustomToolbar2() {
- return (
-
-
-
- );
-}
-
-
const TestUrl_New = (props) => {
+ // DEBUT EXPORT EXCEL DATAGRID
+ function CustomToolbar(props) {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 4,
+ maxColumns: 6,
+ });
+
+ function getExcelData(apiRef) {
+ // Select rows and columns
+ const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+ const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);
+
+ // Format the data. Here we only keep the value
+ const data = filteredSortedRowIds.map((id) => {
+ const row = {};
+ visibleColumnsField.forEach((field) => {
+ row[field] = apiRef.current.getCellParams(id, field).value;
+ });
+ return row;
+ });
+
+ return data;
+ }
+
+
+ function ExportButton(props) {
+ return (
+
+
+
+ );
+ }
+
+ function handleExport(apiRef, data_colums) {
+ const data = getExcelData(apiRef);
+
+ const local_config = {
+ keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) {
+ if (mydata.field)
+ return mydata.field;
+ else
+ return "";
+ }),
+
+
+ columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) {
+ if (mydata.headerName)
+ return mydata.headerName;
+ else
+ return "";
+ }),
+
+ fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx',
+ sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"),
+ };
+
+ const rows = data.map((row) => {
+ const mRow = {};
+ for (const key of local_config.keys) {
+ mRow[key] = row[key];
+ }
+ return mRow;
+ });
+
+ const worksheet = XLSX.utils.json_to_sheet(rows);
+ XLSX.utils.sheet_add_aoa(worksheet, [[...local_config.columnNames]], {
+ origin: 'A1',
+ });
+
+ const workbook = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(workbook, worksheet, local_config.sheetName);
+ XLSX.writeFile(workbook, local_config.fileName, { compression: true });
+ }
+
+ function ExportMenuItem(props) {
+ const apiRef = useGridApiContext();
+ const { hideMenu } = props;
+
+ return (
+
+ );
+ }
+
+ // FIN EXPORT EXCEL DATAGRID
const { courseid, tabid } = useParams();
const [message, setMessage] = useState(null);
@@ -703,13 +807,9 @@ const TestUrl_New = (props) => {
console.log(" CKILLLLL e.target.attributes.data = ", e.target.attributes.data);
}
- const { data, loading } = useDemoData({
- dataSet: 'Commodity',
- rowLength: 4,
- maxColumns: 6,
- });
- function CustomToolbar() {
+
+ function CustomToolbar_ok() {
return (
@@ -723,7 +823,7 @@ const TestUrl_New = (props) => {
tooltip: { title: 'Export data' },
button: { variant: 'outlined' },
}}
-
+
csvOptions={{
fileName: 'Export',
delimiter: ';',
@@ -731,12 +831,18 @@ const TestUrl_New = (props) => {
}}
printOptions={{ disableToolbarButton: true }}
-
+
/>
);
}
-
+
+
+
+
+ function display_data() {
+ console.log(" Data = ", data);
+ }
return (
@@ -904,7 +1010,18 @@ const TestUrl_New = (props) => {
+ {data &&
+ data.columns.map((column) => (
+
+ column.field = {column.field}
+
+ ----
+
+
+ ))}
+
+
manip datagrid
@@ -917,6 +1034,8 @@ const TestUrl_New = (props) => {
components={{
Toolbar: CustomToolbar
}}
+ componentsProps={{ toolbar: { data_colums: data.columns } }}
+
/>