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 { useHistory } from "react-router-dom";
|
||||||
import CheckOut from "./CheckOut";
|
import CheckOut from "./CheckOut";
|
||||||
import {
|
import {
|
||||||
DataGrid, GridToolbar, frFR,
|
DataGrid, frFR, GridToolbar, GridToolbarExport, GridToolbarColumnsButton,
|
||||||
GridToolbarExport, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector
|
GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext,
|
||||||
|
gridFilteredSortedRowIdsSelector,
|
||||||
|
gridVisibleColumnFieldsSelector,
|
||||||
} from '@mui/x-data-grid';
|
} from '@mui/x-data-grid';
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
|
||||||
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
|
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
|
||||||
import { Editor } from '@tinymce/tinymce-react';
|
import { Editor } from '@tinymce/tinymce-react';
|
||||||
|
@ -66,59 +69,6 @@ const Partner_Facture = (props) => {
|
||||||
|
|
||||||
const { action, orderid } = useParams();
|
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 history = useHistory();
|
||||||
const [submenu, setsubmenu] = useState("");
|
const [submenu, setsubmenu] = useState("");
|
||||||
|
@ -178,7 +128,7 @@ const Partner_Facture = (props) => {
|
||||||
const columns = [
|
const columns = [
|
||||||
{ field: '_id', headerName: '_id', hide: true, disableExport: true, },
|
{ field: '_id', headerName: '_id', hide: true, disableExport: true, },
|
||||||
{ 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: '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_header_type', headerName: 'Type', width: 100, hide: false, editable: false },
|
||||||
{ field: 'invoice_date', headerName: 'Date Facture', width: 150, 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: '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: '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: '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": "" },
|
{ "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 (
|
return (
|
||||||
|
|
||||||
<div className="partner_facture">
|
<div className="partner_facture">
|
||||||
|
@ -2724,23 +2784,7 @@ const Partner_Facture = (props) => {
|
||||||
|
|
||||||
</div>
|
</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
|
<DataGrid
|
||||||
|
|
||||||
components={{
|
components={{
|
||||||
Toolbar: CustomToolbar
|
Toolbar: CustomToolbar
|
||||||
}}
|
}}
|
||||||
localeText={{
|
componentsProps={{ toolbar: { data_colums: columns } }}
|
||||||
toolbarExportCSV: "Export CSV(;)",
|
|
||||||
}}
|
|
||||||
|
|
||||||
checkboxSelection
|
checkboxSelection
|
||||||
disableSelectionOnClick
|
disableSelectionOnClick
|
||||||
|
@ -3380,9 +3423,9 @@ const Partner_Facture = (props) => {
|
||||||
|
|
||||||
rowsPerPageOptions={[10]}
|
rowsPerPageOptions={[10]}
|
||||||
//disableSelectionOnClick
|
//disableSelectionOnClick
|
||||||
/* components={{
|
/* components={{
|
||||||
Toolbar: GridToolbar,
|
Toolbar: GridToolbar,
|
||||||
}}*/
|
}}*/
|
||||||
|
|
||||||
|
|
||||||
//sx={datagridSx}
|
//sx={datagridSx}
|
||||||
|
|
|
@ -56,10 +56,17 @@ import { useDemoData } from '@mui/x-data-grid-generator';
|
||||||
import SignatureCanvas from 'react-signature-canvas';
|
import SignatureCanvas from 'react-signature-canvas';
|
||||||
|
|
||||||
import Box from '@mui/material/Box';
|
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 from 'react-jsx-context-menu';
|
||||||
import { ContextMenu, ContextMenuTrigger } from "react-contextmenu";
|
import { ContextMenu, ContextMenuTrigger } from "react-contextmenu";
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
paper: {
|
paper: {
|
||||||
|
@ -99,23 +106,120 @@ const localizer = dateFnsLocalizer({
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
function CustomToolbar2() {
|
|
||||||
return (
|
|
||||||
<GridToolbarContainer>
|
|
||||||
<GridToolbarExport
|
|
||||||
csvOptions={{
|
|
||||||
fileName: 'Export',
|
|
||||||
delimiter: ';',
|
|
||||||
utf8WithBom: true,
|
|
||||||
}} />
|
|
||||||
</GridToolbarContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const TestUrl_New = (props) => {
|
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 { courseid, tabid } = useParams();
|
||||||
const [message, setMessage] = useState(null);
|
const [message, setMessage] = useState(null);
|
||||||
|
@ -703,13 +807,9 @@ const TestUrl_New = (props) => {
|
||||||
console.log(" CKILLLLL e.target.attributes.data = ", e.target.attributes.data);
|
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 (
|
return (
|
||||||
<GridToolbarContainer>
|
<GridToolbarContainer>
|
||||||
<GridToolbarColumnsButton />
|
<GridToolbarColumnsButton />
|
||||||
|
@ -738,6 +838,12 @@ const TestUrl_New = (props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function display_data() {
|
||||||
|
console.log(" Data = ", data);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="testurl_new">
|
<div className="testurl_new">
|
||||||
<Helmet>
|
<Helmet>
|
||||||
|
@ -904,7 +1010,18 @@ const TestUrl_New = (props) => {
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{data &&
|
||||||
|
data.columns.map((column) => (
|
||||||
|
|
||||||
|
<div>
|
||||||
|
column.field = {column.field}<br />
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<button onClick={display_data}> display data </button>
|
||||||
|
|
||||||
<h2> manip datagrid </h2>
|
<h2> manip datagrid </h2>
|
||||||
<div style={{ height: 300, width: '100%' }}>
|
<div style={{ height: 300, width: '100%' }}>
|
||||||
|
@ -917,6 +1034,8 @@ const TestUrl_New = (props) => {
|
||||||
components={{
|
components={{
|
||||||
Toolbar: CustomToolbar
|
Toolbar: CustomToolbar
|
||||||
}}
|
}}
|
||||||
|
componentsProps={{ toolbar: { data_colums: data.columns } }}
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue