05/10/2024 - 18h30

recette2
cherif 2024-10-05 18:23:07 +02:00
parent 82ac49626d
commit 5cd470c38c
2 changed files with 265 additions and 103 deletions

View File

@ -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 (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
<GridToolbarDensitySelector
slotProps={{ tooltip: { title: 'Change density' } }}
/>
<Box sx={{ flexGrow: 1 }} />
<GridToolbarExport
slotProps={{
tooltip: { title: 'Export data' },
button: { variant: 'outlined' },
}}
csvOptions={{
fileName: 'Export',
delimiter: ';',
utf8WithBom: true,
}}
printOptions={{ disableToolbarButton: true }}
/>
</GridToolbarContainer>
);
}
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("");
@ -2528,6 +2478,116 @@ const Partner_Facture = (props) => {
{ "id": "", "label": "", "value": "" },
]
// DEBUT EXPORT EXCEL DATAGRID
function CustomToolbar(props) {
console.log(" my props = ", props);
return (
<GridToolbarContainer {...props}>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
<GridToolbarDensitySelector
slotProps={{ tooltip: { title: 'Change density' } }}
/>
<Box sx={{ flexGrow: 1 }} />
<ExportButton data_colums={props.data_colums} />
</GridToolbarContainer>
);
}
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 (
<GridToolbarExportContainer {...props}>
<ExportMenuItem data_colums={props.data_colums} />
</GridToolbarExportContainer>
);
}
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 (
<MenuItem
onClick={() => {
handleExport(apiRef, props.data_colums);
// Hide the export menu after the export
hideMenu?.();
}}
>
Export Excel
</MenuItem>
);
}
// FIN EXPORT EXCEL DATAGRID
return (
<div className="partner_facture">
@ -2724,23 +2784,7 @@ const Partner_Facture = (props) => {
</div>
{/* <div className="session_caract" style={{ "width": "100%", "height": "5rem" }}> Total HT
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="ref_article_total_amount_ht"
id="ref_article_total_amount_ht"
InputLabelProps={{
shrink: true,
}}
disabled={true}
fullWidth
className="disabled_style_Dialog"
value={p_add_line_item_total_amount_ht}
/>
</div>*/}
@ -3315,12 +3359,11 @@ const Partner_Facture = (props) => {
}}
>
<DataGrid
components={{
Toolbar: CustomToolbar
}}
localeText={{
toolbarExportCSV: "Export CSV(;)",
}}
componentsProps={{ toolbar: { data_colums: columns } }}
checkboxSelection
disableSelectionOnClick

View File

@ -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 (
<GridToolbarContainer>
<GridToolbarExport
csvOptions={{
fileName: 'Export',
delimiter: ';',
utf8WithBom: true,
}} />
</GridToolbarContainer>
);
}
const TestUrl_New = (props) => {
// DEBUT EXPORT EXCEL DATAGRID
function CustomToolbar(props) {
return (
<GridToolbarContainer {...props}>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
<GridToolbarDensitySelector
slotProps={{ tooltip: { title: 'Change density' } }}
/>
<Box sx={{ flexGrow: 1 }} />
<ExportButton data_colums={props.data_colums} />
</GridToolbarContainer>
);
}
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 (
<GridToolbarExportContainer {...props}>
<ExportMenuItem data_colums={props.data_colums} />
</GridToolbarExportContainer>
);
}
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 (
<MenuItem
onClick={() => {
handleExport(apiRef, props.data_colums);
// Hide the export menu after the export
hideMenu?.();
}}
>
Export Excel
</MenuItem>
);
}
// 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 (
<GridToolbarContainer>
<GridToolbarColumnsButton />
@ -738,6 +838,12 @@ const TestUrl_New = (props) => {
}
function display_data() {
console.log(" Data = ", data);
}
return (
<div className="testurl_new">
<Helmet>
@ -904,7 +1010,18 @@ const TestUrl_New = (props) => {
</div>
{data &&
data.columns.map((column) => (
<div>
column.field = {column.field}<br />
----
</div>
))}
<button onClick={display_data}> display data </button>
<h2> manip datagrid </h2>
<div style={{ height: 300, width: '100%' }}>
@ -917,6 +1034,8 @@ const TestUrl_New = (props) => {
components={{
Toolbar: CustomToolbar
}}
componentsProps={{ toolbar: { data_colums: data.columns } }}
/>
</div>