05/10/2024 - 18h30
parent
82ac49626d
commit
5cd470c38c
|
@ -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("");
|
||||
|
@ -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 (
|
||||
<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
|
||||
|
@ -3380,9 +3423,9 @@ const Partner_Facture = (props) => {
|
|||
|
||||
rowsPerPageOptions={[10]}
|
||||
//disableSelectionOnClick
|
||||
/* components={{
|
||||
Toolbar: GridToolbar,
|
||||
}}*/
|
||||
/* components={{
|
||||
Toolbar: GridToolbar,
|
||||
}}*/
|
||||
|
||||
|
||||
//sx={datagridSx}
|
||||
|
|
|
@ -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 />
|
||||
|
@ -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 }}
|
||||
|
||||
|
||||
/>
|
||||
</GridToolbarContainer>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function display_data() {
|
||||
console.log(" Data = ", data);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="testurl_new">
|
||||
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue