16/01/2024 - 19h

recette2
cherif 2024-01-16 18:41:29 +01:00
parent 27e2d7cdfc
commit 0c26bdacec
8 changed files with 451 additions and 175 deletions

142
package-lock.json generated
View File

@ -2053,9 +2053,9 @@
}
},
"node_modules/@babel/runtime": {
"version": "7.22.10",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
"integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
"version": "7.23.8",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz",
"integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
@ -2863,18 +2863,27 @@
}
},
"node_modules/@floating-ui/core": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.5.tgz",
"integrity": "sha512-iDdOsaCHZH/0FM0yNBYt+cJxJF9S5jrYWNtDZOiDFMiZ7uxMJ/71h8eTwoVifEAruv9p9rlMPYCGIgMjOz95FQ=="
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
"integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
"dependencies": {
"@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz",
"integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==",
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
"integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
"dependencies": {
"@floating-ui/core": "^1.0.5"
"@floating-ui/core": "^1.5.3",
"@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"node_modules/@fluentui/react-component-event-listener": {
"version": "0.63.1",
"resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz",
@ -4898,11 +4907,11 @@
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"node_modules/@mui/types": {
"version": "7.2.4",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
"integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
"version": "7.2.13",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz",
"integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==",
"peerDependencies": {
"@types/react": "*"
"@types/react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
@ -4911,13 +4920,12 @@
}
},
"node_modules/@mui/utils": {
"version": "5.14.5",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.5.tgz",
"integrity": "sha512-6Hzw63VR9C5xYv+CbjndoRLU6Gntal8rJ5W+GUzkyHrGWIyYPWZPa6AevnyGioySNETATe1H9oXS8f/7qgIHJA==",
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.4.tgz",
"integrity": "sha512-E2wLQGBcs3VR52CpMRjk46cGscC4cbf3Q2uyHNaAeL36yTTm+aVNbtsTCazXtjOP4BDd8lu6VtlTpVC8Rtl4mg==",
"dependencies": {
"@babel/runtime": "^7.22.6",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^18.2.1",
"@babel/runtime": "^7.23.7",
"@types/prop-types": "^15.7.11",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
@ -4926,10 +4934,16 @@
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/utils/node_modules/react-is": {
@ -6814,9 +6828,9 @@
"integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
},
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
"version": "15.7.11",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
},
"node_modules/@types/q": {
"version": "1.5.5",
@ -6851,14 +6865,6 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-is": {
"version": "18.2.1",
"resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
"integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@ -27373,9 +27379,9 @@
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
"node_modules/reselect": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
"integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
"integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
},
"node_modules/resize-observer-polyfill": {
"version": "1.5.0",
@ -34148,9 +34154,9 @@
}
},
"@babel/runtime": {
"version": "7.22.10",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
"integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
"version": "7.23.8",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz",
"integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
"requires": {
"regenerator-runtime": "^0.14.0"
},
@ -34685,18 +34691,27 @@
}
},
"@floating-ui/core": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.5.tgz",
"integrity": "sha512-iDdOsaCHZH/0FM0yNBYt+cJxJF9S5jrYWNtDZOiDFMiZ7uxMJ/71h8eTwoVifEAruv9p9rlMPYCGIgMjOz95FQ=="
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
"integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
"requires": {
"@floating-ui/utils": "^0.2.0"
}
},
"@floating-ui/dom": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz",
"integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==",
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
"integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
"requires": {
"@floating-ui/core": "^1.0.5"
"@floating-ui/core": "^1.5.3",
"@floating-ui/utils": "^0.2.0"
}
},
"@floating-ui/utils": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"@fluentui/react-component-event-listener": {
"version": "0.63.1",
"resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz",
@ -36166,19 +36181,18 @@
}
},
"@mui/types": {
"version": "7.2.4",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
"integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
"version": "7.2.13",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz",
"integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==",
"requires": {}
},
"@mui/utils": {
"version": "5.14.5",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.5.tgz",
"integrity": "sha512-6Hzw63VR9C5xYv+CbjndoRLU6Gntal8rJ5W+GUzkyHrGWIyYPWZPa6AevnyGioySNETATe1H9oXS8f/7qgIHJA==",
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.4.tgz",
"integrity": "sha512-E2wLQGBcs3VR52CpMRjk46cGscC4cbf3Q2uyHNaAeL36yTTm+aVNbtsTCazXtjOP4BDd8lu6VtlTpVC8Rtl4mg==",
"requires": {
"@babel/runtime": "^7.22.6",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^18.2.1",
"@babel/runtime": "^7.23.7",
"@types/prop-types": "^15.7.11",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
@ -37620,9 +37634,9 @@
"integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
},
"@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
"version": "15.7.11",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
},
"@types/q": {
"version": "1.5.5",
@ -37657,14 +37671,6 @@
"csstype": "^3.0.2"
}
},
"@types/react-is": {
"version": "18.2.1",
"resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
"integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
"requires": {
"@types/react": "*"
}
},
"@types/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@ -53323,9 +53329,9 @@
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
"reselect": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
"integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
"integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
},
"resize-observer-polyfill": {
"version": "1.5.0",

View File

@ -49,6 +49,10 @@ import { HiDocumentCheck } from "react-icons/hi2";
import { BsSend } from "react-icons/bs";
import Autocomplete from '@mui/material/Autocomplete';
import { FcOpenedFolder } from "react-icons/fc";
import { gridClasses } from '@mui/x-data-grid';
import Link from '@mui/material/Link';
import { PiDotsThree } from "react-icons/pi";
const DisplayPartnerSession = (props) => {
@ -118,6 +122,27 @@ const DisplayPartnerSession = (props) => {
},
}));
function ExpandableCell_50({ value }) {
const [expanded, setExpanded] = React.useState(false);
return (
<div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>
{expanded ? value : value.slice(0, 50)}&nbsp;
{value.length > 50 && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<Link
type="button"
component="button"
sx={{ fontSize: 'inherit' }}
onClick={() => setExpanded(!expanded)}
>
{expanded ? <nav> <PiDotsThree />Réduire</nav> : <nav> <PiDotsThree />Voir</nav>}
</Link>
)}
</div>
);
}
const [datagrid_columns_size_model1, setdatagrid_columns_size_model1] = useState(200);
const [datagrid_columns_size_model2, setdatagrid_columns_size_model2] = useState(100);
@ -125,8 +150,8 @@ const DisplayPartnerSession = (props) => {
{ field: 'id', headerName: 'id', hide: true },
{ field: '_id', headerName: '_id', hide: true },
{ field: 'class_internal_url', headerName: 'class_internal_url', hide: true },
{ field: 'code_session', headerName: 'Code session', hide: false, minWidth: 100, flex: 1, },
{ field: 'session_title', headerName: 'Titre', hide: false, flex: 1, minWidth: 250 },
{ field: 'code_session', headerName: 'Code session', hide: false, minWidth: 100, flex: 1, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'session_title', headerName: 'Titre', hide: false, flex: 1, minWidth: 250, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{
field: 'statut', headerName: 'Statut', hide: true, width: datagrid_columns_size_model2,
@ -144,7 +169,7 @@ const DisplayPartnerSession = (props) => {
field: 'etape', headerName: 'Etape', hide: false, width: datagrid_columns_size_model2,
},
{ field: 'class_external_code', headerName: 'Code Formation', align: "center", hideable: true, flex: 1, hide: true, minWidth: 150 },
{ field: 'class_external_code', headerName: 'Code Formation', align: "center", hideable: true, flex: 1, hide: true, minWidth: 150, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'date_debut', headerName: 'Debut', hide: false, width: datagrid_columns_size_model2, },
{ field: 'date_fin', headerName: 'Fin', hideable: false, width: datagrid_columns_size_model2, },
{
@ -169,7 +194,7 @@ const DisplayPartnerSession = (props) => {
return "?";
},
},
{ field: 'formateur', headerName: 'Formateur', minWidth: datagrid_columns_size_model1, hide: true, hideable: true, },
{ field: 'formateur', headerName: 'Formateur', minWidth: datagrid_columns_size_model1, hide: true, hideable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'nb_participant', headerName: 'Nb Parti.', minWidth: datagrid_columns_size_model2, align: "center", hide: true, },
{
field: 'taux_remplissage', headerName: 'Remplissage', align: "center", flex: 1, minWidth: 100, maxWidth: 150, flex: 1,
@ -194,7 +219,7 @@ const DisplayPartnerSession = (props) => {
{ field: 'nb_inscrit', headerName: 'Inscrits', minWidth: 20, align: "center", hide: true, hideable: true, },
{ field: 'nb_preinscrit', headerName: 'Preinscrits', minWidth: 20, align: "center", hide: true, hideable: true, },
{ field: 'prix_session', headerName: 'Prix', minWidth: 20, align: "center", },
{ field: 'title', headerName: 'Formation', minWidth: 250, flex: 1, align: "center", hide: true, hideable: true, },
{ field: 'title', headerName: 'Formation', minWidth: 250, flex: 1, align: "center", hide: true, hideable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'domaine', headerName: 'Domaine', minWidth: datagrid_columns_size_model1, align: "center", hide: true, hideable: true, },
{ field: 'published', headerName: 'publié', minWidth: datagrid_columns_size_model1, align: "center", hide: true, hideable: true, },
@ -288,11 +313,11 @@ const DisplayPartnerSession = (props) => {
{ field: 'id', headerName: 'id', hide: true },
{ field: '_id', headerName: '_id', hide: true },
{ field: 'civilite', headerName: 'Civ.', minWidth: 70, flex: 1, maxWidth: 100, hide: false, editable: false, editable: false },
{ field: 'nom', headerName: 'nom', minWidth: 150, flex: 1, hide: false, editable: true },
{ field: 'prenom', headerName: 'prenom', minWidth: 150, flex: 1, hide: false, editable: true },
{ field: 'email', headerName: 'email', minWidth: 150, flex: 1, hideable: false, flex: 1 },
{ field: 'client_nom', headerName: 'Client', minWidth: 150, flex: 1, maxWidth: 200, hide: false, editable: true },
{ field: 'employeur', headerName: 'Employeur', minWidth: 150, flex: 1, maxWidth: 200, hide: false, editable: true },
{ field: 'nom', headerName: 'nom', minWidth: 150, flex: 1, hide: false, editable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'prenom', headerName: 'prenom', minWidth: 150, flex: 1, hide: false, editable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'email', headerName: 'email', minWidth: 150, flex: 1, hideable: false, flex: 1, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'client_nom', headerName: 'Client', minWidth: 150, flex: 1, maxWidth: 200, hide: false, editable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'employeur', headerName: 'Employeur', minWidth: 150, flex: 1, maxWidth: 200, hide: false, editable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'opco', headerName: 'Centre Opco', minWidth: 100, flex: 1, maxWidth: 150, hide: false, editable: true },
{ field: 'modefinancement', headerName: 'Financement', minWidth: 100, flex: 1, maxWidth: 150, hide: false, editable: true },
{ field: 'amount', headerName: 'Montant Formation', minWidth: 100, flex: 1, maxWidth: 150, type: 'number', hideable: false, flex: 1, editable: true },
@ -547,10 +572,10 @@ const DisplayPartnerSession = (props) => {
{ field: 'id', headerName: 'id', hide: true },
{ field: '_id', headerName: '_id', hide: true },
{ field: 'civilite', headerName: 'Civ.', minWidth: 70, flex: 1, maxWidth: 100, hide: false, editable: false, editable: false },
{ field: 'nom', headerName: 'nom', minWidth: 150, flex: 1, hide: false, editable: true },
{ field: 'prenom', headerName: 'prenom', minWidth: 150, flex: 1, hide: false, editable: true },
{ field: 'email', headerName: 'email', minWidth: 150, flex: 1, hideable: false, flex: 1 },
{ field: 'client_rattachement_nom', headerName: 'Client', minWidth: 150, flex: 1, maxWidth: 200, hide: false, editable: true },
{ field: 'nom', headerName: 'nom', minWidth: 150, flex: 1, hide: false, editable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'prenom', headerName: 'prenom', minWidth: 150, flex: 1, hide: false, editable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'email', headerName: 'email', minWidth: 150, flex: 1, hideable: false, flex: 1, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'client_rattachement_nom', headerName: 'Client', minWidth: 150, flex: 1, maxWidth: 200, hide: false, editable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'employeur', headerName: 'Employeur', minWidth: 150, flex: 1, maxWidth: 200, hide: false, editable: true },
{ field: 'opco', headerName: 'Centre Opco', minWidth: 100, flex: 1, maxWidth: 150, hide: false, editable: true },
{ field: 'modefinancement', headerName: 'Financement', minWidth: 100, flex: 1, maxWidth: 150, hide: false, editable: true },
@ -1963,7 +1988,7 @@ const DisplayPartnerSession = (props) => {
/* Recuperation de la liste des inscrits */
const [nb_stagiaire_Inscrit, setnb_stagiaire_Inscrit] = useState("0");
const [nb_sequence, setnb_sequence] = useState("0");
const [selectionModel_preinsc, setselectionModel_preinsc] = React.useState([]);
@ -8454,7 +8479,7 @@ const DisplayPartnerSession = (props) => {
<div className="div_row_dialog">
<div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left' }}>
Durée
Durée
</div>
{rowss && String(session_selected_row_id).length > 0 && <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
{JSON.parse(rowss[session_selected_row_id]).duration_concat}
@ -8720,24 +8745,24 @@ const DisplayPartnerSession = (props) => {
<div className="session_caract_Dialog" > Type de ressource
<Autocomplete
disablePortal
name="event_dialog_type_ressource"
id="event_dialog_type_ressource"
fullWidth
options={New_Option_Type_Ressource}
onChange={(event, value) => {
if (value && value.value) {
setDialog_seq_ressource_1_selected_type_ressource(value.value);
}
<Autocomplete
disablePortal
name="event_dialog_type_ressource"
id="event_dialog_type_ressource"
fullWidth
}}
options={New_Option_Type_Ressource}
onChange={(event, value) => {
if (value && value.value) {
renderInput={(params) => <TextField {...params} label="" />
setDialog_seq_ressource_1_selected_type_ressource(value.value);
}
/>
}}
renderInput={(params) => <TextField {...params} label="" />
}
/>
{/*<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
@ -9499,6 +9524,8 @@ const DisplayPartnerSession = (props) => {
'& .line--statut--impair': {
backgroundColor: '#FFFFFF',
color: 'black',
}, [`& .${gridClasses.cell}`]: {
py: 1,
},
}}
@ -9638,6 +9665,14 @@ const DisplayPartnerSession = (props) => {
}
}}
getEstimatedRowHeight={() => 200}
getRowHeight={() => "auto"}
sx={{
"& .MuiDataGrid-cellContent": {
minHeight: 50,
}
}}
/>
@ -11820,7 +11855,7 @@ const DisplayPartnerSession = (props) => {
{String(actionmass_sequence_val) === "supprimer" && <div className="gest_content">
{' '}
Confirmer l'action <b style={{"color":"red"}}> de suppression </b> en masse.
Confirmer l'action <b style={{ "color": "red" }}> de suppression </b> en masse.
</div>}
@ -11864,7 +11899,7 @@ const DisplayPartnerSession = (props) => {
<div className="div_row_gauche div_row_gauche_etendu" style={{ "textAlign": "left", "paddingLeft": "5px" }}>
<Popup
trigger={
@ -12377,6 +12412,17 @@ const DisplayPartnerSession = (props) => {
components={{
Toolbar: GridToolbar,
}}
getEstimatedRowHeight={() => 200}
getRowHeight={() => "auto"}
sx={{
"& .MuiDataGrid-cellContent": {
minHeight: 50,
},
[`& .${gridClasses.cell}`]: {
py: 1,
},
}}
/>
{selectionModel_preinsc && selectionModel_preinsc.length >= 1 &&
@ -12998,7 +13044,17 @@ const DisplayPartnerSession = (props) => {
components={{
Toolbar: GridToolbar,
}}
getEstimatedRowHeight={() => 200}
getRowHeight={() => "auto"}
sx={{
"& .MuiDataGrid-cellContent": {
minHeight: 50,
},
[`& .${gridClasses.cell}`]: {
py: 1,
},
}}
/>

View File

@ -38,6 +38,10 @@ import ToggleSwitch from "./ToggleSwitch";
import SendIcon from '@mui/icons-material/Send';
import { GrDocumentCsv } from "react-icons/gr";
import { gridClasses } from '@mui/x-data-grid';
import Link from '@mui/material/Link';
import { PiDotsThree } from "react-icons/pi";
const DistplayPartnerTraningsPage = (props) => {
const history = useHistory();
@ -337,6 +341,28 @@ const DistplayPartnerTraningsPage = (props) => {
}
function ExpandableCell_50({ value }) {
const [expanded, setExpanded] = React.useState(false);
return (
<div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>
{expanded ? value : value.slice(0, 50)}&nbsp;
{value.length > 50 && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<Link
type="button"
component="button"
sx={{ fontSize: 'inherit' }}
onClick={() => setExpanded(!expanded)}
>
{expanded ? <nav> <PiDotsThree />Réduire</nav> : <nav> <PiDotsThree />Voir</nav>}
</Link>
)}
</div>
);
}
const [ismobilephone_columns_hide, setismobilephone_columns_hide] = useState(false);
const [datagrid_columns_size_model1, setdatagrid_columns_size_model1] = useState(200);
@ -350,24 +376,25 @@ const DistplayPartnerTraningsPage = (props) => {
{ field: 'presentiel', headerName: 'Présentiel', hide: true, Width: 0, },
{ field: 'distanciel', headerName: 'Distanciel', hide: true, Width: 0, },
{ field: 'cible', headerName: 'Cible', hide: true, Width: 0, },
{ field: 'duration_unit', headerName: 'duration_unit', hide: true, Width: 0, },
{ field: 'duration_in_hour', headerName: 'duration_in_hour', hide: true, Width: 0, },
{ field: 'currency', headerName: 'currency', hide: true, Width: 0, },
{ field: 'duration_unit', headerName: 'duration_unit', hide: true, Width: 0,editable: false, },
{ field: 'duration_in_hour', headerName: 'duration_in_hour', hide: true, Width: 0,editable: false, },
{ field: 'currency', headerName: 'currency', hide: true, Width: 0, editable: false, },
{ field: 'zone_diffusion', headerName: 'zone_diffusion', hide: true, maxWidth: 1, },
{ field: 'internal_url', headerName: 'internal_url', hide: true },
{ field: 'external_code', headerName: 'Code Formation', hideable: false, minWidth: 150, flex: 1, maxWidth: 250, editable: false },
{ field: 'title', headerName: 'Titre', flex: 1, hideable: false, minWidth: 320, flex: 1, editable: false },
{ field: 'domain', headerName: 'Domaine', minWidth: 50, flex: 1, maxWidth: 150, hideable: true, },
{ field: 'metier', headerName: 'Métier', minWidth: 50, flex: 1, maxWidth: 150, hideable: true, hide: true },
{ field: 'url', headerName: 'lien', minWidth: 20, hideable: true, hide: true },
{ field: 'description', headerName: 'Description', hide: true, resizable: true, minWidth: 100, maxWidth: 150, flex: 1 },
{ field: 'zone_diffusion', headerName: 'zone_diffusion', hide: true, maxWidth: 1, editable: false, },
{ field: 'internal_url', headerName: 'internal_url', hide: true, editable: false, },
{ field: 'external_code', headerName: 'Code Formation', hideable: false, minWidth: 150, flex: 1, maxWidth: 250, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'title', headerName: 'Titre', flex: 1, hideable: false, minWidth: 250, flex: 1, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'domain', headerName: 'Domaine', minWidth: 50, flex: 1, maxWidth: 150, hideable: true, editable: false, },
{ field: 'metier', headerName: 'Métier', minWidth: 50, flex: 1, maxWidth: 150, hideable: true, hide: true, editable: false, },
{ field: 'nb_session_formation', headerName: 'Nb Session', minWidth: 50, flex: 1, maxWidth: 100, hideable: true, hide: false , editable: false, align: "center",},
{ field: 'url', headerName: 'lien', minWidth: 20, hideable: true, hide: true, editable: false, },
{ field: 'description', headerName: 'Description', hide: true, resizable: true, minWidth: 250, maxWidth: 300, flex: 1, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'price', headerName: 'Prix', minWidth: 50, flex: 1, maxWidth: 100, align: "center", resizable: true, hide: ismobilephone_columns_hide },
{ field: 'price', headerName: 'Prix', minWidth: 50, flex: 1, maxWidth: 100, align: "center", resizable: true, hide: ismobilephone_columns_hide, editable: false, },
{
field: 'published', headerName: 'Publié', minWidth: 50, flex: 1, maxWidth: 100, align: "center", resizable: true,
valueFormatter: (params) => {
field: 'published', headerName: 'Publié', minWidth: 50, flex: 1, maxWidth: 100, align: "center", resizable: true, editable: false,
valueFormatter: (params) => {
if (String(params.value) === "0")
return "Non";
else if (String(params.value) === "1")
@ -377,7 +404,7 @@ const DistplayPartnerTraningsPage = (props) => {
},
},
{
field: "management", headerName: 'Gestion', minWidth: 50, flex: 1, maxWidth: 100,
field: "management", headerName: 'Gestion', minWidth: 50, flex: 1, maxWidth: 100,
renderCell: (cellValues) => {
return (
@ -1236,6 +1263,10 @@ const DistplayPartnerTraningsPage = (props) => {
backgroundColor: "#c8cfd5",
color: "black",
fontSize: 16
},
"& .MuiDataGrid-cellContent": {
minHeight: 50,
}
};
@ -1853,6 +1884,8 @@ const DistplayPartnerTraningsPage = (props) => {
'& .line--statut--selected': {
backgroundColor: '#FBF2EF',
color: 'black',
}, [`& .${gridClasses.cell}`]: {
py: 1,
},
}}
@ -1889,6 +1922,7 @@ const DistplayPartnerTraningsPage = (props) => {
distanciel: JSON.parse(item).presentiel.distantiel,
cible: JSON.parse(item).pourqui,
currecny: JSON.parse(item).currecny,
nb_session_formation: JSON.parse(item).nb_session_formation,
}
))}
@ -1919,7 +1953,7 @@ const DistplayPartnerTraningsPage = (props) => {
components={{
Toolbar: GridToolbar,
}}
sx={datagridSx}
getCellClassName={(params) => {
if (params.field === 'published' && String(params.value) === "1") {
return 'cell--published';
@ -1946,6 +1980,10 @@ const DistplayPartnerTraningsPage = (props) => {
}
}}
getEstimatedRowHeight={() => 200}
getRowHeight={() => "auto"}
sx={datagridSx}
/>
</Box>
@ -1982,7 +2020,7 @@ const DistplayPartnerTraningsPage = (props) => {
/>
{/* <TextField
{/* <TextField
select
InputLabelProps={{
@ -2026,24 +2064,24 @@ const DistplayPartnerTraningsPage = (props) => {
<div className="gest_content">
{' '}
{String(actionmass_ftion_val) === "supprimer" &&
<font color="red"> Confirmer la <b> suppression </b> en masse pour {selectionModel.length} formations.
</font>}
<font color="red"> Confirmer la <b> suppression </b> en masse pour {selectionModel.length} formations.
</font>}
{String(actionmass_ftion_val) === "dupliquer" &&
<font color="red"> Confirmer la <b> duplication </b> en masse pour {selectionModel.length} formations.
</font>}
{String(actionmass_ftion_val) === "dupliquer" &&
<font color="red"> Confirmer la <b> duplication </b> en masse pour {selectionModel.length} formations.
</font>}
{String(actionmass_ftion_val) === "exporter" &&
<font> Confirmer l' <b> export </b> en masse pour {selectionModel.length} formations.
</font>}
<font> Confirmer l' <b> export </b> en masse pour {selectionModel.length} formations.
</font>}
{String(actionmass_ftion_val) === "publier" &&
<font> Confirmer la <b> publication </b> en masse pour {selectionModel.length} formations.
</font>}
<font> Confirmer la <b> publication </b> en masse pour {selectionModel.length} formations.
</font>}
{String(actionmass_ftion_val) === "depublier" &&
<font> Confirmer la <b> dépublication </b> en masse pour {selectionModel.length} formations.
</font>}
<font> Confirmer la <b> dépublication </b> en masse pour {selectionModel.length} formations.
</font>}
@ -2086,11 +2124,8 @@ const DistplayPartnerTraningsPage = (props) => {
<div className='div_row' >
<Button variant="outlined" onClick={changeHandler2} className="detail_class_submenu" style={{
"background": "#c8cfd5",
"minWidth": "15rem", "color": "black", "width": "auto"
}}
id='menu_import_formation' name='menu_import_formation'>Choisir un fichier et importer des formations &nbsp; <GrDocumentCsv style={{ "fontSize": "large" }} /> <SendIcon />
<Button variant="outlined" onClick={changeHandler2} className="detail_class_submenu bton_add_session_long"
id='menu_import_formation' name='menu_import_formation'>Choisir un fichier et importer &nbsp;<GrDocumentCsv style={{ "fontSize": "large" }} /> <SendIcon />
</Button>
<input type="file"

View File

@ -49,6 +49,10 @@ import { AiTwotoneEdit, AiTwotoneSave } from "react-icons/ai";
import Autocomplete from '@mui/material/Autocomplete';
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import { gridClasses } from '@mui/x-data-grid';
import Link from '@mui/material/Link';
import { PiDotsThree } from "react-icons/pi";
const Employes = (props) => {
const history = useHistory();
const [submenu, setsubmenu] = useState("");
@ -65,7 +69,26 @@ const Employes = (props) => {
const [selectionModel_acces_right, setselectionModel_acces_right] = React.useState([]);
function ExpandableCell_50({ value }) {
const [expanded, setExpanded] = React.useState(false);
return (
<div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>
{expanded ? value : value.slice(0, 50)}&nbsp;
{value.length > 50 && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<Link
type="button"
component="button"
sx={{ fontSize: 'inherit' }}
onClick={() => setExpanded(!expanded)}
>
{expanded ? <nav> <PiDotsThree />Réduire</nav> : <nav> <PiDotsThree />Voir</nav>}
</Link>
)}
</div>
);
}
var date_today_90j = new Date();
date_today_90j.setDate(date_today_90j.getDate() + 90);
@ -83,6 +106,10 @@ const Employes = (props) => {
const [p_filtre4, setp_filtre4] = useState();
const [p_filtre4_value, setp_filtre4_value] = useState();
const columns = [
{ field: '_id', headerName: '_id', hide: true, Width: 0 },
{ field: 'id', headerName: 'id', hide: true, Width: 0 },
@ -92,9 +119,9 @@ const Employes = (props) => {
},
{ field: 'nom', headerName: 'Nom', flex: 1, hide: false, minWidth: 150 },
{ field: 'prenom', headerName: 'Prénom', flex: 1, hide: false, minWidth: 150 },
{ field: 'email', headerName: 'Email', flex: 1, hideable: false, minWidth: 200 },
{ field: 'nom', headerName: 'Nom', flex: 1, hide: false, minWidth: 150, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'prenom', headerName: 'Prénom', flex: 1, hide: false, minWidth: 150, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{ field: 'email', headerName: 'Email', minWidth: 300, flex: 1, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{
field: 'ismanager', headerName: 'Manager', width: 150, hide: false,
valueFormatter: (params) => {
@ -5443,6 +5470,8 @@ const Employes = (props) => {
<br />
</div>
<div className="div_row" style={{ paddingRight: '10px' }}>
<div className="session_data">
<div style={{ "border": "None" }}>
@ -5505,8 +5534,11 @@ const Employes = (props) => {
'& .line--statut--impair': {
backgroundColor: '#FFFFFF',
color: 'black',
}, [`& .${gridClasses.cell}`]: {
py: 1,
},
}}
>
<DataGrid
@ -5630,6 +5662,15 @@ const Employes = (props) => {
return 'line--statut--inscrit';
}
}}
getEstimatedRowHeight={() => 200}
getRowHeight={() => "auto"}
sx={{
"& .MuiDataGrid-cellContent": {
minHeight: 50,
}
}}
/>
@ -6280,7 +6321,7 @@ const Employes = (props) => {
</div>
<div style={{ "width": "45%", "float": "left", "borderRight": "thick double #32a1ce" }}>
<div className="div_row" style={{ "border": "None", "fontSize": "20px", "fontWeight": "600", "padding": "5px" }}>
Login & Mot de passe
Compte utilisateur
</div>
{String(p_detail_user_login) === "" &&
<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
@ -6293,8 +6334,7 @@ const Employes = (props) => {
</div>}
<div style={{ "paddingLeft": "10px" }}>
<Tooltip className="tooltip_css" id="deb_inscription" style={{ "fontSize": "12px" }} />
<a data-tooltip-id="deb_inscription" data-tooltip-html="Pour créer un login & pwd pour cet utilisateur, cliquez sur 'Editer.<br/>
Pensez également lui accorder les niveaux d'accès nécessaires à partir du bouton <i>'DROITS D'ACCES'</i> ">
<a data-tooltip-id="deb_inscription" data-tooltip-html=" Après avoir créé le compte utilisateur, pensez également lui accorder les niveaux d'accès nécessaires à partir du bouton <i>'DROITS D'ACCES'</i> ">
Login &nbsp; <FcInfo /><br />
</a>
<TextField
@ -6315,23 +6355,23 @@ const Employes = (props) => {
{String(employee_data_edit_mode) === "1" && String(p_detail_user_login) === "" && <div style={{ "paddingLeft": "10px" }}>
<Button variant="contained" className="bton_action1" onClick={Dialog_1_handle_change_login_pwd}> Créer login & pwd &nbsp; <FcPodiumWithAudience style={{ "fontSize": "x-large" }} />
{ String(p_detail_user_login) === "" && <div style={{ "paddingLeft": "10px", "width": "30%", "float": "left" }}>
<Button variant="contained" className="bton_action1" onClick={Dialog_1_handle_change_login_pwd}> Créer login & pwd
</Button>
</div>
}
{String(employee_data_edit_mode) === "1" && String(p_detail_user_login) !== "" && <div style={{ "paddingLeft": "10px" }}>
<Button variant="contained" className="bton_action1" onClick={Dialog_1_handle_change_login_pwd}> M.A.J PWD &nbsp; <FcPodiumWithAudience style={{ "fontSize": "x-large" }} />
{ String(p_detail_user_login) !== "" && <div style={{ "paddingLeft": "10px", "width": "30%", "float": "left" }}>
<Button variant="contained" className="bton_action1" onClick={Dialog_1_handle_change_login_pwd}> M.A.J PWD &nbsp;
</Button>
</div>
}
{String(employee_data_edit_mode) === "1" && String(p_detail_user_login) !== "" && String(p_detail_user_login_locked) !== "1"
&& <div style={{ "paddingLeft": "10px" }}>
{ String(p_detail_user_login) !== "" && String(p_detail_user_login_locked) !== "1"
&& <div style={{ "paddingLeft": "10px", "width": "30%", "float": "left" }}>
<Popup
trigger={
<Button variant="contained" className="bton_action1" > Désactiver compte <FcPodiumWithAudience style={{ "fontSize": "x-large" }} />
<Button variant="contained" className="bton_action1" style={{ "background": "gray", "color": "black" }} > Désactiver
</Button>
@ -6382,11 +6422,11 @@ const Employes = (props) => {
</div>
}
{String(employee_data_edit_mode) === "1" && String(p_detail_user_login) !== "" && String(p_detail_user_login_locked) === "1"
&& <div style={{ "paddingLeft": "10px" }}>
{ String(p_detail_user_login) !== "" && String(p_detail_user_login_locked) === "1"
&& <div style={{ "paddingLeft": "10px", "width": "30%", "float": "left" }}>
<Popup
trigger={
<Button variant="contained" className="bton_action1" > Réactiver compte <FcPodiumWithAudience style={{ "fontSize": "x-large" }} />
<Button variant="contained" className="bton_action1" > Réactiver
</Button>
@ -6447,8 +6487,11 @@ const Employes = (props) => {
{String(p_detail_user_login) === "" && <div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
&nbsp;
</div>}
Login E-Learning <br />
<Tooltip className="tooltip_css" id="deb_inscription_lms" style={{ "fontSize": "12px" }} />
<a data-tooltip-id="deb_inscription_lms" data-tooltip-html="Pour créer un accès E-Learning, cliquez sur 'Editer.<br/>
L'utilisateur doit avoir un compte utilisateur valide. Assuez-vous qu'il a bien un login et un mot de passe. ">
Login E-Learning <FcInfo /> <br />
</a>
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, width: "100%" }}
@ -6465,13 +6508,15 @@ const Employes = (props) => {
/>
</div>
{String(p_detail_lms_account_disable) === "1" || (
String(p_detail_mysy_lms_user_id) === "" && String(p_detail_lms_virtualhost_url) === ""
&& String(p_detail_user_login) !== "") &&
<div style={{ "paddingLeft": "10px" }}>
{String(p_detail_mysy_lms_user_id) === ""
&& String(p_detail_user_login) !== "" && String(p_detail_user_login_locked) !== "1" &&
<div style={{ "paddingLeft": "10px", "width": "30%", "float": "left" }}>
<Popup
trigger={
<Button variant="contained" className="bton_action1"> Créer accès E-Learning &nbsp;
<Button variant="contained" className="bton_action1"> Créer accès &nbsp;
</Button>
}
@ -6520,13 +6565,15 @@ const Employes = (props) => {
</Popup>
</div>}
{String(p_detail_lms_account_disable) !== "1" &&
String(p_detail_mysy_lms_user_id) !== "" && String(p_detail_lms_virtualhost_url) !== ""
&& String(p_detail_user_login) !== "" &&
<div style={{ "paddingLeft": "10px" }}>
String(p_detail_mysy_lms_user_id) !== "" &&
String(p_detail_user_login) !== "" &&
<div style={{ "paddingLeft": "10px", "width": "30%", "float": "left" }}>
<Popup
trigger={
<Button variant="contained" className="bton_action1" > Desactiver accès E-Learning &nbsp;
<Button variant="contained" className="bton_action1" style={{ "background": "gray", "color": "black" }}> Désactiver &nbsp;
</Button>
}

View File

@ -63,6 +63,8 @@ import Typography from '@mui/material/Typography';
import { Toolbar } from "@mui/material/Toolbar";
import { gridClasses } from '@mui/x-data-grid';
import Link from '@mui/material/Link';
import {
CardElement,
@ -91,6 +93,8 @@ import { makeStyles } from '@mui/styles';
import Checkbox from '@mui/material/Checkbox';
import { Container, Row, Col } from 'react-grid-system';
// pour le payement stripe : https://stripe.com/docs/payments/quickstart?client=react&lang=python
const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p');
@ -135,6 +139,28 @@ const handleRowClick = (param, event) => {
console.log(event);
};
function ExpandableCell_50({ value }) {
const [expanded, setExpanded] = React.useState(false);
return (
<nav style={{wordBreak:"break-all"}}>
{expanded ? value : value.slice(0, 10)}&nbsp;
{value.length > 10 && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<Link
type="button"
component="button"
sx={{ fontSize: 'inherit' }}
onClick={() => setExpanded(!expanded)}
>
{expanded ? 'Réduire' : 'Voir plus'}
</Link>
)}
</nav>
);
}
const columns21 = [
{
field: "id",
@ -160,7 +186,7 @@ const columns21 = [
);
}
},
{ field: "lastName", headerName: "Last Name", width: 130 },
{ field: "lastName", headerName: "Last Name", width: 100, renderCell: (params) => <ExpandableCell_50 {...params} />, },
{
field: "age",
headerName: "Age",
@ -187,11 +213,11 @@ const columns21 = [
];
const rows21 = [
{ id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
{ id: 1, lastName: "Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.", firstName: "Jon", age: 35 },
{ id: 2, lastName: "Lannister", firstName: "Amy", age: 42 },
{
id: 3,
lastName: "IGOTAREALLyLONGNAME!!!!!!!",
lastName: "IGOTAREALLyLONGNAME!!!!!!!us, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum",
firstName: "Jaime",
age: 45
},
@ -625,6 +651,8 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
};
const rowss = [
{ id: 1, col1: 'Hello', col2: 'World', col3: '12', col4: true },
{ id: 2, col1: 'DataGridPro', col2: 'is Awesome', col3: '12', col4: true },
@ -717,6 +745,7 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
];
const [tabledata, settabledata] = useState([]);
return (
<div className="test_page2">
<Helmet>
@ -816,19 +845,48 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
/>
</Box>
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows21}
columns={columns21}
getEstimatedRowHeight={() => 100}
getRowHeight={() => 'auto'}
sx={{
"& .MuiDataGrid-cellContent": {
minHeight: 40,
maxHeight: 1000
},[`& .${gridClasses.cell}`]: {
py: 1,
},
}}
/>
</div>
{/* <div style={{ height: 500, width: "100%" }}>
iciiii
{<div style={{ height: 500, width: "100%" }}>
<DataGrid
//toolBar={<Toolbar sx={{ backgroundColor: "blue" }} />}
headerHeight={60}
rowHeight={120}
sx={datagridSx}
rows={rows21}
columns={columns21}
pageSize={5}
checkboxSelection
onCellClick={handleCellClick}
onRowClick={handleRowClick}
getRowHeight={() => 'auto'}
sx={{
"& .MuiDataGrid-cellContent": {
minHeight: 40,
maxHeight: 1000
},[`& .${gridClasses.cell}`]: {
py: 1,
},
}}
/>
<div style={{ margin: "40px", textAlign: "center" }}>
<a
@ -838,7 +896,7 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
How do you customize the DataGrid styling?
</a>
</div>
</div>*/}
</div>}
<div style={{ height: 500, width: '100%' }}>
@ -939,7 +997,7 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
<TimelineConnector />
</TimelineSeparator>
<TimelineContent sx={{ py: '12px', px: 2 }}>
<Typography variant="h6" component="span">
<Typography variant="h6" component="span">
Code
</Typography>
<Typography>Because it&apos;s awesome!</Typography>

View File

@ -158,6 +158,7 @@
letter-spacing: 0.1rem;
font-weight: normal;
width: 100%;
height: 2rem !important;
}
.detail_class_submenu:hover:active,
@ -773,6 +774,7 @@
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
height: 2rem !important;
}
.detail_class_submenu:hover:active,
@ -1443,6 +1445,7 @@
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
height: 2rem !important;
}
.detail_class_submenu:hover:active,
@ -2000,6 +2003,7 @@
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
height: 2rem !important;
}
.detail_class_submenu:hover:active,

View File

@ -421,6 +421,13 @@
padding-top: 0.5rem !important;
}
.import_excel{
background: #d8edfc !important;
min-width: 15rem;
color: #3b3e40;
width: auto;
height: 2rem !important;
}
.detail_class_submenu {
background: #d8edfc;
@ -437,6 +444,7 @@
letter-spacing: 0.1rem;
font-weight: normal;
width: 100%;
height: 2rem !important;
}
.detail_class_submenu:hover:active,
@ -485,6 +493,15 @@
background: #c8cfd5;
color: black;
width: 100%;
height: 2rem !important;
}
.bton_add_session_long {
background: #c8cfd5;
color: black;
width: 100%;
height: 2rem !important;
line-height: 0.9rem !important;
}
.icon_excel {
@ -865,6 +882,14 @@
padding-top: 0.5rem !important;
}
.import_excel{
background: #d8edfc !important;
min-width: 15rem;
color: #3b3e40;
width: auto;
height: 2rem !important;
}
.detail_class_submenu {
background: #d8edfc;
border-radius: 15px;
@ -879,6 +904,7 @@
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
height: 2rem !important;
}
.detail_class_submenu:hover:active,
@ -927,7 +953,17 @@
.bton_add_session {
background: #c8cfd5;
color: black;
width: 50%;
width: 80%;
height: 2rem !important;
text-align: left;
}
.bton_add_session_long {
background: #c8cfd5;
color: black;
width: 80% ;
height: 2rem !important;
text-align: left;
line-height: 0.9rem !important;
}
.icon_excel {
@ -1308,6 +1344,14 @@
padding-top: 0.5rem !important;
}
.import_excel{
background: #d8edfc !important;
min-width: 15rem;
color: #3b3e40;
width: auto;
height: 2rem !important;
}
.detail_class_submenu {
background: #d8edfc;
border-radius: 15px;
@ -1322,6 +1366,7 @@
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
height: 2rem !important;
}
.detail_class_submenu:hover:active,
@ -1369,9 +1414,16 @@
.bton_add_session {
background: #c8cfd5;
color: black;
width: 40%;
width: 45%;
height: 2rem !important;
}
.bton_add_session_long {
background: #c8cfd5;
color: black;
width: 45% ;
height: 2rem !important;
line-height: 0.9rem !important;
}
.icon_excel {
width: 10%;
}
@ -1746,6 +1798,15 @@
padding-top: 0.5rem !important;
}
.import_excel{
background: #d8edfc !important;
min-width: 15rem;
color: #3b3e40;
width: auto;
height: 2rem !important;
}
.detail_class_submenu {
background: #d8edfc;
border-radius: 15px;
@ -1760,6 +1821,7 @@
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
height: 2em !important;
}
.detail_class_submenu:hover:active,
@ -1807,7 +1869,15 @@
.bton_add_session {
background: #c8cfd5;
color: black;
width: 20% !important;
width: 20% ;
height: 2rem !important;
}
.bton_add_session_long {
background: #c8cfd5;
color: black;
width: 40% ;
height: 2rem !important;
}
.icon_excel {

View File

@ -2241,12 +2241,12 @@
.bton_action1 {
border-radius: 5rem;
font-size: small;
background: #81BC3A !important;
background: #81BC3A;
text-align: center;
width: 40%;
width: 80%;
color: white;
font-size: 11px;
height: 2rem;
height: 1.5rem;
}
.session_caract_Dialog {