diff --git a/src/components/Apprenant.js b/src/components/Apprenant.js index 91fc2be..4df1bd6 100644 --- a/src/components/Apprenant.js +++ b/src/components/Apprenant.js @@ -54,11 +54,14 @@ import { gridClasses } from '@mui/x-data-grid'; import Link from '@mui/material/Link'; import { PiDotsThree } from "react-icons/pi"; import { - GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, - GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, - gridFilteredSortedRowIdsSelector, - gridVisibleColumnFieldsSelector, - } from '@mui/x-data-grid'; + GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, + GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, + gridFilteredSortedRowIdsSelector, + gridVisibleColumnFieldsSelector, + GridValueGetterParams, + GridPreferencePanelsValue, + +} from '@mui/x-data-grid'; import * as XLSX from 'xlsx'; const Apprenant = (props) => { @@ -333,7 +336,7 @@ const Apprenant = (props) => {
{' '} - En confirmant cette opération, la session de formation sera définitivement supprimée.
+ En confirmant cette opération, l'inscription sera définitivement supprimée.
@@ -4880,27 +4883,30 @@ function ExportButton(props) { function handleExport(apiRef, data_colums) { const data = getExcelData(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + const local_config = { - keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.field) - return mydata.field; - else - return ""; - }), - + keys: visibleColumnsField, columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.headerName) - return mydata.headerName; - else - return ""; + if (mydata.headerName && visibleColumnsField.includes(mydata.field)) { + if (mydata.headerName) { + return mydata.headerName; + } + } + }), fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx', sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"), }; + local_config.columnNames = local_config.columnNames.filter(function( element ) { + return element !== undefined; + }); + + const rows = data.map((row) => { const mRow = {}; for (const key of local_config.keys) { diff --git a/src/components/DisplayPartnerSession.js b/src/components/DisplayPartnerSession.js index fa98d3a..caad021 100644 --- a/src/components/DisplayPartnerSession.js +++ b/src/components/DisplayPartnerSession.js @@ -88,6 +88,9 @@ import { GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, gridFilteredSortedRowIdsSelector, gridVisibleColumnFieldsSelector, + GridValueGetterParams, + GridPreferencePanelsValue, + } from '@mui/x-data-grid'; import * as XLSX from 'xlsx'; @@ -206,6 +209,9 @@ const DisplayPartnerSession = (props) => { const [datagrid_columns_size_model1, setdatagrid_columns_size_model1] = useState(200); const [datagrid_columns_size_model2, setdatagrid_columns_size_model2] = useState(100); + + // zzzz + const columns = [ { field: 'id', headerName: 'id', hide: true, disableExport: true, }, { field: '_id', headerName: '_id', hide: true, disableExport: true, }, @@ -436,10 +442,9 @@ const DisplayPartnerSession = (props) => { ); } }, - - ] + const columns_preinscrit = [ { field: 'id', headerName: 'id', hide: true }, { field: '_id', headerName: '_id', hide: true }, @@ -3167,7 +3172,7 @@ const DisplayPartnerSession = (props) => { const New_status_inscription_add = [ { "id": "0", "label": "PréInscription", "value": "0" }, - // { "id": "1", "label": "Inscription", "value": "1" }, + { "id": "1", "label": "Inscription", "value": "1" }, { "id": "2", "label": "En Cours", "value": "2" }, ] @@ -11281,8 +11286,6 @@ const DisplayPartnerSession = (props) => { function CustomToolbar(props) { - console.log(" my props = ", props); - return ( @@ -11303,11 +11306,12 @@ const DisplayPartnerSession = (props) => { // 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; @@ -11327,27 +11331,30 @@ const DisplayPartnerSession = (props) => { function handleExport(apiRef, data_colums) { const data = getExcelData(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + const local_config = { - keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.field) - return mydata.field; - else - return ""; - }), - + keys: visibleColumnsField, columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.headerName) - return mydata.headerName; - else - return ""; + if (mydata.headerName && visibleColumnsField.includes(mydata.field)) { + if (mydata.headerName) { + return mydata.headerName; + } + } + }), fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx', sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"), }; + local_config.columnNames = local_config.columnNames.filter(function( element ) { + return element !== undefined; + }); + + const rows = data.map((row) => { const mRow = {}; for (const key of local_config.keys) { @@ -11368,6 +11375,7 @@ const DisplayPartnerSession = (props) => { function ExportMenuItem(props) { const apiRef = useGridApiContext(); + const { hideMenu } = props; return ( @@ -11432,9 +11440,6 @@ const DisplayPartnerSession = (props) => { } /> - - - @@ -14097,7 +14102,6 @@ const DisplayPartnerSession = (props) => { Toolbar: CustomToolbar }} componentsProps={{ toolbar: { data_colums: columns } }} - onSelectionModelChange={(newSelectionModel) => { setSelectionModel(newSelectionModel); /*if (newSelectionModel.length === 1) @@ -14483,9 +14487,9 @@ const DisplayPartnerSession = (props) => { rowsPerPageOptions={[10]} disableSelectionOnClick - /* components={{ - Toolbar: GridToolbar, - }}*/ + /* components={{ + Toolbar: GridToolbar, + }}*/ //sx={datagridSx} getCellClassName={(params) => { diff --git a/src/components/DisplayPartnerStagiaires.js b/src/components/DisplayPartnerStagiaires.js index 88fea3a..8332e93 100644 --- a/src/components/DisplayPartnerStagiaires.js +++ b/src/components/DisplayPartnerStagiaires.js @@ -61,11 +61,15 @@ import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import { - GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, + GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, gridFilteredSortedRowIdsSelector, gridVisibleColumnFieldsSelector, + GridValueGetterParams, + GridPreferencePanelsValue, + } from '@mui/x-data-grid'; + import * as XLSX from 'xlsx'; @@ -445,7 +449,7 @@ const DisplayPartnerStagiaires = (props) => { } }, - { + /*{ field: "Impr.", headerName: 'Imprimer detail', disableExport: true, renderCell: (cellValues) => { return ( @@ -462,7 +466,7 @@ const DisplayPartnerStagiaires = (props) => { ); } - }, + },*/ { field: "delete", headerName: 'Supprimer', disableExport: true, renderCell: (cellValues) => { @@ -6595,27 +6599,30 @@ function ExportButton(props) { function handleExport(apiRef, data_colums) { const data = getExcelData(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + const local_config = { - keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.field) - return mydata.field; - else - return ""; - }), - + keys: visibleColumnsField, columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.headerName) - return mydata.headerName; - else - return ""; + if (mydata.headerName && visibleColumnsField.includes(mydata.field)) { + if (mydata.headerName) { + return mydata.headerName; + } + } + }), fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx', sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"), }; + local_config.columnNames = local_config.columnNames.filter(function( element ) { + return element !== undefined; + }); + + const rows = data.map((row) => { const mRow = {}; for (const key of local_config.keys) { diff --git a/src/components/DisplayPartnerTrainingsPagination.js b/src/components/DisplayPartnerTrainingsPagination.js index a7761dc..8b8ab78 100644 --- a/src/components/DisplayPartnerTrainingsPagination.js +++ b/src/components/DisplayPartnerTrainingsPagination.js @@ -43,11 +43,14 @@ import Link from '@mui/material/Link'; import { PiDotsThree } from "react-icons/pi"; import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5"; import { - GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, - GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, - gridFilteredSortedRowIdsSelector, - gridVisibleColumnFieldsSelector, - } from '@mui/x-data-grid'; + GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, + GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, + gridFilteredSortedRowIdsSelector, + gridVisibleColumnFieldsSelector, + GridValueGetterParams, + GridPreferencePanelsValue, + +} from '@mui/x-data-grid'; import * as XLSX from 'xlsx'; @@ -1813,27 +1816,30 @@ function ExportButton(props) { function handleExport(apiRef, data_colums) { const data = getExcelData(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + const local_config = { - keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.field) - return mydata.field; - else - return ""; - }), - + keys: visibleColumnsField, columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.headerName) - return mydata.headerName; - else - return ""; + if (mydata.headerName && visibleColumnsField.includes(mydata.field)) { + if (mydata.headerName) { + return mydata.headerName; + } + } + }), fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx', sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"), }; + local_config.columnNames = local_config.columnNames.filter(function( element ) { + return element !== undefined; + }); + + const rows = data.map((row) => { const mRow = {}; for (const key of local_config.keys) { diff --git a/src/components/Groupe_Apprenant.js b/src/components/Groupe_Apprenant.js index 22cbbf8..69e395e 100644 --- a/src/components/Groupe_Apprenant.js +++ b/src/components/Groupe_Apprenant.js @@ -70,6 +70,9 @@ import { GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, gridFilteredSortedRowIdsSelector, gridVisibleColumnFieldsSelector, + GridValueGetterParams, + GridPreferencePanelsValue, + } from '@mui/x-data-grid'; import * as XLSX from 'xlsx'; @@ -2220,27 +2223,30 @@ const Groupe_Apprenant = (props) => { function handleExport(apiRef, data_colums) { const data = getExcelData(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + const local_config = { - keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.field) - return mydata.field; - else - return ""; - }), - + keys: visibleColumnsField, columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.headerName) - return mydata.headerName; - else - return ""; + if (mydata.headerName && visibleColumnsField.includes(mydata.field)) { + if (mydata.headerName) { + return mydata.headerName; + } + } + }), fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx', sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"), }; + local_config.columnNames = local_config.columnNames.filter(function( element ) { + return element !== undefined; + }); + + const rows = data.map((row) => { const mRow = {}; for (const key of local_config.keys) { diff --git a/src/components/Partner_Commande.js b/src/components/Partner_Commande.js index 95ac292..ffea8d5 100644 --- a/src/components/Partner_Commande.js +++ b/src/components/Partner_Commande.js @@ -66,6 +66,9 @@ import { GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, gridFilteredSortedRowIdsSelector, gridVisibleColumnFieldsSelector, + GridValueGetterParams, + GridPreferencePanelsValue, + } from '@mui/x-data-grid'; import * as XLSX from 'xlsx'; @@ -4652,27 +4655,30 @@ const Partner_Commande = (props) => { function handleExport(apiRef, data_colums) { const data = getExcelData(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + const local_config = { - keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.field) - return mydata.field; - else - return ""; - }), - + keys: visibleColumnsField, columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.headerName) - return mydata.headerName; - else - return ""; + if (mydata.headerName && visibleColumnsField.includes(mydata.field)) { + if (mydata.headerName) { + return mydata.headerName; + } + } + }), fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx', sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"), }; + local_config.columnNames = local_config.columnNames.filter(function( element ) { + return element !== undefined; + }); + + const rows = data.map((row) => { const mRow = {}; for (const key of local_config.keys) { @@ -4690,7 +4696,6 @@ const Partner_Commande = (props) => { 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; diff --git a/src/components/Partner_Facture.js b/src/components/Partner_Facture.js index 75ce989..65d730d 100644 --- a/src/components/Partner_Facture.js +++ b/src/components/Partner_Facture.js @@ -9,10 +9,8 @@ import { getCookie, setCookie } from 'react-use-cookie'; import { useHistory } from "react-router-dom"; import CheckOut from "./CheckOut"; import { - DataGrid, frFR, GridToolbar, GridToolbarExport, GridToolbarColumnsButton, - GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, - gridFilteredSortedRowIdsSelector, - gridVisibleColumnFieldsSelector, + DataGrid, frFR, GridToolbar, + } from '@mui/x-data-grid'; import * as XLSX from 'xlsx'; import { Fab } from "@material-ui/core"; @@ -54,8 +52,12 @@ import Link from '@mui/material/Link'; import { PiDotsThree } from "react-icons/pi"; import { gridClasses } from '@mui/x-data-grid'; import { - - GridToolbarContainer, + GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, + GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, + gridFilteredSortedRowIdsSelector, + gridVisibleColumnFieldsSelector, + GridValueGetterParams, + GridPreferencePanelsValue, } from '@mui/x-data-grid'; @@ -2536,27 +2538,30 @@ const Partner_Facture = (props) => { function handleExport(apiRef, data_colums) { const data = getExcelData(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + const local_config = { - keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.field) - return mydata.field; - else - return ""; - }), - + keys: visibleColumnsField, columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) { - if (mydata.headerName) - return mydata.headerName; - else - return ""; + if (mydata.headerName && visibleColumnsField.includes(mydata.field)) { + if (mydata.headerName) { + return mydata.headerName; + } + } + }), fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx', sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"), }; + local_config.columnNames = local_config.columnNames.filter(function( element ) { + return element !== undefined; + }); + + const rows = data.map((row) => { const mRow = {}; for (const key of local_config.keys) { @@ -3663,7 +3668,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, diff --git a/src/components/TestUrl_new.js b/src/components/TestUrl_new.js index bf38336..38c01ff 100644 --- a/src/components/TestUrl_new.js +++ b/src/components/TestUrl_new.js @@ -162,6 +162,8 @@ const TestUrl_New = (props) => { } function handleExport(apiRef, data_colums) { + + console.log(" coucouuu ### columnVisibilityModel = ", columnVisibilityModel); const data = getExcelData(apiRef); const local_config = { @@ -843,6 +845,12 @@ const TestUrl_New = (props) => { function display_data() { console.log(" Data = ", data); } + const [columnVisibilityModel, setColumnVisibilityModel] = React.useState({ + }); + + const [visibleColumns, setVisibleColumns] = React.useState(); + + return (
@@ -1034,7 +1042,18 @@ const TestUrl_New = (props) => { components={{ Toolbar: CustomToolbar }} - componentsProps={{ toolbar: { data_colums: data.columns } }} + componentsProps={{ + toolbar: { data_colums: data.columns } + }} + + columnVisibilityModel={columnVisibilityModel} + onColumnVisibilityModelChange={(newModel) => { + setColumnVisibilityModel(newModel); + }} + + + + />