From 5cd470c38cd99a0182d54b74ca9235c450bc8ed8 Mon Sep 17 00:00:00 2001 From: cherif Date: Sat, 5 Oct 2024 18:23:07 +0200 Subject: [PATCH] 05/10/2024 - 18h30 --- src/components/Partner_Facture.js | 201 ++++++++++++++++++------------ src/components/TestUrl_new.js | 167 +++++++++++++++++++++---- 2 files changed, 265 insertions(+), 103 deletions(-) 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 ( + { + handleExport(apiRef, props.data_colums); + // Hide the export menu after the export + hideMenu?.(); + }} + > + Export Excel + + ); + } + + // 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 ( + { + handleExport(apiRef, props.data_colums); + // Hide the export menu after the export + hideMenu?.(); + }} + > + Export Excel + + ); + } + + // 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 } }} + />