05/10/2024 - 12h

recette2
cherif 2024-10-05 12:50:37 +02:00
parent c802936002
commit 82ac49626d
4 changed files with 1700 additions and 89 deletions

1621
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -34,6 +34,7 @@
"@mui/styles": "^5.14.5",
"@mui/x-charts": "^7.3.0",
"@mui/x-data-grid": "^5.17.26",
"@mui/x-data-grid-generator": "^7.19.0",
"@mui/x-date-pickers": "^5.0.0",
"@mui/x-date-pickers-pro": "^5.0.0",
"@mui/x-tree-view": "^6.17.0",

View File

@ -8,7 +8,11 @@ import { useParams } from 'react-router-dom';
import { getCookie, setCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import CheckOut from "./CheckOut";
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import {
DataGrid, GridToolbar, frFR,
GridToolbarExport, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector
} from '@mui/x-data-grid';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { Editor } from '@tinymce/tinymce-react';
import parse from 'html-react-parser';
@ -47,12 +51,7 @@ import { gridClasses } from '@mui/x-data-grid';
import {
GridToolbarContainer,
GridToolbarExportContainer,
GridCsvExportMenuItem,
useGridApiContext,
gridFilteredSortedRowIdsSelector,
gridVisibleColumnFieldsSelector,
GridToolbarExport,
} from '@mui/x-data-grid';
//import { utils, writeFileXLSX } from "xlsx";
@ -60,31 +59,39 @@ import { ContextMenu, ContextMenuTrigger } from "react-contextmenu";
import zIndex from "@material-ui/core/styles/zIndex";
import { FcOpenedFolder } from "react-icons/fc";
import { GridExportCsvOptions } from '@mui/x-data-grid';
const Partner_Facture = (props) => {
const { action, orderid } = useParams();
const csvOptions = { delimiter: ';' };
function CustomExportButton(props) {
return (
<GridToolbarExportContainer {...props}>
<GridCsvExportMenuItem options={csvOptions} />
</GridToolbarExportContainer>
);
}
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarExport />
<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();
@ -169,9 +176,9 @@ const Partner_Facture = (props) => {
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: '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 },
@ -185,7 +192,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, },
@ -3308,6 +3315,13 @@ const Partner_Facture = (props) => {
}}
>
<DataGrid
components={{
Toolbar: CustomToolbar
}}
localeText={{
toolbarExportCSV: "Export CSV(;)",
}}
checkboxSelection
disableSelectionOnClick
onSelectionModelChange={(newSelectionModel) => {
@ -3333,7 +3347,7 @@ const Partner_Facture = (props) => {
}
selectionModel={selectionModel}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
// localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={rowss.map((item, index) => (
{
id: index,
@ -3357,8 +3371,6 @@ const Partner_Facture = (props) => {
reste_to_paye: JSON.parse(item).reste_to_paye,
credit_note_ref: JSON.parse(item).credit_note_ref,
}
))}
@ -3368,9 +3380,9 @@ const Partner_Facture = (props) => {
rowsPerPageOptions={[10]}
//disableSelectionOnClick
components={{
/* components={{
Toolbar: GridToolbar,
}}
}}*/
//sx={datagridSx}

View File

@ -51,8 +51,12 @@ import ReactDOM from 'react-dom';
import Draggable from 'react-draggable';
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 ContextMenu from 'react-jsx-context-menu';
import { ContextMenu, ContextMenuTrigger } from "react-contextmenu";
@ -95,9 +99,24 @@ const localizer = dateFnsLocalizer({
})
function CustomToolbar2() {
return (
<GridToolbarContainer>
<GridToolbarExport
csvOptions={{
fileName: 'Export',
delimiter: ';',
utf8WithBom: true,
}} />
</GridToolbarContainer>
);
}
const TestUrl_New = (props) => {
const { courseid, tabid } = useParams();
const [message, setMessage] = useState(null);
const editorRef_programme = useRef(null);
@ -684,6 +703,41 @@ 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() {
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>
);
}
return (
<div className="testurl_new">
<Helmet>
@ -835,15 +889,15 @@ const TestUrl_New = (props) => {
</ContextMenuTrigger>
<ContextMenu id="same_unique_identifier" hideOnLeave={true} style={{backgroundColor:'red', zIndex:"99"}}>
<MenuItem data={{foo: 'bar'}} valuess="list" onClick={handleClick}>
<ContextMenu id="same_unique_identifier" hideOnLeave={true} style={{ backgroundColor: 'red', zIndex: "99" }}>
<MenuItem data={{ foo: 'bar' }} valuess="list" onClick={handleClick}>
ContextMenu Item 1
</MenuItem>
<MenuItem data={{foo: 'bar'}} valuess="list02" onClick={handleClick}>
<MenuItem data={{ foo: 'bar' }} valuess="list02" onClick={handleClick}>
ContextMenu Item 2
</MenuItem>
<MenuItem divider />
<MenuItem data={{foo: 'bar'}} valuess="list03" onClick={handleClick}>
<MenuItem data={{ foo: 'bar' }} valuess="list03" onClick={handleClick}>
ContextMenu Item 3
</MenuItem>
</ContextMenu>
@ -851,28 +905,21 @@ const TestUrl_New = (props) => {
</div>
{/*<div>
<ContextMenu
menu={
<div
style={{
display: 'flex',
flexDirection: 'column',
}}
>
<button>Button 1</button>
<button>Button 2</button>
</div>
}
>
<div>
Right click me to see the context menu
</div>
</ContextMenu>
</div>*/}
<h2> Module attestation </h2>
<Module_Attestation_Formation conntected_employee_id={"1234"} related_collection={"session_formation"} related_collection_recid={"65b378562f89e592bf0e4b78"} />
<h2> manip datagrid </h2>
<div style={{ height: 300, width: '100%' }}>
<DataGrid
{...data}
localeText={{
toolbarExportCSV: "Export CSV(;)",
}}
loading={loading}
components={{
Toolbar: CustomToolbar
}}
/>
</div>
<h2> Module Ediditique </h2>